Merge branch 'main' into eg/widgetv2-migration-guide

skip-mev · Nov 1, 2024 · e970731 · e970731
2 parents f2908c9 + 7653d2a
commit e970731
Show file tree

Hide file tree

Showing 18 changed files with 218 additions and 118 deletions.
diff --git a/packages/widget-v2/src/components/RenderWalletList.tsx b/packages/widget-v2/src/components/RenderWalletList.tsx
@@ -215,6 +215,9 @@ export const RenderWalletList = ({
         itemHeight={ITEM_HEIGHT + ITEM_GAP}
         renderItem={renderItem}
         itemKey={(item) => item.walletName}
+        empty={{
+          header: "No wallets available",
+        }}
       />
     );
   }, [

diff --git a/packages/widget-v2/src/components/VirtualList.tsx b/packages/widget-v2/src/components/VirtualList.tsx
@@ -1,7 +1,9 @@
 import List, { ListRef } from "rc-virtual-list";
 import { getHexColor, opacityToHex } from "@/utils/colors";
-import { useTheme } from "styled-components";
+import styled, { useTheme } from "styled-components";
 import { useEffect, useRef, useState } from "react";
+import { Column } from "./Layout";
+import { SmallText } from "./Typography";
 
 export type VirtualListProps<T> = {
   listItems: T[];
@@ -11,6 +13,11 @@ export type VirtualListProps<T> = {
   renderItem: (item: T, index: number) => React.ReactNode;
   itemKey: (item: T) => string;
   className?: string;
+  empty?: {
+    header?: string;
+    details?: string;
+    icon?: React.ReactNode;
+  };
 };
 
 export const VirtualList = <T,>({
@@ -20,6 +27,7 @@ export const VirtualList = <T,>({
   renderItem,
   itemKey,
   className,
+  empty,
 }: VirtualListProps<T>) => {
   const theme = useTheme();
   const [currentlyFocusedElement, setCurrentlyFocusedElement] = useState<HTMLElement>();
@@ -49,8 +57,8 @@ export const VirtualList = <T,>({
         event.preventDefault();
         const prevElement = currentlyFocusedElement?.previousElementSibling as HTMLElement;
         if (prevElement) {
-          prevElement.focus();
           setCurrentlyFocusedElement(prevElement);
+          prevElement.focus();
         }
       }
     };
@@ -67,6 +75,18 @@ export const VirtualList = <T,>({
     }, 0);
   }, [listItems.length]);
 
+  if (listItems.length === 0) {
+    return (
+      <StyledNoResultsContainer align="center" justify="center" >
+        <StyledEmptyContent gap={10}>
+          {empty?.icon}
+          <SmallText fontSize={22}>{empty?.header}</SmallText>
+          <StyledEmptyDetails>{empty?.details}</StyledEmptyDetails>
+        </StyledEmptyContent>
+      </StyledNoResultsContainer>
+    );
+  }
+
   return (
     <List
       ref={listRef}
@@ -91,3 +111,19 @@ export const VirtualList = <T,>({
     </List>
   );
 };
+
+const StyledNoResultsContainer = styled(Column)`
+  height: 100%;
+  width: 100%;
+`;
+
+const StyledEmptyContent = styled(Column)`
+  width: 50%;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+`;
+
+const StyledEmptyDetails = styled(SmallText)`
+  white-space: pre-line;
+`;
diff --git a/packages/widget-v2/src/hooks/useGetSourceBalance.ts b/packages/widget-v2/src/hooks/useGetSourceBalance.ts
@@ -15,6 +15,16 @@ export const useGetSourceBalance = () => {
     const { chainID, denom } = sourceAsset;
     if (!denom || !chainID) return;
 
+    const denomsExists = !!skipBalances?.chains?.[chainID]?.denoms;
+    const sourceBalance = skipBalances?.chains?.[chainID]?.denoms?.[denom];
+
+    if (denomsExists && sourceBalance === undefined) {
+      return {
+        amount: 0,
+        formattedAmount: "0",
+        error: undefined,
+      };
+    }
     return skipBalances?.chains?.[chainID]?.denoms?.[denom];
   }, [sourceAsset, sourceAccount, skipBalances]);
 

diff --git a/packages/widget-v2/src/icons/CogIcon.tsx b/packages/widget-v2/src/icons/CogIcon.tsx
@@ -1,14 +1,17 @@
 type IconProps = {
   color?: string;
+  height?: number;
+  width?: number;
 };
 
-export const CogIcon = ({ color = "currentColor" }: IconProps) => (
+export const CogIcon = ({ color = "currentColor", ...props }: IconProps) => (
   <svg
     width="10"
     height="10"
     viewBox="0 0 10 10"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
     <g opacity="0.5">
       <path

diff --git a/packages/widget-v2/src/modals/AssetAndChainSelectorModal/AssetAndChainSelectorModal.tsx b/packages/widget-v2/src/modals/AssetAndChainSelectorModal/AssetAndChainSelectorModal.tsx
@@ -115,7 +115,6 @@ export const AssetAndChainSelectorModal = createModal(
       setSearchQuery(term);
     };
 
-
     const renderItem = useCallback(
       (item: GroupedAsset | ChainWithAsset, index: number) => {
         return (
@@ -172,13 +171,12 @@ export const AssetAndChainSelectorModal = createModal(
             listItems={listOfAssetsOrChains ?? []}
             height={530}
             itemHeight={70}
-            itemKey={(item) => {
-              if (isGroupedAsset(item)) {
-                return `${item.id}`;
-              }
-              return `${item.chainID}-${item.asset.denom}`;
-            }}
+            itemKey={(item) => isGroupedAsset(item) ? item.id : `${item.chainID}-${item.asset.denom}`}
             renderItem={renderItem}
+            empty={{
+              header: selectedGroup ? "No networks found" : "No assets found",
+              details: selectedGroup ? "Looking for an asset? \n Select back to return to asset selection." : "Looking for a network? \n Select an asset first, then move to network selection.",
+            }}
           />
         )}
       </StyledContainer>

diff --git a/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteDetailedRow.tsx b/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteDetailedRow.tsx
@@ -162,7 +162,7 @@ export const SwapExecutionPageRouteDetailedRow = ({
               <StyledAssetAmount normalTextColor title={assetDetails?.amount}>
                 {assetDetails?.amount}
               </StyledAssetAmount>
-              <SmallText normalTextColor>{assetDetails?.symbol}</SmallText>
+              <StyledSymbol normalTextColor>{assetDetails?.symbol}</StyledSymbol>
               <StyledChainName title={assetDetails?.chainName}>
                 {" "}
                 on {assetDetails?.chainName}
@@ -203,6 +203,12 @@ const StyledButton = styled(Button)`
   align-items: center;
 `;
 
+const StyledSymbol = styled(SmallText)`
+  max-width: 90px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 const StyledChainImage = styled.img`
   border-radius: 50%;
   box-sizing: content-box;

diff --git a/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx b/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from "styled-components";
+import styled, { useTheme } from "styled-components";
 import { Link, Button } from "@/components/Button";
 import { Column, Row } from "@/components/Layout";
 import { SmallText, Text } from "@/components/Typography";
@@ -94,9 +94,9 @@ export const SwapExecutionPageRouteSimpleRow = ({
         </StyledAnimatedBorder>
       )}
       <Column gap={5}>
-        <Text fontSize={24}>
+        <StyledSymbolAndAmount>
           {limitDecimalsDisplayed(assetDetails.amount)} {assetDetails?.symbol}
-        </Text>
+        </StyledSymbolAndAmount>
         {usdValue && (
           <SmallText>
             {formatUSD(usdValue)}
@@ -137,3 +137,10 @@ export const SwapExecutionPageRouteSimpleRow = ({
     </Row>
   );
 };
+
+const StyledSymbolAndAmount = styled(Text)`
+  font-size: 24px;
+  max-width: 325px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
diff --git a/packages/widget-v2/src/pages/SwapExecutionPage/useSyncTxStatus.tsx b/packages/widget-v2/src/pages/SwapExecutionPage/useSyncTxStatus.tsx
@@ -39,15 +39,20 @@ export const useSyncTxStatus = ({
   const computedSwapStatus = useMemo(() => {
     if (!route?.operations || !route?.txsRequired) return;
 
+    if (statusData?.lastTxStatus === "pending") {
+      if (isPending) {
+        setOverallStatus("pending");
+      }
+      return "pending";
+    }
+
     if (transferEvents?.length === 0 && !statusData?.isSettled) {
       if (isPending) {
         setOverallStatus("signing");
       }
       return;
     }
-    if (statusData?.lastTxStatus === "pending") {
-      return "pending";
-    }
+
 
     if (!transferEvents) return;
 

diff --git a/packages/widget-v2/src/pages/SwapPage/ConnectedWalletContent.tsx b/packages/widget-v2/src/pages/SwapPage/ConnectedWalletContent.tsx
@@ -28,8 +28,9 @@ export const ConnectedWalletContent = () => {
   const connectedWalletModal = useModal(ConnectedWalletModal);
 
   const formattedBalance = useMemo(() => {
+    const symbol = sourceDetails?.symbol ? ` ${sourceDetails?.symbol}` : "";
     if (sourceBalance?.error?.message) return "--";
-    if (sourceBalance === undefined) return `0 ${sourceDetails?.symbol}`;
+    if (sourceBalance === undefined) return;
 
     const amount = sourceBalance?.amount;
     let formattedBalanceAmount = sourceBalance?.formattedAmount;
@@ -38,7 +39,8 @@ export const ConnectedWalletContent = () => {
       formattedBalanceAmount = amount;
     }
 
-    return `${limitDecimalsDisplayed(formattedBalanceAmount)} ${sourceDetails?.symbol}`;
+    return `${limitDecimalsDisplayed(formattedBalanceAmount)
+      }${symbol}`;
   }, [sourceBalance, sourceDetails?.symbol]);
   if (!sourceAccount) return null;
   return (

diff --git a/packages/widget-v2/src/pages/SwapPage/SwapDetailModal.tsx b/packages/widget-v2/src/pages/SwapPage/SwapDetailModal.tsx
@@ -176,8 +176,8 @@ export const SwapDetailModal = createModal((modalProps: ModalProps) => {
             <div style={{ position: "relative" }}>
               <CustomSlippageInput
                 type="number"
-                value={swapSettings.slippage}
                 selected={!SLIPPAGE_OPTIONS.includes(swapSettings.slippage)}
+                value={swapSettings.slippage}
                 onChange={(e) =>
                   setSlippage(parseFloat(e.target.value))
                 }

diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPageAssetChainInput.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPageAssetChainInput.tsx
@@ -3,7 +3,6 @@ import { Column, Row, Spacer } from "@/components/Layout";
 import { SmallText, SmallTextButton, Text } from "@/components/Typography";
 import { ChevronIcon } from "@/icons/ChevronIcon";
 import { useTheme } from "styled-components";
-import { CogIcon } from "@/icons/CogIcon";
 import { Button, GhostButton } from "@/components/Button";
 import { BigNumber } from "bignumber.js";
 import {
@@ -60,7 +59,8 @@ export const SwapPageAssetChainInput = ({
     latest = latest.replace(/[.]{2,}/g, "."); // Remove multiple decimals
     latest = latest.replace(/[,]{2,}/g, ","); // Remove multiple commas
 
-    onChangeValue?.(limitDecimalsDisplayed(formatNumberWithoutCommas(latest), assetDetails?.decimals))
+    const formattedValue = formatNumberWithoutCommas(latest)
+    onChangeValue?.(limitDecimalsDisplayed(formattedValue, assetDetails?.decimals));
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -191,7 +191,6 @@ export const SwapPageAssetChainInput = ({
         {assetDetails?.chainName ? (
           <GhostButton onClick={handleChangeChain} align="center" secondary gap={4}>
             <SmallText>on {assetDetails?.chainName}</SmallText>
-            <CogIcon color={theme.primary.text.normal} />
           </GhostButton>
         ) : (
           <Spacer />
@@ -220,6 +219,7 @@ const StyledInput = styled.input<{
   width: 100%;
   color: ${(props) => props.theme.primary.text.normal};
   background-color: ${(props) => props.theme.primary.background.normal};
+  height: 50px;
 
   ${(props) =>
     props.isWaitingToUpdateInputValue &&