Skip to content

Commit

Permalink
Refactor/chain config (#16)
Browse files Browse the repository at this point in the history
* use first ibc chain as default selection

* use correct denom envar

* use selectedIbcChain not envar

* only need memo in msgIBCTransfer

* cleanup before change

* put defaults in ts files. can override with envar
  • Loading branch information
steezeburger authored Sep 4, 2024
1 parent 8d45ca0 commit 67fb40d
Show file tree
Hide file tree
Showing 14 changed files with 261 additions and 203 deletions.
27 changes: 2 additions & 25 deletions web/.env.example
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,7 @@ REACT_APP_VERSION=$npm_package_version

# bech32m address for the sequencer bridge account
REACT_APP_SEQUENCER_BRIDGE_ACCOUNT=astria1d7zjjljc0dsmxa545xkpwxym86g8uvvwhtezcr
REACT_APP_SEQUENCER_BRIDGE_DENOM=utia
REACT_APP_EVM_WITHDRAWER_CONTRACT_ADDRESS=0xA58639fB5458e65E4fA917FF951C390292C24A15

# list of ibc chains
REACT_APP_IBC_CHAINS="CELESTIA"

# celestia config for local development
REACT_APP_CELESTIA_CHAIN_ID="celestia-local-0"
REACT_APP_CELESTIA_CHAIN_NAME="celestia-local-0"
REACT_APP_CELESTIA_RPC_ENDPOINT="http://rpc.app.celestia.localdev.me"
REACT_APP_CELESTIA_REST_ENDPOINT="http://rest.app.celestia.localdev.me"
REACT_APP_CELESTIA_STAKE_CURRENCY_COIN_DENOM="TIA"
REACT_APP_CELESTIA_STAKE_CURRENCY_COIN_MINIMAL_DENOM="utia"
REACT_APP_CELESTIA_STAKE_CURRENCY_COIN_DECIMALS=6
REACT_APP_CELESTIA_BIP_44_COIN_TYPE=118
REACT_APP_CELESTIA_BECH32_PREFIX=celestia
REACT_APP_CELESTIA_CURRENCIES_COIN_DENOM="TIA"
REACT_APP_CELESTIA_CURRENCIES_COIN_MINIMAL_DENOM="utia"
REACT_APP_CELESTIA_CURRENCIES_COIN_DECIMALS=6
REACT_APP_CELESTIA_FEE_CURRENCIES_COIN_DENOM="TIA"
REACT_APP_CELESTIA_FEE_CURRENCIES_COIN_MINIMAL_DENOM="utia"
REACT_APP_CELESTIA_FEE_CURRENCIES_COIN_DECIMALS=6
REACT_APP_CELESTIA_FEE_CURRENCIES_GAS_PRICE_STEP_LOW=0.01
REACT_APP_CELESTIA_FEE_CURRENCIES_GAS_PRICE_STEP_AVERAGE=0.02
REACT_APP_CELESTIA_FEE_CURRENCIES_GAS_PRICE_STEP_HIGH=0.1
REACT_APP_CELESTIA_IBC_CHANNEL="channel-110"
REACT_APP_CELESTIA_ICON_SOURCE_URL="https://placehold.co/60x60/EEE/31343C"
# can set custom ibc chains via json string
REACT_APP_IBC_CHAINS=
1 change: 1 addition & 0 deletions web/config-overrides.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ 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?
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
Expand Down
7 changes: 3 additions & 4 deletions web/src/components/DepositCard/DepositCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { useEthWallet } from "features/EthWallet/hooks/useEthWallet";
import { getBalance, sendIbcTransfer } from "services/ibc";
import { getKeplrFromWindow } from "services/keplr";
import { useIbcChainSelection } from "features/IbcChainSelector/hooks/useIbcChainSelection";
import Dropdown from "../Dropdown/Dropdown";
import Dropdown from "components/Dropdown/Dropdown";

export default function DepositCard(): React.ReactElement {
const { addNotification } = useContext(NotificationsContext);
Expand Down Expand Up @@ -211,6 +211,7 @@ export default function DepositCard(): React.ReactElement {
<Dropdown
placeholder="Select a chain"
options={ibcChainsOptions}
defaultOption={ibcChainsOptions[0]}
onSelect={(selected) => selectIbcChain(selected)}
/>
<button
Expand Down Expand Up @@ -283,9 +284,7 @@ export default function DepositCard(): React.ReactElement {
disabled={recipientAddress !== ""}
onClick={() => connectEVMWallet()}
>
{recipientAddress
? "Connected to EVM Wallet"
: "Connect EVM Wallet"}
{userAccount ? "Connected to EVM Wallet" : "Connect EVM Wallet"}
</button>
{!isRecipientAddressValid && hasTouchedForm && (
<p className="help is-danger mt-2">Must be a valid EVM address</p>
Expand Down
13 changes: 11 additions & 2 deletions web/src/components/Dropdown/Dropdown.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type React from "react";
import { useState } from "react";
import { useState, useEffect } from "react";

export interface DropdownOption<T> {
label: string;
Expand All @@ -10,16 +10,25 @@ interface DropdownProps<T> {
options: DropdownOption<T>[];
onSelect: (value: T) => void;
placeholder?: string;
defaultOption?: DropdownOption<T>;
}

function Dropdown<T>({
options,
onSelect,
placeholder = "Select an option",
defaultOption,
}: DropdownProps<T>) {
const [isActive, setIsActive] = useState(false);
const [selectedOption, setSelectedOption] =
useState<DropdownOption<T> | null>(null);
useState<DropdownOption<T> | null>(defaultOption || null);

useEffect(() => {
if (defaultOption) {
setSelectedOption(defaultOption);
onSelect(defaultOption.value);
}
}, [defaultOption, onSelect]);

const handleSelect = (option: DropdownOption<T>) => {
setSelectedOption(option);
Expand Down
3 changes: 2 additions & 1 deletion web/src/components/WithdrawCard/WithdrawCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
getAstriaWithdrawerService,
} from "features/EthWallet";
import { useIbcChainSelection } from "features/IbcChainSelector";
import Dropdown from "../Dropdown/Dropdown";
import Dropdown from "components/Dropdown/Dropdown";

export default function WithdrawCard(): React.ReactElement {
const { addNotification } = useContext(NotificationsContext);
Expand Down Expand Up @@ -256,6 +256,7 @@ export default function WithdrawCard(): React.ReactElement {
placeholder="Select a chain"
options={ibcChainsOptions}
onSelect={(selected) => selectIbcChain(selected)}
defaultOption={ibcChainsOptions[0]}
/>
<button
type="button"
Expand Down
Empty file.
85 changes: 85 additions & 0 deletions web/src/config/chainConfigs/dusk.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import type { IbcChainInfo, IbcChains } from "../chains";

const CelestiaChainInfo: IbcChainInfo = {
// Chain-id of the celestia chain.
chainId: "mocha-4",
// The name of the chain to be displayed to the user.
chainName: "Celestia Mocha-4",
// RPC endpoint of the chain
rpc: "wss://rpc-mocha.pops.one",
// REST endpoint of the chain.
rest: "https://api-mocha.pops.one",
// Staking coin information
stakeCurrency: {
// Coin denomination to be displayed to the user.
coinDenom: "TIA",
// Actual denom (i.e. uatom, uscrt) used by the blockchain.
coinMinimalDenom: "utia",
// # 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: "celestia",
bech32PrefixAccPub: "celestiapub",
bech32PrefixConsAddr: "celestiavalcons",
bech32PrefixConsPub: "celestiavalconspub",
bech32PrefixValAddr: "celestiavaloper",
bech32PrefixValPub: "celestiavaloperpub",
},
// List of all coin/tokens used in this chain.
currencies: [
{
// Coin denomination to be displayed to the user.
coinDenom: "TIA",
// Actual denom (i.e. uatom, uscrt) used by the blockchain.
coinMinimalDenom: "utia",
// # 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: ""
},
],
// List of coin/tokens used as a fee token in this chain.
feeCurrencies: [
{
// Coin denomination to be displayed to the user.
coinDenom: "TIA",
// Actual denom (i.e. nria, uscrt) used by the blockchain.
coinMinimalDenom: "utia",
// # 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,
},
},
],
ibcChannel: "channel-110",
iconSourceUrl: "https://placehold.co/60x60/EEE/31343C",
};

export const ibcChains: IbcChains = {
"Celestia Mocha-4": CelestiaChainInfo,
};
86 changes: 86 additions & 0 deletions web/src/config/chainConfigs/local.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import type { IbcChainInfo, IbcChains } from "../chains";

const CelestiaChainInfo: IbcChainInfo = {
// Chain-id of the celestia chain.
chainId: "celestia-local-0",
// The name of the chain to be displayed to the user.
chainName: "celestia-local-0",
// RPC endpoint of the chain
rpc: "http://rpc.app.celestia.localdev.me",
// REST endpoint of the chain.
rest: "http://rest.app.celestia.localdev.me",
// Staking coin information
stakeCurrency: {
// Coin denomination to be displayed to the user.
coinDenom: "TIA",
// Actual denom (i.e. uatom, uscrt) used by the blockchain.
coinMinimalDenom: "utia",
// # 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: "celestia",
bech32PrefixAccPub: "celestiapub",
bech32PrefixConsAddr: "celestiavalcons",
bech32PrefixConsPub: "celestiavalconspub",
bech32PrefixValAddr: "celestiavaloper",
bech32PrefixValPub: "celestiavaloperpub",
},
// List of all coin/tokens used in this chain.
currencies: [
{
// Coin denomination to be displayed to the user.
coinDenom: "TIA",
// Actual denom (i.e. uatom, uscrt) used by the blockchain.
coinMinimalDenom: "utia",
// # 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: ""
},
],
// List of coin/tokens used as a fee token in this chain.
feeCurrencies: [
{
// Coin denomination to be displayed to the user.
coinDenom: "TIA",
// Actual denom (i.e. nria, uscrt) used by the blockchain.
coinMinimalDenom: "utia",
// # 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,
},
},
],
ibcChannel: "channel-0",
// TODO - chain icons
iconSourceUrl: "https://placehold.co/60x60/EEE/31343C",
};

export const ibcChains: IbcChains = {
"Celestia Local": CelestiaChainInfo,
};
Loading

0 comments on commit 67fb40d

Please sign in to comment.