[FRE-951, FRE-952]refactor(widget-v2): remove chain registry usage for chain data

packages/widget-v2/package.json

@@ -60,6 +60,7 @@
     "jotai": "^2.9.1",
     "jotai-tanstack-query": "^0.8.6",
     "lodash.debounce": "^4.0.8",
+    "match-sorter": "^6.3.4",
     "pluralize": "^8.0.0",
     "rc-virtual-list": "^3.14.5",
     "react-error-boundary": "^4.0.13",

packages/widget-v2/src/components/AssetChainInput.tsx

@@ -6,7 +6,7 @@ import { useTheme } from "styled-components";
 import { CogIcon } from "@/icons/CogIcon";
 import { Button, GhostButton } from "@/components/Button";
 import { useAtom } from "jotai";
-import { skipAssets } from "@/state/skipClient";
+import { skipAssetsAtom, skipChainsAtom } from "@/state/skipClient";
 import { useUsdValue } from "@/utils/useUsdValue";
 import { formatUSD } from "@/utils/intl";
 
@@ -26,12 +26,17 @@ export const AssetChainInput = ({
   handleChangeChain,
 }: AssetChainInputProps) => {
   const theme = useTheme();
-  const [{ data: assets }] = useAtom(skipAssets);
+  const [{ data: assets }] = useAtom(skipAssetsAtom);
+  const [{ data: chains }] = useAtom(skipChainsAtom)
 
   const selectedAsset = assets?.find(
     (asset) => asset.denom === selectedAssetDenom
   );
 
+  const selectedChain = chains?.find(
+    (chain) => chain.chainID === selectedAsset?.chainID
+  );
+
   const usdValue = useUsdValue({ ...selectedAsset, value });
 
   return (
@@ -50,7 +55,7 @@ export const AssetChainInput = ({
           {selectedAsset ? (
             <StyledAssetLabel align="center" justify="center" gap={7}>
               <img src={selectedAsset?.logoURI} width={23} />
-              <Text>{selectedAsset?.name}</Text>
+              <Text>{selectedAsset?.recommendedSymbol}</Text>
             </StyledAssetLabel>
           ) : (
             <StyledSelectTokenLabel>
@@ -73,7 +78,7 @@ export const AssetChainInput = ({
             secondary
             gap={4}
           >
-            <SmallText>on {selectedAsset?.chainName}</SmallText>
+            <SmallText>on {selectedChain?.prettyName}</SmallText>
             <CogIcon color={theme.primary.text.normal} />
           </GhostButton>
         ) : (

packages/widget-v2/src/modals/ManualAddressModal/ManualAddressModal.tsx

@@ -12,18 +12,18 @@ import { WALLET_LIST } from "@/modals/WalletSelectorModal/WalletSelectorFlow";
 import { Button } from "@/components/Button";
 import { SmallText, Text } from "@/components/Typography";
 import { destinationAssetAtom, destinationWalletAtom } from "@/state/swapPage";
-import { useAtom } from "jotai";
-import { getChain } from "@/state/skipClient";
+import { useAtom, useAtomValue } from "jotai";
+import { skipChainsAtom } from "@/state/skipClient";
 
 export const ManualAddressModal = createModal((modalProps: ModalProps) => {
   const { theme } = modalProps;
   const modal = useModal();
   const [destinationAsset] = useAtom(destinationAssetAtom);
   const [, setDestinationWallet] = useAtom(destinationWalletAtom);
-  const chain = getChain(destinationAsset?.chainID ?? "");
-  const chainName = destinationAsset?.chainName;
-  const chainImage = chain.images?.find((image) => image.svg ?? image.png);
-  const chainLogo = chainImage?.svg ?? chainImage?.png;
+  const { data: chains } = useAtomValue(skipChainsAtom);
+  const chain = chains?.find(c => c.chainID === destinationAsset?.chainID)
+  const chainName = chain?.prettyName
+  const chainLogo = chain?.logoURI
   const [showManualAddressInput, setShowManualAddressInput] = useState(false);
   const [manualWalletAddress, setManualWalletAddress] = useState("");
 
@@ -63,7 +63,7 @@ export const ManualAddressModal = createModal((modalProps: ModalProps) => {
       {showManualAddressInput ? (
         <StyledContainer gap={15}>
           <RenderWalletListHeader
-            title={`Enter a ${chainName} wallet address`}
+            title={`Enter a ${chainName} address`}
             onClickBackButton={() => setShowManualAddressInput(false)}
             rightContent={() => (
               <StyledChainLogoContainerRow align="center" justify="center">
@@ -155,8 +155,8 @@ const StyledAddressValidatorDot = styled.div<{ validAddress?: boolean }>`
     validAddress === true
       ? `background-color: ${theme.success.text}`
       : validAddress === false
-      ? `background-color: ${theme.error.text}`
-      : ""};
+        ? `background-color: ${theme.error.text}`
+        : ""};
 
   top: calc(50% - 11px / 2);
   right: 20px;

packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal.tsx

@@ -1,16 +1,17 @@
 import { createModal, ModalProps, useModal } from "@/components/Modal";
 import { Column } from "@/components/Layout";
 import { styled } from "styled-components";
-import { useAtom } from "jotai";
-import { ChainWithAsset, ClientAsset, skipAssets } from "@/state/skipClient";
+import { useAtomValue } from "jotai";
+import { ChainWithAsset, ClientAsset, skipAssetsAtom, skipChainsAtom } from "@/state/skipClient";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { VirtualList } from "@/components/VirtualList";
 import {
-  isChainWithAsset,
   TokenAndChainSelectorModalRowItem,
   Skeleton,
+  isClientAsset,
 } from "./TokenAndChainSelectorModalRowItem";
 import { TokenAndChainSelectorModalSearchInput } from "./TokenAndChainSelectorModalSearchInput";
+import { matchSorter } from "match-sorter";
 
 export type TokenAndChainSelectorModalProps = ModalProps & {
   onSelect: (token: ClientAsset | null) => void;
@@ -22,37 +23,36 @@ export const TokenAndChainSelectorModal = createModal(
   (modalProps: TokenAndChainSelectorModalProps) => {
     const modal = useModal();
     const { onSelect, chainsContainingAsset, asset } = modalProps;
-    const [{ data: assets, isPending }] = useAtom(skipAssets);
+    const { data: assets, isLoading: isAssetsLoading } = useAtomValue(skipAssetsAtom);
+    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;
-      const filtered = assets.filter((asset) =>
-        asset.symbol?.toLowerCase().includes(searchQuery.toLowerCase())
-      );
-      return filtered;
-    }, [searchQuery, assets]);
+      if (!assets) return
+      return matchSorter(assets, searchQuery, {
+        keys: ["recommendedSymbol", "symbol", "denom"],
+      });
+    }, [assets, searchQuery]);
 
     const filteredChains = useMemo(() => {
-      if (!chainsContainingAsset) return;
-      const filtered = chainsContainingAsset.filter(
-        (chain) =>
-          chain.chain_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-          chain.pretty_name?.toLowerCase().includes(searchQuery.toLowerCase())
-      );
-      return filtered;
-    }, [searchQuery, chainsContainingAsset]);
+      if (!chainsContainingAsset) return
+      return matchSorter(chainsContainingAsset, searchQuery, {
+        keys: ["chainID", "chainName", "prettyName"],
+      });
+    }, [chainsContainingAsset, searchQuery]);
+
 
     useEffect(() => {
-      if (!isPending && assets) {
+      if (!isLoading && assets) {
         const timer = setTimeout(() => {
           setShowSkeleton(false);
         }, 100);
         return () => clearTimeout(timer);
       }
-    }, [isPending, assets]);
+    }, [isLoading, assets]);
 
     useEffect(() => {
       setSearchQuery("");
@@ -93,13 +93,13 @@ export const TokenAndChainSelectorModal = createModal(
             listItems={filteredChains ?? filteredAssets ?? []}
             height={530}
             itemHeight={70}
-            renderItem={renderItem}
             itemKey={(item) => {
-              if (isChainWithAsset(item)) {
-                return `${item.chain_id}${item.chain_name}`;
+              if (isClientAsset(item)) {
+                return `${item.denom}-${item.chainID}-${item.recommendedSymbol}`
               }
-              return `${item.chainID}${item.denom}`;
+              return `${item.chainID}-${item.asset?.denom}`
             }}
+            renderItem={renderItem}
           />
         )}
       </StyledContainer>

packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalRowItem.tsx

@@ -1,10 +1,11 @@
 import { Row } from "@/components/Layout";
 import { ModalRowItem } from "@/components/ModalRowItem";
 import { SmallText, Text } from "@/components/Typography";
-import { ChainWithAsset, ClientAsset } from "@/state/skipClient";
+import { ChainWithAsset, ClientAsset, skipChainsAtom } from "@/state/skipClient";
 import { CircleSkeletonElement, SkeletonElement } from "@/components/Skeleton";
 import { styled } from "styled-components";
-import { Chain } from "@chain-registry/types";
+import { useAtomValue } from "jotai";
+import { Chain } from "@skip-go/client";
 
 export const isClientAsset = (
   item: ClientAsset | ChainWithAsset
@@ -15,7 +16,7 @@ export const isClientAsset = (
 export const isChainWithAsset = (
   item: ClientAsset | ChainWithAsset
 ): item is ChainWithAsset => {
-  return (item as Chain).chain_id !== undefined;
+  return (item as Chain).chainID !== undefined;
 };
 
 export type TokenAndChainSelectorModalRowItemProps = {
@@ -31,9 +32,12 @@ export const TokenAndChainSelectorModalRowItem = ({
   skeleton,
   onSelect,
 }: TokenAndChainSelectorModalRowItemProps) => {
-  if (!item) return skeleton;
+  const { isLoading: isChainsLoading, data: chains } = useAtomValue(skipChainsAtom)
+
+  if (!item || isChainsLoading) return skeleton;
 
   if (isClientAsset(item)) {
+    const chain = chains?.find((chain) => chain.chainID === item.chainID)
     return (
       <ModalRowItem
         key={`${index}${item.denom}`}
@@ -49,7 +53,7 @@ export const TokenAndChainSelectorModalRowItem = ({
             />
             <Text>{item.symbol}</Text>
             <SmallText>
-              {item.chainName ?? item.originChainID ?? item.chainID}
+              {chain?.prettyName}
             </SmallText>
           </Row>
         }
@@ -58,21 +62,23 @@ export const TokenAndChainSelectorModalRowItem = ({
   }
 
   if (isChainWithAsset(item)) {
+
+    const chain = chains?.find((chain) => chain.chainID === item.chainID)
     return (
       <ModalRowItem
-        key={item.chain_id}
+        key={item.chainID}
         onClick={() => onSelect(item?.asset || null)}
         style={{ margin: "5px 0" }}
         leftContent={
           <Row align="center" gap={10}>
             <StyledAssetImage
               height={35}
               width={35}
-              src={item?.images?.[0].svg ?? item?.images?.[0].png}
-              alt={`${item.chain_id} logo`}
+              src={item?.logoURI}
+              alt={`${item.chainID} logo`}
             />
-            <Text>{item.pretty_name}</Text>
-            <SmallText>{item.chain_name}</SmallText>
+            <Text>{chain?.prettyName}</Text>
+            <SmallText>{item.chainID}</SmallText>
           </Row>
         }
       />

packages/widget-v2/src/modals/TransactionHistoryModal/TransactionHistoryModalItem.tsx

@@ -1,7 +1,7 @@
 import { RouteResponse } from "@skip-go/client";
 import { SmallText } from "@/components/Typography";
 import { useAtom } from "jotai";
-import { skipAssets, getChain, ClientAsset } from "@/state/skipClient";
+import { skipAssetsAtom, ClientAsset, skipChainsAtom } from "@/state/skipClient";
 import { Column, Row } from "@/components/Layout";
 import styled, { useTheme } from "styled-components";
 import { getFormattedAssetAmount } from "@/utils/crypto";
@@ -56,25 +56,22 @@ export const TransactionHistoryModalItem = ({
     timestamp,
     status,
   } = txHistoryItem;
-  const [{ data: assets }] = useAtom(skipAssets);
-  const sourceChain = getChain(sourceAssetChainID ?? "");
-  const sourceChainImage = sourceChain.images?.find(
-    (image) => image.svg ?? image.png
-  );
+  const [{ data: assets }] = useAtom(skipAssetsAtom);
+  const [{ data: chains }] = useAtom(skipChainsAtom)
+  const sourceChain = chains?.find(c => c.chainID === sourceAssetChainID)
+  const sourceChainImage = sourceChain?.logoURI
   const source = {
     amount: amountIn,
     asset: assets?.find((asset) => asset.denom === sourceAssetDenom),
-    chainImage: sourceChainImage?.svg ?? sourceChainImage?.png ?? "",
+    chainImage: sourceChainImage ?? "",
   };
 
-  const destinationChain = getChain(destAssetChainID ?? "");
-  const destinationChainImage = destinationChain.images?.find(
-    (image) => image.svg ?? image.png
-  );
+  const destinationChain = chains?.find(c => c.chainID === destAssetChainID)
+  const destinationChainImage = destinationChain?.logoURI
   const destination = {
     amount: amountOut,
     asset: assets?.find((asset) => asset.denom === destAssetDenom),
-    chainImage: destinationChainImage?.svg ?? destinationChainImage?.png ?? "",
+    chainImage: destinationChainImage ?? "",
   };
 
   const renderStatus = useMemo(() => {
@@ -119,7 +116,7 @@ export const TransactionHistoryModalItem = ({
           <HistoryArrowIcon color={theme.primary.text.lowContrast} />
           <RenderAssetAmount {...destination} />
           <SmallText normalTextColor>
-            on {destinationChain?.pretty_name ?? destinationChain?.chain_name}
+            on {destinationChain?.prettyName ?? destinationChain?.chainName}
           </SmallText>
         </Row>
         <Row align="center" gap={10}>
@@ -130,9 +127,9 @@ export const TransactionHistoryModalItem = ({
       {showDetails && (
         <TransactionHistoryModalItemDetails
           status={status}
-          sourceChainName={sourceChain?.pretty_name ?? sourceChain?.chain_name}
+          sourceChainName={sourceChain?.prettyName ?? sourceChain?.chainName ?? "--"}
           destinationChainName={
-            destinationChain?.pretty_name ?? destinationChain?.chain_name
+            destinationChain?.prettyName ?? destinationChain?.chainName ?? "--"
           }
           absoluteTimeString={absoluteTimeString}
           relativeTimeString={relativeTime}
@@ -144,7 +141,7 @@ export const TransactionHistoryModalItem = ({
   );
 };
 
-const StyledHistoryContainer = styled(Column)<{ showDetails?: boolean }>`
+const StyledHistoryContainer = styled(Column) <{ showDetails?: boolean }>`
   background-color: ${({ theme, showDetails }) =>
     showDetails && theme.secondary.background.normal};
   &:hover {