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 && (
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"