Merge pull request #72 from astriaorg/develop

Dawn Release

web/config-overrides.js

@@ -1,24 +1,19 @@
 const webpack = require("webpack");
 
-// This file is used by react-app-rewired.
-// Needed to browserify crypto for some cosmos key stuff I believe.
-// FIXME - is this still needed?
+// For react-app-rewired to override the default webpack configuration
 module.exports = function override(config) {
   const fallback = config.resolve.fallback || {};
   Object.assign(fallback, {
-    os: require.resolve("os-browserify/browser"),
-    buffer: require.resolve("buffer/"),
-    http: require.resolve("stream-http"),
-    https: require.resolve("https-browserify"),
-    crypto: require.resolve("crypto-browserify"),
+    buffer: false,
+    crypto: false,
+    events: false,
+    path: false,
     stream: require.resolve("stream-browserify"),
-    process: require.resolve("process/browser"),
-    vm: require.resolve("vm-browserify"),
+    string_decoder: false,
   });
   config.resolve.fallback = fallback;
   config.plugins = (config.plugins || []).concat([
     new webpack.ProvidePlugin({
-      process: "process/browser",
       Buffer: ["buffer", "Buffer"],
     }),
   ]);

web/package.json

@@ -12,28 +12,36 @@
     "@keplr-wallet/stores": "^0.12.22",
     "@keplr-wallet/types": "^0.12.22",
     "@keplr-wallet/unit": "^0.12.22",
+    "@rainbow-me/rainbowkit": "^2.2.0",
+    "@tanstack/react-query": "^5.61.0",
     "@types/node": "^16.18.56",
-    "@types/react": "^18.2.24",
-    "@types/react-dom": "^18.2.8",
+    "@types/react-dom": "^18.3.1",
     "@types/uuid": "^9.0.8",
     "bulma": "^0.9.4",
     "ethers": "^6.13.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
     "react-hook-form": "^7.50.0",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "sass": "^1.68.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.7.2",
     "util": "^0.12.5",
     "uuid": "^9.0.1",
+    "viem": "^2.21.49",
+    "wagmi": "^2.13.0",
     "web-vitals": "^2.1.4"
   },
+  "overrides": {
+    "react-scripts": {
+      "typescript": "^5"
+    }
+  },
   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
-    "test": "react-app-rewired test --transformIgnorePatterns \"/node_modules/(?!(@cosmjs|axios)/)\"",
+    "test": "react-app-rewired test --transformIgnorePatterns \"/node_modules/(?!(@cosmjs|axios|@rainbow-me/rainbowkit|wagmi|@wagmi)/)\"",
     "test-cov": "CI=true react-scripts test --coverage",
     "eject": "react-scripts eject",
     "format": "biome format --write .",
@@ -52,18 +60,14 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@biomejs/biome": "1.7.3",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/react": "^18.3.12",
     "buffer": "^6.0.3",
-    "crypto-browserify": "^3.12.0",
-    "https-browserify": "^1.0.0",
-    "os-browserify": "^0.3.0",
-    "process": "^0.11.10",
     "react-app-rewired": "^2.2.1",
-    "stream-browserify": "^3.0.0",
-    "stream-http": "^3.2.0",
-    "vm-browserify": "^1.1.2"
+    "stream-browserify": "^3.0.0"
   }
 }

web/src/App.tsx

@@ -2,25 +2,41 @@ import type React from "react";
 import { Route, Routes } from "react-router-dom";
 import BridgePage from "pages/BridgePage/BridgePage";
 import Layout from "pages/Layout";
-import { ConfigContextProvider } from "config";
-import { EthWalletContextProvider } from "features/EthWallet";
+import { useConfig } from "config";
 import { NotificationsContextProvider } from "features/Notifications";
 
