fix: improve displayed token orders (#544)

* fix: links to different position management pages flip the token order * fix: place tokenA on left and tokenB on right in Pool pages * fix: place tokenA on left and tokenB on right in Orderbook pages * fix: switch placement of tokens on Pool Overview page * docs: clarify the realtime price return price direction * fix: use correct realtime price direction for Pool Overview page
duality-labs · Apr 24, 2024 · 62f3b9b · 62f3b9b
1 parent 07ef511
commit 62f3b9b
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 60 deletions.
diff --git a/src/components/cards/PriceCard.tsx b/src/components/cards/PriceCard.tsx
@@ -3,10 +3,10 @@ import { ReactNode } from 'react';
 import AssetIcon from '../assets/AssetIcon';
 import AssetSymbol from '../assets/AssetName';
 
-import { Token, getTokenId } from '../../lib/web3/utils/tokens';
-import { useCurrentPriceFromTicks } from '../Liquidity/useCurrentPriceFromTicks';
+import { Token } from '../../lib/web3/utils/tokens';
 import { formatPrice } from '../../lib/utils/number';
 import { useSimplePrice } from '../../lib/tokenPrices';
+import { useRealtimePrice } from '../stats/hooks';
 
 import './PriceCard.scss';
 
@@ -57,15 +57,12 @@ export function PairPriceCard({
   tokenA: Token;
   tokenB: Token;
 }) {
-  const currentPrice = useCurrentPriceFromTicks(
-    getTokenId(tokenA),
-    getTokenId(tokenB)
-  );
+  const [, currentPriceBtoA] = useRealtimePrice(tokenA, tokenB);
   return (
     <PriceCard
       tokenA={tokenA}
       tokenB={tokenB}
-      price={currentPrice?.toNumber()}
+      price={currentPriceBtoA ? 1 / currentPriceBtoA : undefined}
     />
   );
 }

diff --git a/src/components/stats/hooks.ts b/src/components/stats/hooks.ts
@@ -116,7 +116,7 @@ function getLastPriceValue([, , , close]: number[]): number[] {
 export function useRealtimePrice(
   tokenA: Token | undefined,
   tokenB: Token | undefined
-) {
+): [timeUnix: number | null | undefined, priceBtoA: number | null | undefined] {
   // fetch most recent value with a page limit
   const denomA = tokenA && getIndexerTokenPathPart(tokenA);
   const denomB = tokenB && getIndexerTokenPathPart(tokenB);

diff --git a/src/pages/Orderbook/Orderbook.tsx b/src/pages/Orderbook/Orderbook.tsx
@@ -26,7 +26,7 @@ export default function OrderbookPage() {
 
 function Orderbook() {
   // change tokens to match pathname
-  const match = useMatch('/orderbook/:tokenB/:tokenA');
+  const match = useMatch('/orderbook/:tokenA/:tokenB');
   const { data: denomA } = useDenomFromPathParam(match?.params['tokenA']);
   const { data: denomB } = useDenomFromPathParam(match?.params['tokenB']);
   const { data: tokenA } = useToken(denomA);

diff --git a/src/pages/Orderbook/OrderbookChart.tsx b/src/pages/Orderbook/OrderbookChart.tsx
@@ -106,7 +106,7 @@ export default function OrderBookChart({
   // tokenPairID is made of symbols, which is different to token paths
   const tokenPairID = useMemo(() => {
     if (tokenA && tokenB) {
-      return `${tokenA.symbol}/${tokenB.symbol}`;
+      return `${tokenB.symbol}/${tokenA.symbol}`;
     }
   }, [tokenA, tokenB]);
 

diff --git a/src/pages/Orderbook/OrderbookHeader.tsx b/src/pages/Orderbook/OrderbookHeader.tsx
@@ -60,7 +60,7 @@ function OrderbookNav({ tokenA, tokenB }: { tokenA?: Token; tokenB?: Token }) {
   const setTokensPath = useCallback(
     ([tokenA, tokenB]: [Token?, Token?]) => {
       if (tokenA || tokenB) {
-        const path = [tokenB?.symbol ?? '-', tokenA?.symbol ?? '-'];
+        const path = [tokenA?.symbol ?? '-', tokenB?.symbol ?? '-'];
         navigate(`/orderbook/${path.filter(Boolean).join('/')}`);
       } else {
         navigate('/orderbook');
@@ -90,24 +90,24 @@ function OrderbookNav({ tokenA, tokenB }: { tokenA?: Token; tokenB?: Token }) {
 
   return (
     <div className="row gap-md flex-centered">
-      <TokenPairLogos className="h3" tokenLeft={tokenB} tokenRight={tokenA} />
+      <TokenPairLogos className="h3" tokenLeft={tokenA} tokenRight={tokenB} />
       <h2 className="h3 text-medium">
         <TokenPicker
           className="h3 text-medium px-0 inline"
-          onChange={setTokenB}
-          exclusion={tokenB}
-          value={tokenB}
+          onChange={setTokenA}
+          exclusion={tokenA}
+          value={tokenA}
         >
-          {tokenB ? <AssetSymbol asset={tokenB} /> : 'Select'}
+          {tokenA ? <AssetSymbol asset={tokenA} /> : 'Select'}
         </TokenPicker>
         <span>/</span>
         <TokenPicker
           className="h3 text-medium px-0 inline"
-          onChange={setTokenA}
-          exclusion={tokenA}
-          value={tokenA}
+          onChange={setTokenB}
+          exclusion={tokenB}
+          value={tokenB}
         >
-          {tokenA ? <AssetSymbol asset={tokenA} /> : 'Select'}
+          {tokenB ? <AssetSymbol asset={tokenB} /> : 'Select'}
         </TokenPicker>
       </h2>
       <button

diff --git a/src/pages/Pool/PoolLayout.tsx b/src/pages/Pool/PoolLayout.tsx
@@ -43,9 +43,9 @@ export default function PoolLayout({
             <>
               <Link
                 className="text-light-alt"
-                to={`/pools/${tokenBPath}/${tokenAPath}`}
+                to={`/pools/${tokenAPath}/${tokenBPath}`}
               >
-                {tokenB.symbol}/{tokenA.symbol}
+                {tokenA.symbol}/{tokenB.symbol}
               </Link>
               <span>{'>'}</span>
               <span>
@@ -54,7 +54,7 @@ export default function PoolLayout({
             </>
           ) : tokenA && tokenB ? (
             <span>
-              {tokenB.symbol}/{tokenA.symbol}
+              {tokenA.symbol}/{tokenB.symbol}
             </span>
           ) : (
             <span>Create New Position</span>
@@ -72,11 +72,11 @@ export default function PoolLayout({
             <div className="pool-page__header row my-4">
               <TokenPairLogos
                 className="h3"
-                tokenLeft={tokenB}
-                tokenRight={tokenA}
+                tokenLeft={tokenA}
+                tokenRight={tokenB}
               />
               <h2 className="h3">
-                <AssetSymbol asset={tokenB} /> <AssetSymbol asset={tokenA} />{' '}
+                <AssetSymbol asset={tokenA} /> <AssetSymbol asset={tokenB} />{' '}
                 Pool
               </h2>
               <button

diff --git a/src/pages/Pool/PoolManagement.tsx b/src/pages/Pool/PoolManagement.tsx
@@ -567,7 +567,7 @@ export default function PoolManagement({
           : 'A'
         : undefined;
     });
-    setTokens([tokenA, tokenB]);
+    setTokens([tokenB, tokenA]);
     setInitialPrice((price) => {
       const priceNumber = Number(price);
       if (priceNumber > 0) {
@@ -990,54 +990,54 @@ export default function PoolManagement({
       >
         <div className="chart-header row h4">Add Liquidity</div>
         <div className="card-row my-3">
-          {tokenB ? (
+          {tokenA ? (
             <TokenInputGroup
               className="flex"
               defaultAssetMode="Dex"
-              variant={!hasSufficientFundsB && 'error'}
+              variant={!hasSufficientFundsA && 'error'}
               onValueChanged={(value) => {
-                setInputValueB(value);
-                setLastUsedInput('B');
+                setInputValueA(value);
+                setLastUsedInput('A');
               }}
-              onTokenChanged={setTokenB}
-              token={tokenB}
-              denom={denomB}
-              value={inputValueB}
-              exclusion={tokenA}
+              onTokenChanged={setTokenA}
+              token={tokenA}
+              denom={denomA}
+              value={inputValueA}
+              exclusion={tokenB}
             />
           ) : (
             <TokenPicker
               className="flex button-primary p-4"
               defaultAssetMode="Dex"
-              value={tokenB}
-              onChange={setTokenB}
-              exclusion={tokenA}
+              value={tokenA}
+              onChange={setTokenA}
+              exclusion={tokenB}
             />
           )}
         </div>
         <div className="card-row my-3">
-          {tokenA ? (
+          {tokenB ? (
             <TokenInputGroup
               className="flex"
               defaultAssetMode="Dex"
-              variant={!hasSufficientFundsA && 'error'}
+              variant={!hasSufficientFundsB && 'error'}
               onValueChanged={(value) => {
-                setInputValueA(value);
-                setLastUsedInput('A');
+                setInputValueB(value);
+                setLastUsedInput('B');
               }}
-              onTokenChanged={setTokenA}
-              token={tokenA}
-              denom={denomA}
-              value={inputValueA}
-              exclusion={tokenB}
+              onTokenChanged={setTokenB}
+              token={tokenB}
+              denom={denomB}
+              value={inputValueB}
+              exclusion={tokenA}
             />
           ) : (
             <TokenPicker
               className="flex button-primary p-4"
               defaultAssetMode="Dex"
-              value={tokenA}
-              onChange={setTokenA}
-              exclusion={tokenB}
+              value={tokenB}
+              onChange={setTokenB}
+              exclusion={tokenA}
             />
           )}
         </div>

diff --git a/src/pages/Pool/PoolOverview.tsx b/src/pages/Pool/PoolOverview.tsx
@@ -60,7 +60,7 @@ export default function PoolOverview({
   setTokens: ([tokenA, tokenB]: [Token?, Token?]) => void;
 }) {
   const swap = useCallback(() => {
-    setTokens([tokenA, tokenB]);
+    setTokens([tokenB, tokenA]);
   }, [tokenA, tokenB, setTokens]);
 
   const tokenPair = useMemo<TokenPair>(
@@ -77,14 +77,14 @@ export default function PoolOverview({
       <div className="row mt-3 mb-xl">
         <div className="col">
           <PriceCardRow>
-            <PairPriceCard tokenA={tokenB} tokenB={tokenA} />
             <PairPriceCard tokenA={tokenA} tokenB={tokenB} />
+            <PairPriceCard tokenA={tokenB} tokenB={tokenA} />
           </PriceCardRow>
         </div>
         <div className="col ml-auto">
           <div className="row gap-lg">
             <div className="col">
-              <Link to={`/pools/${tokenBPath}/${tokenAPath}/add`}>
+              <Link to={`/pools/${tokenAPath}/${tokenBPath}/add`}>
                 <button className="button button-primary py-3 px-4">
                   {userHasDeposits ? (
                     <>Add To Position</>
@@ -96,15 +96,15 @@ export default function PoolOverview({
             </div>
             {userHasDeposits && (
               <div className="col">
-                <Link to={`/pools/${tokenBPath}/${tokenAPath}/edit`}>
+                <Link to={`/pools/${tokenAPath}/${tokenBPath}/edit`}>
                   <button className="button button-primary py-3 px-4">
                     Edit Position
                   </button>
                 </Link>
               </div>
             )}
             <div className="col">
-              <Link to={`/orderbook/${tokenBPath}/${tokenAPath}`}>
+              <Link to={`/orderbook/${tokenAPath}/${tokenBPath}`}>
                 <button className="button button-primary-outline py-3 px-4">
                   Trade
                 </button>
@@ -185,7 +185,7 @@ function PairComposition({ tokenA, tokenB }: { tokenA: Token; tokenB: Token }) {
           );
         },
       ],
-      data: [tokenB, tokenA],
+      data: [tokenA, tokenB],
     };
   }, [amountA, amountB, tokenA, tokenB, valueA, valueB]);
 
@@ -240,8 +240,8 @@ function PoolOverviewTable({
 const transactionTableHeadings = [
   'Type',
   'Total Value',
-  'Token B Amount',
   'Token A Amount',
+  'Token B Amount',
   'Wallet',
   'Time',
 ] as const;

diff --git a/src/pages/Pool/Pools.tsx b/src/pages/Pool/Pools.tsx
@@ -30,8 +30,8 @@ function Pools() {
   const navigate = useNavigate();
 
   // change tokens to match pathname
-  const matchTokens = useMatch('/pools/:tokenB/:tokenA');
-  const matchTokenManagement = useMatch('/pools/:tokenB/:tokenA/:addOrEdit');
+  const matchTokens = useMatch('/pools/:tokenA/:tokenB');
+  const matchTokenManagement = useMatch('/pools/:tokenA/:tokenB/:addOrEdit');
   const isManagementPath =
     !!matchTokenManagement &&
     (matchTokenManagement.params['addOrEdit'] === 'add' ||

diff --git a/vite.config.ts.timestamp-1712832434339-e1f27c329f2a4.mjs b/vite.config.ts.timestamp-1712832434339-e1f27c329f2a4.mjs
@@ -0,0 +1,25 @@
+// vite.config.ts
+import { defineConfig } from 'file:///Users/david/Projects/Duality/duality-web-app/node_modules/vite/dist/node/index.js';
+import react from 'file:///Users/david/Projects/Duality/duality-web-app/node_modules/@vitejs/plugin-react/dist/index.mjs';
+var config = defineConfig({
+  envPrefix: 'REACT_APP_',
+  plugins: [react()],
+  build: {
+    outDir: 'build',
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    deps: {
+      optimizer: {
+        web: {
+          // some libraries are not ESM are require transforming
+          include: ['@visx/scale'],
+        },
+      },
+    },
+  },
+});
+var vite_config_default = config;
+export { vite_config_default as default };
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvZGF2aWQvUHJvamVjdHMvRHVhbGl0eS9kdWFsaXR5LXdlYi1hcHBcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9kYXZpZC9Qcm9qZWN0cy9EdWFsaXR5L2R1YWxpdHktd2ViLWFwcC92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWQvUHJvamVjdHMvRHVhbGl0eS9kdWFsaXR5LXdlYi1hcHAvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcsIFVzZXJDb25maWcgfSBmcm9tICd2aXRlJztcbmltcG9ydCB7IElubGluZUNvbmZpZyB9IGZyb20gJ3ZpdGVzdCc7XG5pbXBvcnQgcmVhY3QgZnJvbSAnQHZpdGVqcy9wbHVnaW4tcmVhY3QnO1xuXG4vLyByZWZlcmVuY2UgZG9jczpcbi8vIC0gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbi8vIC0gaHR0cHM6Ly92aXRlc3QuZGV2L2NvbmZpZy9cbmNvbnN0IGNvbmZpZzogVXNlckNvbmZpZyAmIHsgdGVzdD86IElubGluZUNvbmZpZyB9ID0gZGVmaW5lQ29uZmlnKHtcbiAgZW52UHJlZml4OiAnUkVBQ1RfQVBQXycsXG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbiAgYnVpbGQ6IHtcbiAgICBvdXREaXI6ICdidWlsZCcsXG4gIH0sXG4gIHRlc3Q6IHtcbiAgICBnbG9iYWxzOiB0cnVlLFxuICAgIGVudmlyb25tZW50OiAnanNkb20nLFxuICAgIGRlcHM6IHtcbiAgICAgIG9wdGltaXplcjoge1xuICAgICAgICB3ZWI6IHtcbiAgICAgICAgICAvLyBzb21lIGxpYnJhcmllcyBhcmUgbm90IEVTTSBhcmUgcmVxdWlyZSB0cmFuc2Zvcm1pbmdcbiAgICAgICAgICBpbmNsdWRlOiBbJ0B2aXN4L3NjYWxlJ10sXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59KTtcblxuZXhwb3J0IGRlZmF1bHQgY29uZmlnO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUF5VCxTQUFTLG9CQUFnQztBQUVsVyxPQUFPLFdBQVc7QUFLbEIsSUFBTSxTQUErQyxhQUFhO0FBQUEsRUFDaEUsV0FBVztBQUFBLEVBQ1gsU0FBUyxDQUFDLE1BQU0sQ0FBQztBQUFBLEVBQ2pCLE9BQU87QUFBQSxJQUNMLFFBQVE7QUFBQSxFQUNWO0FBQUEsRUFDQSxNQUFNO0FBQUEsSUFDSixTQUFTO0FBQUEsSUFDVCxhQUFhO0FBQUEsSUFDYixNQUFNO0FBQUEsTUFDSixXQUFXO0FBQUEsUUFDVCxLQUFLO0FBQUE7QUFBQSxVQUVILFNBQVMsQ0FBQyxhQUFhO0FBQUEsUUFDekI7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLEVBQ0Y7QUFDRixDQUFDO0FBRUQsSUFBTyxzQkFBUTsiLAogICJuYW1lcyI6IFtdCn0K