feat: move connect wallet button to the calculations view

Author: mateuszjasiuk

apps/namadillo/src/App/Swap/SwapCalculations.tsx

@@ -1,6 +1,8 @@
 import { ActionButton, Stack } from "@namada/components";
 import { mapUndefined } from "@namada/utils";
+import { ConnectProviderButton } from "App/Common/ConnectProviderButton";
 import { SelectAssetModal } from "App/Common/SelectAssetModal";
+import { SelectWalletModal } from "App/Common/SelectWalletModal";
 import { TransactionFeeButton } from "App/Common/TransactionFeeButton";
 import { SwapArrowsIcon } from "App/Icons/SwapArrowsIcon";
 import { defaultShieldedAccountAtom } from "atoms/accounts";
@@ -12,7 +14,9 @@ import { tokenPricesFamily } from "atoms/prices/atoms";
 import BigNumber from "bignumber.js";
 import { TransactionFeeProps, useTransactionFee } from "hooks";
 import { useAvailableAmountMinusFees } from "hooks/useAvailableAmountMinusFee";
+import { useWalletManager } from "hooks/useWalletManager";
 import { wallets } from "integrations";
+import { KeplrWalletManager } from "integrations/Keplr";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { NamadaAsset } from "types";
@@ -27,12 +31,17 @@ import {
   swapStatusAtom,
 } from "./state/atoms";
 
+const keplr = new KeplrWalletManager();
+
 export const SwapCalculations = (): JSX.Element => {
   // Local state
   const [sellAssetSelectorModalOpen, setSellAssetSelectorModalOpen] =
     useState(false);
   const [buyAssetSelectorModalOpen, setBuyAssetSelectorModalOpen] =
     useState(false);
+  const [showConnectToWalletButton, setShowConnectToWalletButton] =
+    useState(false);
+  const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false);
 
   // Feature state
   const [swapState, setSwapState] = useAtom(swapStateAtom);
@@ -57,6 +66,8 @@ export const SwapCalculations = (): JSX.Element => {
     quote,
   });
 
+  const { walletAddress, connectToChainId, registry } = useWalletManager(keplr);
+
   // Derived state
   const { sellAsset, buyAsset } = swapState;
   const availableAmount = mapUndefined(
@@ -73,6 +84,7 @@ export const SwapCalculations = (): JSX.Element => {
     sellAsset,
     buyAsset,
     availableAmountMinusFees,
+    walletAddress,
   });
 
   const balances = Object.entries(assetsWithBalance || {}).reduce(
@@ -170,20 +182,48 @@ export const SwapCalculations = (): JSX.Element => {
     [sortedAssets.length, buyAsset?.symbol, sellAsset?.symbol]
   );
 
+  useEffect(() => {
+    // Because of the current bug with connectedWallets, this prevents button flash
+    const handler = setTimeout(() => {
+      setShowConnectToWalletButton(!walletAddress);
+    }, 500);
+
+    return () => clearTimeout(handler);
+  }, [walletAddress]);
+
+  const onChangeWallet = useCallback((): void => {
+    if (registry) {
+      connectToChainId(registry.chain.chain_id);
+      return;
+    }
+    connectToChainId("osmosis-1");
+  }, []);
+
   return (
     <>
       <Stack>
-        <SwapSource
-          asset={sellAsset}
-          isLoadingAssets={false}
-          openAssetSelector={() => setSellAssetSelectorModalOpen(true)}
-          availableAmount={availableAmount}
-          availableAmountMinusFees={availableAmountMinusFees}
-          amount={swapState.sellAmount}
-          onChangeAmount={onChangeSellAmount}
-          isSubmitting={false}
-          label="Sell"
-        />
+        <div className="relative">
+          <SwapSource
+            asset={sellAsset}
+            isLoadingAssets={false}
+            openAssetSelector={() => setSellAssetSelectorModalOpen(true)}
+            availableAmount={availableAmount}
+            availableAmountMinusFees={availableAmountMinusFees}
+            amount={swapState.sellAmount}
+            onChangeAmount={onChangeSellAmount}
+            isSubmitting={false}
+            label="Sell"
+          />
+          {showConnectToWalletButton && (
+            <div className="absolute top-4 right-4 h-[30px]">
+              <ConnectProviderButton
+                onClick={() => {
+                  setWalletSelectorModalOpen(true);
+                }}
+              />
+            </div>
+          )}
+        </div>
         <i
           className="flex items-center justify-center w-13 mx-auto relative z-10 -my-8 cursor-pointer duration-300 hover:rotate-180 transition-transform ease-in-out"
           onClick={onSwapArrowsClick}
@@ -248,6 +288,13 @@ export const SwapCalculations = (): JSX.Element => {
           wallet={wallets.namada}
         />
       )}
+      {walletSelectorModalOpen && (
+        <SelectWalletModal
+          availableWallets={[wallets.keplr]}
+          onClose={() => setWalletSelectorModalOpen(false)}
+          onConnect={onChangeWallet}
+        />
+      )}
     </>
   );
 };
