feat: 85 update swap page logic to cosmjs usage

.env

@@ -10,4 +10,6 @@ REACT_APP__APP_VERSION=$npm_package_version
 
 # Contract Info
 REACT_APP__CHAIN_ID=31337
-REACT_APP__CONTRACT_ADDRESS__DUALITY_CORE=0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9
+REACT_APP__CONTRACT_ADDRESS__DUALITY_CORE=0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9
+REACT_APP__INDEXER_URL=http://localhost:1317/duality/duality/tick
+REACT_APP__INDEXER_EVENT_URL=ws://localhost:26657/websocket

.env.template

@@ -1,2 +1,4 @@
 REACT_APP__CHAIN_ID=31337
 REACT_APP__CONTRACT_ADDRESS__DUALITY_CORE=0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9
+REACT_APP__INDEXER_URL=http://localhost:1317/duality/duality/tick
+REACT_APP__INDEXER_EVENT_URL=ws://localhost:26657/websocket

.env.test

@@ -1,2 +1,4 @@
 REACT_APP__CHAIN_ID=31337
 REACT_APP__CONTRACT_ADDRESS__DUALITY_CORE=0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9
+REACT_APP__INDEXER_URL=http://localhost:1317/duality/duality/tick
+REACT_APP__INDEXER_EVENT_URL=ws://localhost:26657/websocket

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^0.6.3",
     "@reach/dialog": "^0.17.0",
+    "bignumber.js": "^9.0.2",
     "buffer": "^6.0.3",
     "ethers": "^5.6.4",
     "invariant": "^2.2.4",
@@ -75,4 +76,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/TokenPicker/mockHooks.ts

@@ -31,13 +31,13 @@ const tokens: Array<Token> = [
     logo: null,
     symbol: 'Dai',
     name: 'Dai Stablecoin',
-    address: '0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512',
+    address: '0x0002',
   },
   {
     logo: null,
     symbol: 'USDC',
     name: 'USDCoin',
-    address: '0x5FbDB2315678afecb367f032d93F642f64180aa3',
+    address: '0x0003',
   },
   { logo: null, symbol: 'USDT', name: 'Tether USD', address: '0x0004' },
   { logo: null, symbol: 'WBTC', name: 'Wrapped BTC', address: '0x0005' },

src/lib/web3/indexerProvider.tsx

