Release 10/29/24-2 (#45)

* Feature: add production config (#40)

* add production config. make it even easier to add configs in the future.

* doc comments

* memo not helping here

* format evm balance according to currency's decimals

* formatting

* mainnet configs

* ensure native token is formatted according to coinDecimals

* add ibc withdrawer fee

* comment cleanup, import cleanup

* update readme, app version

* Feature/show withdraw fee (#43)

* move shared functionality to hooks

* didnt move all shared logic

* display fee under balance

* move withdrawal fee to under amount

* move fee back to under balance

* don't open navbar links in new tab

* icons

* milktia and sttia configs

* fix icon styling

* use selected currency's denom. increase gaslimit

* linting, formatting

web/src/components/Navbar/Navbar.tsx

@@ -53,20 +53,10 @@ function Navbar() {
           <Link to="/" className="navbar-item is-active">
             BRIDGE
           </Link>
-          <a
-            target="_blank"
-            href={swapURL}
-            className="navbar-item"
-            rel="noreferrer"
-          >
+          <a href={swapURL} className="navbar-item" rel="noreferrer">
             SWAP
           </a>
-          <a
-            target="_blank"
-            href={poolURL}
-            className="navbar-item"
-            rel="noreferrer"
-          >
+          <a href={poolURL} className="navbar-item" rel="noreferrer">
             POOL
           </a>
         </div>

web/src/config/chainConfigs/ChainConfigsMainnet.ts

@@ -85,32 +85,16 @@ const CelestiaChainInfo: IbcChainInfo = {
 const NobleChainInfo: IbcChainInfo = {
   chainId: "noble-1",
   chainName: "Noble",
-  // RPC endpoint of the chain
   rpc: "https://noble-rpc.polkachu.com:443",
-  // REST endpoint of the chain.
   rest: "https://noble-api.polkachu.com",
-  // Staking coin information
   stakeCurrency: {
-    // Coin denomination to be displayed to the user.
     coinDenom: "USDC",
-    // Actual denom (i.e. uatom, uscrt) used by the blockchain.
     coinMinimalDenom: "uusdc",
-    // # 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: "noble",
     bech32PrefixAccPub: "noblepub",
@@ -119,41 +103,22 @@ const NobleChainInfo: IbcChainInfo = {
     bech32PrefixValAddr: "noblevaloper",
     bech32PrefixValPub: "noblevaloperpub",
   },
-  // List of all coin/tokens used in this chain.
   currencies: [
     {
-      // Coin denomination to be displayed to the user.
       coinDenom: "USDC",
-      // Actual denom (i.e. uatom, uscrt) used by the blockchain.
       coinMinimalDenom: "uusdc",
-      // # 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-104",
-      // NOTE - noble requires the astria compat address (https://slowli.github.io/bech32-buffer/)
       sequencerBridgeAccount:
         "astriacompat1eg8hhey0n4untdvqqdvlyl0e7zx8wfcaz3l6wu",
-      iconClass: "i-noble",
+      iconClass: "i-usdc",
     },
   ],
-  // List of coin/tokens used as a fee token in this chain.
   feeCurrencies: [
     {
-      // Coin denomination to be displayed to the user.
       coinDenom: "USDC",
-      // Actual denom (i.e. nria, uscrt) used by the blockchain.
       coinMinimalDenom: "usdc",
-      // # 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,
@@ -164,9 +129,106 @@ const NobleChainInfo: IbcChainInfo = {
   iconClass: "i-noble",
 };
 
+const OsmosisChainInfo: IbcChainInfo = {
+  chainId: "osmosis-1",
+  chainName: "Osmosis",
+  rpc: "https://osmosis-rpc.polkachu.com/",
+  rest: "https://osmosis-api.polkachu.com/",
+  stakeCurrency: {
+    coinDenom: "milkTIA",
+    coinMinimalDenom:
+      "factory/osmo1f5vfcph2dvfeqcqkhetwv75fda69z7e5c2dldm3kvgj23crkv6wqcn47a0/umilkTIA",
+    coinDecimals: 6,
+  },
+  bip44: {
+    coinType: 118,
+  },
+  bech32Config: {
+    bech32PrefixAccAddr: "osmosis",
+    bech32PrefixAccPub: "osmosispub",
+    bech32PrefixConsAddr: "osmosisvalcons",
+    bech32PrefixConsPub: "osmosisvalconspub",
+    bech32PrefixValAddr: "osmosisvaloper",
+    bech32PrefixValPub: "osmosisvaloperpub",
+  },
+  currencies: [
+    {
+      coinDenom: "milkTIA",
+      coinMinimalDenom:
+        "factory/osmo1f5vfcph2dvfeqcqkhetwv75fda69z7e5c2dldm3kvgj23crkv6wqcn47a0/umilkTIA",
+      coinDecimals: 6,
+      ibcChannel: "channel-85486",
+      sequencerBridgeAccount: "astria1kgxhyhvynhcwwrylkzzx6q3a8rn3tuvasxvuy8",
+      iconClass: "i-milk-tia",
+    },
+  ],
+  feeCurrencies: [
+    {
+      coinDenom: "milkTIA",
+      coinMinimalDenom:
+        "factory/osmo1f5vfcph2dvfeqcqkhetwv75fda69z7e5c2dldm3kvgj23crkv6wqcn47a0/umilkTIA",
+      coinDecimals: 6,
+      gasPriceStep: {
+        low: 0.01,
+        average: 0.02,
+        high: 0.1,
+      },
+    },
+  ],
+  iconClass: "i-osmosis",
+};
+
+const StrideChainInfo: IbcChainInfo = {
+  chainId: "stride-1",
+  chainName: "Stride",
+  rpc: "https://stride-rpc.polkachu.com",
+  rest: "https://stride-api.polkachu.com/",
+  stakeCurrency: {
+    coinDenom: "stTIA",
+    coinMinimalDenom: "stutia",
+    coinDecimals: 6,
+  },
+  bip44: {
+    coinType: 118,
+  },
+  bech32Config: {
+    bech32PrefixAccAddr: "stride",
+    bech32PrefixAccPub: "stridepub",
+    bech32PrefixConsAddr: "stridevalcons",
+    bech32PrefixConsPub: "stridevalconspub",
+    bech32PrefixValAddr: "stridevaloper",
+    bech32PrefixValPub: "stridevaloperpub",
+  },
+  currencies: [
+    {
+      coinDenom: "stTIA",
+      coinMinimalDenom: "stutia",
+      coinDecimals: 6,
+      ibcChannel: "channel-285",
+      sequencerBridgeAccount: "astria1dllx9d9karss9ca8le25a4vqhf67a67d5d4l6r",
+      iconClass: "i-stride-tia",
+    },
+  ],
+  feeCurrencies: [
+    {
+      coinDenom: "stTIA",
+      coinMinimalDenom: "stutia",
+      coinDecimals: 6,
+      gasPriceStep: {
+        low: 0.01,
+        average: 0.02,
+        high: 0.1,
+      },
+    },
+  ],
+  iconClass: "i-stride",
+};
+
 export const ibcChains: IbcChains = {
   Celestia: CelestiaChainInfo,
   Noble: NobleChainInfo,
+  Osmosis: OsmosisChainInfo,
+  Stride: StrideChainInfo,
 };
 
 const FlameChainInfo: EvmChainInfo = {
@@ -189,7 +251,24 @@ const FlameChainInfo: EvmChainInfo = {
       coinDecimals: 6,
       erc20ContractAddress: "0x3f65144F387f6545bF4B19a1B39C94231E1c849F",
       ibcWithdrawalFeeWei: "10000000000000000",
-      iconClass: "i-noble",
+      iconClass: "i-usdc",
+    },
+    {
+      coinDenom: "milkTIA",
+      coinMinimalDenom:
+        "factory/osmo1f5vfcph2dvfeqcqkhetwv75fda69z7e5c2dldm3kvgj23crkv6wqcn47a0/umilkTIA",
+      coinDecimals: 18,
+      erc20ContractAddress: "0xcbb93e854AA4EF5Db51c3b094F28952eF0dC67bE",
+      ibcWithdrawalFeeWei: "10000000000000000",
+      iconClass: "i-milk-tia",
+    },
+    {
+      coinDenom: "stTIA",
+      coinMinimalDenom: "stutia",
+      coinDecimals: 18,
+      erc20ContractAddress: "0xdf941D092b10FF07eAb44bD174dEe915c13FECcd",
+      ibcWithdrawalFeeWei: "10000000000000000",
+      iconClass: "i-stride-tia",
     },
   ],
   iconClass: "i-flame",

web/src/features/KeplrWallet/services/ibc.ts

@@ -64,17 +64,18 @@ export const sendIbcTransfer = async (
     throw new Error("Failed to get account from Keplr wallet.");
   }
 
-  // TODO - does the fee need to be configurable in the ui?
-  const feeDenom = selectedIbcChain.feeCurrencies[0].coinMinimalDenom;
+  const feeDenom = currency.coinMinimalDenom;
   const memo = JSON.stringify({ rollupDepositAddress: recipient });
+
+  // TODO - does the fee need to be configurable in the ui?
   const fee = {
     amount: [
       {
         denom: feeDenom,
         amount: "0",
       },
     ],
-    gas: "180000",
+    gas: "350000",
   };
 
   const msgIBCTransfer = {

web/src/styles/dropdown-customizations.scss

@@ -28,10 +28,6 @@
           color: $dropdown-item-color;
         }
 
-        &.icon-left {
-          height: 20px;
-        }
-
         &.icon-right {
           margin-left: auto;
         }

web/src/styles/icons.scss

@@ -48,7 +48,49 @@ i.i-flame {
 }
 
 i.i-noble {
-  background-image: url('https://avatars.githubusercontent.com/u/133800472?s=200&v=4');
+  background-image: url('../../public/assets/icons/logos/noble-logo-color.png');
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  width: 100%;
+  // crop to circle
+  border-radius: 50%;
+}
+
+i.i-usdc {
+  background-image: url('../../public/assets/icons/logos/usdc-logo-color.svg');
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  width: 100%;
+}
+
+i.i-milk-tia {
+  background-image: url('../../public/assets/icons/logos/milk-tia-logo-color.png');
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  width: 100%;
+}
+
+i.i-stride {
+  background-image: url('../../public/assets/icons/logos/stride-logo-color.svg');
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  width: 100%;
+}
+
+i.i-stride-tia {
+  background-image: url('../../public/assets/icons/logos/stride-tia-logo-color.png');
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  width: 100%;
+}
+
+i.i-osmosis {
+  background-image: url('../../public/assets/icons/logos/osmosis-logo-color.svg');
   background-repeat: no-repeat;
   background-size: contain;
   height: 100%;