Merge pull request #728 from skip-mev/sync-main-with-staging

Sync main with staging

.changeset/fast-actors-float.md

@@ -0,0 +1,5 @@
+---
+"@skip-go/widget": minor
+---
+
+graz is not a peer dependencies

.changeset/friendly-socks-drum.md

@@ -0,0 +1,5 @@
+---
+"@skip-go/widget": patch
+---
+
+fix mobile route config override bug

.changeset/little-clouds-agree.md

@@ -0,0 +1,5 @@
+---
+"@skip-go/widget": patch
+---
+
+Fix initialization of undefined source/dest amount

.changeset/modern-trainers-occur.md

@@ -0,0 +1,5 @@
+---
+"@skip-go/widget": patch
+---
+
+Remove importsNotUsedAsValues (export type) from build to fix issues with envs that don't recognize export type syntax

.changeset/tame-masks-shout.md

@@ -0,0 +1,5 @@
+---
+"@skip-go/widget": patch
+---
+
+Use smaller font for error messages

.changeset/warm-doors-obey.md

@@ -0,0 +1,5 @@
+---
+"@skip-go/widget": patch
+---
+
+fix image url issue in input search and error button text size

docs/widget/getting-started.mdx

@@ -27,15 +27,15 @@ Starting from scratch? It's recommended to use a React framework like [Next.js](
 npm install @skip-go/widget
 ```
 ```shell Yarn
-yarn add @skip-go/widget
+yarn add @tanstack/react-query viem wagmi
 ```
 </CodeGroup>
 <Info>
 If you're using `yarn` (or another package manager that doesn't install peer dependencies by default)
 you may need to install these peer dependencies as well:
 
 ```bash
