Refactor Currency Component

.gitignore

@@ -16,6 +16,7 @@ docker/namadillo.config.toml
 debug/
 target/
 # misc
+.notes
 .DS_Store
 .env.local
 .env.development.local

apps/extension/src/App/Common/NamCurrency.tsx

@@ -8,9 +8,11 @@ type NamCurrencyProps = Omit<
 export const NamCurrency = ({ ...props }: NamCurrencyProps): JSX.Element => {
   return (
     <Currency
-      currency="nam"
+      currency={{
+        symbol: "NAM",
+      }}
       currencyPosition="right"
-      spaceAroundSign={true}
+      spaceAroundSymbol={true}
       {...props}
     />
   );

apps/namadillo/src/App/AccountOverview/AccountBalanceContainer.tsx

@@ -47,7 +47,7 @@ export const AccountBalanceContainer = (): JSX.Element => {
             <NamCurrency
               amount={totalBalance}
               className="text-4xl text-white font-medium"
-              currencySignClassName="text-xl ml-2"
+              currencySymbolClassName="text-xl ml-2"
             />
           )}
         </Stack>

apps/namadillo/src/App/AccountOverview/NamBalanceContainer.tsx

@@ -29,7 +29,7 @@ const NamBalanceListItem = ({
       <NamCurrency
         amount={amount}
         className="text-lg pl-3.5"
-        currencySignClassName="hidden"
+        currencySymbolClassName="hidden"
       />
     </li>
   );
@@ -50,7 +50,7 @@ export const NamBalanceContainer = (): JSX.Element => {
   } = useBalances();
 
   return (
-    <div className="flex gap-4 text-white">
+    <div className="flex gap-4 text-white pl-4 pr-6 py-5">
       <AtomErrorBoundary
         result={[balanceQuery, stakeQuery]}
         niceError="Unable to load balances"

apps/namadillo/src/App/Common/BalanceChart.tsx

@@ -63,7 +63,7 @@ export const BalanceChart = ({
         <NamCurrency
           amount={balance}
           className="text-2xl"
-          currencySignClassName="block mb-1 text-xs ml-1"
+          currencySymbolClassName="block mb-1 text-xs ml-1"
         />
       </div>
     );

apps/namadillo/src/App/Common/NamCurrency.tsx

@@ -8,9 +8,9 @@ type NamCurrencyProps = Omit<
 export const NamCurrency = ({ ...props }: NamCurrencyProps): JSX.Element => {
   return (
     <Currency
-      currency="nam"
+      currency={{ symbol: "NAM" }}
       currencyPosition="right"
-      spaceAroundSign={true}
+      spaceAroundSymbol={true}
       hideBalances={false}
       {...props}
     />

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 (
+    <Currency
+      currency={{
+        symbol: asset.symbol,
+      }}
+      currencyPosition="right"
+      spaceAroundSymbol={true}
+      {...props}
+    />
+  );
+};

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) && (
             <span className="text-success text-md font-light mt-1.5 ml-3">

apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx

@@ -39,7 +39,7 @@ export const StakingRewardsPanel = (): JSX.Element => {
         <NamCurrency
           amount={availableRewards}
           className="block leading-none"
-          currencySignClassName="block mb-3 mt-0.5 text-sm"
+          currencySymbolClassName="block mb-3 mt-0.5 text-sm"
         />
       }
       callToAction={

apps/namadillo/src/App/Staking/StakingSummary.tsx

@@ -64,7 +64,7 @@ export const StakingSummary = (): JSX.Element => {
               <NamCurrency
                 amount={availableAmount ?? 0}
                 className="block leading-none"
-                currencySignClassName="block mb-3 mt-0.5 text-sm"
+                currencySymbolClassName="block mb-3 mt-0.5 text-sm"
               />
             }
             callToAction={

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 <Currency /> usage here
   return (
     <div
       className={clsx(
@@ -27,12 +27,7 @@ export const AvailableAmountFooter = ({
     >
       <span className="flex gap-2">
         Available:
-        <Currency
-          amount={availableAmount}
-          currency="nam"
-          spaceAroundSign={true}
-          currencyPosition="right"
-        />
+        <TokenCurrency amount={availableAmount} asset={asset} />
       </span>
       <span>
         {onClickMax && (

apps/namadillo/src/App/Transfer/ShieldedNamBalance.tsx

@@ -28,7 +28,7 @@ const AsyncNamCurrency = ({
     <NamCurrency
       amount={amount}
       className="block text-center text-3xl leading-none"
-      currencySignClassName="block text-xs mt-1"
+      currencySymbolClassName="block text-xs mt-1"
     />
   );
 };

apps/namadillo/src/App/Transfer/TransferSource.tsx

@@ -66,8 +66,8 @@ export const TransferSource = ({
       {asset && availableAmount && (
         <footer>
           <AvailableAmountFooter
-            currency={asset?.symbol}
             availableAmount={availableAmount}
+            asset={asset}
             onClickMax={() => onChangeAmount && onChangeAmount(availableAmount)}
           />
         </footer>

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(
       <AvailableAmountFooter
-        currency="nam"
         availableAmount={new BigNumber(1234.456)}
+        asset={assetMock as Asset}
         onClickMax={callback}
       />
     );
     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(
       <AvailableAmountFooter
         availableAmount={new BigNumber(100)}
-        currency="nam"
+        asset={assetMock as Asset}
       />
     );
     expect(screen.queryByRole("button")).not.toBeInTheDocument();
@@ -40,7 +42,7 @@ describe("Component: AvailableAmountFooter", () => {
     render(
       <AvailableAmountFooter
         availableAmount={new BigNumber(0)}
-        currency="nam"
+        asset={assetMock as Asset}
         onClickMax={callback}
       />
     );