From 70850536daf028ff8d2ea608dba634c6f7bcbcc4 Mon Sep 17 00:00:00 2001
From: Gabe Rodriguez <grod220@gmail.com>
Date: Mon, 26 Feb 2024 14:00:57 +0100
Subject: [PATCH] Show tooltip icon no matter the toggle state (#573)

* Show tooltip icon no matter the toggle state

* Fixing various css bugs with cards
---
 .../src/components/dashboard/layout.tsx       |  4 +--
 apps/webapp/src/components/send/layout.tsx    | 11 ++++---
 apps/webapp/src/components/swap/layout.tsx    | 15 ++++------
 .../src/components/swap/swap-loader.tsx       |  2 +-
 .../src/components/swap/unclaimed-swaps.tsx   | 17 +++++++----
 apps/webapp/src/state/swap.ts                 |  2 +-
 packages/ui/components/ui/select-account.tsx  | 30 +++++++++----------
 7 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/apps/webapp/src/components/dashboard/layout.tsx b/apps/webapp/src/components/dashboard/layout.tsx
index 1e854a4026..5a48c894e0 100644
--- a/apps/webapp/src/components/dashboard/layout.tsx
+++ b/apps/webapp/src/components/dashboard/layout.tsx
@@ -13,9 +13,9 @@ export const DashboardLayout = () => {
     <div className='grid gap-6 md:gap-4 lg:grid-cols-3 xl:gap-5'>
       <Card
         gradient
-        className='order-2 flex-1 p-5 md:p-4 lg:order-1 lg:col-span-2 lg:row-span-2 xl:p-5'
+        className='order-2 flex flex-1 flex-col p-5 md:p-4 lg:order-1 lg:col-span-2 lg:row-span-2 xl:p-5'
       >
-        <Tabs tabs={dashboardTabs} activeTab={pathname} className='mx-auto w-[75%] lg:w-[372px]' />
+        <Tabs tabs={dashboardTabs} activeTab={pathname} className='mx-auto w-full md:w-[70%]' />
         <Outlet />
       </Card>
       <EduInfoCard
diff --git a/apps/webapp/src/components/send/layout.tsx b/apps/webapp/src/components/send/layout.tsx
index 223a1e32d8..b0b1a21d2f 100644
--- a/apps/webapp/src/components/send/layout.tsx
+++ b/apps/webapp/src/components/send/layout.tsx
@@ -12,12 +12,11 @@ export const SendLayout = () => {
   return (
     <div className='grid gap-6 md:grid-cols-2 md:gap-4 xl:grid-cols-3 xl:gap-5'>
       <div className='hidden xl:order-1 xl:block' />
-      <Card gradient className='order-2 row-span-2 flex-1 p-5 md:order-1 md:p-4 xl:p-5'>
-        <Tabs
-          tabs={sendTabs}
-          activeTab={pathname}
-          className='mx-auto flex w-[75%] lg:min-w-[300px]'
-        />
+      <Card
+        gradient
+        className='order-2 row-span-2 flex flex-1 flex-col p-5 md:order-1 md:p-4 xl:p-5'
+      >
+        <Tabs tabs={sendTabs} activeTab={pathname} />
         <Outlet />
       </Card>
       <EduInfoCard
diff --git a/apps/webapp/src/components/swap/layout.tsx b/apps/webapp/src/components/swap/layout.tsx
index 39a04b2bcf..5a9a888560 100644
--- a/apps/webapp/src/components/swap/layout.tsx
+++ b/apps/webapp/src/components/swap/layout.tsx
@@ -7,18 +7,13 @@ import { UnclaimedSwaps } from './unclaimed-swaps';
 export const SwapLayout = () => {
   return (
     <div className='grid gap-6 md:grid-cols-2 md:gap-4 xl:grid-cols-3 xl:gap-5'>
-      <div className='xl:order-1 xl:block'>
-        <UnclaimedSwaps />
-      </div>
-      <Card gradient className='order-2 row-span-2 flex-1 p-5 md:order-1 md:p-4 xl:p-5'>
+      <UnclaimedSwaps />
+      <Card gradient className='order-3 row-span-2 flex-1 p-5 md:order-1 md:p-4 xl:p-5'>
         <SwapForm />
       </Card>
-      <EduInfoCard
-        className='order-1 md:order-2'
-        src='./swap-icon.svg'
-        label='Shielded Swap'
-        content={EduPanel.SWAP}
-      />
+      <div className='md:order-2'>
+        <EduInfoCard src='./swap-icon.svg' label='Shielded Swap' content={EduPanel.SWAP} />
+      </div>
     </div>
   );
 };
diff --git a/apps/webapp/src/components/swap/swap-loader.tsx b/apps/webapp/src/components/swap/swap-loader.tsx
index d7fc99977e..5594aab2ae 100644
--- a/apps/webapp/src/components/swap/swap-loader.tsx
+++ b/apps/webapp/src/components/swap/swap-loader.tsx
@@ -9,7 +9,7 @@ import { viewClient } from '../../clients/grpc';
 import { getSwapAsset1, getSwapAsset2, uint8ArrayToBase64 } from '@penumbra-zone/types';
 import { localAssets } from '@penumbra-zone/constants';
 
-interface UnclaimedSwapsWithMetadata {
+export interface UnclaimedSwapsWithMetadata {
   swap: SwapRecord;
   asset1: Metadata;
   asset2: Metadata;
diff --git a/apps/webapp/src/components/swap/unclaimed-swaps.tsx b/apps/webapp/src/components/swap/unclaimed-swaps.tsx
index db8c126080..21eebc47ee 100644
--- a/apps/webapp/src/components/swap/unclaimed-swaps.tsx
+++ b/apps/webapp/src/components/swap/unclaimed-swaps.tsx
@@ -1,20 +1,27 @@
 import { Button, Card } from '@penumbra-zone/ui';
 import { useLoaderData, useRevalidator } from 'react-router-dom';
-import { SwapLoaderResponse } from './swap-loader';
+import { SwapLoaderResponse, UnclaimedSwapsWithMetadata } from './swap-loader';
 import { AssetIcon } from '@penumbra-zone/ui/components/ui/tx/view/asset-icon';
 import { getSwapRecordCommitment, uint8ArrayToBase64 } from '@penumbra-zone/types';
 import { useStore } from '../../state';
 import { unclaimedSwapsSelector } from '../../state/unclaimed-swaps';
 
 export const UnclaimedSwaps = () => {
+  const { unclaimedSwaps } = useLoaderData() as SwapLoaderResponse;
+
+  return !unclaimedSwaps.length ? (
+    <div className='hidden xl:block'></div>
+  ) : (
+    <_UnclaimedSwaps unclaimedSwaps={unclaimedSwaps}></_UnclaimedSwaps>
+  );
+};
+
+const _UnclaimedSwaps = ({ unclaimedSwaps }: { unclaimedSwaps: UnclaimedSwapsWithMetadata[] }) => {
   const { revalidate } = useRevalidator();
   const { claimSwap, isInProgress } = useStore(unclaimedSwapsSelector);
 
-  const { unclaimedSwaps } = useLoaderData() as SwapLoaderResponse;
-  if (!unclaimedSwaps.length) return <></>;
-
   return (
-    <Card className=''>
+    <Card className='order-1 md:order-3 xl:order-1'>
       <p className='bg-text-linear bg-clip-text font-headline text-xl font-semibold leading-[30px] text-transparent md:text-2xl md:font-bold md:leading-9'>
         Unclaimed Swaps
       </p>
diff --git a/apps/webapp/src/state/swap.ts b/apps/webapp/src/state/swap.ts
index cfa6f6114c..be30f17acf 100644
--- a/apps/webapp/src/state/swap.ts
+++ b/apps/webapp/src/state/swap.ts
@@ -26,7 +26,7 @@ import { BigNumber } from 'bignumber.js';
 import { getAddressByIndex } from '../fetchers/address';
 import { StateCommitment } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/crypto/tct/v1/tct_pb';
 import { simulateSwapOutput } from '../fetchers/simulate';
-import { TransactionToast, errorToast } from '@penumbra-zone/ui';
+import { errorToast, TransactionToast } from '@penumbra-zone/ui';
 import { Transaction } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/transaction/v1/transaction_pb';
 
 export interface SwapSlice {
diff --git a/packages/ui/components/ui/select-account.tsx b/packages/ui/components/ui/select-account.tsx
index c26e6d8dba..ba2a49c27d 100644
--- a/packages/ui/components/ui/select-account.tsx
+++ b/packages/ui/components/ui/select-account.tsx
@@ -115,22 +115,20 @@ export const SelectAccount = ({ getAddrByIndex }: SelectAccountProps) => {
             <div className='flex items-center gap-2'>
               <IncognitoIcon fill='#BDB8B8' />
               <p className='mt-1 font-bold'>IBC Deposit Address</p>
-              {ephemeral && (
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <InfoIcon className='size-4 cursor-pointer text-muted-foreground hover:text-[#8D5728]' />
-                    </TooltipTrigger>
-                    <TooltipContent className='w-[250px]'>
-                      <p>
-                        IBC transfers into Penumbra post the destination address in public on the
-                        source chain. Use this randomized IBC deposit address to preserve privacy
-                        when transferring funds into Penumbra.
-                      </p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              )}
+              <TooltipProvider delayDuration={0}>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <InfoIcon className='size-4 cursor-pointer text-muted-foreground hover:text-[#8D5728]' />
+                  </TooltipTrigger>
+                  <TooltipContent className='w-[250px]'>
+                    <p>
+                      IBC transfers into Penumbra post the destination address in public on the
+                      source chain. Use this randomized IBC deposit address to preserve privacy when
+                      transferring funds into Penumbra.
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </div>
             <Switch
               id='address-mode'