fix no wallet loader. default target chain to source. eliminate obsolete api requests

Author: pixelis0x

app/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "lint": "tsc --noEmit --skipLibCheck",
     "preview": "vite preview"
   },
   "dependencies": {

widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ensofinance/shortcuts-widget",
-  "version": "1.0.40",
+  "version": "1.0.41",
   "type": "module",
   "homepage": "https://www.enso.build/",
   "repository": {

widget/src/components/RouteIndication.tsx

@@ -8,9 +8,9 @@ import {
   HStack,
 } from "@chakra-ui/react";
 import { ChevronsRight } from "lucide-react";
-import { Address, isAddress } from "viem";
-import { RouteData } from "@ensofinance/sdk";
-import { Token, useTokenFromList } from "@/util/common";
+import { type Address, isAddress } from "viem";
+import { type RouteData } from "@ensofinance/sdk";
+import { type Token, useTokenFromList } from "@/util/common";
 import { useEnsoToken } from "@/util/enso";
 import { TokenIcon } from "@/components/TokenIndicator";
 

widget/src/components/SwapInput.tsx

@@ -2,13 +2,13 @@ import { useEffect, useState } from "react";
 import { useDebounce } from "@uidotdev/usehooks";
 import { Box, chakra, Flex, Skeleton, Text, Button } from "@chakra-ui/react";
 import { useAccount } from "wagmi";
-import { Address, isAddress } from "viem";
+import { type Address, isAddress } from "viem";
 import TokenSelector from "@/components/TokenSelector";
 import { formatNumber, formatUSD, normalizeValue } from "@/util";
 import { useTokenBalance } from "@/util/wallet";
 import { useEnsoToken } from "@/util/enso";
 import { SupportedChainId } from "@/constants";
-import { ProjectFilter } from "@/types";
+import { type ProjectFilter } from "@/types";
 
 const SwapInput = ({
   chainId,

widget/src/components/SwapWidget.tsx

@@ -11,7 +11,7 @@ import {
   Button,
 } from "@chakra-ui/react";
 import { ArrowDown, Fuel, TriangleAlert } from "lucide-react";
-import { Address, isAddress } from "viem";
+import { type Address, isAddress } from "viem";
 import { mainnet } from "viem/chains";
 import { Toaster } from "@/components/ui/toaster";
 import {
@@ -45,7 +45,7 @@ import { ClipboardLink, ClipboardRoot } from "@/components/ui/clipboard";
 import RouteIndication from "@/components/RouteIndication";
 import { Tooltip } from "@/components/ui/tooltip";
 import Slippage from "@/components/Slippage";
-import { NotifyType, ObligatedToken, WidgetComponentProps } from "@/types";
+import { NotifyType, ObligatedToken, type WidgetComponentProps } from "@/types";
 
 const BridgingFee = ({
   gasValue,
@@ -109,7 +109,7 @@ const SwapWidget = ({
   );
 
   const chainId = usePriorityChainId();
-  const { chainId: wagmiChainId } = useAccount();
+  const { chainId: wagmiChainId, address } = useAccount();
   const setOutChainId = useStore((state) => state.setTokenOutChainId);
   const outChainId = useStore((state) => state.tokenOutChainId ?? chainId);
   const obligatedChainId = useStore((state) => state.obligatedChainId);
@@ -143,8 +143,11 @@ const SwapWidget = ({
       if (chainId === wagmiChainId) {
         switchChain({ chainId: newChainId });
       }
+      if (!tokenOut) {
+        setOutChainId(newChainId);
+      }
     },
-    [wagmiChainId, chainId, setObligatedChainId, switchChain]
+    [wagmiChainId, chainId, switchChain, tokenOut]
   );
 
   // Notify parent of state changes when any relevant state changes
@@ -447,49 +450,53 @@ const SwapWidget = ({
           </Flex>
         </Box>
 
-        <Flex w={"full"} gap={4}>
-          {wrongChain ? (
-            <Button
-              size="lg"
-              borderRadius={"lg"}
-              colorPalette={"blue"}
-              onClick={() => switchChain({ chainId })}
-            >
-              Switch to {getChainName(chainId)}
-            </Button>
-          ) : (
-            approveNeeded && (
+        {address ? (
+          <Flex w={"full"} gap={4}>
+            {wrongChain ? (
               <Button
                 size="lg"
                 borderRadius={"lg"}
                 colorPalette={"blue"}
-                flex={1}
-                loading={approve.isLoading}
-                onClick={approve.write}
+                onClick={() => switchChain({ chainId })}
               >
-                Approve
+                Switch to {getChainName(chainId)}
               </Button>
-            )
-          )}
+            ) : (
+              approveNeeded && (
+                <Button
+                  size="lg"
+                  borderRadius={"lg"}
+                  colorPalette={"blue"}
+                  flex={1}
+                  loading={approve.isLoading}
+                  onClick={approve.write}
+                >
+                  Approve
+                </Button>
+              )
+            )}
 
-          <Tooltip content={swapWarning} disabled={!swapWarning}>
-            <Button
-              size="lg"
-              borderRadius={"lg"}
-              colorPalette={"blue"}
-              flex={1}
-              disabled={swapDisabled}
-              loading={sendTransaction.isLoading || routerLoading}
-              onClick={
-                needToAcceptWarning
-                  ? showPriceImpactWarning
-                  : sendTransaction.send
-              }
-            >
-              {chainId === outChainId ? "Swap" : "Bridge"}
-            </Button>
-          </Tooltip>
-        </Flex>
+            <Tooltip content={swapWarning} disabled={!swapWarning}>
+              <Button
+                size="lg"
+                borderRadius={"lg"}
+                colorPalette={"blue"}
+                flex={1}
+                disabled={swapDisabled}
+                loading={sendTransaction.isLoading || routerLoading}
+                onClick={
+                  needToAcceptWarning
+                    ? showPriceImpactWarning
+                    : sendTransaction.send
+                }
+              >
+                {chainId === outChainId ? "Swap" : "Bridge"}
+              </Button>
+            </Tooltip>
+          </Flex>
+        ) : (
+          <Text>Please connect your wallet</Text>
+        )}
 
         {error && (
           <Text color="red.500" fontSize="xs" mt={1}>

widget/src/components/TokenIndicator.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, Text } from "@chakra-ui/react";
-import { Token } from "@/util/common";
+import { type Token } from "@/util/common";
 import {
   MOCK_IMAGE_URL,
   SupportedChainId,

widget/src/components/TokenSelector.tsx

@@ -9,9 +9,9 @@ import {
   Box,
 } from "@chakra-ui/react";
 import { useMemo } from "react";
-import { Address, isAddress } from "viem";
+import { type Address, isAddress } from "viem";
 import { FixedSizeList as List } from "react-window";
-import { Token, useCurrentChainList } from "@/util/common";
+import { type Token, useCurrentChainList } from "@/util/common";
 import { formatNumber, normalizeValue } from "@/util";
 import { useEnsoBalances, useEnsoToken } from "@/util/enso";
 import { SupportedChainId } from "@/constants";
@@ -431,7 +431,6 @@ const TokenSelector = ({
                     key={token.address}
                     style={style}
                     borderRadius={"md"}
-                    _hover={{ background: "bg.subtle" }}
                   >
                     <DetailedTokenIndicator token={token as TokenWithBalance} />
                   </SelectItem>

widget/src/util/common.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useAccount } from "wagmi";
-import { Address, zeroAddress } from "viem";
+import { type Address, zeroAddress } from "viem";
 import {
   CHAINS_ETHERSCAN,
   CHAINS_NATIVE_TOKENS,
@@ -271,7 +271,7 @@ export const useOutChainId = () => {
 
 export const usePriorityChainId = (priorityChainId?: SupportedChainId) => {
   const obligatedChainId = useStore((state) => state.obligatedChainId);
-  const { chainId } = useAccount();
+  const { chainId = 1 } = useAccount();
 
   return priorityChainId ?? obligatedChainId ?? chainId;
 };

widget/src/util/enso.tsx

@@ -1,18 +1,16 @@
-import { Address } from "viem";
 import { useAccount } from "wagmi";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
 import {
   EnsoClient,
-  RouteParams,
-  BundleAction,
-  BundleParams,
+  type RouteParams,
+  type BundleAction,
+  type BundleParams,
   BundleActionType,
-  ProtocolData,
 } from "@ensofinance/sdk";
-import { isAddress } from "viem";
+import { type Address, isAddress } from "viem";
 import {
-  Token,
+  type Token,
   usePriorityChainId,
   useOutChainId,
   useTokenFromList,
@@ -315,13 +313,20 @@ export const useBundleData = (
   });
 };
 
+type UseEnsoDataResult = UseQueryResult<
+  Awaited<ReturnType<EnsoClient["getRouterData"]>>,
+  Error
+> & {
+  sendTransaction: ReturnType<typeof useSendEnsoTransaction>;
+};
+
 export const useEnsoData = (
   amountIn: string,
   tokenIn: Address,
   tokenOut: Address,
   slippage: number,
   onSuccess?: (hash: string) => void
-) => {
+): UseEnsoDataResult => {
   const { address = VITALIK_ADDRESS } = useAccount();
   const chainId = usePriorityChainId();
   const outChainId = useOutChainId();
@@ -375,13 +380,13 @@ export const useEnsoData = (
     tokens: [tokenToData],
   } = useEnsoToken({
     address: routerParams.tokenOut,
-    enabled: true,
+    enabled: isAddress(routerParams.tokenOut),
   });
   const {
     tokens: [tokenFromData],
   } = useEnsoToken({
     address: routerParams.tokenIn,
-    enabled: true,
+    enabled: isAddress(routerParams.tokenIn),
   });
 
   const swapTitle = `Purchase ${formatNumber(

widget/tsconfig.json

@@ -8,6 +8,7 @@
       "@/*": ["./src/*"]
     },
     "jsx": "react-jsx",
-    "declaration": true
+    "declaration": true,
+    "verbatimModuleSyntax": true
   }
 }