-  yarn add @tanstack/react-query graz react react-dom viem wagmi
+  yarn add @tanstack/react-query viem wagmi
 ```
 </Info>
 </Step><Step title="Import the Widget Component">
@@ -56,7 +56,7 @@ const SwapPage = () => {
     >
       <Widget
         theme="light"
-        brandColor: '#FF4FFF'
+        brandColor="#FF4FFF"
       />
     </div>
   );

packages/client/package.json

@@ -35,7 +35,7 @@
     "@protobufs/gogoproto": "0.0.10",
     "@protobufs/google": "0.0.10",
     "@types/keccak": "3.0.4",
-    "chain-registry": "^1.69.102",
+    "chain-registry": "^1.69.106",
     "minimatch": "^9.0.3",
     "proxy-from-env": "^1.1.0",
     "vitest": "^1.2.2"

packages/widget/package.json

@@ -55,7 +55,7 @@
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
     "buffer": "^6.0.3",
-    "chain-registry": "^1.69.102",
+    "chain-registry": "^1.69.106",
     "eslint": "^9.9.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
@@ -82,16 +82,19 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.51.21",
-    "graz": "^0.1.30",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
     "viem": "^2.21.55",
     "wagmi": "^2.14.1"
   },
   "dependencies": {
-    "@cosmjs/cosmwasm-stargate": "^0.32.4",
-    "@cosmjs/math": "^0.32.4",
-    "@cosmjs/stargate": "^0.32.4",
+    "@cosmjs/amino": "0.31.3",
+    "@cosmjs/cosmwasm-stargate": "0.31.3",
+    "@cosmjs/launchpad": "*",
+    "@cosmjs/math": "^0.31.3",
+    "@cosmjs/proto-signing": "0.31.3",
+    "@cosmjs/stargate": "0.31.3",
+    "@cosmjs/tendermint-rpc": "0.31.3",
     "@ebay/nice-modal-react": "^1.2.13",
     "@eslint/compat": "^1.1.1",
     "@leapwallet/cosmos-social-login-capsule-provider": "^0.0.44",
@@ -116,6 +119,7 @@
     "@walletconnect/modal": "2.7.0",
     "@walletconnect/sign-client": "2.17.2",
     "@walletconnect/solana-adapter": "^0.0.6",
+    "graz": "^0.1.30",
     "jotai": "^2.10.1",
     "jotai-effect": "^1.0.2",
     "jotai-tanstack-query": "^0.8.6",

packages/widget/src/components/GroupedAssetImage.tsx

@@ -13,41 +13,46 @@ export type GroupedAssetImageType = {
 export const GroupedAssetImage = ({ groupedAsset, height, width }: GroupedAssetImageType) => {
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
 
-  if (!groupedAsset?.assets) return <img height={height} width={width} />;
+  if (!groupedAsset?.assets || groupedAsset.assets.length === 0) {
+    return <StyledAssetImage height={height} width={width} src="" alt="No asset" />;
+  }
+
   const allLogoURIs = [
     groupedAsset.assets.find((asset) => asset.logoURI?.includes("raw.githubusercontent"))?.logoURI,
     ...groupedAsset.assets.map((asset) => asset.logoURI),
   ].filter((uri): uri is string => !!uri);
 
   const dedupedLogoURIs = Array.from(new Set(allLogoURIs));
 
+  if (dedupedLogoURIs.length === 0) {
+    return <StyledAssetImage height={height} width={width} src="" alt="No valid URIs" />;
+  }
+
+  const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    if (
+      currentImageIndex >= dedupedLogoURIs.length - 1 ||
+      currentImageIndex >= MAX_NUMBER_OF_IMAGES_TO_CHECK
+    ) {
+      e.currentTarget.onerror = null; // Prevent infinite loops in weird scenarios.
+      return;
+    }
+    setCurrentImageIndex((prev) => prev + 1);
+  };
+
   return (
     <StyledAssetImage
       height={height}
       width={width}
-      src={dedupedLogoURIs[0]}
+      src={dedupedLogoURIs[currentImageIndex]}
       loading="lazy"
-      onError={(e) => {
-        if (
-          currentImageIndex === dedupedLogoURIs.length - 1 ||
-          currentImageIndex === MAX_NUMBER_OF_IMAGES_TO_CHECK
-        ) {
-          e.currentTarget.onerror = null;
-          return;
-        }
-        const nextIndex = currentImageIndex + 1;
-        const img = e.currentTarget;
-        img.src = dedupedLogoURIs[nextIndex];
-
-        setCurrentImageIndex(nextIndex);
-      }}
-      alt={`${groupedAsset.assets[0].recommendedSymbol} logo`}
+      onError={handleError}
+      alt={`${groupedAsset.assets[0].recommendedSymbol || ""} logo`}
     />
   );
 };
 
 const StyledAssetImage = styled.img`
   border-radius: 50%;
   object-fit: cover;
