From 3414bf295ae5bf3dc9b1d5f5b5362559419bafed Mon Sep 17 00:00:00 2001 From: Pedro Rezende Date: Mon, 30 Sep 2024 14:08:14 -0300 Subject: [PATCH] feat: refactoring currency component --- apps/extension/src/App/Common/NamCurrency.tsx | 6 +- .../AccountBalanceContainer.tsx | 2 +- .../AccountOverview/NamBalanceContainer.tsx | 4 +- .../namadillo/src/App/Common/BalanceChart.tsx | 2 +- .../src/App/Common/CurrencySelector.tsx | 51 ----------------- .../namadillo/src/App/Common/FiatCurrency.tsx | 28 ---------- apps/namadillo/src/App/Common/NamCurrency.tsx | 4 +- .../src/App/Common/TokenCurrency.tsx | 23 ++++++++ .../src/App/Settings/CurrencySelector.tsx | 21 ------- .../App/Settings/CurrencySelectorEntry.tsx | 35 ------------ .../src/App/Staking/BondingAmountOverview.tsx | 2 +- .../src/App/Staking/StakingRewardsPanel.tsx | 2 +- .../src/App/Staking/StakingSummary.tsx | 2 +- .../App/Transfer/AvailableAmountFooter.tsx | 19 +++---- .../src/App/Transfer/TransferSource.tsx | 2 +- .../__tests__/AvailableAmountFooter.test.tsx | 10 ++-- apps/namadillo/src/atoms/exchangeRates.ts | 24 -------- apps/namadillo/src/atoms/settings/atoms.ts | 7 +-- packages/components/src/Currency.tsx | 32 ++++++----- packages/utils/src/currencies.ts | 55 ------------------- packages/utils/src/index.ts | 1 - storybook/src/stories/Currency.stories.tsx | 8 +-- yarn.lock | 8 +++ 23 files changed, 82 insertions(+), 266 deletions(-) delete mode 100644 apps/namadillo/src/App/Common/CurrencySelector.tsx delete mode 100644 apps/namadillo/src/App/Common/FiatCurrency.tsx create mode 100644 apps/namadillo/src/App/Common/TokenCurrency.tsx delete mode 100644 apps/namadillo/src/App/Settings/CurrencySelector.tsx delete mode 100644 apps/namadillo/src/App/Settings/CurrencySelectorEntry.tsx delete mode 100644 apps/namadillo/src/atoms/exchangeRates.ts delete mode 100644 packages/utils/src/currencies.ts diff --git a/apps/extension/src/App/Common/NamCurrency.tsx b/apps/extension/src/App/Common/NamCurrency.tsx index 10541bcad..ef8f119fa 100644 --- a/apps/extension/src/App/Common/NamCurrency.tsx +++ b/apps/extension/src/App/Common/NamCurrency.tsx @@ -8,9 +8,11 @@ type NamCurrencyProps = Omit< export const NamCurrency = ({ ...props }: NamCurrencyProps): JSX.Element => { return ( ); diff --git a/apps/namadillo/src/App/AccountOverview/AccountBalanceContainer.tsx b/apps/namadillo/src/App/AccountOverview/AccountBalanceContainer.tsx index 89b336109..3f51fa127 100644 --- a/apps/namadillo/src/App/AccountOverview/AccountBalanceContainer.tsx +++ b/apps/namadillo/src/App/AccountOverview/AccountBalanceContainer.tsx @@ -47,7 +47,7 @@ export const AccountBalanceContainer = (): JSX.Element => { )} diff --git a/apps/namadillo/src/App/AccountOverview/NamBalanceContainer.tsx b/apps/namadillo/src/App/AccountOverview/NamBalanceContainer.tsx index dbc26977a..bb381d962 100644 --- a/apps/namadillo/src/App/AccountOverview/NamBalanceContainer.tsx +++ b/apps/namadillo/src/App/AccountOverview/NamBalanceContainer.tsx @@ -29,7 +29,7 @@ const NamBalanceListItem = ({ ); @@ -50,7 +50,7 @@ export const NamBalanceContainer = (): JSX.Element => { } = useBalances(); return ( -
+
); diff --git a/apps/namadillo/src/App/Common/CurrencySelector.tsx b/apps/namadillo/src/App/Common/CurrencySelector.tsx deleted file mode 100644 index 12af835ea..000000000 --- a/apps/namadillo/src/App/Common/CurrencySelector.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { StyledSelectBox } from "@namada/components"; -import { CurrencyInfoListItem } from "@namada/utils"; -import clsx from "clsx"; - -type CurrencySelectorProps = { - value: string; - onChange: (value: string) => void; - currencies: CurrencyInfoListItem[]; -}; - -export const CurrencySelector = ({ - value, - onChange, - currencies, -}: CurrencySelectorProps): JSX.Element => { - const getCurrencySymbol = (symbol: string): React.ReactNode => ( - - {symbol} - - ); - - return ( -
- onChange(e.target.value)} - options={currencies.map((currency) => ({ - id: currency.id, - value: ( - <> - {getCurrencySymbol(currency.sign)}{" "} - {currency.plural} - - ), - ariaLabel: currency.plural, - }))} - /> -
- ); -}; diff --git a/apps/namadillo/src/App/Common/FiatCurrency.tsx b/apps/namadillo/src/App/Common/FiatCurrency.tsx deleted file mode 100644 index cc6742436..000000000 --- a/apps/namadillo/src/App/Common/FiatCurrency.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Currency, CurrencyProps } from "@namada/components"; -import { selectedCurrencyRateAtom } from "atoms/exchangeRates"; -import { selectedCurrencyAtom } from "atoms/settings"; -import BigNumber from "bignumber.js"; -import { useAtomValue } from "jotai"; - -type FiatCurrencyProps = { - amountInNam: BigNumber; -} & Omit< - CurrencyProps, - "amount" | "currency" | "currencyPosition" | "spaceAroundSign" ->; - -export const FiatCurrency = ({ - amountInNam, - ...props -}: FiatCurrencyProps): JSX.Element => { - const selectedFiatCurrency = useAtomValue(selectedCurrencyAtom); - const selectedCurrencyRate = useAtomValue(selectedCurrencyRateAtom); - return ( - - ); -}; diff --git a/apps/namadillo/src/App/Common/NamCurrency.tsx b/apps/namadillo/src/App/Common/NamCurrency.tsx index d6ff2df22..512005e7f 100644 --- a/apps/namadillo/src/App/Common/NamCurrency.tsx +++ b/apps/namadillo/src/App/Common/NamCurrency.tsx @@ -8,9 +8,9 @@ type NamCurrencyProps = Omit< export const NamCurrency = ({ ...props }: NamCurrencyProps): JSX.Element => { return ( diff --git a/apps/namadillo/src/App/Common/TokenCurrency.tsx b/apps/namadillo/src/App/Common/TokenCurrency.tsx new file mode 100644 index 000000000..18f0c921f --- /dev/null +++ b/apps/namadillo/src/App/Common/TokenCurrency.tsx @@ -0,0 +1,23 @@ +import { Asset } from "@chain-registry/types"; +import { Currency, CurrencyProps } from "@namada/components"; + +type TokenCurrencyProps = Omit< + CurrencyProps, + "currency" | "currencyPosition" | "spaceAroundSign" +> & { asset: Asset }; + +export const TokenCurrency = ({ + asset, + ...props +}: TokenCurrencyProps): JSX.Element => { + return ( + + ); +}; diff --git a/apps/namadillo/src/App/Settings/CurrencySelector.tsx b/apps/namadillo/src/App/Settings/CurrencySelector.tsx deleted file mode 100644 index dae7b4e4b..000000000 --- a/apps/namadillo/src/App/Settings/CurrencySelector.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Stack } from "@namada/components"; -import { FiatCurrencyList } from "@namada/utils"; -import { selectedCurrencyAtom } from "atoms/settings"; -import { useAtom } from "jotai"; -import { CurrencySelectorEntry } from "./CurrencySelectorEntry"; - -export const CurrencySelector = (): JSX.Element => { - const [selectedCurrency, setSelectedCurrency] = useAtom(selectedCurrencyAtom); - return ( - - {FiatCurrencyList.map((currency) => ( - setSelectedCurrency(currency.id)} - /> - ))} - - ); -}; diff --git a/apps/namadillo/src/App/Settings/CurrencySelectorEntry.tsx b/apps/namadillo/src/App/Settings/CurrencySelectorEntry.tsx deleted file mode 100644 index 343395ce0..000000000 --- a/apps/namadillo/src/App/Settings/CurrencySelectorEntry.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { CurrencyInfoListItem } from "@namada/utils"; -import clsx from "clsx"; -import { twMerge } from "tailwind-merge"; - -type CurrencySelectorEntryType = { - currency: CurrencyInfoListItem; - selected: boolean; - onClick: () => void; -}; - -export const CurrencySelectorEntry = ({ - currency, - selected, - onClick, -}: CurrencySelectorEntryType): JSX.Element => { - return ( -
  • - -
    • - ); -}; diff --git a/apps/namadillo/src/App/Staking/BondingAmountOverview.tsx b/apps/namadillo/src/App/Staking/BondingAmountOverview.tsx index b21debafa..04c9130b7 100644 --- a/apps/namadillo/src/App/Staking/BondingAmountOverview.tsx +++ b/apps/namadillo/src/App/Staking/BondingAmountOverview.tsx @@ -40,7 +40,7 @@ export const BondingAmountOverview = ({ className={clsx("text-2xl", { [updatedValueClassList]: hasUpdatedValue, })} - currencySignClassName="text-lg" + currencySymbolClassName="text-lg" /> {amountToDelegate && amountToDelegate.gt(0) && ( diff --git a/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx b/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx index 853a3a1e5..b78d34763 100644 --- a/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx +++ b/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx @@ -39,7 +39,7 @@ export const StakingRewardsPanel = (): JSX.Element => { } callToAction={ diff --git a/apps/namadillo/src/App/Staking/StakingSummary.tsx b/apps/namadillo/src/App/Staking/StakingSummary.tsx index 58ef01dd9..5eaa5caa2 100644 --- a/apps/namadillo/src/App/Staking/StakingSummary.tsx +++ b/apps/namadillo/src/App/Staking/StakingSummary.tsx @@ -64,7 +64,7 @@ export const StakingSummary = (): JSX.Element => { } callToAction={ diff --git a/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx b/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx index 093f72d19..9c05afb27 100644 --- a/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx +++ b/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx @@ -1,24 +1,24 @@ -import { ActionButton, Currency } from "@namada/components"; -import { KnownCurrencies } from "@namada/utils"; +import { Asset } from "@chain-registry/types"; +import { ActionButton } from "@namada/components"; +import { TokenCurrency } from "App/Common/TokenCurrency"; import BigNumber from "bignumber.js"; import clsx from "clsx"; type AvailableAmountFooterProps = { availableAmount?: BigNumber; - currency?: keyof typeof KnownCurrencies; + asset?: Asset; onClickMax?: () => void; }; export const AvailableAmountFooter = ({ availableAmount, - currency, + asset, onClickMax, }: AvailableAmountFooterProps): JSX.Element => { - if (!currency || availableAmount === undefined) { + if (availableAmount === undefined || !asset) { return <>; } - // TODO: Replace usage here return (
    Available: - + {onClickMax && ( diff --git a/apps/namadillo/src/App/Transfer/TransferSource.tsx b/apps/namadillo/src/App/Transfer/TransferSource.tsx index b4c415b73..2b2b76dfd 100644 --- a/apps/namadillo/src/App/Transfer/TransferSource.tsx +++ b/apps/namadillo/src/App/Transfer/TransferSource.tsx @@ -66,8 +66,8 @@ export const TransferSource = ({ {asset && availableAmount && (
    onChangeAmount && onChangeAmount(availableAmount)} />
    diff --git a/apps/namadillo/src/App/Transfer/__tests__/AvailableAmountFooter.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/AvailableAmountFooter.test.tsx index 088ff37b3..f949ee1cc 100644 --- a/apps/namadillo/src/App/Transfer/__tests__/AvailableAmountFooter.test.tsx +++ b/apps/namadillo/src/App/Transfer/__tests__/AvailableAmountFooter.test.tsx @@ -1,4 +1,6 @@ +import { Asset } from "@chain-registry/types"; import { fireEvent, render, screen } from "@testing-library/react"; +import { assetMock } from "App/Transfer/__mocks__/assets"; import BigNumber from "bignumber.js"; import { AvailableAmountFooter } from "../AvailableAmountFooter"; @@ -12,14 +14,14 @@ describe("Component: AvailableAmountFooter", () => { const callback = jest.fn(); render( ); const amount = screen.getByText("1,234"); const button = screen.getByRole("button"); - expect(amount.parentNode?.textContent).toContain("1,234.456 NAM"); + expect(amount.parentNode?.textContent).toContain("1,234.456 ETH"); expect(button).toBeEnabled(); fireEvent.click(button); expect(callback).toHaveBeenCalledTimes(1); @@ -29,7 +31,7 @@ describe("Component: AvailableAmountFooter", () => { render( ); expect(screen.queryByRole("button")).not.toBeInTheDocument(); @@ -40,7 +42,7 @@ describe("Component: AvailableAmountFooter", () => { render( ); diff --git a/apps/namadillo/src/atoms/exchangeRates.ts b/apps/namadillo/src/atoms/exchangeRates.ts deleted file mode 100644 index a2d281fd5..000000000 --- a/apps/namadillo/src/atoms/exchangeRates.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { CurrencyType } from "@namada/utils"; -import { atom } from "jotai"; -import { selectedCurrencyAtom } from "./settings"; - -type SupportedCurrencies = "nam"; - -export type ExchangeRateTable = Record< - SupportedCurrencies, - Record ->; - -export const exchangeRateAtom = atom({ - nam: { - usd: 0, - eur: 0, - jpy: 0, - }, -}); - -export const selectedCurrencyRateAtom = atom((get) => { - const exchangeRates = get(exchangeRateAtom); - const activeCurrency = get(selectedCurrencyAtom); - return exchangeRates["nam"][activeCurrency]; -}); diff --git a/apps/namadillo/src/atoms/settings/atoms.ts b/apps/namadillo/src/atoms/settings/atoms.ts index a4947f589..887db905f 100644 --- a/apps/namadillo/src/atoms/settings/atoms.ts +++ b/apps/namadillo/src/atoms/settings/atoms.ts @@ -1,4 +1,4 @@ -import { CurrencyType, isUrlValid, sanitizeUrl } from "@namada/utils"; +import { isUrlValid, sanitizeUrl } from "@namada/utils"; import { indexerRpcUrlAtom } from "atoms/chain"; import { Getter, Setter, atom, getDefaultStore } from "jotai"; import { atomWithMutation, atomWithQuery } from "jotai-tanstack-query"; @@ -84,11 +84,6 @@ const changeSettingsUrl = } }; -export const selectedCurrencyAtom = atom( - (get) => get(settingsAtom).fiat, - changeSettings("fiat") -); - /** * Returns RPC Url. * Priority: user defined RPC Url > TOML config > indexer RPC url diff --git a/packages/components/src/Currency.tsx b/packages/components/src/Currency.tsx index c0e6ee8dd..f7b1bea44 100644 --- a/packages/components/src/Currency.tsx +++ b/packages/components/src/Currency.tsx @@ -1,14 +1,20 @@ -import { KnownCurrencies } from "@namada/utils"; import BigNumber from "bignumber.js"; +export type CurrencyObject = { + symbol: string; + singular?: string; + plural?: string; + fraction?: string; +}; + export type CurrencyProps = { amount: number | BigNumber; hideBalances?: boolean; - currency: keyof typeof KnownCurrencies; + currency: CurrencyObject; separator?: "." | "," | ""; - spaceAroundSign?: boolean; + spaceAroundSymbol?: boolean; currencyPosition?: "left" | "right"; - currencySignClassName?: string; + currencySymbolClassName?: string; baseAmountClassName?: string; fractionClassName?: string; } & React.ComponentPropsWithoutRef<"span">; @@ -20,23 +26,22 @@ export const Currency = ({ currencyPosition = "left", separator = ".", className = "", - spaceAroundSign = false, - currencySignClassName = "", + spaceAroundSymbol = false, + currencySymbolClassName = "", baseAmountClassName = "", fractionClassName = "", ...containerRest }: CurrencyProps): JSX.Element => { - const currencyObj = KnownCurrencies[currency]; const amountParts = BigNumber(amount).toFormat().split("."); const baseAmount = hideBalances ? "✳✳✳✳" : amountParts[0] || "0"; const fraction = amountParts.length > 1 && !hideBalances ? amountParts[1] : ""; const currencyHtml = ( - - {spaceAroundSign && currencyPosition === "right" ? " " : null} - {currencyObj.sign} - {spaceAroundSign && currencyPosition === "left" ? " " : null} + + {spaceAroundSymbol && currencyPosition === "right" ? " " : null} + {currency.symbol} + {spaceAroundSymbol && currencyPosition === "left" ? " " : null} ); @@ -49,10 +54,11 @@ export const Currency = ({ ); const amountText = - BigNumber(baseAmount).eq(1) ? currencyObj.singular : currencyObj.plural; + (BigNumber(baseAmount).eq(1) ? currency.singular : currency.plural) || + currency.symbol; const centsText = - BigNumber(fraction).gt(0) ? ` and ${fraction} ${currencyObj.fraction}` : ""; + BigNumber(fraction).gt(0) ? ` and ${fraction} ${currency.fraction}` : ""; const screenReaderText = `${baseAmount} ${amountText}${centsText}`; diff --git a/packages/utils/src/currencies.ts b/packages/utils/src/currencies.ts deleted file mode 100644 index f6466e6f5..000000000 --- a/packages/utils/src/currencies.ts +++ /dev/null @@ -1,55 +0,0 @@ -export type CurrencyInfo = { - sign: string; - singular: string; - plural: string; - fraction: string; - fiat: boolean; -}; - -export type CurrencyInfoListItem = { - id: string; -} & CurrencyInfo; - -export const KnownCurrencies: Record = { - usd: { - sign: "$", - singular: "US Dollar", - plural: "US Dollars", - fraction: "cents", - fiat: true, - }, - eur: { - sign: "€", - singular: "Euro", - plural: "Euros", - fraction: "cents", - fiat: true, - }, - nam: { - sign: "NAM", - singular: "NAM", - plural: "NAM", - fraction: "cents", - fiat: false, - }, - jpy: { - sign: "¥", - singular: "Yen", - plural: "Yen", - fraction: "cents", - fiat: true, - }, -}; - -export const CurrencyList: CurrencyInfoListItem[] = Object.keys( - KnownCurrencies -).map((currency) => ({ - id: currency, - ...KnownCurrencies[currency], -})); - -export const FiatCurrencyList = CurrencyList.filter( - (currency) => currency.fiat -); - -export type CurrencyType = keyof typeof KnownCurrencies; diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index b3df192f2..b46343641 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -1,4 +1,3 @@ export * from "./async"; -export * from "./currencies"; export * from "./helpers"; export * from "./theme"; diff --git a/storybook/src/stories/Currency.stories.tsx b/storybook/src/stories/Currency.stories.tsx index d52d00bff..0dd2e9801 100644 --- a/storybook/src/stories/Currency.stories.tsx +++ b/storybook/src/stories/Currency.stories.tsx @@ -7,16 +7,16 @@ export default { argTypes: {}, } as Meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { - currency: "nam", + currency: { symbol: "NAM" }, amount: 1000.56, - spaceAroundSign: true, + spaceAroundSymbol: true, separator: "", currencyPosition: "right", - currencySignClassName: "text-xl font-light", + currencySymbolClassName: "text-xl font-light", baseAmountClassName: "text-3xl", fractionClassName: "text-sm opacity-20", className: "font-medium", diff --git a/yarn.lock b/yarn.lock index 7eaf96a7b..e50dad60b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3683,6 +3683,7 @@ __metadata: bignumber.js: "npm:^9.1.1" clsx: "npm:^2.1.1" crypto-browserify: "npm:^3.12.0" + currency-list: "npm:^1.0.8" dotenv: "npm:^16.0.3" eslint: "npm:^8.57.0" eslint-config-prettier: "npm:^9.1.0" @@ -8960,6 +8961,13 @@ __metadata: languageName: node linkType: hard +"currency-list@npm:^1.0.8": + version: 1.0.8 + resolution: "currency-list@npm:1.0.8" + checksum: 8563987ce681affb9b3d48a54df0565efa14cba75a1a8460d7ee6e0644c2161649438bf32791f33fd68f7c0d8b9fa7c9456a855837d7cda95222d2e506e63031 + languageName: node + linkType: hard + "curve25519-js@npm:0.0.4": version: 0.0.4 resolution: "curve25519-js@npm:0.0.4"