[FRE-937, FRE-950, FRE-953, FRE-954, FRE-957] feat(widget-v2): add sk…

…ip client (#193)

.changeset/forty-crews-relax.md

@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': patch
+---
+
+inject connected wallet from parent prop

.vscode/settings.json

@@ -6,5 +6,8 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "eslint.format.enable": true
+  "eslint.format.enable": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  }
 }

packages/widget-v2/src/constants/skipClientDefault.ts

@@ -0,0 +1,12 @@
+const appUrl = "https://go.skip.build";
+
+export const endpointOptions = {
+  getRpcEndpointForChain: async (chainID: string) => {
+    return `${appUrl}/api/rpc/${chainID}`;
+  },
+  getRestEndpointForChain: async (chainID: string) => {
+    return `${appUrl}/api/rest/${chainID}`;
+  },
+};
+
+export const apiURL = `${appUrl}/api/widget/skip`;

packages/widget-v2/src/state/skipClient.ts

@@ -1,16 +1,30 @@
 import { atom } from "jotai";
-import { Asset, SkipClient, Chain } from "@skip-go/client";
+import {
+  Asset,
+  SkipClient,
+  Chain,
+  RouteRequest,
+  SkipClientOptions,
+} from "@skip-go/client";
 import { atomWithQuery } from "jotai-tanstack-query";
+import { apiURL, endpointOptions } from "@/constants/skipClientDefault";
 
+export const skipClientConfigAtom = atom<SkipClientOptions>({
+  apiURL,
+  endpointOptions,
+});
 
-export const skipClient = atom(new SkipClient());
+export const skipClient = atom((get) => {
+  const options = get(skipClientConfigAtom);
+  return new SkipClient(options);
+});
 
 export type ClientAsset = Asset & {
   chain_key: string;
   chainName: string;
 };
 
-const flattenData = (data: Record<string, Asset[] >, chains?: Chain[]) => {
+const flattenData = (data: Record<string, Asset[]>, chains?: Chain[]) => {
   const flattenedData: ClientAsset[] = [];
 
   for (const chainKey in data) {
@@ -19,7 +33,8 @@ const flattenData = (data: Record<string, Asset[] >, chains?: Chain[]) => {
       flattenedData.push({
         ...asset,
         chain_key: chainKey,
-        chainName: chain?.prettyName ?? chain?.chainName ?? asset.chainID ??  "--",
+        chainName:
+          chain?.prettyName ?? chain?.chainName ?? asset.chainID ?? "--",
       });
     });
   }
@@ -53,10 +68,57 @@ export const skipChainsAtom = atomWithQuery((get) => {
       return skip.chains({
         includeEVM: true,
         includeSVM: true,
-      })
-    }
-  }
-})
+      });
+    },
+  };
+});
+
+export const skipBridgesAtom = atomWithQuery((get) => {
+  const skip = get(skipClient);
+  return {
+    queryKey: ["skipBridges"],
+    queryFn: async () => {
+      return skip.bridges();
+    },
+  };
+});
+
+export const skipSwapVenuesAtom = atomWithQuery((get) => {
+  const skip = get(skipClient);
+  return {
+    queryKey: ["skipSwapVenue"],
+    queryFn: async () => {
+      return skip.venues();
+    },
+  };
+});
+
+export const skipRouteRequestAtom = atom<RouteRequest>();
+
+export const skipRouteAtom = atomWithQuery((get) => {
+  const skip = get(skipClient);
+  const params = get(skipRouteRequestAtom);
+  return {
+    queryKey: ["skipRoute", params],
+    queryFn: async () => {
+      if (!params) {
+        throw new Error("No route request provided");
+      }
+      return skip.route({
+        ...params,
+        smartRelay: true,
+        smartSwapOptions: {
+          splitRoutes: true,
+          evmSwaps: true,
+        },
+        experimentalFeatures: ["hyperlane"],
+        allowMultiTx: true,
+        allowUnsafe: true,
+      });
+    },
+    enabled: !!params,
+  };
+});
 
 export type ChainWithAsset = Chain & {
   asset?: ClientAsset;