Merge branch 'main' into FRE-974

skip-mev · Sep 13, 2024 · 36c8464 · 36c8464
2 parents e67f066 + 9030799
commit 36c8464
Show file tree

Hide file tree

Showing 9 changed files with 274 additions and 222 deletions.
diff --git a/docs/swagger.yml b/docs/swagger.yml
diff --git a/packages/widget-v2/src/components/Modal.tsx b/packages/widget-v2/src/components/Modal.tsx
@@ -1,4 +1,4 @@
-import { css, styled, useTheme } from "styled-components";
+import { css, styled } from "styled-components";
 import * as Dialog from "@radix-ui/react-dialog";
 import { ShadowDomAndProviders } from "@/widget/ShadowDomAndProviders";
 import NiceModal, { useModal as useNiceModal } from "@ebay/nice-modal-react";
@@ -73,7 +73,6 @@ export const useModal = <T extends ModalProps>(
   modal?: FC<T>,
   initialArgs?: Partial<T>
 ) => {
-  const theme = useTheme();
   const [numberOfModalsOpen, setNumberOfModalsOpen] = useAtom(
     numberOfModalsOpenAtom
   );
@@ -85,7 +84,6 @@ export const useModal = <T extends ModalProps>(
       ...modalInstance,
       show: (showArgs?: Partial<T & ModalProps>) => {
         modalInstance.show({
-          theme,
           stackedModal: numberOfModalsOpen > 0,
           ...showArgs,
         } as Partial<T>);
@@ -100,11 +98,11 @@ export const useModal = <T extends ModalProps>(
         modalInstance.hide();
       },
     }),
-    [modalInstance, setNumberOfModalsOpen, theme, numberOfModalsOpen]
+    [modalInstance, setNumberOfModalsOpen, numberOfModalsOpen]
   );
 };
 
