diff --git a/web/public/assets/icons/logos/milk-tia-logo-color.png b/web/public/assets/icons/logos/milk-tia-logo-color.png new file mode 100644 index 0000000..aeea2be Binary files /dev/null and b/web/public/assets/icons/logos/milk-tia-logo-color.png differ diff --git a/web/public/assets/icons/logos/noble-logo-color.png b/web/public/assets/icons/logos/noble-logo-color.png new file mode 100644 index 0000000..89ec63f Binary files /dev/null and b/web/public/assets/icons/logos/noble-logo-color.png differ diff --git a/web/public/assets/icons/logos/osmosis-logo-color.svg b/web/public/assets/icons/logos/osmosis-logo-color.svg new file mode 100644 index 0000000..4bbc4ea --- /dev/null +++ b/web/public/assets/icons/logos/osmosis-logo-color.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/public/assets/icons/logos/stride-logo-color.svg b/web/public/assets/icons/logos/stride-logo-color.svg new file mode 100644 index 0000000..68d1e18 --- /dev/null +++ b/web/public/assets/icons/logos/stride-logo-color.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/public/assets/icons/logos/stride-tia-logo-color.png b/web/public/assets/icons/logos/stride-tia-logo-color.png new file mode 100644 index 0000000..3f298de Binary files /dev/null and b/web/public/assets/icons/logos/stride-tia-logo-color.png differ diff --git a/web/public/assets/icons/logos/usdc-logo-color.svg b/web/public/assets/icons/logos/usdc-logo-color.svg new file mode 100644 index 0000000..bcec782 --- /dev/null +++ b/web/public/assets/icons/logos/usdc-logo-color.svg @@ -0,0 +1,20 @@ + + + + + + + + + diff --git a/web/src/components/Navbar/Navbar.tsx b/web/src/components/Navbar/Navbar.tsx index 0301e7c..5aab975 100644 --- a/web/src/components/Navbar/Navbar.tsx +++ b/web/src/components/Navbar/Navbar.tsx @@ -53,20 +53,10 @@ function Navbar() { BRIDGE - + SWAP - + POOL diff --git a/web/src/config/chainConfigs/ChainConfigsMainnet.ts b/web/src/config/chainConfigs/ChainConfigsMainnet.ts index 6510e15..4cc604b 100644 --- a/web/src/config/chainConfigs/ChainConfigsMainnet.ts +++ b/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", diff --git a/web/src/features/KeplrWallet/services/ibc.ts b/web/src/features/KeplrWallet/services/ibc.ts index 8b9ba83..eaf3263 100644 --- a/web/src/features/KeplrWallet/services/ibc.ts +++ b/web/src/features/KeplrWallet/services/ibc.ts @@ -64,9 +64,10 @@ 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: [ { @@ -74,7 +75,7 @@ export const sendIbcTransfer = async ( amount: "0", }, ], - gas: "180000", + gas: "350000", }; const msgIBCTransfer = { diff --git a/web/src/styles/dropdown-customizations.scss b/web/src/styles/dropdown-customizations.scss index 2191e8c..2764562 100644 --- a/web/src/styles/dropdown-customizations.scss +++ b/web/src/styles/dropdown-customizations.scss @@ -28,10 +28,6 @@ color: $dropdown-item-color; } - &.icon-left { - height: 20px; - } - &.icon-right { margin-left: auto; } diff --git a/web/src/styles/icons.scss b/web/src/styles/icons.scss index 3510531..d44b8b4 100644 --- a/web/src/styles/icons.scss +++ b/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%;