+import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { evmChainsToRainbowKitChains } from "./config/chainConfigs/types.ts";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiProvider } from "wagmi";
+
 /**
  * App component with routes.
  */
 export default function App(): React.ReactElement {
+  const { evmChains } = useConfig();
+
+  const rainbowKitConfig = getDefaultConfig({
+    appName: "Flame Bridge",
+    projectId: "YOUR_PROJECT_ID", // TODO
+    chains: evmChainsToRainbowKitChains(evmChains),
+  });
+
+  const queryClient = new QueryClient();
+
   return (
-    <ConfigContextProvider>
-      <NotificationsContextProvider>
-        <EthWalletContextProvider>
-          <Routes>
-            <Route element={<Layout />}>
-              <Route index element={<BridgePage />} />
-            </Route>
-          </Routes>
-        </EthWalletContextProvider>
-      </NotificationsContextProvider>
-    </ConfigContextProvider>
+    <NotificationsContextProvider>
+      <WagmiProvider config={rainbowKitConfig}>
+        <QueryClientProvider client={queryClient}>
+          <RainbowKitProvider>
+            <Routes>
+              <Route element={<Layout />}>
+                <Route index element={<BridgePage />} />
+              </Route>
+            </Routes>
+          </RainbowKitProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
+    </NotificationsContextProvider>
   );
 }

web/src/components/DepositCard/DepositCard.tsx

@@ -334,7 +334,7 @@ export default function DepositCard(): React.ReactElement {
                   Address: {fromAddress}
                 </p>
               )}
