Show tooltip icon no matter the toggle state (#573)

* Show tooltip icon no matter the toggle state

* Fixing various css bugs with cards

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

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

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>
   );
 };

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;

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>

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 {

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'