add liquidity for mintable assets on docs

docs/develop/asset-transfer-via-nitro/supported-chains-tokens.mdx

@@ -4,15 +4,22 @@ sidebar_position: 7
 ---
 
 import ContractData from '../../../src/utils/ContractAddressTable' ;
+import AssetBridgeLiquidityData from '../../../src/utils/AssetBridgeLiquidityTable' ;
 
 ## Mainnet
 For supported chains on mainnet, please refer below -
 
 <ContractData />
 
+<br />
 
+### Liquidity for Mintable Tokens
+For liquidity present on various chains for mintable tokens, please refer below. This can be referred to for figuring out which chain has the liqudity of the assets providing visibility to the users on where they can withdraw funds -
 
+<AssetBridgeLiquidityData />
 
+<br />
+<br />
 
 ## Testnet
 

docs/overview/README.md

@@ -26,7 +26,7 @@ CrossTalk supports both stateful and stateless bridging:
 - For dApps that do not require any custom bridging logic or any data aggregation layer in the middle, no middleware contract is required. 
 
 
-## Global Liquidity via Nitrp
+## Global Liquidity via Nitro
 Nitro is a cross-chain swapping engine that allows for cross-chain asset transfers as well as cross-chain sequencing of asset transfers and arbitrary instruction transfers. Nitro has a whole development suite around it, which includes:
 1. a widget that can be used by other projects to give their users an option to perform cross-chain transactions directly from their UI;
 2. an API and a SDK that abstracts Nitro's backend capabilities for projects that want to use their own UI/platform for offering the cross-chain asset swap functionality;

src/utils/AssetBridgeLiquidityTable.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const AssetBridgeLiquidityData = () => {
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    const fetchData = async () => {
+        try {
+            const result = await axios.get("https://api.poap-nft.routerprotocol.com/liquidity/asset-bridge");   
+            console.log(result)      
+            const resultArray = Object.keys(result.data).map(chainId => {
+                return { chainId, ...result.data[chainId] };
+            });
+            console.log()
+            setData(resultArray);
+        } catch (error) {
+            console.log(error);
+        }
+    };
+
+    return (
+        <div>
+            <table>
+                <thead>
+                    <tr>
+                        <th style={{ fontWeight: 'bold' }}>Chain ID</th>
+                        <th style={{ fontWeight: 'bold' }}>Chain Name</th>
+                        <th style={{ fontWeight: 'bold' }}>Token</th>
+                        <th style={{ fontWeight: 'bold' }}>Token Balance</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {data.filter((item) => parseFloat(item.balance) > 0)
+                        .map((item) => (
+                            <tr key={item.chainId}>
+                                <td>{item.chainId}</td>
+                                <td>{item.chain}</td>
+                                <td>{item.tokenSymbol}</td>
+                                <td>{parseFloat(item.balance) / Math.pow(10, item.tokenDecimal)}</td>
+                            </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default AssetBridgeLiquidityData;