remove Chains context

.eslintrc.json

@@ -3,7 +3,8 @@
     "next/core-web-vitals",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier"
+    "prettier",
+    "plugin:@tanstack/eslint-plugin-query/recommended"
   ],
   "plugins": ["@typescript-eslint", "prettier", "simple-import-sort"],
   "parser": "@typescript-eslint/parser",

package.json

@@ -39,6 +39,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@skip-router/core": "^0.1.0-rc12",
     "@tanstack/react-query": "^4.29.5",
     "@types/node": "20.1.2",
     "@types/react": "18.2.6",
@@ -68,6 +69,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.38.0",
+    "@tanstack/eslint-plugin-query": "^4.36.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",

src/api/queries.ts

@@ -0,0 +1,63 @@
+import { Chain as SkipChain } from "@skip-router/core";
+import { useQuery } from "@tanstack/react-query";
+import * as chainRegistry from "chain-registry";
+
+// import type { Chain as RegistryChain } from "chain-registry";
+import { useSkipClient } from "@/solve";
+
+export type Chain = {
+  prettyName: string;
+  record?: (typeof chainRegistry.chains)[number];
+} & SkipChain;
+
+export type UseChainsQueryArgs<T = Chain[]> = {
+  select?: (arr?: Chain[]) => T;
+};
+
+export function useChains<T = Chain[]>(args: UseChainsQueryArgs<T> = {}) {
+  const { select = (t) => t as T } = args;
+
+  const skipRouter = useSkipClient();
+
+  const { data, ...queryResult } = useQuery({
+    queryKey: ["skip-api-chains"],
+    queryFn: async () => {
+      const chains = await skipRouter.chains({
+        includeEVM: true,
+      });
+
+      return chains
+        .map((chain) => {
+          const record = chainRegistry.chains.find(
+            (c) => c.chain_id === chain.chainID,
+          );
+
+          return {
+            ...chain,
+            prettyName: record?.pretty_name ?? chain.chainName,
+            record,
+          };
+        })
+        .sort((chainA, chainB) => {
+          return chainA.prettyName.localeCompare(chainB.prettyName);
+        });
+    },
+    select,
+  });
+
+  return {
+    ...queryResult,
+    chains: data,
+  };
+}
+
+export function useChainByChainID(chainID: string) {
+  const { chains, ...queryResult } = useChains({
+    select: (chains) => (chains ?? []).find((c) => c.chainID === chainID),
+  });
+
+  return {
+    ...queryResult,
+    chain: chains,
+  };
+}

src/components/AssetInput.tsx

@@ -1,8 +1,8 @@
 import { ethers } from "ethers";
 import { FC, Fragment, useMemo, useState } from "react";
 
+import { Chain } from "@/api/queries";
 import { AssetWithMetadata, useAssets } from "@/context/assets";
-import { Chain } from "@/context/chains";
 import { useBalancesByChain } from "@/cosmos";
 import Toast from "@/elements/Toast";
 import { useAccount } from "@/hooks/useAccount";
@@ -173,7 +173,7 @@ const AssetInput: FC<Props> = ({
       <Toast
         open={isError}
         setOpen={setIsError}
-        description={`There was an error loading assets for ${chain?.prettyName}. Please try again.`}
+        description={`There was an error loading assets for ${chain?.chainName}. Please try again.`}
       />
     </Fragment>
   );

src/components/ChainSelect/ChainSelectContent.tsx

@@ -3,7 +3,7 @@ import { ArrowLeftIcon } from "@heroicons/react/20/solid";
 import { FC, useEffect, useMemo, useRef, useState } from "react";
 import { useWindowSize } from "usehooks-ts";
 
-import { Chain } from "@/context/chains";
+import { Chain } from "@/api/queries";
 import { chainNameToChainlistURL } from "@/cosmos";
 
 interface Props {
@@ -42,7 +42,7 @@ const ChainSelectContent: FC<Props> = ({ chains, onChange, onClose }) => {
         return true;
       }
 
-      return chain.prettyName.toLowerCase().includes(searchValue.toLowerCase());
+      return chain.chainName.toLowerCase().includes(searchValue.toLowerCase());
     });
   }, [chains, searchValue]);
 

src/components/ChainSelect/ChainSelectTrigger.tsx

@@ -1,15 +1,15 @@
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { ForwardedRef, forwardRef } from "react";
 
