Viction and Eclipsefi (#95)

* Add support for JSON and YAML chain and token configs (#88)
- Update some stale docs
- Cleanup default chain and token const files

* Upgrade Wagmi and RainbowKit (#89)
- Upgrade repo to yarn 4
- Upgrade wagmi and rainbowkit versions
- Use Viem instead of Ethers for tx sending
- Refactor wallet/hooks.ts into smaller protocol-specific files
- Fix small cosmos metadata issue

* Validate cosmos recipient address bech32 prefix (#94)

* Cosmos factory token support (#91)
- Add support for cosmos factory tokens
- Combine automatic and manual token selector components

* Configure Viction and Eclipsefi

* Disable viction tokens

.vscode/settings.json

@@ -38,4 +38,9 @@
   },
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
+  "[typescript][typescriptreact]": {
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": "explicit"
+    }
+  },
 }

.yarnrc.yml

@@ -1,7 +1,13 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+enableScripts: false
+
 nodeLinker: node-modules
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
     spec: "https://mskelton.dev/yarn-outdated/v3"
 
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

CUSTOMIZE.md

@@ -4,13 +4,13 @@ Find below instructions for customizing the token list and branding assets of th
 
 ## Token Configs
 
-This app requires a token config list to function. The token list is located at `./src/consts/tokens.ts`. The output token artifacts of a warp route deployment using the [Hyperlane-Deploy](https://docs.hyperlane.xyz/docs/deploy/deploy-hyperlane) tools can be used here.
+This app requires a token config list to function. The token list is located in `./src/consts/`. Tokens can be configured using any of the token files there (`.ts`, `.json`, `.yaml`). The output token artifacts of a warp route deployment using the [Hyperlane CLI](https://www.npmjs.com/package/@hyperlane-xyz/cli) can be used here.
 
 ## Chain Configs
 
 By default, the app will use only the chains that are included in the Hyperlane SDK and connected to the tokens you specify in the token list (see above).
 
-To add support for additional chains, or to modify the default properties of the SDK's chains (such as RPC URL), add the required chain metadata to `./src/consts/chains.ts`. The same chain config used in the [Hyperlane-Deploy](https://docs.hyperlane.xyz/docs/deploy/deploy-hyperlane) tools will work here. You may also add an optional `logoURI` field to a chain config to show a custom logo image in the app.
+To add support for additional chains, or to modify the default properties of the SDK's chains (such as RPC URLs), add the required chain metadata to any of the chains files in `./src/consts/` (`.ts`, `.json`, `.yaml`). The same chain configs used in the [Hyperlane CLI](https://www.npmjs.com/package/@hyperlane-xyz/cli) will work here. You may also add an optional `logoURI` field to a chain config to show a custom logo image in the app.
 
 ## Tip Card
 

README.md

@@ -1,14 +1,14 @@
 # Hyperlane Warp Route UI Template
 
-This repo contains an example web interface for a interchain tokens built with [Hyperlane Warp Route](https://docs.hyperlane.xyz/docs/apis-and-sdks/warp-api). Warp is a framework to permisionlessly bridge tokens to any chain.
+This repo contains an example web interface for interchain tokens built with [Hyperlane Warp Route](https://docs.hyperlane.xyz/docs/reference/applications/warp-routes). Warp is a framework to permisionlessly bridge tokens to any chain.
 
 ## Architecture
 
 This app is built with Next+React, Wagmi, RainbowKit, and the Hyperlane SDK.
 
+- Constants that you may want to change are in `./src/consts/`, see the following Customization section for details.
 - The index page is located at `./src/pages/index.tsx`
 - The primary features are implemented in `./src/features/`
-- Constants that you may want to change are in `./src/consts/`, see the following Customization section for details.
 
 ## Customization
 
@@ -63,4 +63,4 @@ The easiest hosting solution for this Next.JS app is to create a project on Verc
 
 ## Learn more
 
-For more information, see the [Hyperlane documentation](https://docs.hyperlane.xyz/docs/apis-and-sdks/warp-api).
+For more information, see the [Hyperlane documentation](https://docs.hyperlane.xyz/docs/reference/applications/warp-routes).

jest.config.js

@@ -10,6 +10,13 @@ const createJestConfig = nextJest({
 const customJestConfig = {
   // Add more setup options before each test is run
   // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  transform: {
+    // ... other transforms ...
+    "\\.yaml$": "jest-transform-yaml",
+  },
+  moduleFileExtensions: [
+      "ts", "txs", "jsx", "js", "json", "yaml"
+  ],
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

next.config.js

@@ -26,11 +26,19 @@ const securityHeaders = [
     key: 'Content-Security-Policy',
     value: `default-src 'self'; script-src 'self'${
       isDev ? " 'unsafe-eval'" : ''
-    }; connect-src *; img-src 'self' data: https://*.walletconnect.com; style-src 'self' 'unsafe-inline' https://*.googleapis.com; font-src 'self' data:; base-uri 'self'; form-action 'self'; frame-src 'self' https://*.solflare.com https://*.walletconnect.com;`,
+    }; connect-src *; img-src 'self' data: https://*.walletconnect.com; style-src 'self' 'unsafe-inline' https://*.googleapis.com; font-src 'self' data:; base-uri 'self'; form-action 'self'; frame-src 'self' https://*.solflare.com https://*.walletconnect.com https://*.walletconnect.org;`,
   },
 ]
 
 const nextConfig = {
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.ya?ml$/,
+      use: 'yaml-loader',
+    });
+    return config;
+  },
+
   async headers() {
     return [
       {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hyperlane-xyz/warp-ui-template",
   "description": "A web app template for building Hyperlane Warp Route UIs",
-  "version": "3.1.0-beta4",
+  "version": "3.4.0",
   "author": "J M Rossy",
   "dependencies": {
     "@chakra-ui/next-js": "^2.1.5",
@@ -16,29 +16,29 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.14",
-    "@hyperlane-xyz/sdk": "^3.1.0-beta4",
-    "@hyperlane-xyz/utils": "^3.1.0-beta4",
-    "@hyperlane-xyz/widgets": "^1.5.0",
+    "@hyperlane-xyz/sdk": "^3.4.0",
+    "@hyperlane-xyz/utils": "^3.4.0",
+    "@hyperlane-xyz/widgets": "^3.1.4",
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
-    "@rainbow-me/rainbowkit": "0.12.16",
+    "@rainbow-me/rainbowkit": "1.3.0",
     "@solana/spl-token": "^0.3.8",
     "@solana/wallet-adapter-base": "^0.9.22",
     "@solana/wallet-adapter-react": "^0.15.32",
     "@solana/wallet-adapter-react-ui": "^0.9.31",
     "@solana/wallet-adapter-wallets": "^0.19.16",
     "@solana/web3.js": "^1.77.0",
     "@tanstack/react-query": "^4.29.7",
-    "bignumber.js": "^9.0.2",
+    "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",
     "cosmjs-types": "^0.9.0",
-    "ethers": "^5.7.2",
     "formik": "^2.2.9",
     "framer-motion": "^10.16.4",
     "next": "^13.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-toastify": "^9.1.3",
-    "wagmi": "0.12.18",
+    "viem": "1.20.0",
+    "wagmi": "^1.4.12",
     "zod": "^3.21.4",
     "zustand": "^4.3.9"
   },
@@ -48,23 +48,26 @@
     "@types/node": "^18.11.18",
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.41.0",
     "eslint-config-next": "^13.4.3",
     "eslint-config-prettier": "^8.8.0",
     "jest": "^29.6.3",
+    "jest-transform-yaml": "^1.1.2",
     "postcss": "^8.4.23",
     "prettier": "^2.8.8",
     "tailwindcss": "^3.3.2",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.3.3",
+    "yaml": "^2.3.4",
+    "yaml-loader": "^0.8.0"
   },
   "homepage": "https://www.hyperlane.xyz",
   "license": "Apache-2.0",
   "main": "dist/src/index.js",
-  "packageManager": "yarn@3.2.0",
+  "packageManager": "yarn@4.0.2",
   "private": true,
   "repository": {
     "type": "git",
@@ -84,6 +87,8 @@
   "resolutions": {
     "ethers": "^5.7",
     "zustand": "^4.4",
-    "bn.js": "^5.2"
+    "bn.js": "^5.2",
+    "viem": "1.20.0",
+    "lit-html": "2.8.0"
   }
 }

src/components/buttons/ConnectAwareSubmitButton.tsx

@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import { ProtocolType } from '@hyperlane-xyz/utils';
 
 import { tryGetProtocolType } from '../../features/caip/chains';
-import { useAccountForChain, useConnectFns } from '../../features/wallet/hooks';
+import { useAccountForChain, useConnectFns } from '../../features/wallet/hooks/multiProtocol';
 import { useTimeout } from '../../utils/timeout';
 
 import { SolidButton } from './SolidButton';

src/consts/chains.json

@@ -0,0 +1 @@
+{}

src/consts/chains.ts

@@ -2,9 +2,10 @@ import { ChainMap, ChainMetadata, ExplorerFamily, chainMetadata } from '@hyperla
 import { ProtocolType } from '@hyperlane-xyz/utils';
 
 // A map of chain names to ChainMetadata
+// Chains can be defined here, in chains.json, or in chains.yaml
+// Chains already in the SDK need not be included here unless you want to override some fields
+// Schema here: https://github.com/hyperlane-xyz/hyperlane-monorepo/blob/main/typescript/sdk/src/metadata/chainMetadataTypes.ts
 export const chains: ChainMap<ChainMetadata & { mailbox?: Address }> = {
-  // ----------- Add your chains here -----------------
-  // Chains already in the SDK need not be included here. Example custom chain:
   // mycustomchain: {
   //   protocol: ProtocolType.Ethereum,
   //   chainId: 1234,
@@ -30,42 +31,6 @@ export const chains: ChainMap<ChainMetadata & { mailbox?: Address }> = {
   // },
 
   // Including configs for some Solana chains by default
-  solana: {
-    ...chainMetadata.solana,
-    rpcUrls: [
-      {
-        http: process.env.NEXT_PUBLIC_SOLANA_RPC_URL || 'https://api.mainnet-beta.solana.com',
-      },
-    ],
-    mailbox: 'TODO',
-  },
-  solanatestnet: {
-    ...chainMetadata.solanatestnet,
-    mailbox: 'TODO',
-  },
-  solanadevnet: {
-    ...chainMetadata.solanadevnet,
-    mailbox: '4v25Dz9RccqUrTzmfHzJMsjd1iVoNrWzeJ4o6GYuJrVn',
-  },
-  cosmoshub: {
-    protocol: ProtocolType.Cosmos,
-    name: 'cosmoshub',
-    chainId: 'cosmoshub-4',
-    displayName: 'Cosmos Hub',
-    domainId: 1234, // TODO
-    bech32Prefix: 'cosmos',
-    slip44: 118,
-    rpcUrls: [
-      { http: 'https://rpc-cosmoshub.blockapsis.com' },
-      { http: 'https://lcd-cosmoshub.blockapsis.com' },
-    ],
-    nativeToken: {
-      name: 'Atom',
-      symbol: 'ATOM',
-      decimals: 6,
-    },
-    logoURI: '/logos/cosmos.svg',
-  },
   neutron: {
     ...chainMetadata.neutron,
     logoURI: '/logos/neutron.svg',
@@ -102,4 +67,35 @@ export const chains: ChainMap<ChainMetadata & { mailbox?: Address }> = {
     ],
     logoURI: '/logos/celestia.png',
   },
+  viction: {
+    blockExplorers: [
+      {
+        family: ExplorerFamily.Other,
+        name: 'Vicscan',
+        url: 'https://www.vicscan.xyz',
+        apiUrl: 'https://www.vicscan.xyz',
+      },
+    ],
+    blocks: {
+      confirmations: 1,
+      estimateBlockTime: 2,
+      reorgPeriod: 0,
+    },
+    chainId: 88,
+    displayName: 'Viction',
+    domainId: 88,
+    name: 'viction',
+    nativeToken: {
+      decimals: 18,
+      name: 'Viction',
+      symbol: 'VIC',
+    },
+    protocol: ProtocolType.Ethereum,
+    rpcUrls: [
+      {
+        http: 'https://viction.blockpi.network/v1/rpc/public',
+      },
+    ],
+    logoURI: '/logos/viction.svg',
+  },
 };

src/consts/chains.yaml

@@ -0,0 +1,20 @@
+# A map of chain names to ChainMetadata
+# Chains can be defined here, in chains.json, or in chains.ts
+# Chains already in the SDK need not be included here unless you want to override some fields
+# Schema here: https://github.com/hyperlane-xyz/hyperlane-monorepo/blob/main/typescript/sdk/src/metadata/chainMetadataTypes.ts
+---
+# Example using local anvil chain:
+# anvil1:
+#   chainId: 31337
+#   domainId: 31337
+#   name: anvil1
+#   protocol: ethereum
+#   rpcUrls:
+#     - http: http://127.0.0.1:8545
+# anvil2:
+#   chainId: 31338
+#   domainId: 31338
+#   name: anvil2
+#   protocol: ethereum
+#   rpcUrls:
+#     - http: http://127.0.0.1:8555

src/consts/config.ts

@@ -15,7 +15,6 @@ interface Config {
   withdrawalWhitelist: string; // comma-separated list of CAIP2 chain IDs to which transfers are supported
   transferBlacklist: string; // comma-separated list of routes between which transfers are disabled. Expects Caip2Id-Caip2Id (e.g. ethereum:1-sealevel:1399811149)
   enableExplorerLink: boolean; // Include a link to the hyperlane explorer in the transfer modal
-  enableAutoTokenSelection: boolean; // Automatically select the first valid for the token field
 }
 
 export const config: Config = Object.freeze({
@@ -28,5 +27,4 @@ export const config: Config = Object.freeze({
   withdrawalWhitelist,
   transferBlacklist,
   enableExplorerLink: false,
-  enableAutoTokenSelection: true,
 });

src/consts/tokens.json

@@ -0,0 +1 @@
+[]