Add Wormhole logic

apps/ui/.eslintrc.cjs

@@ -8,7 +8,7 @@ module.exports = {
       extends: ["@swim-io/eslint-config"],
     },
     {
-      files: ["**/*.{cts,mts,ts,tsx}"],
+      files: ["src/**/*.{cts,mts,ts,tsx}"],
       extends: ["@swim-io/eslint-config/react"],
       parserOptions: {
         // Make sure correct `tsconfig.json` is found in monorepo
@@ -85,5 +85,13 @@ module.exports = {
         },
       ],
     },
+    {
+      files: ["scripts/*.{cts,mts,ts,tsx}"],
+      extends: ["@swim-io/eslint-config"],
+      parserOptions: {
+        // Make sure correct `tsconfig.json` is found in monorepo
+        tsconfigRootDir: `${__dirname}/scripts`,
+      },
+    },
   ],
 };

apps/ui/.gitignore

@@ -1 +1,2 @@
 build/
+tmp/

apps/ui/.prettierignore

@@ -1,4 +1,5 @@
 # ignore auto-generated files
 build/
 storybook-static/
+src/config/wormholeTokens.json
 src/keys/**/*.json

apps/ui/package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.1.0",
   "scripts": {
+    "scrape-wormhole-tokens": "./scripts/scrapeWormholeTokenData.sh",
     "start": "NODE_ENV=development SKIP_PREFLIGHT_CHECK=true DISABLE_ESLINT_PLUGIN=true craco start",
     "build": "SKIP_PREFLIGHT_CHECK=true DISABLE_ESLINT_PLUGIN=true craco build",
     "release": "SENTRY_RELEASE=$(git rev-parse --short HEAD) yarn workspaces foreach --topological-dev --parallel --recursive --from @swim-io/ui run build",
@@ -50,16 +51,16 @@
     "@sentry/types": "^7.9.0",
     "@solana/spl-token": "^0.3.5",
     "@solana/web3.js": "^1.62.0",
-    "@swim-io/aptos": "^0.40.0",
-    "@swim-io/core": "^0.40.0",
-    "@swim-io/evm": "^0.40.0",
-    "@swim-io/evm-contracts": "^0.40.0",
-    "@swim-io/pool-math": "^0.40.0",
-    "@swim-io/solana": "^0.40.0",
-    "@swim-io/solana-contracts": "^0.40.0",
-    "@swim-io/token-projects": "^0.40.0",
-    "@swim-io/utils": "^0.40.0",
-    "@swim-io/wormhole": "^0.40.0",
+    "@swim-io/aptos": "workspace:^",
+    "@swim-io/core": "workspace:^",
+    "@swim-io/evm": "workspace:^",
+    "@swim-io/evm-contracts": "workspace:^",
+    "@swim-io/pool-math": "workspace:^",
+    "@swim-io/solana": "workspace:^",
+    "@swim-io/solana-contracts": "workspace:^",
+    "@swim-io/token-projects": "workspace:^",
+    "@swim-io/utils": "workspace:^",
+    "@swim-io/wormhole": "workspace:^",
     "bn.js": "^5.2.1",
     "classnames": "^2.3.1",
     "decimal.js": "^10.3.1",
@@ -113,6 +114,7 @@
     "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
+    "csv-parse": "^5.3.1",
     "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
@@ -129,6 +131,7 @@
     "jsonc-eslint-parser": "^2.1.0",
     "prettier": "^2.7.1",
     "storybook-preset-craco": "^0.0.6",
+    "ts-node": "^10.9.1",
     "typescript": "~4.8.4",
     "webpack": "4.44.2"
   }

apps/ui/scripts/processWormholeTokenData.ts

