From d9f8cdf2e7635ab962fb0ac5c66b6c9b4cdac90c Mon Sep 17 00:00:00 2001 From: Ryuji Eguchi Date: Tue, 14 Nov 2023 13:34:59 +1100 Subject: [PATCH 1/6] add liquidity pools listing view --- app/components/LiquidityPoolTable.tsx | 130 +++++++++ app/components/layout/Header.tsx | 5 + app/components/operations/LiquidityPool.tsx | 11 +- app/data/liquidity_pool_asset.ts | 300 ++++++++++++++++++++ app/lib/languages/en.json | 4 + app/lib/loader-util.ts | 1 + app/lib/stellar/server_request_utils.ts | 38 ++- app/lib/stellar/server_response_utils.ts | 6 + app/lib/utils.js | 15 + app/routes/pools._index.tsx | 52 ++++ app/styles/styles.css | 29 +- public/img/circle.svg | 1 + 12 files changed, 589 insertions(+), 3 deletions(-) create mode 100644 app/components/LiquidityPoolTable.tsx create mode 100644 app/data/liquidity_pool_asset.ts create mode 100644 app/routes/pools._index.tsx create mode 100644 public/img/circle.svg diff --git a/app/components/LiquidityPoolTable.tsx b/app/components/LiquidityPoolTable.tsx new file mode 100644 index 000000000..95249cd5f --- /dev/null +++ b/app/components/LiquidityPoolTable.tsx @@ -0,0 +1,130 @@ +import Table from 'react-bootstrap/Table' +import { FormattedMessage } from 'react-intl' +import { Horizon } from 'stellar-sdk' + +import type { LiquidityPoolProps } from './operations/LiquidityPool' +import { liquidityPoolAsset } from '~/data/liquidity_pool_asset' +import { formatAmountToHumanReadable } from '~/lib/utils' + +interface ParentProps { + compact: boolean + // horizonURL: string +} + +interface LiquidityPoolRowProps extends LiquidityPoolProps, ParentProps {} + +interface LiquidityPoolTableProps { + compact: boolean + records: ReadonlyArray + // horizonURL?: string +} + +const fallBackAssetIcon = 'img/circle.svg' + +const PoolAsset = ({ + reserves, +}: { + reserves: Horizon.Reserve[] +}): React.JSX.Element => { + return ( +
+ + {reserves.map(({ asset, amount }) => { + // TODO: refactor this because the same code exists in app/components/operations/LiquidityPool.tsx. + let assetStr + if (asset === 'native') { + assetStr = 'XLM' + } else { + const [code] = asset.split(':') + assetStr = code + } + + const icon = liquidityPoolAsset[assetStr]?.icon || fallBackAssetIcon + const url = liquidityPoolAsset[assetStr]?.url + + return ( +
+ {assetStr} + + {assetStr} {url} + + + {formatAmountToHumanReadable(amount)} + +
+ ) + })} + +
+ ) +} + +const LiquidityPoolRow = ({ + // compact, + id, + totalTrustlines, + totalShares, + reserves, +}: LiquidityPoolRowProps): React.JSX.Element => ( + + + + + + {formatAmountToHumanReadable(totalShares)} + + {totalTrustlines} + +) + +export default function LiquidityPoolTable({ + compact, + records, // horizonURL, +}: LiquidityPoolTableProps) { + return ( +
+ + + + + {/* commented out as it's not certain how to display the values. */} + {/* we also might need to reconsider what to be displayed. */} + {/* + + + */} + + + + + + {records.map((pool) => ( + + ))} + +
+ + + + + + + + + + + + + + +
+
+ ) +} diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx index 8d7043b2a..ccba2acd4 100644 --- a/app/components/layout/Header.tsx +++ b/app/components/layout/Header.tsx @@ -81,6 +81,11 @@ export default function Header({ + + + + +