diff --git a/docs/docs/faqs/_components/LiquidityMarkets.tsx b/docs/docs/faqs/_components/LiquidityMarkets.tsx index 7777d5dec..0a575585e 100644 --- a/docs/docs/faqs/_components/LiquidityMarkets.tsx +++ b/docs/docs/faqs/_components/LiquidityMarkets.tsx @@ -1,11 +1,80 @@ import * as React from "react"; import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -import { CHAIN_ID_TO_SYMBOL } from "@site/src/utils/const"; -/*import { - coalesceChainName - } from "@certusone/wormhole-sdk"; -*/ +import { + CHAIN_ID_TO_CSS_ID, + CHAIN_ID_TO_NAME, + CHAIN_ID_TO_SYMBOL, +} from "@site/src/utils/const"; +import TOCInline from "@theme/TOCInline"; +const moreAssets = { + ETH: { + symbol: "ETH", + name: "Ether (Portal)", + sourceAddress: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2", + coingeckoId: "ether", + logo: "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/7vfCXTUXx5WJV5JADk17DUJ4ksgau7utNKj4b963voxs/logo.png", + }, + CHAI: { + symbol: "CHAI", + name: "CHAI (Portal)", + sourceAddress: "0x06AF07097C9Eeb7fD685c692751D5C66dB49c215", + logo: "https://raw.githubusercontent.com/lucasvo/chui/master/src/assets/logostill.png", + }, + USDCso: { + symbol: "USDCso", + name: "USD Coin (Portal from Solana)", + sourceAddress: "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v", + coingeckoId: "usd-coin", + logo: "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v/logo.png", + }, + DAI: { + symbol: "DAI", + name: "DAI (Portal)", + sourceAddress: "0x6b175474e89094c44da98b954eedeac495271d0f", + coingeckoId: "dai", + logo: "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/xnorPhAzWXUczCP3KjU5yDxmKKZi5cSbxytQ1LgE3kG/logo.png", + }, + WBTC: { + symbol: "WBTC", + name: "Wrapped BTC (Portal)", + sourceAddress: "0x2260fac5e5542a773aa44fbcfedf7c193bc2c599", + coingeckoId: "wrapped-bitcoin", + logo: "https://etherscan.io/token/images/wbtc_28.png?v=1", + }, + USDCet: { + symbol: "USDCet", + name: "USD Coin (Portal from Ethereum)", + sourceAddress: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48", + coingeckoId: "usd-coin", + logo: "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v/logo.png", + }, + SWEAT: { + symbol: "SWEAT", + name: "Sweat Economy", + }, + BUSDbs: { + symbol: "BUSDbs", + name: "Binance USD (Portal from BSC)", + sourceAddress: "0xe9e7cea3dedca5984780bafc599bd69add087d56", + coingeckoId: "binance-usd", + logo: "https://etherscan.io/token/images/binanceusd_32.png", + }, + BONK: { + symbol: "BONK", + name: "BONK (Portal)", + sourceAddress: "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263", + coingeckoId: "bonk", + logo: "https://raw.githubusercontent.com/wormhole-foundation/wormhole-token-list/main/src/logogen/base/BONK.png", + }, + TBTC: { + symbol: "TBTC", + name: "Threshold Bitcoin", + sourceAddress: "0x18084fbA666a33d37592fA2633fD49a74DD93a88", + coingeckoId: "tbtc", + logo: "https://assets.coingecko.com/coins/images/11224/small/0x18084fba666a33d37592fa2633fd49a74dd93a88.png?1674474504", + }, +}; function useLiquidityMarkets(): any { const [json, setJson] = React.useState(""); React.useEffect(() => { @@ -17,7 +86,15 @@ function useLiquidityMarkets(): any { { signal: controller.signal } ); const data = await response.json(); - setJson(data); + const responseAssets = await fetch( + "https://raw.githubusercontent.com/wormhole-foundation/wormhole-token-list/88fb7a1c4be00fb81c0532cc1482754e479397d5/src/utils/solana_wormhole_tokens.json", + { signal: controller.signal } + ); + + const assets = await responseAssets.json(); + console.log("assets", { ...assets, ...moreAssets }); + + setJson({ ...data, assets: { ...assets, ...moreAssets } }); } catch (err) { console.log(err); } @@ -29,124 +106,140 @@ function useLiquidityMarkets(): any { return json; } -interface LiquidityMarketProps { - source: string; +function AssetTable(target, id, markets, tokens, assets) { + return ( + <> + + + + + + + + + + + {Object.keys(target).map((contractAddress) => ( + + + + + + + ))} + +
Token (origin)Token (target)MarketsContract address
{tokens[contractAddress].symbol}{assets[tokens[contractAddress]?.symbol]?.name} + {target[contractAddress].markets.map((type, idx) => ( + + + {markets[type]?.name || "Not defined"} + + {idx === target[contractAddress].markets.length - 1 + ? "" + : ", "} + + ))} + {contractAddress}
+ + ); } - -function LiquidityMarket(props: LiquidityMarketProps) {} - -interface LiquidityMarketTableProps { - source: string; - targets: Array<{ - target: string; - contract: string; - markets: Array<{ - name: string; - href: string; - }>; - }>; +function formatTargetChain(source) { + return Object.keys(source) + .map((key) => { + return { + target: key, + assets: Object.keys(source[key]).map((contract) => { + return { + name: source[key][contract].symbol, + contract: contract, + markets: source[key][contract].markets, + }; + }), + }; + }) + .filter((target) => target.assets.length !== 0); } -function AssetTable(props: { target: any }) { - return <>{JSON.stringify(props.target)}; +interface TOCItem { + value: string; + id: string; + level: number; } -function LiquidityMarketTable({ source, sourceId }) { - console.log("source", sourceId); +function LiquidityMarketTable({ + source, + sourceId, + markets, + tokens, + targets, + assets, +}) { + const sourceName = CHAIN_ID_TO_SYMBOL[sourceId]; - //const sourceName = coalesceChainName(sourceId); return ( <> - ## Target chain: {CHAIN_ID_TO_SYMBOL[sourceId]} - {/* - {source.map((target, idx) => { - const targetName = coalesceChainName(target); +

Target chain: {targets?.name}

+ + {targets.items.map((item, idx) => { + const targetName = CHAIN_ID_TO_SYMBOL[item.target]; return ( - ${targetName}`} label={`${sourceName} -> ${targetName}`} default={idx === 0}> - sdfsdf - ) - })} - */} + ${sourceName} ${idx}`} + label={`${targetName} -> ${sourceName}`} + default={idx === 0} + > + {AssetTable( + source[item.target], + item.target, + markets, + tokens, + assets + )} + + ); + })} + ); } -interface Market { - name: string; - href: string; -} - -interface Asset { - name: string; - contract: string; - markets: Array; -} - -interface Target { - target: string; - assets: Array; -} - -interface Source { - source: string; - targets: Array; -} +export default function LiquidityMarkets({ children }) { + const { tokenMarkets, markets, tokens, assets } = useLiquidityMarkets(); -interface Entry { - source: string; - target: string; - asset: string; - contract: string; - markets: Array; -} + let toc: TOCItem[] = []; + let targets = {}; -interface MarketTableProps { - source: string; - tabs: Array; -} - -const sample2 = [ - { - source: "Solana", - target: "Ethereum", - asset: "USDC", - contract: "0x1234", - markets: Array, - }, -]; - -const sample = [ - { - source: "Solana", - targets: [ - { - target: "Ethereum", - assets: [ - { - name: "USDC", - contract: "0x1234", - markets: [ - { - name: "USDC/USDT", - href: "https://app.sushi.com/add/0x6b175474e89094c44da98b954eedeac495271d0f/0xdac17f958d2ee523a2206206994597c13d831ec7", - }, - ], - }, - ], - }, - ], - }, -]; - -export default function LiquidityMarkets() { - const { tokenMarkets, markets, tokens } = useLiquidityMarkets(); + if (!!tokenMarkets) { + Object.keys(tokenMarkets).forEach((key: any) => { + const target = formatTargetChain(tokenMarkets[key]); + if (!!target && target.length !== 0) { + targets[key] = { id: key, name: CHAIN_ID_TO_NAME[key], items: target }; + toc.push({ + value: `Target chain: ${CHAIN_ID_TO_NAME[key]}`, + id: CHAIN_ID_TO_CSS_ID[key], + level: 3, + }); + } + }); + } return ( <> + {tokenMarkets && markets && tokens && ( <> - {Object.keys(tokenMarkets).map((key: any) => ( - + {children} + {Object.keys(targets).map((key: any, idx) => ( + ))} )} diff --git a/docs/docs/faqs/liquid-markets.mdx b/docs/docs/faqs/liquid-markets.mdx index 9ce6aa121..4ce48e2b0 100644 --- a/docs/docs/faqs/liquid-markets.mdx +++ b/docs/docs/faqs/liquid-markets.mdx @@ -77,173 +77,3 @@ _Example_: If you want to send ETH(Wormhole) from Ethereum (origin chain) to Sol Check out the [Wormhole Token list](https://github.com/certusone/wormhole-token-list/blob/main/README.md) for more details. - -{/* ## Target chain: Solana - - - - - - - - - - - - - -## Target chain: Ethereum - - - - - - - - - - - - - -## Target chain: Polygon (MATIC) - - - - - - - - - - -## Target chain: Avalanche - - - - - - - -## Target chain: Oasis - - - - - - - - - - - - - - - - - - - -## Target chain: Karura - - - - - - - - - - - - - - - - -## Target chain: Klaytn - - - - - - - - - - - - - - - - -## Target chain: Celo - - - - - - - - - - - - - - - - - - - -## Target chain: Moonbeam - - - - - - - - - - -## Target chain: Aptos - - - - - - - -## Target chain: Algorand - - - - - - - -## Target chain: Injective - - - - - - - - - - -## Target chain: Sui - - - - - - - - - */} diff --git a/docs/package-lock.json b/docs/package-lock.json index 03cdefaad..bd706c949 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -12,6 +12,7 @@ "@docusaurus/core": "2.4.1", "@docusaurus/preset-classic": "2.4.1", "@mdx-js/react": "^1.6.22", + "@types/mdx": "^2.0.7", "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", "react": "^17.0.2", @@ -3504,6 +3505,11 @@ "@types/unist": "*" } }, + "node_modules/@types/mdx": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.7.tgz", + "integrity": "sha512-BG4tyr+4amr3WsSEmHn/fXPqaCba/AYZ7dsaQTiavihQunHSIxk+uAtqsjvicNpyHN6cm+B9RVrUOtW9VzIKHw==" + }, "node_modules/@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", diff --git a/docs/package.json b/docs/package.json index 6be7596cc..eaf68a321 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,6 +19,7 @@ "@docusaurus/core": "2.4.1", "@docusaurus/preset-classic": "2.4.1", "@mdx-js/react": "^1.6.22", + "@types/mdx": "^2.0.7", "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", "react": "^17.0.2", diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 2bc6a4cfd..c495bd1fb 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -18,7 +18,7 @@ } /* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { +[data-theme="dark"] { --ifm-color-primary: #25c2a0; --ifm-color-primary-dark: #21af90; --ifm-color-primary-darker: #1fa588; @@ -28,3 +28,7 @@ --ifm-color-primary-lightest: #4fddbf; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } + +.tabItemMarket li { + min-width: fit-content; +} diff --git a/docs/src/utils/const.ts b/docs/src/utils/const.ts new file mode 100644 index 000000000..c599bfd1a --- /dev/null +++ b/docs/src/utils/const.ts @@ -0,0 +1,137 @@ +export const CHAIN_ID_SOLANA = 1; +export const CHAIN_ID_ETH = 2; +export const CHAIN_ID_TERRA = 3; +export const CHAIN_ID_BSC = 4; +export const CHAIN_ID_POLYGON = 5; +export const CHAIN_ID_AVAX = 6; +export const CHAIN_ID_OASIS = 7; +export const CHAIN_ID_ALGORAND = 8; +export const CHAIN_ID_AURORA = 9; +export const CHAIN_ID_FANTOM = 10; +export const CHAIN_ID_KARURA = 11; +export const CHAIN_ID_ACALA = 12; +export const CHAIN_ID_KLAYTN = 13; +export const CHAIN_ID_CELO = 14; +export const CHAIN_ID_NEAR = 15; +export const CHAIN_ID_MOONBEAM = 16; +export const CHAIN_ID_NEON = 17; +export const CHAIN_ID_TERRA2 = 18; +export const CHAIN_ID_INJECTIVE = 19; +export const CHAIN_ID_OSMOSIS = 20; +export const CHAIN_ID_SUI = 21; +export const CHAIN_ID_APTOS = 22; +export const CHAIN_ID_ARBITRUM = 23; +export const CHAIN_ID_OPTIMISM = 24; +export const CHAIN_ID_GNOSIS = 25; +export const CHAIN_ID_PYTHNET = 26; +export const CHAIN_ID_XPLA = 28; +export const CHAIN_ID_BTC = 29; +export const CHAIN_ID_BASE = 30; +export const CHAIN_ID_SEI = 32; +export const CHAIN_ID_WORMCHAIN = 3104; +export const CHAIN_ID_SEPOLIA = 10002; + +export const CHAIN_ID_TO_NAME: Record = { + [CHAIN_ID_SOLANA]: "Solana", + [CHAIN_ID_ETH]: "Ethereum", + [CHAIN_ID_TERRA]: "Terra", + [CHAIN_ID_BSC]: "Binance Smart Chain", + [CHAIN_ID_POLYGON]: "Polygon", + [CHAIN_ID_AVAX]: "Avalanche", + [CHAIN_ID_OASIS]: "Oasis", + [CHAIN_ID_ALGORAND]: "Algorand", + [CHAIN_ID_AURORA]: "Aurora", + [CHAIN_ID_FANTOM]: "Fantom", + [CHAIN_ID_KARURA]: "Karura", + [CHAIN_ID_ACALA]: "Acala", + [CHAIN_ID_KLAYTN]: "Klaytn", + [CHAIN_ID_CELO]: "Celo", + [CHAIN_ID_NEAR]: "Near", + [CHAIN_ID_MOONBEAM]: "Moonbeam", + [CHAIN_ID_NEON]: "Neon", + [CHAIN_ID_TERRA2]: "Terra2", + [CHAIN_ID_INJECTIVE]: "Injective", + [CHAIN_ID_OSMOSIS]: "Osmosis", + [CHAIN_ID_SUI]: "Sui", + [CHAIN_ID_APTOS]: "Aptos", + [CHAIN_ID_ARBITRUM]: "Arbitrum", + [CHAIN_ID_OPTIMISM]: "Optimism", + [CHAIN_ID_GNOSIS]: "Gnosis", + [CHAIN_ID_PYTHNET]: "Pyth Network", + [CHAIN_ID_XPLA]: "XPLA", + [CHAIN_ID_BTC]: "Bitcoin", + [CHAIN_ID_BASE]: "Base", + [CHAIN_ID_SEI]: "Sei", + [CHAIN_ID_WORMCHAIN]: "Wormchain", + [CHAIN_ID_SEPOLIA]: "Sepolia", +}; + +export const CHAIN_ID_TO_SYMBOL: Record = { + [CHAIN_ID_SOLANA]: "SOL", + [CHAIN_ID_ETH]: "ETH", + [CHAIN_ID_TERRA]: "LUNA", + [CHAIN_ID_BSC]: "BNB", + [CHAIN_ID_POLYGON]: "MATIC", + [CHAIN_ID_AVAX]: "AVAX", + [CHAIN_ID_OASIS]: "ROSE", + [CHAIN_ID_ALGORAND]: "ALGO", + [CHAIN_ID_AURORA]: "AURORA", + [CHAIN_ID_FANTOM]: "FTM", + [CHAIN_ID_KARURA]: "KAR", + [CHAIN_ID_ACALA]: "ACA", + [CHAIN_ID_KLAYTN]: "KLAY", + [CHAIN_ID_CELO]: "CELO", + [CHAIN_ID_NEAR]: "NEAR", + [CHAIN_ID_MOONBEAM]: "GLMR", + [CHAIN_ID_NEON]: "NEON", + [CHAIN_ID_TERRA2]: "LUNA", + [CHAIN_ID_INJECTIVE]: "INJ", + [CHAIN_ID_OSMOSIS]: "OSMO", + [CHAIN_ID_SUI]: "SUI", + [CHAIN_ID_APTOS]: "APTOS", + [CHAIN_ID_ARBITRUM]: "ARB", + [CHAIN_ID_OPTIMISM]: "OPT", + [CHAIN_ID_GNOSIS]: "GNO", + [CHAIN_ID_PYTHNET]: "PYTH", + [CHAIN_ID_XPLA]: "XPLA", + [CHAIN_ID_BTC]: "BTC", + [CHAIN_ID_BASE]: "BASE", + [CHAIN_ID_SEI]: "SEI", + [CHAIN_ID_WORMCHAIN]: "WORM", + [CHAIN_ID_SEPOLIA]: "SEPOLIA", +}; + +export const CHAIN_ID_TO_CSS_ID: Record = { + [CHAIN_ID_SOLANA]: "target-chain-sol", + [CHAIN_ID_ETH]: "target-chain-eth", + [CHAIN_ID_TERRA]: "target-chain-terra", + [CHAIN_ID_BSC]: "target-chain-bsc", + [CHAIN_ID_POLYGON]: "target-chain-polygon", + [CHAIN_ID_AVAX]: "target-chain-avax", + [CHAIN_ID_OASIS]: "target-chain-oasis", + [CHAIN_ID_ALGORAND]: "target-chain-algorand", + [CHAIN_ID_AURORA]: "target-chain-aurora", + [CHAIN_ID_FANTOM]: "target-chain-fantom", + [CHAIN_ID_KARURA]: "target-chain-karura", + [CHAIN_ID_ACALA]: "target-chain-acala", + [CHAIN_ID_KLAYTN]: "target-chain-klaytn", + [CHAIN_ID_CELO]: "target-chain-celo", + [CHAIN_ID_NEAR]: "target-chain-near", + [CHAIN_ID_MOONBEAM]: "target-chain-moonbeam", + [CHAIN_ID_NEON]: "target-chain-neon", + [CHAIN_ID_TERRA2]: "target-chain-terra2", + [CHAIN_ID_INJECTIVE]: "target-chain-injective", + [CHAIN_ID_OSMOSIS]: "target-chain-osmosis", + [CHAIN_ID_SUI]: "target-chain-sui", + [CHAIN_ID_APTOS]: "target-chain-aptos", + [CHAIN_ID_ARBITRUM]: "target-chain-arbitrum", + [CHAIN_ID_OPTIMISM]: "target-chain-optimism", + [CHAIN_ID_GNOSIS]: "target-chain-gnosis", + [CHAIN_ID_PYTHNET]: "target-chain-pythnet", + [CHAIN_ID_XPLA]: "target-chain-xpla", + [CHAIN_ID_BTC]: "target-chain-btc", + [CHAIN_ID_BASE]: "target-chain-base", + [CHAIN_ID_SEI]: "target-chain-sei", + [CHAIN_ID_WORMCHAIN]: "target-chain-wormchain", + [CHAIN_ID_SEPOLIA]: "target-chain-sepolia", +};