@@ -0,0 +1,206 @@
+import fs from "fs";
+
+import type { ChainId } from "@certusone/wormhole-sdk";
+import { CHAINS, isEVMChain } from "@certusone/wormhole-sdk";
+import { parse } from "csv-parse";
+
+type Source =
+  | "sol"
+  | "eth"
+  | "bsc"
+  | "terra"
+  | "matic"
+  | "avax"
+  | "oasis"
+  | "algorand"
+  | "ftm"
+  | "aurora"
+  | "karura"
+  | "acala"
+  | "klaytn"
+  | "celo"
+  | "near"
+  | "moonbeam"
+  | "terra2";
+
+interface WrappedDetails {
+  readonly solAddress: string;
+  readonly solDecimals: string;
+  readonly ethAddress: string;
+  readonly ethDecimals: string;
+  readonly bscAddress: string;
+  readonly bscDecimals: string;
+  readonly terraAddress: string;
+  readonly terraDecimals: string;
+  readonly maticAddress: string;
+  readonly maticDecimals: string;
+  readonly avaxAddress: string;
+  readonly avaxDecimals: string;
+  readonly oasisAddress: string;
+  readonly oasisDecimals: string;
+  readonly algorandAddress: string;
+  readonly algorandDecimals: string;
+  readonly ftmAddress: string;
+  readonly ftmDecimals: string;
+  readonly auroraAddress: string;
+  readonly auroraDecimals: string;
+  readonly karuraAddress: string;
+  readonly karuraDecimals: string;
+  readonly acalaAddress: string;
+  readonly acalaDecimals: string;
+  readonly klaytnAddress: string;
+  readonly klaytnDecimals: string;
+  readonly celoAddress: string;
+  readonly celoDecimals: string;
+  readonly nearAddress: string;
+  readonly nearDecimals: string;
+  readonly moonbeamAddress: string;
+  readonly moonbeamDecimals: string;
+  readonly terra2Address: string;
+  readonly terra2Decimals: string;
+}
+
+interface CsvRecord extends WrappedDetails {
+  readonly source: Source;
+  readonly symbol: string;
+  readonly name: string;
+  readonly sourceAddress: string;
+  readonly sourceDecimals: string;
+  readonly coingeckoId: string;
+  readonly logo: string;
+}
+
+interface WormholeTokenDetails {
+  readonly chainId: ChainId;
+  readonly address: string;
+  readonly decimals: number;
+}
+
+interface WormholeToken {
+  readonly symbol: string;
+  readonly displayName: string;
+  readonly logo: string;
+  readonly coinGeckoId: string;
+  readonly nativeDetails: WormholeTokenDetails;
+  readonly wrappedDetails: readonly WormholeTokenDetails[];
+}
+
+const sourceToChainId: Record<Source, ChainId> = {
+  sol: CHAINS.solana,
+  eth: CHAINS.ethereum,
+  bsc: CHAINS.bsc,
+  terra: CHAINS.terra,
+  matic: CHAINS.polygon,
+  avax: CHAINS.avalanche,
+  oasis: CHAINS.oasis,
+  algorand: CHAINS.algorand,
+  ftm: CHAINS.fantom,
+  aurora: CHAINS.aurora,
+  karura: CHAINS.karura,
+  acala: CHAINS.acala,
+  klaytn: CHAINS.klaytn,
+  celo: CHAINS.celo,
+  near: CHAINS.near,
+  moonbeam: CHAINS.moonbeam,
+  terra2: CHAINS.terra2,
+};
+
+const isChainSupported = (chainId: ChainId): boolean =>
+  chainId === CHAINS.solana || isEVMChain(chainId);
+
+const supportedSourceToChainId = Object.entries(sourceToChainId).reduce<
+  Partial<Record<Source, ChainId>>
+>(
+  (accumulator, [source, chainId]) =>
+    isChainSupported(chainId)
+      ? {
+          ...accumulator,
+          [source]: chainId,
+        }
+      : accumulator,
+  {},
+);
+
+const processWrappedDetails = (
+  wrappedDetails: WrappedDetails,
+): readonly WormholeTokenDetails[] =>
+  Object.entries(supportedSourceToChainId).reduce(
+    (accumulator: readonly WormholeTokenDetails[], [source, chainId]) => {
+      const address: string =
+        wrappedDetails[`${source}Address` as keyof WrappedDetails];
+      const decimals: string =
+        wrappedDetails[`${source}Decimals` as keyof WrappedDetails];
+      if (!address || !decimals) {
+        return accumulator;
+      }
+      return [
+        ...accumulator,
+        {
+          chainId,
+          address,
+          decimals: parseInt(decimals, 10),
+        },
+      ];
+    },
+    [],
+  );
+
+const processRecord = ({
+  source,
+  symbol,
+  name,
+  logo,
+  coingeckoId,
+  sourceAddress,
+  sourceDecimals,
+  ...wrappedDetails
+}: CsvRecord): WormholeToken => ({
+  symbol,
+  displayName: name,
+  logo,
+  coinGeckoId: coingeckoId,
+  nativeDetails: {
+    chainId: sourceToChainId[source],
+    address: sourceAddress,
+    decimals: parseInt(sourceDecimals, 10),
+  },
+  wrappedDetails: processWrappedDetails(wrappedDetails),
+});
+
+const main = async () => {
+  const parser = fs
+    .createReadStream(`${__dirname}/../tmp/wormholeTokenData.csv`)
+    .pipe(
+      parse({
+        bom: true,
+        columns: true,
+      }),
+    );
+
+  // eslint-disable-next-line functional/prefer-readonly-type
+  const processedRecords: WormholeToken[] = [];
+  for await (const record of parser) {
+    const processedRecord = processRecord(record as CsvRecord);
+    const supportedChains = [
+      processedRecord.nativeDetails,
+      ...processedRecord.wrappedDetails,
+    ].filter((details) => isChainSupported(details.chainId));
+    if (supportedChains.length >= 2) {
+      // eslint-disable-next-line functional/immutable-data
+      processedRecords.push(processedRecord);
+    }
+  }
+
+  return new Promise<void>((resolve, reject) => {
+    fs.writeFile(
+      `${__dirname}/../src/config/wormholeTokens.json`,
+      JSON.stringify(processedRecords),
+      (err) => (err ? reject(err) : resolve()),
+    );
+  });
+};
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

