fix: design tweaks PR (#2327)

Author: neocybereth

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

@@ -112,7 +112,7 @@ const TransparentTokensTable = ({
             <div className="relative group/tooltip">
               <ActionButton
                 size="xs"
-                href={`${routes.shield}?${params.asset}=${asset.symbol}&${params.source}=${destinationAddress}&${params.destination}=${shieldedAddress}`}
+                href={`${routes.transfer}?${params.asset}=${asset.symbol}&${params.source}=${destinationAddress}&${params.destination}=${shieldedAddress}`}
               >
                 Shield
               </ActionButton>
@@ -135,7 +135,7 @@ const TransparentTokensTable = ({
               <span className="text-xs">NAM Transfer Locked</span>
             : [
                 {
-                  url: `${routes.transfer}?${params.asset}=${address}&${params.shielded}=0`,
+                  url: `${routes.transfer}?${params.asset}=${asset.symbol}&${params.source}=${destinationAddress}`,
                   icon: <IoSwapHorizontal className="h-[20px] w-[20px]" />,
                 },
               ].map(({ url, icon }) => (

apps/namadillo/src/App/Ibc/IbcTopHeader.tsx

@@ -19,7 +19,6 @@ import { useEffect, useMemo, useState } from "react";
 import { generatePath, useNavigate } from "react-router-dom";
 import { AssetWithAmountAndChain } from "types";
 import { useTransactionEventListener } from "utils";
-import { IbcTopHeader } from "./IbcTopHeader";
 
 interface IbcTransferProps {
   sourceAddress: string;
@@ -146,9 +145,7 @@ export const IbcTransfer = ({
 
   return (
     <div className="relative min-h-[600px]">
-      <header className="flex flex-col items-center text-center mb-8 gap-6">
-        <IbcTopHeader type="ibcToNam" isShielded={shielded} />
-      </header>
+      <header className="text-center mb-8 gap-6">IBC Deposit</header>
       <TransferModule
         source={{
           selectedAssetWithAmount,

apps/namadillo/src/App/Ibc/IbcTransfer.tsx

@@ -44,7 +44,6 @@ import {
   toDisplayAmount,
   useTransactionEventListener,
 } from "utils";
-import { IbcTopHeader } from "./IbcTopHeader";
 
 interface IbcWithdrawProps {
   sourceAddress: string;
@@ -323,9 +322,7 @@ export const IbcWithdraw = ({
 
   return (
     <div className="relative min-h-[600px]">
-      <header className="flex flex-col items-center text-center mb-8 gap-6">
-        <IbcTopHeader type="namToIbc" isShielded={shielded} />
-      </header>
+      <header className="text-center mb-8 gap-6">IBC Withdraw</header>
       <TransferModule
         source={{
           address: sourceAddress,

apps/namadillo/src/App/Ibc/IbcWithdraw.tsx

@@ -1,16 +1,15 @@
 import { SidebarMenuItem } from "App/Common/SidebarMenuItem";
-import { ReceiveIcon } from "App/Icons/ReceiveIcon";
 import { ShieldIcon } from "App/Icons/ShieldIcon";
-import { TransferIcon } from "App/Icons/TransferIcon";
 import { routes } from "App/routes";
 import { applicationFeaturesAtom } from "atoms/settings";
 import { useAtomValue } from "jotai";
 import { AiFillHome } from "react-icons/ai";
 import { BsDiscord, BsTwitterX } from "react-icons/bs";
 import { FaVoteYea } from "react-icons/fa";
 import { FaBug } from "react-icons/fa6";
-import { GoStack } from "react-icons/go";
-import { MdOutlineKeyboardBackspace } from "react-icons/md";
+import { GoHistory, GoStack } from "react-icons/go";
+import { IoSwapHorizontal } from "react-icons/io5";
+import { LuArrowDownToLine } from "react-icons/lu";
 import { Link } from "react-router-dom";
 import { DISCORD_URL, TWITTER_URL } from "urls";
 
@@ -40,20 +39,20 @@ export const Navigation = (): JSX.Element => {
     },
     {
       label: "Transfer",
-      icon: <TransferIcon />,
+      icon: <IoSwapHorizontal />,
       url:
         features.maspEnabled || features.namTransfersEnabled ?
           routes.transfer
         : undefined,
     },
     {
       label: "Receive",
-      icon: <ReceiveIcon />,
+      icon: <LuArrowDownToLine />,
       url: routes.receive,
     },
     {
       label: "History",
-      icon: <MdOutlineKeyboardBackspace />,
+      icon: <GoHistory />,
       url:
         features.namTransfersEnabled || features.ibcTransfersEnabled ?
           routes.history

apps/namadillo/src/App/Icons/ReceiveIcon.tsx

@@ -1,5 +1,6 @@
 import { Panel } from "@namada/components";
 import { AccountType } from "@namada/types";
+import { params, routes } from "App/routes";
 import { TransferModule } from "App/Transfer/TransferModule";
 import { OnSubmitTransferParams } from "App/Transfer/types";
 import { allDefaultAccountsAtom } from "atoms/accounts";
@@ -14,8 +15,8 @@ import invariant from "invariant";
 import { useAtom, useAtomValue } from "jotai";
 import { createTransferDataFromNamada } from "lib/transactions";
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import { AssetWithAmountAndChain } from "types";
-
 interface MaspShieldProps {
   sourceAddress: string;
   setSourceAddress: (address?: string) => void;
@@ -52,6 +53,9 @@ export const MaspShield = ({
   const transparentAddress = defaultAccounts.data?.find(
     (account) => account.type !== AccountType.ShieldedKeys
   )?.address;
+  const shieldedAddress = defaultAccounts.data?.find(
+    (account) => account.type === AccountType.ShieldedKeys
+  )?.address;
   const ledgerAccountInfo = ledgerStatus && {
     deviceConnected: ledgerStatus.connected,
     errorMessage: ledgerStatus.errorMessage,
@@ -147,9 +151,7 @@ export const MaspShield = ({
 
   return (
     <Panel className="rounded-sm flex flex-col flex-1 py-9">
-      <header className="flex flex-col text-yellow items-center text-center mb-8 gap-6">
-        Shield Assets
-      </header>
+      <header className="text-yellow text-center mb-8 gap-6">Shield</header>
       <TransferModule
         source={{
           address: sourceAddress,
@@ -177,6 +179,16 @@ export const MaspShield = ({
         assetSelectorModalOpen={assetSelectorModalOpen}
         setAssetSelectorModalOpen={setAssetSelectorModalOpen}
       />
+      <div className="flex flex-row font-normal justify-center mt-10 gap-2">
+        <h4>Looking to Unshield tokens?</h4>
+        <Link
+          className="text-yellow underline"
+          to={`${routes.transfer}?${params.source}=${shieldedAddress || ""}&${params.destination}=${transparentAddress}`}
+          title={`View pending transactions`}
+        >
+          Click here.
+        </Link>
+      </div>
     </Panel>
   );
 };

apps/namadillo/src/App/Icons/TransferIcon.tsx

@@ -132,9 +132,7 @@ export const MaspUnshield = ({
 
   return (
     <Panel className="relative rounded-sm flex flex-col flex-1 pt-9">
-      <header className="flex flex-col text-yellow items-center text-center mb-8 gap-6">
-        Unshield Assets
-      </header>
+      <header className="text-center mb-8 gap-6">Unshield</header>
       <TransferModule
         source={{
           address: sourceAddress,

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

@@ -146,7 +146,7 @@ export const ShieldedFungibleTable = ({
           </ActionButton>
           <div key={`swap-${address}`} className="relative group/tooltip mr-5">
             <Link
-              to={`${routes.transfer}?${params.asset}=${address}&${params.shielded}=0`}
+              to={`${routes.transfer}?${params.asset}=${asset.symbol}&${params.source}=${shieldedAddress}`}
               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"