Refactor Currency

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/package.json

@@ -8,6 +8,7 @@
   "private": true,
   "dependencies": {
     "@anomaorg/namada-indexer-client": "0.0.23",
+    "@chain-registry/client": "^1.48.80",
     "@cosmjs/encoding": "^0.32.3",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/query-core": "^5.40.0",

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/SelectModal.tsx

@@ -2,31 +2,39 @@ import { Modal } from "@namada/components";
 import clsx from "clsx";
 import React from "react";
 import { IoClose } from "react-icons/io5";
+import { twMerge } from "tailwind-merge";
 import { ModalTransition } from "./ModalTransition";
 
 type SelectModalProps = {
   children: React.ReactNode;
   title: React.ReactNode;
   onClose: () => void;
-};
+} & React.ComponentPropsWithoutRef<"div">;
 
 export const SelectModal = ({
   children,
   title,
   onClose,
+  className,
+  ...props
 }: SelectModalProps): JSX.Element => {
   return (
     <Modal onClose={onClose}>
       <ModalTransition>
         <div
-          className={clsx(
-            "px-3 pt-2 pb-6 bg-rblack max-w-[400px] min-h-[120px] w-screen rounded-xl border border-neutral-700"
+          className={twMerge(
+            clsx(
+              "px-8 pt-3 pb-6 bg-rblack max-w-[480px] min-h-[120px]",
+              "w-screen rounded-xl border border-neutral-700"
+            ),
+            className
           )}
+          {...props}
         >
-          <header className="flex w-full justify-center items-center relative mb-4 text-light leading-8">
+          <header className="flex w-full justify-center items-center relative mb-6 text-light leading-8">
             {title}
             <i
-              className="cursor-pointer text-white absolute right-0 text-xl p-1.5 hover:text-yellow z-50"
+              className="cursor-pointer text-white absolute -right-2.5 text-xl p-1.5 hover:text-yellow z-50"
               onClick={onClose}
             >
               <IoClose />

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

@@ -18,25 +18,25 @@ export const TabSelector = ({
   onChange,
 }: TabSelectorProps): JSX.Element => {
   return (
-    <nav>
-      <ul className="flex">
-        {items.map((item) => (
-          <li key={item.id} className="w-full">
-            <button
-              onClick={() => onChange(item)}
-              className={twMerge(
-                clsx(
-                  "border border-current text-current rounded-sm bg-black opacity-70",
-                  { "border border-current opacity-100": item.id === active },
-                  item.className
-                )
-              )}
-            >
-              {item.text}
-            </button>
-          </li>
-        ))}
-      </ul>
-    </nav>
+    <ul className="flex">
+      {items.map((item) => (
+        <li key={item.id} className="w-full">
+          <button
+            type="button"
+            onClick={() => onChange(item)}
+            className={twMerge(
+              clsx(
+                "w-full text-current rounded-sm bg-black opacity-50 py-1",
+                "hover:opacity-80 transition-opacity duration-200",
+                { "border border-current opacity-100": item.id === active },
+                item.className
+              )
+            )}
+          >
+            {item.text}
+          </button>
+        </li>
+      ))}
+    </ul>
   );
 };

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

@@ -66,7 +66,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/AssetCard.tsx

@@ -0,0 +1,31 @@
+import { Asset } from "@chain-registry/types";
+import clsx from "clsx";
+
+type AssetCardProps = {
+  asset: Asset;
+};
+
+export const AssetCard = ({ asset }: AssetCardProps): JSX.Element => {
+  const image = asset.logo_URIs?.svg || asset.logo_URIs?.png;
+  return (
+    <span
+      className={clsx(
+        "grid grid-cols-[40px_auto] gap-6 w-full px-4 py-2.5 items-center"
+      )}
+    >
+      {image ?
+        <img
+          src={image}
+          alt={asset.name + ` logo`}
+          className="w-full aspect-square"
+        />
+      : <img
+          className="bg-neutral-800 rounded-full aspect-square w-full"
+          alt="Logo not available"
+          role="img"
+        />
+      }
+      <span className="text-left">{asset.name}</span>
+    </span>
+  );
+};