apps/ui/scripts/scrapeWormholeTokenData.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+set -o errexit -o nounset -o pipefail
+command -v shellcheck >/dev/null && shellcheck "$0"
+
+TMP_FILE="./tmp/wormholeTokenData.csv"
+
+mkdir -p tmp
+wget -O "$TMP_FILE" "https://raw.githubusercontent.com/certusone/wormhole-token-list/main/content/by_source.csv"
+
+yarn ts-node --esm ./scripts/processWormholeTokenData.ts
+
+rm "$TMP_FILE"

apps/ui/scripts/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@swim-io/tsconfig/tsconfig-base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./",
+    "noEmit": true
+  },
+  "include": ["./"],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs"
+    }
+  }
+}

apps/ui/src/App.tsx

@@ -23,6 +23,7 @@ import StakePage from "./pages/StakePage";
 import SwapPage from "./pages/SwapPage";
 import SwapPageV2 from "./pages/SwapPageV2";
 import TosPage from "./pages/TosPage";
+import WormholePage from "./pages/WormholePage";
 
 function App(): ReactElement {
   return (
@@ -64,6 +65,7 @@ function App(): ReactElement {
               {process.env.REACT_APP_ENABLE_POOL_RESTRUCTURE && (
                 <Route path="swapV2" element={<SwapPageV2 />} />
               )}
+              <Route path="wormhole" element={<WormholePage />} />
               <Route path="collectibles" element={<CollectiblesPage />} />
               <Route path="tos" element={<TosPage />} />
               <Route path="media" element={<MediaPage />} />