Merge branch 'docs/add-liquidity-fragments-to-simplify-maintenance' of …

…https://github.com/XLabs/portal-bridge-ui into docs/add-liquidity-fragments-to-simplify-maintenance

docs/docs/faqs/_components/LiquidityMarkets.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+function useLiquidityMarkets(): any {
+    const [json, setJson] = React.useState('');
+    React.useEffect(() => {
+        const controller = new AbortController();
+        async function getLiquidityMarkets() {
+            try {
+                const response = await fetch('https://raw.githubusercontent.com/certusone/wormhole-token-list/main/src/markets.json', { signal: controller.signal });
+                const data = await response.json();
+                setJson(data);    
+            } catch(err) {
+                console.log(err);
+            }
+        };
+        getLiquidityMarkets();
+        return () => controller.abort()
+    }, []);
+
+    return json;
+}
+
+
+interface LiquidityMarketProps {
+    source: string
+
+}
+
+function LiquidityMarket(props: LiquidityMarketProps) {}
+
+interface LiquidityMarketTableProps {
+    source: string
+    targets: Array<{
+        target: string
+        contract: string
+        markets: Array<{
+            name: string
+            href: string
+        }>
+    }>
+}
+
+function AssetTable(props: { target: any }) {
+    return <>{JSON.stringify(props.target)}</>
+}
+
+function LiquidityMarketTable({ source, targets }: LiquidityMarketTableProps) {
+    return (
+        <>
+            ## Target chain: {source}
+            <Tabs>
+                {targets.map((target, idx) => (
+                    <TabItem value={`${source} -> ${target}`} label={`${source} -> ${target}`} default={idx === 0}>
+                       a
+                    </TabItem>))}
+            </Tabs>
+        </>
+        )
+}
+
+interface Market {
+    name: string
+    href: string
+}
+
+interface Asset {
+    name: string
+    contract: string
+    markets: Array<Market>
+}
+
+interface Target {
+    target: string
+    assets: Array<Asset>
+}
+
+interface Source {
+    source: string
+    targets: Array<Target>
+}
+
+interface Entry {
+    source: string
+    target: string
+    asset: string
+    contract: string
+    markets: Array<Market>
+}
+
+interface MarketTableProps {
+    source: string
+    tabs: Array<Entry>
+}
+
+const sample2 = [
+    {
+        source: 'Solana',
+        target: 'Ethereum',
+        asset: 'USDC',
+        contract: '0x1234',
+        markets: Array<Market>
+    }
+]
+
+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();
+    return (
+        <>
+        {
+            JSON.stringify(tokenMarkets)
+        }
+        </>
+    );
+}

docs/docs/faqs/liquid-markets.mdx

@@ -4,6 +4,8 @@ description: >-
 title: Liquid Markets
 ---
 
+import LiquidityMarkets from './_components/LiquidityMarkets'
+
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import EthSol from "./_liquid-markets/eth-sol.md";
@@ -74,6 +76,8 @@ _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. 
 
+<LiquidityMarkets />
+
 ## Target chain: Solana
 
 <Tabs>

docs/tsconfig.json

@@ -2,6 +2,7 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "baseUrl": "."
   }
 }