Add USDC and USDC.e support to the vortex pmf (#72)

* Replace `jest` with `vitest` for testing

* Create test for getting route from squidrouter

* Use vitest dependencies

* Remove all references to jest

* Add usdce and allow to pass fromToken to getRoute

* Add refactoring

* Amend merge

* Fix squidrouter tests

* Configure icon for usdce

* Configure happy-dom to make browser based tests work

* Remove NumericInput.test.tsx because it doesn't work with vitest

* Fix type error

.eslintrc

@@ -3,14 +3,12 @@
     "browser": true,
     "es2021": true,
     "es6": true,
-    "jest": true
   },
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:jest/recommended"
+    "plugin:@typescript-eslint/recommended"
   ],
   "overrides": [],
   "parser": "@typescript-eslint/parser",
@@ -24,7 +22,7 @@
       "version": "detect"
     }
   },
-  "plugins": ["react", "react-hooks", "@typescript-eslint", "jest"],
+  "plugins": ["react", "react-hooks", "@typescript-eslint"],
   "rules": {
     "react/react-in-jsx-scope": "off",
     "react-hooks/exhaustive-deps": "error",

package.json

@@ -11,8 +11,7 @@
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",
     "lint:ts": "tsc --noEmit",
-    "test": "jest",
-    "test:watch": "jest --watchAll=true",
+    "test": "vitest",
     "format": "prettier . --write",
     "verify": "yarn lint && yarn lint:ts && yarn test",
     "postinstall": "husky install"
@@ -78,31 +77,28 @@
     "@polkadot/types-create": "^9.9.1",
     "@polkadot/types-known": "^9.9.1",
     "@preact/preset-vite": "^2.5.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/preact": "^3.2.3",
     "@testing-library/preact-hooks": "^1.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/big.js": "^6",
     "@types/bn.js": "^5",
-    "@types/jest": "^29.4.0",
     "@types/node": "^18.14.1",
-    "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
     "babel-preset-vite": "^1.1.3",
     "esbuild-plugin-polyfill-node": "^0.3.0",
     "eslint": "^8.34.0",
-    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "happy-dom": "^14.12.3",
     "husky": ">=6",
-    "jest": "^29.4.3",
-    "jest-environment-jsdom": "^29.4.3",
     "lint-staged": ">=10",
     "prettier": "^2.8.4",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.3",
-    "vite": "^3.2.5"
+    "vite": "^5.3.5",
+    "vitest": "^2.0.5"
   },
   "engines": {
     "npm": "please-use-yarn",

src/constants/tokenConfig.ts

@@ -14,7 +14,7 @@ export interface InputTokenDetails {
   icon: string;
 }
 
-export type InputTokenType = 'usdc';
+export type InputTokenType = 'usdc' | 'usdce';
 
 export interface OutputTokenDetails {
   tomlFileUrl: string;
@@ -37,6 +37,17 @@ export interface OutputTokenDetails {
 }
 export const INPUT_TOKEN_CONFIG: Record<InputTokenType, InputTokenDetails> = {
   usdc: {
+    assetSymbol: 'USDC',
+    erc20AddressSourceChain: '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359', // USDC on Polygon
+    axelarEquivalent: {
+      pendulumErc20WrapperAddress: '6cXCaQeLQtYhyaQgMGaLcBakgfdgNiSoENW2LA2z8nLBcpSh',
+      pendulumCurrencyId: { XCM: 12 },
+      pendulumAssetSymbol: 'USDC.axl',
+    },
+    decimals: 6,
+    icon: UsdcIcon,
+  },
+  usdce: {
     assetSymbol: 'USDC.e',
     erc20AddressSourceChain: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174', // USDC.e on Polygon
     axelarEquivalent: {

src/hooks/useGetIcon.tsx

@@ -13,19 +13,20 @@ type IconMap = Partial<Record<InputTokenType | OutputTokenType, string>>;
 const icons: IconMap = {
   brl: BRL,
   eurc: EURC,
-  usdc: USDC,
+  usdce: USDC,
 };
 
 const polygonIcons: IconMap = {
   usdc: USDC_POLYGON,
+  usdce: USDC_POLYGON,
 };
 
 const IconMaps: Record<string, IconMap> = {
   [polygon.id]: polygonIcons,
   default: icons,
 };
 
-export function useGetIcon(token?: 'usdc' | OutputTokenType, defaultIcon = DefaultIcon) {
+export function useGetIcon(token?: InputTokenType | OutputTokenType, defaultIcon = DefaultIcon) {
   const currentChainId = useChainId();
   const currentIconMap = IconMaps[currentChainId] || IconMaps.default;
 

src/services/polkadot/__tests__/spacewalk.test.tsx

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { Keypair } from 'stellar-sdk';
 import { Keyring } from '@polkadot/api';
 import { getApiManagerInstance } from '../polkadotApi';

src/services/squidrouter/__tests__/route.test.tsx

@@ -0,0 +1,43 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { getRouteTransactionRequest } from '../route';
+import { INPUT_TOKEN_CONFIG, InputTokenDetails } from '../../../constants/tokenConfig';
+
+// We need to add a delay to the beforeEach hook to ensure that the test does not run before the SquidRouter API is ready
+beforeEach(() => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, 2000);
+  });
+});
+
+describe('Squidrouter', () => {
+  describe('should be able to get route for relevant USDC tokens', () => {
+    function getRouteForToken(inputToken: InputTokenDetails) {
+      // These addresses don't really matter
+      const userAddress = '0x7Ba99e99Bc669B3508AFf9CC0A898E869459F877';
+      const ephemeralAddress = '0x7Ba99e99Bc669B3508AFf9CC0A898E869459F877';
+      const amount = '1000000000';
+
+      return getRouteTransactionRequest(userAddress, amount, ephemeralAddress, inputToken);
+    }
+
+    it('should successfully query a route for USDC', async () => {
+      const inputToken = INPUT_TOKEN_CONFIG.usdc;
+      const route = await getRouteForToken(inputToken);
+
+      expect(route).toBeDefined();
+      expect(route.requestId).toBeDefined();
+      expect(route.data).toBeDefined();
+    });
+
+    it('should successfully query a route for USDC.e', async () => {
+      const inputToken = INPUT_TOKEN_CONFIG.usdce;
+      const route = await getRouteForToken(inputToken);
+
+      expect(route).toBeDefined();
+      expect(route.requestId).toBeDefined();
+      expect(route.data).toBeDefined();
+    });
+  });
+});

src/services/squidrouter/route.ts

@@ -106,8 +106,8 @@ function createRouteParams(
   };
 }
 
-async function getRouteApiPlus(params: RouteParams) {
-  // This is the integrator ID for the Squid API by https://v2.app.squidrouter.com/
+async function getRoute(params: RouteParams) {
+  // This is the integrator ID for the Squid API at 'https://apiplus.squidrouter.com/v2'
   const { integratorId } = getSquidRouterConfig(params.inputToken);
   const url = 'https://apiplus.squidrouter.com/v2/route';
 
@@ -139,7 +139,7 @@ export async function getRouteTransactionRequest(
   const routeParams = createRouteParams(userAddress, amount, ephemeralAccountAddress, inputToken);
 
   // Get the swap route using Squid API
-  const routeResult = await getRouteApiPlus(routeParams);
+  const routeResult = await getRoute(routeParams);
   const route = routeResult.data.route;
   const requestId = routeResult.requestId;
 
@@ -151,6 +151,7 @@ export async function getRouteTransactionRequest(
   return {
     requestId,
     transactionRequest,
+    data: routeResult.data,
   };
 }
 

src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

tsconfig.json

@@ -21,7 +21,7 @@
       "react": ["./node_modules/preact/compat/"],
       "react-dom": ["./node_modules/preact/compat/"]
     },
-    "types": ["node", "jest", "@testing-library/jest-dom"]
+    "types": ["node", "vitest/globals"]
   },
   "include": [
     "src",

vite.config.ts

@@ -12,6 +12,12 @@ export default defineConfig({
   build: {
     target: 'esnext',
   },
+  // @ts-ignore
+  test: {
+    globals: true,
+    setupFiles: ['./src/setupTests.ts'],
+    environment: 'happy-dom',
+  },
   optimizeDeps: {
     exclude: [],
     esbuildOptions: {