feat: update buttons for phase 3

apps/namadillo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namada/namadillo",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Namadillo",
   "repository": "https://github.com/anoma/namada-interface/",
   "author": "Heliax Dev <info@heliax.dev>",

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

@@ -11,9 +11,13 @@ import { TokenCurrency } from "App/Common/TokenCurrency";
 import { params, routes } from "App/routes";
 import { TokenBalance, transparentTokensAtom } from "atoms/balance/atoms";
 import { getTotalDollar } from "atoms/balance/functions";
+import { applicationFeaturesAtom } from "atoms/settings";
 import { getAssetImageUrl } from "integrations/utils";
 import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
+import { IoSwapHorizontal } from "react-icons/io5";
+import { TbVectorTriangle } from "react-icons/tb";
+import { Link } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 import { isNamadaAsset } from "utils";
 
@@ -26,6 +30,7 @@ const TransparentTokensTable = ({
   data: TokenBalance[];
 }): JSX.Element => {
   const [page, setPage] = useState(initialPage);
+  const { namTransfersEnabled } = useAtomValue(applicationFeaturesAtom);
 
   const headers = ["Token", { children: "Balance", className: "text-right" }];
 
@@ -36,6 +41,7 @@ const TransparentTokensTable = ({
     dollar,
   }: TokenBalance): TableRow => {
     const icon = getAssetImageUrl(asset);
+    const isNam = isNamadaAsset(asset);
 
     return {
       cells: [
@@ -72,7 +78,7 @@ const TransparentTokensTable = ({
           >
             Shield
           </ActionButton>
-          {isNamadaAsset(asset) && (
+          {isNam && (
             <ActionButton
               size="xs"
               className="w-fit mx-auto"
@@ -82,6 +88,34 @@ const TransparentTokensTable = ({
               Stake
             </ActionButton>
           )}
+          <div className="flex items-center gap-8 ml-8 text-neutral-450">
+            {isNam && !namTransfersEnabled ?
+              <span className="text-xs">NAM Transfer Locked</span>
+            : [
+                {
+                  url: `${routes.transfer}?${params.asset}=${originalAddress}`,
+                  icon: <IoSwapHorizontal className="h-[20px] w-[20px]" />,
+                },
+                {
+                  url: `${routes.ibc}?${params.asset}=${originalAddress}`,
+                  icon: (
+                    <TbVectorTriangle className="h-[20px] w-[20px] -mt-1" />
+                  ),
+                },
+              ].map(({ url, icon }) => (
+                <Link
+                  key={url}
+                  to={url}
+                  className={twMerge(
+                    "bg-black rounded-full w-10 h-10 flex items-center justify-center p-0",
+                    "hover:bg-white hover:text-black transition-all duration-300"
+                  )}
+                >
+                  {icon}
+                </Link>
+              ))
+            }
+          </div>
         </div>,
       ],
     };

apps/namadillo/src/App/Ibc/assets/IbcLogo.tsx

@@ -0,0 +1,16 @@
+export const IbcLogo = (): JSX.Element => {
+  return (
+    <svg
+      width="22"
+      height="12"
+      viewBox="0 0 22 12"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M21.1287 4.19936C20.6512 4.19936 20.17 4.20376 19.6896 4.19144C19.6452 4.19056 19.5707 4.08139 19.565 4.01889C19.4886 3.1799 18.7928 2.50818 17.9645 2.35588C17.0251 2.18332 16.1853 2.34355 15.5677 3.06721C15.3174 3.35949 15.1666 3.70548 15.1647 4.08227C15.1579 5.62203 15.1338 7.16268 15.1685 8.70156C15.1946 9.87068 16.337 10.6701 17.6301 10.5239C18.2757 10.4508 18.7918 10.2175 19.1764 9.74479C19.3958 9.4754 19.536 9.17431 19.5543 8.83713C19.563 8.68043 19.6229 8.62232 19.8027 8.62672C20.2434 8.63817 20.6851 8.63025 21.148 8.63025C21.1519 9.17519 21.0185 9.6638 20.7624 10.1277C19.6046 12.2248 16.5892 12.4968 14.8815 11.1833C14.0204 10.5213 13.5826 9.65147 13.5787 8.61704C13.5729 7.13538 13.57 5.65461 13.5787 4.17295C13.5903 2.36556 15.1946 0.905912 17.1759 0.861894C18.2535 0.837244 19.1958 1.10664 20.0057 1.77043C20.687 2.32946 21.2263 3.44225 21.1287 4.19936Z" />
+      <path d="M4.43222 7.96438H5.96792V10.3185C6.0665 10.3229 6.14381 10.329 6.2221 10.329C7.18855 10.329 8.15404 10.3308 9.12049 10.329C9.98354 10.3282 10.5972 9.78409 10.6146 8.99969C10.6233 8.59648 10.6214 8.19327 10.6146 7.79006C10.603 6.99245 10.0038 6.4475 9.12339 6.43078C8.83442 6.4255 8.54545 6.43078 8.23522 6.43078V5.01955C9.2442 4.96321 10.2203 4.97465 11.0534 5.60235C11.8014 6.16667 12.1735 6.88857 12.1919 7.76277C12.2025 8.2681 12.2035 8.77519 12.1706 9.27964C12.0856 10.5588 10.8369 11.7051 9.43169 11.742C7.81481 11.7843 6.19697 11.7658 4.57912 11.7755C4.46798 11.7755 4.39453 11.757 4.39453 11.6329C4.40033 10.4232 4.40226 9.21362 4.40613 8.00399C4.40613 7.99783 4.41386 7.99167 4.43222 7.96614V7.96438Z" />
+      <path d="M10.4648 4.86737C10.4648 4.52579 10.4687 4.20358 10.4648 3.88224C10.4513 3.04413 9.84629 2.50359 8.92429 2.50271C8.03902 2.50271 7.15375 2.50271 6.26848 2.50271H5.98917C5.98337 2.58986 5.97564 2.66029 5.97564 2.73072C5.97564 3.49312 5.97371 4.25552 5.97564 5.01791C5.97757 5.89124 6.55745 6.42738 7.51714 6.44499C7.74135 6.44939 7.96557 6.44499 8.21202 6.44499V7.85181C7.03777 7.9557 5.97274 7.78226 5.15512 6.93535C4.62744 6.38864 4.39645 5.74158 4.39645 5.01967C4.39645 3.77308 4.39935 2.52648 4.39355 1.28076C4.39355 1.11349 4.43705 1.05186 4.63517 1.05274C6.05972 1.05979 7.48428 1.04658 8.90883 1.05979C10.4358 1.07387 11.5579 1.81866 11.9213 3.13569C12.072 3.68416 12.0285 4.27665 12.0749 4.86561H10.4677L10.4648 4.86737Z" />
+      <path d="M0.863281 1.08594H2.39994V11.7657H0.863281V1.08594Z" />
+    </svg>
+  );
+};

apps/namadillo/src/App/Layout/TopNavigation.tsx

@@ -1,5 +1,6 @@
 import { ActionButton } from "@namada/components";
 import { ConnectExtensionButton } from "App/Common/ConnectExtensionButton";
+import { IbcLogo } from "App/Ibc/assets/IbcLogo";
 import { routes } from "App/routes";
 import {
   applicationFeaturesAtom,
@@ -35,20 +36,18 @@ export const TopNavigation = (): JSX.Element => {
     <div className="flex-1 flex items-center gap-4 sm:gap-6">
       <div className="hidden lg:flex gap-2">
         {maspEnabled && (
-          <ActionButton
-            href={routes.maspShield}
-            size="sm"
-            className="w-[140px]"
-          >
-            Shield assets
+          <ActionButton href={routes.maspShield} size="sm" className="px-4">
+            <div className="flex items-center gap-1">
+              Shield Assets over <IbcLogo />
+            </div>
           </ActionButton>
         )}
         {(maspEnabled || namTransfersEnabled) && (
           <ActionButton
             href={routes.transfer}
             size="sm"
             backgroundColor="white"
-            className="w-[140px]"
+            className="min-w-[140px]"
           >
             Transfer
           </ActionButton>