feat: update for blinking sync and tooltip addy (#2059)

Author: neocybereth

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

@@ -99,6 +99,7 @@ export const ShieldAllPanel = ({
             address={walletAddress}
             className="text-black px-2 py-1.5 border rounded-sm"
             displayFullAddress={true}
+            displayTooltip={false}
           />
           {isLoading ?
             <SkeletonLoading

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

@@ -42,11 +42,23 @@ export const SyncIndicator = (): JSX.Element => {
   const [indexerBlockHeight, setIndexerBlockHeight] = useState<number | null>(
     null
   );
+  const [showShieldedSync, setShowShieldedSync] = useState(false);
   const roundedProgress = useMemo(() => {
     // Only update when the progress changes by at least 1%
     return Math.min(Math.floor(shieldedProgress * 100), 100);
   }, [Math.floor(shieldedProgress * 100)]);
 
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | undefined;
+    if (isShieldedFetching && roundedProgress < 100) {
+      // wait 2.5 s before we allow the ring to appear
+      timeout = setTimeout(() => setShowShieldedSync(true), 2500);
+    } else {
+      setShowShieldedSync(false);
+    }
+    return () => clearTimeout(timeout);
+  }, [isShieldedFetching, roundedProgress]);
+
   const { errors } = syncStatus;
   const { services } = indexerServicesSyncStatus;
 
@@ -74,7 +86,7 @@ export const SyncIndicator = (): JSX.Element => {
 
   return (
     <div className="flex gap-10 px-2 py-3">
-      {roundedProgress < 100 && isShieldedFetching && (
+      {showShieldedSync && (
         <div className="relative group/tooltip">
           <div className="relative mt-1">
             <PulsingRing size="small" />

apps/namadillo/src/App/Transfer/SelectedWallet.tsx

@@ -9,6 +9,7 @@ type SelectedWalletProps = {
   className?: string;
   onClick?: () => void;
   displayFullAddress?: boolean;
+  displayTooltip?: boolean;
 };
 
 export const SelectedWallet = ({
@@ -17,6 +18,7 @@ export const SelectedWallet = ({
   address,
   className = "",
   displayFullAddress = false,
+  displayTooltip = true,
 }: SelectedWalletProps): JSX.Element => {
   if (!address) return <></>;
   return (
@@ -38,7 +40,7 @@ export const SelectedWallet = ({
       {address && (
         <WalletAddress
           address={address}
-          displayTooltip={false}
+          displayTooltip={displayTooltip}
           displayFullAddress={displayFullAddress}
         />
       )}

apps/namadillo/src/App/Transfer/TransferDestination.tsx

@@ -164,6 +164,7 @@ export const TransferDestination = ({
               <SelectedWallet
                 wallet={wallet}
                 address={customAddressActive ? address : walletAddress}
+                displayFullAddress={true}
               />
             )}
           </div>

apps/namadillo/src/App/Transfer/__tests__/SelectChainModal.test.tsx

@@ -24,9 +24,12 @@ describe("Component: SelectChainModal", () => {
     expect(screen.getByText("Namada")).toBeInTheDocument();
     expect(screen.getByText("TestChain")).toBeInTheDocument();
 
-    // Beginning and end of wallet address
-    expect(screen.getByText("cosmos1x", { exact: false })).toBeInTheDocument();
-    expect(screen.getByText("jqgh", { exact: false })).toBeInTheDocument();
+    // Truncated wallet address
+    expect(
+      screen.getByText("cosmos1x...yf0wjqgh", {
+        exact: false,
+      })
+    ).toBeInTheDocument();
 
     // Check for modal title
     expect(screen.getByText("Select Source Chain")).toBeInTheDocument();