-  ${({ theme }) => `background: ${theme.secondary.background.hover};`};
+  ${({ theme }) => `background: ${theme.secondary.background.hover};`}
 `;

packages/widget/src/components/MainButton.tsx

@@ -18,6 +18,7 @@ export type MainButtonProps = {
   extra?: ReactNode;
   route?: RouteResponse;
   isGoFast?: boolean;
+  fontSize?: number;
 };
 
 type LoadingButtonProps = MainButtonProps & {};
@@ -33,6 +34,7 @@ export const MainButton = ({
   onClick,
   extra,
   isGoFast,
+  fontSize = 24,
 }: MainButtonProps) => {
   const theme = useTheme();
   backgroundColor ??= disabled ? theme.secondary.background.normal : theme.brandColor;
@@ -49,6 +51,7 @@ export const MainButton = ({
         loadingTimeString={loadingTimeString}
         extra={extra}
         isGoFast={isGoFast}
+        fontSize={fontSize}
       />
     );
   }
@@ -65,10 +68,12 @@ export const MainButton = ({
         {leftIcon ? (
           <Row align="center" gap={10}>
             <LeftIcon backgroundColor={textColor} color={backgroundColor} />
-            <MainButtonText color={textColor}>{label}</MainButtonText>
+            <MainButtonText color={textColor} fontSize={fontSize}>
+              {label}
+            </MainButtonText>
           </Row>
         ) : (
-          <MainButtonText capitalize color={textColor}>
+          <MainButtonText capitalize color={textColor} fontSize={fontSize}>
             {label}
           </MainButtonText>
         )}
@@ -85,6 +90,7 @@ export const LoadingButton = ({
   loadingTimeString,
   isGoFast,
   extra,
+  fontSize,
 }: LoadingButtonProps) => (
   <StyledLoadingButton
     align="center"
@@ -99,7 +105,9 @@ export const LoadingButton = ({
       padding={20}
       backgroundColor={backgroundColor}
     >
-      <MainButtonText style={{ opacity: 0.5 }}>{label}</MainButtonText>
+      <MainButtonText style={{ opacity: 0.5 }} fontSize={fontSize}>
+        {label}
+      </MainButtonText>
       {loadingTimeString && (
         <StyledTimeRemaining align="center" justify="center">
           {extra}
@@ -115,7 +123,6 @@ const MainButtonText = styled(Text).attrs({
   capitalize: true,
   letterSpacing: "-0.015em",
 })`
-  font-size: 24px;
   letter-spacing: -0.015em;
   @media (max-width: 767px) {
     font-size: 20px;

packages/widget/src/hooks/useCreateSolanaWallets.tsx

@@ -1,7 +1,7 @@
 import { solanaWallets } from "@/constants/solana";
 import { skipChainsAtom, skipAssetsAtom } from "@/state/skipClient";
 import { sourceAssetAtom } from "@/state/swapPage";
-import { MinimalWallet, evmWalletAtom, svmWalletAtom } from "@/state/wallets";
+import { MinimalWallet, svmWalletAtom } from "@/state/wallets";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useCallback } from "react";
 import { ChainType } from "@skip-go/client";
@@ -16,7 +16,6 @@ export const useCreateSolanaWallets = () => {
   const setSvmWallet = useSetAtom(svmWalletAtom);
   const callbacks = useAtomValue(callbacksAtom);
   const mobile = isMobile();
-  const evmWallet = useAtomValue(evmWalletAtom);
 
   const createSolanaWallets = useCallback(() => {
     const wallets: MinimalWallet[] = [];
@@ -121,6 +120,6 @@ export const useCreateSolanaWallets = () => {
       wallets.push(minimalWallet);
     }
     return wallets;
-  }, [setSvmWallet, chains, callbacks, assets, setSourceAsset, mobile, evmWallet]);
+  }, [setSvmWallet, chains, callbacks, assets, setSourceAsset, mobile]);
   return { createSolanaWallets };
 };

packages/widget/src/hooks/useMobileRouteConfig.ts

@@ -2,14 +2,16 @@ import { routeConfigAtom } from "@/state/route";
 import { useSetAtom } from "jotai";
 import { useEffect } from "react";
 import { useIsMobileScreenSize } from "./useIsMobileScreenSize";
+import { WidgetRouteConfig } from "@/widget/Widget";
 
 export const useMobileRouteConfig = () => {
   const isMobile = useIsMobileScreenSize();
   const setRouteConfig = useSetAtom(routeConfigAtom);
 
   useEffect(() => {
-    setRouteConfig({
-      allowMultiTx: !isMobile,
-    });
+      setRouteConfig((prev: WidgetRouteConfig) => ({
+        ...prev,
+        allowMultiTx: !isMobile,
+      }));
   }, [isMobile, setRouteConfig]);
 };

packages/widget/src/modals/AssetAndChainSelectorModal/AssetAndChainSelectorModal.tsx