-import { Chain } from "@/context/chains";
+import { Chain } from "@/api/queries";
 
 interface Props {
   chain?: Chain;
 }
 
 const ChainSelectTrigger = forwardRef(function ChainSelectTrigger(
   { chain, ...props }: Props,
-  ref: ForwardedRef<HTMLButtonElement>
+  ref: ForwardedRef<HTMLButtonElement>,
 ) {
   return (
     <button

src/components/ChainSelect/index.tsx

@@ -1,7 +1,7 @@
 import { FC, Fragment, useState } from "react";
 
-import { Chain } from "@/context/chains";
-import { Dialog, DialogContent,DialogTrigger } from "@/elements/Dialog";
+import { Chain } from "@/api/queries";
+import { Dialog, DialogContent, DialogTrigger } from "@/elements/Dialog";
 
 import ChainSelectContent from "./ChainSelectContent";
 import ChainSelectTrigger from "./ChainSelectTrigger";

src/components/RouteDisplay.tsx

@@ -3,11 +3,27 @@ import { RouteResponse } from "@skip-router/core";
 import { ethers } from "ethers";
 import { FC, Fragment, useMemo, useState } from "react";
 
-import { SWAP_VENUES } from "@/config";
+import { useChainByChainID } from "@/api/queries";
 import { useAssets } from "@/context/assets";
-import { Chain, useChains } from "@/context/chains";
 import { chainNameToChainlistURL } from "@/cosmos";
 
+export interface SwapVenueConfig {
+  name: string;
+  imageURL: string;
+}
+
+export const SWAP_VENUES: Record<string, SwapVenueConfig> = {
+  "neutron-astroport": {
+    name: "Astroport",
+    imageURL: "https://avatars.githubusercontent.com/u/87135340",
+  },
+  "osmosis-poolmanager": {
+    name: "Osmosis",
+    imageURL:
+      "https://raw.githubusercontent.com/cosmostation/chainlist/main/chain/osmosis/dappImg/app.png",
+  },
+};
+
 interface TransferAction {
   type: "TRANSFER";
   asset: string;
@@ -47,19 +63,19 @@ const RouteEnd: FC<{
 };
 
 const TransferStep: FC<{ action: TransferAction }> = ({ action }) => {
-  const { chains } = useChains();
-
-  const sourceChain = chains.find(
-    (c) => c.chainID === action.sourceChain,
-  ) as Chain;
-
-  const destinationChain = chains.find(
-    (c) => c.chainID === action.destinationChain,
-  ) as Chain;
+  const { chain: sourceChain } = useChainByChainID(action.sourceChain);
+  const { chain: destinationChain } = useChainByChainID(
+    action.destinationChain,
+  );
 
   const { getAsset } = useAssets();
 
-  const asset = getAsset(action.asset, sourceChain.chainID);
+  const asset = getAsset(action.asset, action.sourceChain);
+
+  if (!sourceChain || !destinationChain) {
+    // this should be unreachable
+    return null;
+  }
 
   if (!asset) {
     return (
@@ -134,15 +150,11 @@ const TransferStep: FC<{ action: TransferAction }> = ({ action }) => {
 };
 
 const SwapStep: FC<{ action: SwapAction }> = ({ action }) => {
-  const { chains } = useChains();
-
-  const chain = chains.find((c) => c.chainID === action.chain) as Chain;
-
   const { getAsset } = useAssets();
 
-  const assetIn = getAsset(action.sourceAsset, chain.chainID);
+  const assetIn = getAsset(action.sourceAsset, action.chain);
 
-  const assetOut = getAsset(action.destinationAsset, chain.chainID);
+  const assetOut = getAsset(action.destinationAsset, action.chain);
 
   const venue = SWAP_VENUES[action.venue];
 
@@ -253,7 +265,7 @@ interface Props {
 const RouteDisplay: FC<Props> = ({ route }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const { chains } = useChains();
+  // const { chains } = useChains();
   const { getAsset } = useAssets();
 
   const sourceAsset = getAsset(
@@ -266,13 +278,8 @@ const RouteDisplay: FC<Props> = ({ route }) => {
     route.destAssetChainID,
   );
 
-  const sourceChain = chains.find(
-    (c) => c.chainID === route.sourceAssetChainID,
-  ) as Chain;
-
-  const destinationChain = chains.find(
-    (c) => c.chainID === route.destAssetChainID,
-  ) as Chain;
+  const { chain: sourceChain } = useChainByChainID(route.sourceAssetChainID);
+  const { chain: destinationChain } = useChainByChainID(route.destAssetChainID);
 
   const amountIn = useMemo(() => {
     try {
@@ -380,7 +387,7 @@ const RouteDisplay: FC<Props> = ({ route }) => {
             amount={amountIn}
             symbol={sourceAsset?.symbol ?? "UNKNOWN"}
             logo={sourceAsset?.logoURI ?? "UNKNOWN"}
-            chain={sourceChain.prettyName}
+            chain={sourceChain?.prettyName ?? ""}
           />
           {isExpanded && (
             <button
@@ -423,7 +430,7 @@ const RouteDisplay: FC<Props> = ({ route }) => {
           amount={amountOut}
           symbol={destinationAsset?.symbol ?? "UNKNOWN"}
           logo={destinationAsset?.logoURI ?? "UNKNOWN"}
-          chain={destinationChain.prettyName}
+          chain={destinationChain?.prettyName ?? ""}
         />
       </div>
     </div>

src/components/SwapWidget/SwapWidget.tsx

@@ -1,7 +1,7 @@
 import { ArrowsUpDownIcon } from "@heroicons/react/20/solid";
 import { FC, Fragment } from "react";
 
-import { useChains } from "@/context/chains";
+import { useChains as useSkipChains } from "@/api/queries";
 import { useAccount } from "@/hooks/useAccount";
 import { getExplorerLinkForTx } from "@/utils/utils";
 
@@ -16,7 +16,9 @@ import { useSwapWidget } from "./useSwapWidget";
 
 export const SwapWidget: FC = () => {
   const { openWalletModal } = useWalletModal();
-  const { chains } = useChains();
+  // const { chains } = useChains();
+
+  const { chains } = useSkipChains();
 
   const {
     amountIn,
@@ -91,7 +93,7 @@ export const SwapWidget: FC = () => {
               chain={sourceChain}
               onChainChange={onSourceChainChange}
               showBalance
-              chains={chains}
+              chains={chains ?? []}
             />
           </div>
           <div className="relative">
@@ -140,7 +142,7 @@ export const SwapWidget: FC = () => {
               onAssetChange={onDestinationAssetChange}
               chain={destinationChain}
               onChainChange={onDestinationChainChange}
-              chains={chains}
+              chains={chains ?? []}
             />
           </div>
           {routeLoading && <RouteLoadingBanner />}

src/components/SwapWidget/useSwapWidget.ts

@@ -2,8 +2,8 @@ import { ethers } from "ethers";
 import { useEffect, useMemo, useState } from "react";
 import { useNetwork, useSwitchNetwork } from "wagmi";
 
+import { Chain, useChains } from "@/api/queries";
 import { AssetWithMetadata, useAssets } from "@/context/assets";
-import { Chain, useChains } from "@/context/chains";
 import { useBalancesByChain } from "@/cosmos";
 import { useAccount } from "@/hooks/useAccount";
 import { useRoute } from "@/solve";
@@ -164,12 +164,12 @@ function useFormValues() {
   // - If chainID exists in local storage, use that.
   // - Otherwise, default to cosmoshub-4.
   useEffect(() => {
-    if (!formValues.sourceChain && chains.length > 0) {
+    if (!formValues.sourceChain && (chains ?? []).length > 0) {
       const chainID =
         localStorage.getItem(LAST_SOURCE_CHAIN_KEY) ?? "cosmoshub-4";
       setFormValues((values) => ({
         ...values,
-        sourceChain: chains.find((chain) => chain.chainID === chainID),
+        sourceChain: (chains ?? []).find((chain) => chain.chainID === chainID),
       }));
     }
   }, [chains, formValues.sourceChain]);
@@ -259,7 +259,9 @@ function useFormValues() {
     // If destination asset is defined, but no destination chain, select chain based off asset.
     let destinationChain = formValues.destinationChain;
     if (!destinationChain) {
-      destinationChain = chains.find((c) => c.chainID === asset.chainID);
+      destinationChain = (chains ?? []).find(
+        (c) => c.chainID === asset.chainID,
+      );
     }
 
     // If destination asset is user selected, set flag to true.