@@ -309,8 +356,10 @@ const SwapCalculationsFooter = ({
 const ValidationMessages: Record<string, string> = {
   NoSellAssetSelected: "Select a token to sell",
   NoBuyAssetSelected: "Select a token to buy",
-  SellAmountIsZero: "Enter an amount to sell",
-  BuyAmountIsZero: "Enter an amount to buy",
+  SwapModeNone: "Enter an amount to swap",
+  SellAmountIsZero: "Calculating amount to sell",
+  BuyAmountIsZero: "Calculating amount to buy",
   SellAmountExceedsBalance: "Insufficient balance",
+  NoWalletConnected: "Connect Keplr Wallet",
   Ok: "Review",
 };

apps/namadillo/src/App/Swap/SwapReview.tsx

@@ -1,23 +1,20 @@
 import { ActionButton, Stack, Text } from "@namada/components";
-import { ConnectProviderButton } from "App/Common/ConnectProviderButton";
 import { CurrentStatus } from "App/Common/CurrentStatus";
 import { IconTooltip } from "App/Common/IconTooltip";
 import { InlineError } from "App/Common/InlineError";
 import { LedgerDeviceTooltip } from "App/Common/LedgerDeviceTooltip";
-import { SelectWalletModal } from "App/Common/SelectWalletModal";
 import { WalletAddress } from "App/Common/WalletAddress";
 import { SwapTradeIcon } from "App/Icons/SwapTradeIcon";
 import { ledgerStatusDataAtom } from "atoms/ledger";
 import { tokenPricesFamily } from "atoms/prices/atoms";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
 import { useWalletManager } from "hooks/useWalletManager";
-import { wallets } from "integrations";
 import { KeplrWalletManager } from "integrations/Keplr";
 import { getAssetImageUrl } from "integrations/utils";
 import invariant from "invariant";
 import { useAtom, useAtomValue } from "jotai";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback } from "react";
 import { BsQuestionCircleFill } from "react-icons/bs";
 import { toDisplayAmount } from "utils";
 import { usePerformOsmosisSwapTx } from "./hooks/usePerformOsmosisSwapTx";
@@ -28,11 +25,6 @@ import { SLIPPAGE } from "./state/functions";
 
 const keplr = new KeplrWalletManager();
 export const SwapReview = (): JSX.Element => {
-  // Local state
-  const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false);
-  const [showConnectToWalletButton, setShowConnectToWalletButton] =
-    useState(false);
-
   // Feature state  sanity checks
   const [status, setStatus] = useAtom(swapStatusAtom);
   const swapState = useAtomValue(swapStateAtom);
@@ -79,23 +71,7 @@ export const SwapReview = (): JSX.Element => {
     : fiatFee.lt(0.01) ? "<$0.01"
     : `~$${fiatFee.toString()}`;
 
-  const { walletAddress, connectToChainId, registry } = useWalletManager(keplr);
-  useEffect(() => {
-    // Because of the current bug with connectedWallets, this prevents button flash
-    const handler = setTimeout(() => {
-      setShowConnectToWalletButton(!walletAddress);
-    }, 500);
-
-    return () => clearTimeout(handler);
-  }, [walletAddress]);
-
-  const onChangeWallet = useCallback((): void => {
-    if (registry) {
-      connectToChainId(registry.chain.chain_id);
-      return;
-    }
-    connectToChainId("osmosis-1");
-  }, []);
+  const { walletAddress } = useWalletManager(keplr);
 
   const { error: _err, performSwap } = usePerformOsmosisSwapTx();
   const onSwap = useCallback(async (): Promise<void> => {
@@ -114,18 +90,7 @@ export const SwapReview = (): JSX.Element => {
     <>
       <Stack>
         <div className="relative bg-neutral-800 rounded-lg px-4 py-5 border border-yellow font-light">
-          <Stack direction="horizontal" className="justify-between">
-            <Text className="mt-0">Review Shielded Swap</Text>
-            {showConnectToWalletButton && (
-              <div className="h-[30px]">
-                <ConnectProviderButton
-                  onClick={() => {
-                    setWalletSelectorModalOpen(true);
-                  }}
-                />
-              </div>
-            )}
-          </Stack>
+          <Text className="mt-0">Review Shielded Swap</Text>
           <Stack direction="horizontal">
             <span>
               <img
@@ -260,13 +225,6 @@ export const SwapReview = (): JSX.Element => {
           </ActionButton>
         )}
       </Stack>
-      {walletSelectorModalOpen && (
-        <SelectWalletModal
-          availableWallets={[wallets.keplr]}
-          onClose={() => setWalletSelectorModalOpen(false)}
-          onConnect={onChangeWallet}
-        />
-      )}
     </>
   );
 };

apps/namadillo/src/App/Swap/hooks/useSwapValidation.tsx

@@ -8,29 +8,34 @@ export const useSwapValidation = ({
   buyAsset,
   sellAsset,
   availableAmountMinusFees,
+  walletAddress,
 }: {
   swapState: SwapState;
   buyAsset?: NamadaAsset;
   sellAsset?: NamadaAsset;
   availableAmountMinusFees?: BigNumber;
+  walletAddress?: string;
 }): string => {
   return useMemo(() => {
     if (!sellAsset) {
       return "NoSellAssetSelected";
     } else if (!buyAsset) {
       return "NoBuyAssetSelected";
+    } else if (swapState.mode === "none") {
+      return "SwapModeNone";
     } else if (!swapState.sellAmount || swapState.sellAmount.isZero()) {
       return "SellAmountIsZero";
     } else if (!swapState.buyAmount || swapState.buyAmount.isZero()) {
       return "BuyAmountIsZero";
-    }
-    if (
+    } else if (
       !availableAmountMinusFees ||
       (swapState.sellAmount &&
         availableAmountMinusFees &&
         swapState.sellAmount.gt(availableAmountMinusFees))
     ) {
       return "SellAmountExceedsBalance";
+    } else if (!walletAddress) {
+      return "NoWalletConnected";
     } else {
       return "Ok";
     }
@@ -39,5 +44,6 @@ export const useSwapValidation = ({
     buyAsset?.address,
     swapState.sellAmount,
     swapState.buyAmount,
+    walletAddress,
   ]);
 };