-const StyledOverlay = styled(Dialog.Overlay)<{
+const StyledOverlay = styled(Dialog.Overlay) <{
   drawer?: boolean;
   invisible?: boolean;
 }>`

diff --git a/packages/widget-v2/src/components/ModalRowItem.tsx b/packages/widget-v2/src/components/ModalRowItem.tsx
@@ -38,7 +38,7 @@ export const ModalRowItem = ({
   );
 };
 
-const StyledModalRowItemContainer = styled(Row)<{ onClick?: () => void }>`
+const StyledModalRowItemContainer = styled(Row) <{ onClick?: () => void }>`
   ${removeButtonStyles};
   width: 100%;
   height: 60px;
@@ -49,7 +49,7 @@ const StyledModalRowItemContainer = styled(Row)<{ onClick?: () => void }>`
   ${({ onClick, theme }) =>
     onClick &&
     css`
-      &:hover {
+      &:hover, &:focus {
         background-color: ${theme.secondary.background.hover};
         cursor: pointer;
       }

diff --git a/packages/widget-v2/src/components/VirtualList.tsx b/packages/widget-v2/src/components/VirtualList.tsx
@@ -1,6 +1,7 @@
-import List from "rc-virtual-list";
+import List, { ListRef } from "rc-virtual-list";
 import { getHexColor, opacityToHex } from "@/utils/colors";
 import { useTheme } from "styled-components";
+import { useEffect, useRef, useState } from "react";
 
 export type VirtualListProps<T> = {
   listItems: T[];
@@ -21,9 +22,49 @@ export const VirtualList = <T,>({
   className,
 }: VirtualListProps<T>) => {
   const theme = useTheme();
+  const [currentlyFocusedElement, setCurrentlyFocusedElement] = useState<HTMLElement>();
+
+  const listRef = useRef<ListRef>(null);
+
+  useEffect(() => {
+    const listElement = listRef.current?.nativeElement;
+    const onFocus = (e) => {
+      setCurrentlyFocusedElement(e?.target);
+    };
+    listElement?.addEventListener("focusin", onFocus);
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        const nextElement = currentlyFocusedElement?.nextElementSibling as HTMLElement;
+        if (nextElement) {
+          nextElement.focus();
+          setCurrentlyFocusedElement(nextElement);
+        }
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const prevElement = currentlyFocusedElement?.previousElementSibling as HTMLElement;
+        if (prevElement) {
+          prevElement.focus();
+          setCurrentlyFocusedElement(prevElement);
+        }
+      }
+    };
+
+    if (listElement) {
+      listElement.focus(); // Focus the list for keyboard events
+      listElement.addEventListener("keydown", handleKeyDown);
+    }
+    return () => {
+      if (listElement) {
+        listElement.removeEventListener("keydown", handleKeyDown);
+      }
+    };
+  }, [currentlyFocusedElement, listItems.length]);
 
   return (
     <List
+      ref={listRef}
       data={listItems}
       height={height}
       itemHeight={itemHeight}

diff --git a/packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal.tsx b/packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal.tsx
@@ -24,21 +24,21 @@ export const TokenAndChainSelectorModal = createModal(
     const modal = useModal();
     const { onSelect, chainsContainingAsset, asset } = modalProps;
     const { data: assets, isLoading: isAssetsLoading } = useAtomValue(skipAssetsAtom);
-    const { isLoading: isChainsLoading } = useAtomValue(skipChainsAtom)
-    const isLoading = isAssetsLoading || isChainsLoading
+    const { isLoading: isChainsLoading } = useAtomValue(skipChainsAtom);
+    const isLoading = isAssetsLoading || isChainsLoading;
 
     const [showSkeleton, setShowSkeleton] = useState(true);
     const [searchQuery, setSearchQuery] = useState<string>("");
 
     const filteredAssets = useMemo(() => {
-      if (!assets) return
+      if (!assets) return;
       return matchSorter(assets, searchQuery, {
         keys: ["recommendedSymbol", "symbol", "denom"],
       });
     }, [assets, searchQuery]);
 
     const filteredChains = useMemo(() => {
-      if (!chainsContainingAsset) return
+      if (!chainsContainingAsset) return;
       return matchSorter(chainsContainingAsset, searchQuery, {
         keys: ["chainID", "chainName", "prettyName"],
       });
@@ -95,9 +95,9 @@ export const TokenAndChainSelectorModal = createModal(
             itemHeight={70}
             itemKey={(item) => {
               if (isClientAsset(item)) {
-                return `${item.denom}-${item.chainID}-${item.recommendedSymbol}`
+                return `${item.denom}-${item.chainID}-${item.recommendedSymbol}`;
               }
-              return `${item.chainID}-${item.asset?.denom}`
+              return `${item.chainID}-${item.asset?.denom}`;
             }}
             renderItem={renderItem}
           />

diff --git a/...ges/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalRowItem.tsx b/...ges/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalRowItem.tsx
@@ -6,6 +6,7 @@ import { CircleSkeletonElement, SkeletonElement } from "@/components/Skeleton";
 import { styled } from "styled-components";
 import { useAtomValue } from "jotai";
 import { Chain } from "@skip-go/client";
+import { useGetAssetDetails } from "@/hooks/useGetAssetDetails";
 
 export const isClientAsset = (
   item: ClientAsset | ChainWithAsset
@@ -32,38 +33,27 @@ export const TokenAndChainSelectorModalRowItem = ({
   skeleton,
   onSelect,
 }: TokenAndChainSelectorModalRowItemProps) => {
-  const { isLoading: isChainsLoading, data: chains } = useAtomValue(skipChainsAtom)
+  const { isLoading: isChainsLoading, data: chains } = useAtomValue(skipChainsAtom);
 
   if (!item || isChainsLoading) return skeleton;
 
   if (isClientAsset(item)) {
-    const chain = chains?.find((chain) => chain.chainID === item.chainID)
+    const chain = chains?.find((chain) => chain.chainID === item.chainID);
     return (
       <ModalRowItem
         key={`${index}${item.denom}`}
         onClick={() => onSelect(item)}
         style={{ margin: "5px 0" }}
         leftContent={
-          <Row align="center" gap={10}>
-            <StyledAssetImage
-              height={35}
-              width={35}
-              src={item.logoURI}
-              alt={`${item.symbol} logo`}
-            />
-            <Text>{item.symbol}</Text>
-            <SmallText>
-              {chain?.prettyName}
-            </SmallText>
-          </Row>
+          <TokenAndChainSelectorModalRowItemLeftContent asset={item} chain={chain} />
         }
       />
     );
   }
 
   if (isChainWithAsset(item)) {
 
-    const chain = chains?.find((chain) => chain.chainID === item.chainID)
+    const chain = chains?.find((chain) => chain.chainID === item.chainID);
     return (
       <ModalRowItem
         key={item.chainID}
@@ -86,6 +76,27 @@ export const TokenAndChainSelectorModalRowItem = ({
   }
 };
 
+const TokenAndChainSelectorModalRowItemLeftContent = ({ asset, chain }: { asset: ClientAsset, chain?: Chain }) => {
+  const assetDetails = useGetAssetDetails({
+    assetDenom: asset.denom,
+    chainId: asset.chainID,
+  });
+  return (
+    <Row align="center" gap={10}>
+      <StyledAssetImage
+        height={35}
+        width={35}
+        src={assetDetails.assetImage}
+        alt={`${assetDetails.symbol} logo`}
+      />
+      <Text>{assetDetails.symbol}</Text>
+      <SmallText>
+        {chain?.prettyName}
+      </SmallText>
+    </Row>
+  );
+};
+
 const StyledAssetImage = styled.img`
   border-radius: 50%;
   object-fit: cover;

diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx
@@ -16,6 +16,8 @@ import {
   sourceAssetAtom,
   destinationAssetAtom,
   swapDirectionAtom,
+  sourceAssetAmount,
+  destinationAssetAmount,
 } from "@/state/swapPage";
 import { TokenAndChainSelectorModal } from "@/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal";
 import { SwapPageSettings } from "./SwapPageSettings";
@@ -31,6 +33,8 @@ export const SwapPage = () => {
   const [container, setContainer] = useState<HTMLDivElement>();
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom);
+  const setSourceAssetAmount = useSetAtom(sourceAssetAmount);
+  const setDestinationAssetAmount = useSetAtom(destinationAssetAmount);
   const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom);
   const setSwapDirection = useSetAtom(swapDirectionAtom);
   const [{ data: assets }] = useAtom(skipAssetsAtom);
@@ -193,7 +197,7 @@ export const SwapPage = () => {
             handleChangeChain={handleChangeSourceChain}
             value={sourceAsset?.amount}
             onChangeValue={(newValue) => {
-              setSourceAsset((old) => ({ ...old, amount: newValue }));
+              setSourceAssetAmount(newValue);
               setSwapDirection("swap-in");
             }}
           />
@@ -205,7 +209,7 @@ export const SwapPage = () => {
             value={destinationAsset?.amount}
             priceChangePercentage={priceChangePercentage}
             onChangeValue={(newValue) => {
-              setDestinationAsset((old) => ({ ...old, amount: newValue }));
+              setDestinationAssetAmount(newValue);
               setSwapDirection("swap-out");
             }}
           />

diff --git a/packages/widget-v2/src/state/skipClient.ts b/packages/widget-v2/src/state/skipClient.ts
@@ -8,10 +8,8 @@ import {
 } from "@skip-go/client";
 import { atomWithQuery } from "jotai-tanstack-query";
 import { apiURL, endpointOptions } from "@/constants/skipClientDefault";
-import { destinationAssetAtom, routeAmountEffect, sourceAssetAtom, swapDirectionAtom } from "./swapPage";
+import { debouncedDestinationAssetAmount, debouncedSourceAssetAmount, destinationAssetAtom, routeAmountEffect, sourceAssetAtom, swapDirectionAtom } from "./swapPage";
 import { getAmountWei } from "@/utils/number";
-import { atomWithDebounce } from "@/utils/atomWithDebounce";
-import { atomEffect } from "jotai-effect";
 
 export const skipClientConfigAtom = atom<SkipClientOptions>({
   apiURL,
@@ -97,25 +95,19 @@ export const skipSwapVenuesAtom = atomWithQuery((get) => {
   };
 });
 
-const ROUTE_REQUEST_DEBOUNCE_DELAY = 500;
-
-export const { debouncedValueAtom: debouncedSkipRouteRequestAtom } = atomWithDebounce<RouteRequest | undefined>(
-  undefined,
-  ROUTE_REQUEST_DEBOUNCE_DELAY,
-);
-
-export const isWaitingForNewRouteRequestAtom = atom(false);
-
 const skipRouteRequestAtom = atom<RouteRequest | undefined>((get) => {
   const sourceAsset = get(sourceAssetAtom);
   const destinationAsset = get(destinationAssetAtom);
   const direction = get(swapDirectionAtom);
+  const sourceAssetAmount = get(debouncedSourceAssetAmount);
+  const destinationAssetAmount = get(debouncedDestinationAssetAmount);
+
   if (!sourceAsset?.chainID || !sourceAsset.denom || !destinationAsset?.chainID || !destinationAsset.denom) {
     return undefined;
   }
   const amount = direction === "swap-in"
-    ? { amountIn: getAmountWei(sourceAsset.amount, sourceAsset.decimals) || "0" }
-    : { amountOut: getAmountWei(destinationAsset.amount, destinationAsset.decimals) || "0" };
+    ? { amountIn: getAmountWei(sourceAssetAmount, sourceAsset.decimals) || "0" }
+    : { amountOut: getAmountWei(destinationAssetAmount, destinationAsset.decimals) || "0" };
 
   return {
     ...amount,
@@ -126,18 +118,11 @@ const skipRouteRequestAtom = atom<RouteRequest | undefined>((get) => {
   };
 });
 
-export const debouncedRouteRequestEffect = atomEffect((get, set) => {
-  const routeRequest = get(skipRouteRequestAtom);
-  set(isWaitingForNewRouteRequestAtom, true);
-  set(debouncedSkipRouteRequestAtom, routeRequest);
-});
-
 export const skipRouteAtom = atomWithQuery((get) => {
   const skip = get(skipClient);
-  const params = get(debouncedSkipRouteRequestAtom);
+  const params = get(skipRouteRequestAtom);
 
   get(routeAmountEffect);
-  get(debouncedRouteRequestEffect);
 
   return {
     queryKey: ["skipRoute", params],