@@ -0,0 +1,196 @@
+import { useContext, createContext, useState, useEffect } from 'react';
+import {
+  EventType,
+  createSubscriptionManager,
+  MessageActionEvent,
+} from './events';
+import { BigNumber } from 'bignumber.js';
+
+const eventsURL = process.env.REACT_APP__INDEXER_EVENT_URL;
+if (typeof eventsURL !== 'string' || !eventsURL)
+  throw new Error(
+    'Invalid value for env variable REACT_APP__INDEXER_EVENT_URL'
+  );
+const subscriber = createSubscriptionManager(eventsURL);
+
+export interface PairInfo {
+  token0: string;
+  token1: string;
+  ticks: { [tickID: string]: TickInfo };
+}
+
+export interface TickInfo {
+  price0: BigNumber;
+  price1: BigNumber;
+  reserves0: BigNumber;
+  reserves1: BigNumber;
+  fee: BigNumber;
+}
+
+export interface PairMap {
+  [pairID: string]: PairInfo;
+}
+
+interface IndexerContextType {
+  pairs: PairMap;
+  error?: string;
+}
+
+const IndexerContext = createContext<IndexerContextType>({
+  pairs: {},
+});
+
+const indexerURL = process.env.REACT_APP__INDEXER_URL;
+
+function getFullData(): Promise<PairMap> {
+  return new Promise(function (resolve, reject) {
+    if (!indexerURL) return reject(new Error('Undefined indexer URL'));
+    fetch(indexerURL)
+      .then((res) => res.json())
+      .then(transformData)
+      .then(resolve)
+      .catch(reject);
+  });
+}
+
+function getPairID(token0: string, token1: string) {
+  return `${token0}-${token1}`;
+  // warning: will throw an error if `tokens` aren't valid hex addresses
+  // return utils.solidityKeccak256(['address[2]'], [tokens.slice().sort()]);
+}
+
+function getTickID(price0: string, price1: string, fee: string) {
+  return `${price0}-${price1}-${fee}`;
+  //return utils.solidityKeccak256(['uint256', 'uint256', 'uint256'], [price0, price1, fee]);
+}
+
+function transformData(data: {
+  tick: Array<{
+    token0: string;
+    token1: string;
+    price0: string;
+    price1: string;
+    fee: string;
+    reserves0: string;
+    reserves1: string;
+  }>;
+}): Promise<PairMap> {
+  return new Promise(function (resolve) {
+    resolve(
+      data.tick.reduce<PairMap>(function (
+        result,
+        { token0, token1, price0, price1, fee, reserves0, reserves1 }
+      ) {
+        const pairID = getPairID(token0, token1);
+        const tickID = getTickID(price0, price1, fee);
+        result[pairID] = result[pairID] || {
+          token0: token0,
+          token1: token1,
+          ticks: {},
+        };
+        result[pairID].ticks[tickID] = {
+          price0: new BigNumber(price0),
+          price1: new BigNumber(price1),
+          reserves0: new BigNumber(reserves0),
+          reserves1: new BigNumber(reserves1),
+          fee: new BigNumber(fee),
+        };
+        return result;
+      },
+      {})
+    );
+  });
+}
+
+export function IndexerProvider({ children }: { children: React.ReactNode }) {
+  const [indexerData, setIndexerData] = useState<{
+    [pairID: string]: PairInfo;
+  }>();
+  const [error, setError] = useState<string>();
+  // avoid sending more than once
+  const [, setRequestedFlag] = useState(false);
+  const [result, setResult] = useState<IndexerContextType>({
+    pairs: indexerData ?? {},
+    error: error,
+  });
+
+  useEffect(() => {
+    const onTickChange = function (event: MessageActionEvent) {
+      const {
+        Token0,
+        Token1,
+        NewReserves0,
+        NewReserves1,
+        Price0,
+        Price1,
+        Fee,
+      } = event;
+      if (
+        !Token0 ||
+        !Token1 ||
+        !Price0 ||
+        !Price1 ||
+        !NewReserves0 ||
+        !NewReserves1 ||
+        !Fee
+      ) {
+        setError('Invalid event response from server');
+        return;
+      }
+      const pairID = getPairID(Token0, Token1);
+      const tickID = getTickID(Price0, Price1, Fee);
+      setIndexerData((oldData) => {
+        if (!oldData) oldData = {};
+        oldData[pairID] = oldData[pairID] || {
+          ticks: {},
+          token0: Token0,
+          token1: Token1,
+        };
+        const tickInfo = oldData[pairID].ticks[tickID] || {
+          price0: new BigNumber(Price0),
+          price1: new BigNumber(Price1),
+          fee: new BigNumber(Fee),
+        };
+        tickInfo.reserves0 = new BigNumber(NewReserves0);
+        tickInfo.reserves1 = new BigNumber(NewReserves1);
+        oldData[pairID].ticks[tickID] = tickInfo;
+        return { ...oldData };
+      });
+    };
+    subscriber.subscribeMessage(onTickChange, EventType.EventTxValue, {
+      messageAction: 'NewDeposit',
+    });
+    subscriber.subscribeMessage(onTickChange, EventType.EventTxValue, {
+      messageAction: 'NewWithdraw',
+    });
+    return () => {
+      subscriber.unsubscribeMessage(onTickChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    setResult({ pairs: indexerData ?? {}, error: error });
+  }, [indexerData, error]);
+
+  useEffect(() => {
+    setRequestedFlag((oldValue) => {
+      if (oldValue) return true;
+      getFullData()
+        .then(function (res) {
+          setIndexerData(res);
+        })
+        .catch(function (err: Error) {
+          setError(err?.message ?? 'Unknown Error');
+        });
+      return true;
+    });
+  }, []);
+
+  return (
+    <IndexerContext.Provider value={result}>{children}</IndexerContext.Provider>
+  );
+}
+
+export function useIndexerData() {
+  return useContext(IndexerContext);
+}

src/pages/App/App.tsx

@@ -1,4 +1,5 @@
 import { Web3Provider } from '../../lib/web3/useWeb3';
+import { IndexerProvider } from '../../lib/web3/indexerProvider';
 
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
@@ -11,17 +12,19 @@ import './App.scss';
 function App() {
   return (
     <Web3Provider>
-      <BrowserRouter>
-        <Header />
-        <main>
-          <Routes>
-            <Route index element={<div>Home</div>} />
-            <Route path="swap" element={<Swap />} />
-            <Route path="pool" element={<Pool />} />
-            <Route path="*" element={<div>Not found</div>} />
-          </Routes>
-        </main>
-      </BrowserRouter>
+      <IndexerProvider>
+        <BrowserRouter>
+          <Header />
+          <main>
+            <Routes>
+              <Route index element={<div>Home</div>} />
+              <Route path="swap" element={<Swap />} />
+              <Route path="pool" element={<Pool />} />
+              <Route path="*" element={<div>Not found</div>} />
+            </Routes>
+          </main>
+        </BrowserRouter>
+      </IndexerProvider>
     </Web3Provider>
   );
 }

src/pages/Swap/hooks/index.d.ts

@@ -1,3 +1,5 @@
+import { BigNumber } from 'bignumber.js';
+
 export interface PairRequest {
   /** address of altered token */
   token0?: string;
@@ -21,3 +23,13 @@ export interface PairResult {
   /** (estimated) gas fee */
   gas: string;
 }
+
+export interface RouterResult {
+  amountIn: BigNumber;
+  tokens: Array<string>;
+  prices0: Array<Array<BigNumber>>;
+  prices1: Array<Array<BigNumber>>;
+  fees: Array<Array<BigNumber>>;
+  reserves0: Array<Array<BigNumber>>;
+  reserves1: Array<Array<BigNumber>>;
+}