Skip to content

Commit

Permalink
fix: Show correct fiat amount for AR in transactions history
Browse files Browse the repository at this point in the history
  • Loading branch information
@pawanpaudel93
pawanpaudel93 committed Jul 5, 2024
1 parent 15b01bd commit afdc639
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 100 deletions.
56 changes: 6 additions & 50 deletions src/components/popup/home/Transactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { Loading, Text } from "@arconnect/components";

import { gql } from "~gateways/api";
import styled from "styled-components";
import { balanceToFractioned, formatFiatBalance } from "~tokens/currency";
import {
AO_RECEIVER_QUERY,
AO_SENT_QUERY,
Expand All @@ -20,6 +19,10 @@ import { suggestedGateways } from "~gateways/gateway";
import { Spacer } from "@arconnect/components";
import { Heading, ViewAll, TokenCount } from "../Title";
import {
getFormattedAmount,
getFormattedFiatAmount,
getFullMonthName,
getTransactionDescription,
processTransactions,
sortFn,
type ExtendedTransaction
Expand Down Expand Up @@ -118,49 +121,6 @@ export default function Transactions() {
push(`/transaction/${id}?back=${encodeURIComponent("/transactions")}`);
};

const getFormattedAmount = (transaction: ExtendedTransaction) => {
switch (transaction.transactionType) {
case "sent":
case "received":
return `${parseFloat(transaction.node.quantity.ar).toFixed(3)} AR`;
case "aoSent":
case "aoReceived":
if (transaction.aoInfo) {
return `${balanceToFractioned(transaction.aoInfo.quantity, {
divisibility: transaction.aoInfo.denomination
}).toFixed()} ${transaction.aoInfo.tickerName}`;
}
return "";
default:
return "";
}
};

const getTransactionDescription = (transaction: ExtendedTransaction) => {
switch (transaction.transactionType) {
case "sent":
return `${browser.i18n.getMessage("sent")} AR`;
case "received":
return `${browser.i18n.getMessage("received")} AR`;
case "aoSent":
return `${browser.i18n.getMessage("sent")} ${
transaction.aoInfo.tickerName
}`;
case "aoReceived":
return `${browser.i18n.getMessage("received")} ${
transaction.aoInfo.tickerName
}`;
default:
return "";
}
};

const getFullMonthName = (monthYear: string) => {
const [month, year] = monthYear.split("-").map(Number);
const date = new Date(year, month - 1);
return date.toLocaleString("default", { month: "long" });
};

return (
<>
<Heading>
Expand All @@ -170,7 +130,7 @@ export default function Transactions() {
</ViewAll>
</Heading>
<Spacer y={1} />
<TransactionsWrapper showBorder={transactions.length > 0}>
<TransactionsWrapper showBorder={transactions.length > 0 && !loading}>
{!loading &&
(transactions.length > 0 ? (
transactions.map((transaction, index) => (
Expand All @@ -192,11 +152,7 @@ export default function Transactions() {
<Section alignRight>
<Main>{getFormattedAmount(transaction)}</Main>
<Secondary>
{transaction.node.quantity &&
formatFiatBalance(
transaction.node.quantity.ar,
currency
)}
{getFormattedFiatAmount(transaction, arPrice, currency)}
</Secondary>
</Section>
</Transaction>
Expand Down
62 changes: 62 additions & 0 deletions src/lib/transactions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import { formatAddress } from "~utils/format";
import { ExtensionStorage } from "~utils/storage";
import { getTokenInfo } from "~tokens/aoTokens/router";
import type { Token } from "~tokens/token";
import BigNumber from "bignumber.js";
import browser from "webextension-polyfill";
import { balanceToFractioned, formatFiatBalance } from "~tokens/currency";

let tokens: TokenInfo[] = null;
export let tokenInfoMap = new Map<string, TokenInfo | Token>();
Expand Down Expand Up @@ -126,3 +129,62 @@ export const processTransactions = async (
return Promise.resolve([]);
}
};

export const getFormattedAmount = (transaction: ExtendedTransaction) => {
switch (transaction.transactionType) {
case "sent":
case "received":
return `${parseFloat(transaction.node.quantity.ar).toFixed(3)} AR`;
case "aoSent":
case "aoReceived":
if (transaction.aoInfo) {
return `${balanceToFractioned(transaction.aoInfo.quantity, {
divisibility: transaction.aoInfo.denomination
}).toFixed()} ${transaction.aoInfo.tickerName}`;
}
return "";
default:
return "";
}
};

export const getFormattedFiatAmount = (
transaction: ExtendedTransaction,
arPrice: number,
currency: string
) => {
try {
if (transaction.node.quantity) {
const fiatBalance = BigNumber(transaction.node.quantity.ar).multipliedBy(
arPrice
);
return formatFiatBalance(fiatBalance, currency);
}
} catch {}
return "";
};

export const getTransactionDescription = (transaction: ExtendedTransaction) => {
switch (transaction.transactionType) {
case "sent":
return `${browser.i18n.getMessage("sent")} AR`;
case "received":
return `${browser.i18n.getMessage("received")} AR`;
case "aoSent":
return `${browser.i18n.getMessage("sent")} ${
transaction.aoInfo.tickerName
}`;
case "aoReceived":
return `${browser.i18n.getMessage("received")} ${
transaction.aoInfo.tickerName
}`;
default:
return "";
}
};

export const getFullMonthName = (monthYear: string) => {
const [month, year] = monthYear.split("-").map(Number);
const date = new Date(year, month - 1);
return date.toLocaleString("default", { month: "long" });
};
60 changes: 10 additions & 50 deletions src/routes/popup/transaction/transactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useStorage } from "@plasmohq/storage/hook";
import { gql } from "~gateways/api";
import styled from "styled-components";
import { Empty, TitleMessage } from "../notifications";
import { balanceToFractioned, formatFiatBalance } from "~tokens/currency";
import {
AO_RECEIVER_QUERY_WITH_CURSOR,
AO_SENT_QUERY_WITH_CURSOR,
Expand All @@ -24,7 +23,11 @@ import {
sortFn,
processTransactions,
type GroupedTransactions,
type ExtendedTransaction
type ExtendedTransaction,
getFormattedAmount,
getFormattedFiatAmount,
getFullMonthName,
getTransactionDescription
} from "~lib/transactions";

const defaultCursors = ["", "", "", ""];
Expand Down Expand Up @@ -190,49 +193,6 @@ export default function Transactions() {
push(`/transaction/${id}?back=${encodeURIComponent("/transactions")}`);
};

const getFormattedAmount = (transaction: ExtendedTransaction) => {
switch (transaction.transactionType) {
case "sent":
case "received":
return `${parseFloat(transaction.node.quantity.ar).toFixed(3)} AR`;
case "aoSent":
case "aoReceived":
if (transaction.aoInfo) {
return `${balanceToFractioned(transaction.aoInfo.quantity, {
divisibility: transaction.aoInfo.denomination
}).toFixed()} ${transaction.aoInfo.tickerName}`;
}
return "";
default:
return "";
}
};

const getTransactionDescription = (transaction: ExtendedTransaction) => {
switch (transaction.transactionType) {
case "sent":
return `${browser.i18n.getMessage("sent")} AR`;
case "received":
return `${browser.i18n.getMessage("received")} AR`;
case "aoSent":
return `${browser.i18n.getMessage("sent")} ${
transaction.aoInfo.tickerName
}`;
case "aoReceived":
return `${browser.i18n.getMessage("received")} ${
transaction.aoInfo.tickerName
}`;
default:
return "";
}
};

const getFullMonthName = (monthYear: string) => {
const [month, year] = monthYear.split("-").map(Number);
const date = new Date(year, month - 1);
return date.toLocaleString("default", { month: "long" });
};

return (
<>
<HeadV2 title={browser.i18n.getMessage("transaction_history_title")} />
Expand Down Expand Up @@ -260,11 +220,11 @@ export default function Transactions() {
<Section alignRight>
<Main>{getFormattedAmount(transaction)}</Main>
<Secondary>
{transaction.node.quantity &&
formatFiatBalance(
transaction.node.quantity.ar,
currency
)}
{getFormattedFiatAmount(
transaction,
arPrice,
currency
)}
</Secondary>
</Section>
</Transaction>
Expand Down

0 comments on commit afdc639

Please sign in to comment.