-              {fromAddress && !isLoadingIbcBalance && (
+              {fromAddress && selectedIbcCurrency && !isLoadingIbcBalance && (
                 <p className="mt-2 has-text-grey-lighter has-text-weight-semibold">
                   Balance: {ibcBalance}
                 </p>
@@ -404,11 +404,13 @@ export default function DepositCard(): React.ReactElement {
                   <i className="fas fa-pen-to-square" />
                 </p>
               )}
-              {evmAccountAddress && !isLoadingEvmBalance && (
-                <p className="mt-2 has-text-grey-lighter has-text-weight-semibold">
-                  Balance: {evmBalance}
-                </p>
-              )}
+              {evmAccountAddress &&
+                selectedEvmChain &&
+                !isLoadingEvmBalance && (
+                  <p className="mt-2 has-text-grey-lighter has-text-weight-semibold">
+                    Balance: {evmBalance}
+                  </p>
+                )}
               {evmAccountAddress && isLoadingEvmBalance && (
                 <p className="mt-2 has-text-grey-lighter has-text-weight-semibold">
                   Balance: <i className="fas fa-spinner fa-pulse" />

web/src/components/WithdrawCard/WithdrawCard.tsx

@@ -6,17 +6,17 @@ import AnimatedArrowSpacer from "components/AnimatedDownArrowSpacer/AnimatedDown
 import Dropdown from "components/Dropdown/Dropdown";
 import {
   AddERC20ToWalletButton,
-  getAstriaWithdrawerService,
-  useEthWallet,
+  createWithdrawerService,
   useEvmChainSelection,
 } from "features/EthWallet";
 import { useIbcChainSelection } from "features/KeplrWallet";
 import { NotificationType, useNotifications } from "features/Notifications";
+import { useConfig as useWagmiConfig } from "wagmi";
 
 export default function WithdrawCard(): React.ReactElement {
   const { evmChains, ibcChains } = useConfig();
+  const wagmiConfig = useWagmiConfig();
   const { addNotification } = useNotifications();
-  const { provider } = useEthWallet();
 
   const {
     evmAccountAddress: fromAddress,
@@ -164,7 +164,7 @@ export default function WithdrawCard(): React.ReactElement {
     }
 
     const recipientAddress = recipientAddressOverride || ibcAccountAddress;
-    if (!provider || !fromAddress || !recipientAddress) {
+    if (!fromAddress || !recipientAddress) {
       addNotification({
         toastOpts: {
           toastType: NotificationType.WARNING,
@@ -194,13 +194,16 @@ export default function WithdrawCard(): React.ReactElement {
         selectedEvmCurrency.erc20ContractAddress ||
         selectedEvmCurrency.nativeTokenWithdrawerContractAddress ||
         "";
-      const withdrawerSvc = getAstriaWithdrawerService(
-        provider,
+      if (!contractAddress) {
+        throw new Error("No contract address found");
+      }
+      const withdrawerSvc = createWithdrawerService(
+        wagmiConfig,
         contractAddress,
         Boolean(selectedEvmCurrency.erc20ContractAddress),
       );
       await withdrawerSvc.withdrawToIbcChain(
-        fromAddress,
+        selectedEvmChain.chainId,
         recipientAddress,
         amount,
         selectedEvmCurrency.coinDecimals,
@@ -325,7 +328,7 @@ export default function WithdrawCard(): React.ReactElement {
                   Address: {fromAddress}
                 </p>
               )}
-              {fromAddress && !isLoadingEvmBalance && (
+              {fromAddress && selectedEvmCurrency && !isLoadingEvmBalance && (
                 <p className="mt-2 has-text-grey-lighter has-text-weight-semibold">
                   Balance: {evmBalance}
                 </p>

web/src/config/chainConfigs/ChainConfigsDawn.ts

@@ -178,9 +178,95 @@ const NobleChainInfo: IbcChainInfo = {
   iconClass: "i-noble",
 };
 
+const NeutronChainInfo: IbcChainInfo = {
+  chainId: "pion-1",
+  chainName: "Neutron Testnet",
+  // RPC endpoint of the chain
+  // rpc: "https://rpc.testnet.noble.strange.love:443",
+  // rpc: "https://rpc.testnet.noble.strange.love",
+  rpc: "https://rpc-falcron.pion-1.ntrn.tech",
+  // REST endpoint of the chain.
+  rest: "https://rest-falcron.pion-1.ntrn.tech",
+  // Staking coin information
+  stakeCurrency: {
+    // Coin denomination to be displayed to the user.
+    coinDenom: "dTIA",
+    // Actual denom (i.e. uatom, uscrt) used by the blockchain.
+    coinMinimalDenom:
+      "factory/neutron1tkr6mtll5e2z53ze2urnc3ld3tq3dam2rchezc5lg9c237ft66gqtw94jm/drop",
+    // # of decimal points to convert minimal denomination to user-facing denomination.
+    coinDecimals: 6,
+    // (Optional) Keplr can show the fiat value of the coin if a coingecko id is provided.
+    // You can get id from https://api.coingecko.com/api/v3/coins/list if it is listed.
+    // coinGeckoId: ""
+  },
+  // (Optional) If you have a wallet webpage used to stake the coin then provide the url to the website in `walletUrlForStaking`.
+  // The 'stake' button in Keplr extension will link to the webpage.
+  // walletUrlForStaking: "",
+  // The BIP44 path.
+  bip44: {
+    // You can only set the coin type of BIP44.
+    // 'Purpose' is fixed to 44.
+    coinType: 118,
+  },
+  // The address prefix of the chain.
+  bech32Config: {
+    bech32PrefixAccAddr: "neutron",
+    bech32PrefixAccPub: "neutronpub",
+    bech32PrefixConsAddr: "neutronvalcons",
+    bech32PrefixConsPub: "neutronvalconspub",
+    bech32PrefixValAddr: "neutronvaloper",
+    bech32PrefixValPub: "neutronvaloperpub",
+  },
+  // List of all coin/tokens used in this chain.
+  currencies: [
+    {
+      // Coin denomination to be displayed to the user.
+      coinDenom: "dTIA",
+      // Actual denom (i.e. uatom, uscrt) used by the blockchain.
+      coinMinimalDenom:
+        "factory/neutron1tkr6mtll5e2z53ze2urnc3ld3tq3dam2rchezc5lg9c237ft66gqtw94jm/drop",
+      // # of decimal points to convert minimal denomination to user-facing denomination.
+      coinDecimals: 6,
+      // (Optional) Keplr can show the fiat value of the coin if a coingecko id is provided.
+      // You can get id from https://api.coingecko.com/api/v3/coins/list if it is listed.
+      // coinGeckoId: ""
+      ibcChannel: "channel-1412",
+      sequencerBridgeAccount: "astria1j7juyc9nv6tlv0la74a9rrm7v72y3x336mgxvk",
+      iconClass: "i-celestia",
+    },
+  ],
+  // List of coin/tokens used as a fee token in this chain.
+  feeCurrencies: [
+    {
+      // Coin denomination to be displayed to the user.
+      coinDenom: "dTIA",
+      // Actual denom (i.e. nria, uscrt) used by the blockchain.
+      coinMinimalDenom:
+        "factory/neutron1tkr6mtll5e2z53ze2urnc3ld3tq3dam2rchezc5lg9c237ft66gqtw94jm/drop",
+      // # of decimal points to convert minimal denomination to user-facing denomination.
+      coinDecimals: 6,
+      // (Optional) Keplr can show the fiat value of the coin if a coingecko id is provided.
+      // You can get id from https://api.coingecko.com/api/v3/coins/list if it is listed.
+      // coinGeckoId: ""
+      // (Optional) This is used to set the fee of the transaction.
+      // If this field is not provided and suggesting chain is not natively integrated, Keplr extension will set the Keplr default gas price (low: 0.01, average: 0.025, high: 0.04).
+      // Currently, Keplr doesn't support dynamic calculation of the gas prices based on on-chain data.
+      // Make sure that the gas prices are higher than the minimum gas prices accepted by chain validators and RPC/REST endpoint.
+      gasPriceStep: {
+        low: 0.01,
+        average: 0.02,
+        high: 0.1,
+      },
+    },
+  ],
+  iconClass: "i-neutron",
+};
+
 export const ibcChains: IbcChains = {
   "Celestia Mocha-4": CelestiaChainInfo,
   "Noble Testnet": NobleChainInfo,
+  "Neutron Testnet": NeutronChainInfo,
 };
 
 const FlameChainInfo: EvmChainInfo = {
@@ -205,6 +291,15 @@ const FlameChainInfo: EvmChainInfo = {
       ibcWithdrawalFeeWei: "10000000000000000",
       iconClass: "i-noble",
     },
+    {
+      coinDenom: "dTIA",
+      coinMinimalDenom:
+        "factory/neutron1tkr6mtll5e2z53ze2urnc3ld3tq3dam2rchezc5lg9c237ft66gqtw94jm/drop",
+      coinDecimals: 18,
+      erc20ContractAddress: "0x0F0C3207a9fE9B7e8AaE4bb83E865C91A13Fd8a7",
+      ibcWithdrawalFeeWei: "10000000000000000",
+      iconClass: "i-celestia",
+    },
   ],
   iconClass: "i-flame",
 };

web/src/config/chainConfigs/ChainConfigsDusk.ts

@@ -202,7 +202,7 @@ const FlameChainInfo: EvmChainInfo = {
       // address of erc20 contract on dusk-11
       erc20ContractAddress: "0xa4f59B3E97EC22a2b949cB5b6E8Cd6135437E857",
       // this value would only exist for native tokens
-      nativeTokenWithdrawerContractAddress: "",
+      // nativeTokenWithdrawerContractAddress: "",
       ibcWithdrawalFeeWei: "10000000000000000",
       iconClass: "i-noble",
     },
@@ -213,7 +213,7 @@ const FlameChainInfo: EvmChainInfo = {
       // NOTE - there is not actually a contract for this fakeTIA.
       //  just using this for testing the UI.
       erc20ContractAddress: "0xFc83F6A786728F448481B7D7d5C0659A92a62C4d",
-      nativeTokenWithdrawerContractAddress: "",
+      // nativeTokenWithdrawerContractAddress: "",
       ibcWithdrawalFeeWei: "10000000000000000",
       iconClass: "i-celestia",
     },

web/src/config/chainConfigs/ChainConfigsLocal.ts

@@ -180,6 +180,7 @@ export const ibcChains: IbcChains = {
 const FlameChainInfo: EvmChainInfo = {
   chainId: 912559,
   chainName: "Flame (local)",
+  rpcUrls: ["http://localhost:8545"], // TODO
   currencies: [
     {
       coinDenom: "RIA",
@@ -204,6 +205,7 @@ const FlameChainInfo: EvmChainInfo = {
 const FakeChainInfo: EvmChainInfo = {
   chainId: 912559,
   chainName: "FakeChain (local)",
+  rpcUrls: ["http://localhost:8545"], // TODO
   currencies: [
     {
       coinDenom: "FAKE",