add liquidity pool listing view

app/components/LiquidityPoolTable.module.css

@@ -0,0 +1,30 @@
+.asset-image {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.asset-code {
+  display: inline-block;
+  width: 150px;
+}
+
+.asset-url {
+  font-size: 12px;
+}
+
+.amount {
+  display: inline-block;
+  width: 80px;
+  text-align: right;
+}
+
+.shares {
+  width: 50px;
+  text-align: center;
+}
+
+.trustlines {
+  width: 50px;
+  text-align: center;
+}

app/components/LiquidityPoolTable.tsx

@@ -0,0 +1,125 @@
+import Table from 'react-bootstrap/Table'
+import { FormattedMessage } from 'react-intl'
+import type { Horizon } from 'stellar-sdk'
+
+import { type LiquidityPoolProps } from './operations/LiquidityPool'
+import { liquidityPoolAsset } from '~/data/liquidity_pool_asset'
+import { formatAmountToHumanReadable, getAssetCode } from '~/lib/utilities'
+
+import styles from './LiquidityPoolTable.module.css'
+
+interface ParentProps {
+  compact: boolean
+  // horizonURL: string
+}
+
+interface LiquidityPoolRowProps extends LiquidityPoolProps, ParentProps {}
+
+interface LiquidityPoolTableProps {
+  compact: boolean
+  records: ReadonlyArray<LiquidityPoolProps>
+  // horizonURL?: string
+}
+
+const fallBackAssetIcon = 'img/circle.svg'
+
+const PoolAsset = ({
+  reserves,
+}: {
+  reserves: Horizon.Reserve[]
+}): React.JSX.Element => {
+  return (
+    <div>
+      <span>
+        {reserves.map(({ asset, amount }, index) => {
+          const assetCode = getAssetCode(asset)
+
+          const icon = liquidityPoolAsset[assetCode]?.icon || fallBackAssetIcon
+          const url = liquidityPoolAsset[assetCode]?.url
+
+          return (
+            <div key={index}>
+              <img
+                src={icon}
+                alt={assetCode}
+                className={styles['asset-image']}
+              />
+              <span className={styles['asset-code']}>
+                {assetCode} <span className={styles['asset-url']}>{url}</span>
+              </span>
+              <span className={styles['amount']}>
+                {formatAmountToHumanReadable(amount)}
+              </span>
+            </div>
+          )
+        })}
+      </span>
+    </div>
+  )
+}
+
+const LiquidityPoolRow = ({
+  // compact,
+  id,
+  totalTrustlines,
+  totalShares,
+  reserves,
+}: LiquidityPoolRowProps): React.JSX.Element => (
+  <tr>
+    <td>
+      <PoolAsset reserves={reserves} />
+    </td>
+    <td className={styles['shares']}>
+      {formatAmountToHumanReadable(totalShares)}
+    </td>
+    <td className={styles['trustlines']}>{totalTrustlines}</td>
+  </tr>
+)
+
+export default function LiquidityPoolTable({
+  compact,
+  records, // horizonURL,
+}: LiquidityPoolTableProps) {
+  return (
+    <div>
+      <Table
+        id="liquidity-pool-table"
+        className="table-striped table-hover table-condensed"
+      >
+        <thead>
+          <tr>
+            <th>
+              <FormattedMessage id="liquidity-pool.assets" />
+            </th>
+            {/* commented out as it's not certain how to display the values. */}
+            {/* we also might need to reconsider what to be displayed. */}
+            {/* <th>
+              <FormattedMessage id="liquidity-pool.liquidity" />
+            </th>
+            <th>
+              <FormattedMessage id="liquidity-pool.apy" />
+            </th>
+            <th>
+              <FormattedMessage id="liquidity-pool.vol-24h" />
+            </th>
+            <th>
+              <FormattedMessage id="liquidity-pool.fee-24h" />
+            </th> */}
+            <th>
+              <FormattedMessage id="liquidity-pool.shares" />
+            </th>
+            <th>
+              <FormattedMessage id="liquidity-pool.trustlines" />
+            </th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {records.map((pool) => (
+            <LiquidityPoolRow key={pool.id} compact={compact} {...pool} />
+          ))}
+        </tbody>
+      </Table>
+    </div>
+  )
+}

app/components/layout/Header.tsx

@@ -81,6 +81,11 @@ export default function Header({
                 <FormattedMessage id="trades" />
               </NavDropdown.Item>
             </LinkContainer>
+            <LinkContainer to="/pools">
+              <NavDropdown.Item>
+                <FormattedMessage id="liquidity-pools" />
+              </NavDropdown.Item>
+            </LinkContainer>
           </NavDropdown>
         </Nav>
         <Nav className="ms-auto">

app/components/operations/LiquidityPool.tsx

@@ -1,5 +1,15 @@
 import AccountLink from '../shared/AccountLink'
-import Asset from '../shared/Asset'
+import type { PropsWithChildren } from 'react'
+import type { Horizon } from 'stellar-sdk'
+import { getAssetCode } from '~/lib/utilities'
+
+export interface LiquidityPoolProps extends PropsWithChildren {
+  id: string
+  totalTrustlines: string
+  totalShares: string
+  reserves: Horizon.Reserve[]
+  pagingToken: string
+}
 
 const LiquidityPoolDeposit = ({
   sourceAccount,
@@ -10,14 +20,7 @@ const LiquidityPoolDeposit = ({
     <AccountLink account={sourceAccount} /> deposited&nbsp;
     {reservesDeposited
       .map(({ asset, amount }: any) => {
-        let assetStr
-        if (asset === 'native') {
-          assetStr = 'XLM'
-        } else {
-          const [code] = asset.split(':')
-          assetStr = code // (<Asset code={code} issuer={address} type="unknown" />)
-        }
-        return `${amount} ${assetStr}`
+        return `${amount} ${getAssetCode(asset)}`
       })
       .join(', ')}{' '}
     for&nbsp;
@@ -36,14 +39,7 @@ const LiquidityPoolWithdraw = ({
     {shares || sharesRedeemed}&nbsp; shares in liquidity pool for&nbsp;
     {reservesReceived
       .map(({ asset, amount }: any) => {
-        let assetStr
-        if (asset === 'native') {
-          assetStr = 'XLM'
-        } else {
-          const [code] = asset.split(':')
-          assetStr = code // (<Asset code={code} issuer={address} type="unknown" />)
-        }
-        return `${amount} ${assetStr}`
+        return `${amount} ${getAssetCode(asset)}`
       })
       .join(', ')}
   </span>