@@ -152,7 +152,7 @@ export const AssetAndChainSelectorModal = createModal(
         <AssetAndChainSelectorModalSearchInput
           onSearch={handleSearch}
           onClickBack={onClickBack}
-          asset={groupedAssetSelected?.assets[0] || selectedAsset}
+          groupedAsset={groupedAssetSelected ?? selectedGroup}
           searchTerm={searchQuery}
           setSearchTerm={setSearchQuery}
           onKeyDown={onKeyDown}

packages/widget/src/modals/AssetAndChainSelectorModal/AssetAndChainSelectorModalSearchInput.tsx

@@ -11,25 +11,28 @@ import { Asset } from "@skip-go/client";
 import { StyledAssetLabel } from "@/pages/SwapPage/SwapPageAssetChainInput";
 import { useIsMobileScreenSize } from "@/hooks/useIsMobileScreenSize";
 import { isMobile } from "@/utils/os";
+import { GroupedAsset } from "./AssetAndChainSelectorModal";
+import { GroupedAssetImage } from "@/components/GroupedAssetImage";
 
 type AssetAndChainSelectorModalSearchInputProps = {
   onSearch: (term: string) => void;
   onClickBack: () => void;
-  asset?: Asset;
+  groupedAsset?: GroupedAsset;
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 };
 
 export const AssetAndChainSelectorModalSearchInput = ({
-  asset,
+  groupedAsset,
   onSearch,
   onClickBack,
   searchTerm,
   setSearchTerm,
   onKeyDown,
 }: AssetAndChainSelectorModalSearchInputProps) => {
   const theme = useTheme();
+  const asset = groupedAsset?.assets[0] as Asset;
   const isMobileScreenSize = useIsMobileScreenSize();
   const mobile = isMobile();
   const inputRef = useRef<HTMLInputElement>(null);
@@ -59,7 +62,7 @@ export const AssetAndChainSelectorModalSearchInput = ({
             <StyledLeftArrowIcon color={theme.primary.text.normal} />
           </Button>
           <StyledSelectedAsset gap={5} align="center" justify="center">
-            <img src={asset.logoURI} width={20} height={20} />
+            <GroupedAssetImage groupedAsset={groupedAsset} width={20} height={20} />
             <Text>{asset?.recommendedSymbol}</Text>
           </StyledSelectedAsset>
         </>

packages/widget/src/modals/SwapSettingsDrawer/SwapSettingsDrawer.tsx

@@ -163,6 +163,22 @@ export const SwapSettingsDrawer = createModal(() => {
       )}
       <RoutePreferenceSelector />
       <SlippageSelector />
+      <Row gap={10}>
+        <SmallText
+          as="a"
+          href="https://docs.skip.build/go/legal-and-privacy/terms-of-service"
+          target="_blank"
+        >
+          <u>Terms of Service</u>
+        </SmallText>
+        <SmallText
+          as="a"
+          href="https://docs.skip.build/go/legal-and-privacy/privacy-policy"
+          target="_blank"
+        >
+          <u>Privacy Policy</u>
+        </SmallText>
+      </Row>
       <SwapDetailText justify="space-between">
         <SwapPageFooterItems showRouteInfo />
       </SwapDetailText>

packages/widget/src/pages/SwapExecutionPage/SwapExecutionPage.tsx

@@ -108,7 +108,6 @@ export const SwapExecutionPage = () => {
     ) {
       return "pending";
     }
-
   }, [statusData, swapExecutionState]);
 
   const onClickEditDestinationWallet = useMemo(() => {

packages/widget/src/pages/SwapPage/SwapPage.tsx

@@ -206,7 +206,13 @@ export const SwapPage = () => {
     }
 
     if (isRouteError) {
-      return <MainButton label={routeError?.message ?? "No routes found"} disabled />;
+      return (
+        <MainButton
+          label={routeError?.message ?? "No routes found"}
+          disabled
+          fontSize={routeError?.message ? 18 : 24}
+        />
+      );
     }
     if (isLoadingBalances) {
       return <MainButton label="Fetching balances" loading icon={ICONS.swap} />;