Added tokens list to exchange state and fixed Volume display

marigold-dev · Nov 14, 2023 · 4d7826f · 4d7826f
1 parent 2c100b0
commit 4d7826f
Show file tree

Hide file tree

Showing 11 changed files with 173 additions and 72 deletions.
diff --git a/batcher-ui/src/actions/exchange.ts b/batcher-ui/src/actions/exchange.ts
@@ -1,27 +1,27 @@
-import { BatcherStatus, CurrentSwap, PriceStrategy } from '@/types';
+import { BatcherStatus, CurrentSwap, PriceStrategy, Token } from '@/types';
 
 export const updatePriceStrategy = (priceStrategy: PriceStrategy) =>
   ({
     type: 'UDPATE_PRICE_STATEGY',
     payload: { priceStrategy },
-  } as const);
+  }) as const;
 
 export const reverseSwap = () =>
   ({
     type: 'REVERSE_SWAP',
-  } as const);
+  }) as const;
 
 export const changePair = (pair: string, isReverse: boolean) =>
   ({
     type: 'CHANGE_PAIR',
     payload: { pair, isReverse },
-  } as const);
+  }) as const;
 
 export const getPairsInfos = (pair: string) =>
   ({
     type: 'GET_PAIR_INFOS',
     payload: { pair },
-  } as const);
+  }) as const;
 
 export const updatePairsInfos = ({
   currentSwap,
@@ -33,12 +33,12 @@ export const updatePairsInfos = ({
   ({
     type: 'UPDATE_PAIR_INFOS',
     payload: { currentSwap, pair },
-  } as const);
+  }) as const;
 
 export const getBatcherStatus = () =>
   ({
     type: 'GET_BATCHER_STATUS',
-  } as const);
+  }) as const;
 
 export const updateBatcherStatus = ({
   status,
@@ -52,62 +52,72 @@ export const updateBatcherStatus = ({
   ({
     type: 'UDPATE_BATCHER_STATUS',
     payload: { status, at, startTime },
-  } as const);
+  }) as const;
 
 export const updateRemainingTime = () =>
   ({
     type: 'UPDATE_REMAINING_TIME',
-  } as const);
+  }) as const;
 
 export const getCurrentBatchNumber = () =>
   ({
     type: 'GET_CURRENT_BATCHER_NUMBER',
-  } as const);
+  }) as const;
 
 export const updateBatchNumber = (batchNumber: number) =>
   ({
     type: 'UDPATE_BATCH_NUMBER',
     payload: { batchNumber },
-  } as const);
+  }) as const;
 
 export const batcherSetup = () =>
   ({
     type: 'BATCHER_SETUP',
-  } as const);
+  }) as const;
 
 export const batcherTimerId = (timerId: number) =>
   ({
     type: 'BATCHER_TIMER_ID',
     payload: { timerId },
-  } as const);
+  }) as const;
 
 export const batcherUnsetup = () =>
   ({
     type: 'BATCHER_UNSETUP',
-  } as const);
+  }) as const;
 
 export const getOraclePrice = () =>
   ({
     type: 'GET_ORACLE_PRICE',
-  } as const);
+  }) as const;
 
 export const updateOraclePrice = (oraclePrice: number) =>
   ({
     type: 'UPDATE_ORACLE_PRICE',
     payload: { oraclePrice },
-  } as const);
+  }) as const;
 
 export const getVolumes = () =>
   ({
     type: 'GET_VOLUMES',
-  } as const);
+  }) as const;
 
 export const updateVolumes = (volumes: unknown) =>
   ({
     type: 'UPDATE_VOLUMES',
     payload: { volumes },
-  } as const);
+  }) as const;
 
+export const updateTokens = (tokens: Map<string, Token>) =>
+  ({
+    type: 'UPDATE_TOKENS',
+    payload: { tokens },
+  }) as const;
+
+export const getTokens = () =>
+  ({
+    type: 'GET_TOKENS',
+  }) as const;
 
 export type ExchangeActions =
   | ReturnType<typeof updatePriceStrategy>
@@ -126,4 +136,6 @@ export type ExchangeActions =
   | ReturnType<typeof getOraclePrice>
   | ReturnType<typeof updateOraclePrice>
   | ReturnType<typeof getVolumes>
-  | ReturnType<typeof updateVolumes>;
+  | ReturnType<typeof updateVolumes>
+  | ReturnType<typeof getTokens>
+  | ReturnType<typeof updateTokens>;
diff --git a/batcher-ui/src/actions/index.ts b/batcher-ui/src/actions/index.ts
@@ -4,14 +4,12 @@ import { EventActions } from './events';
 import { HoldingsActions } from './holdings';
 import { MarketHoldingsActions } from './marketholdings';
 
-
 export * from './wallet';
 export * from './exchange';
 export * from './events';
 export * from './holdings';
 export * from './marketholdings';
 
-
 export type Actions =
   | WalletActions
   | ExchangeActions

diff --git a/batcher-ui/src/commands/events.ts b/batcher-ui/src/commands/events.ts
@@ -64,6 +64,7 @@ export const newEventCmd = (event: BigMapEvent) => {
               case 'rates_current': {
                 //! oracle price has changed
                 const data = eventData.content.value as RatesCurrentBigmap;
+                console.info("Oracle change",data);
                 dispatch(
                   updateOraclePrice(
                     computeOraclePrice(data.rate, {

diff --git a/batcher-ui/src/commands/exchange.ts b/batcher-ui/src/commands/exchange.ts
@@ -6,6 +6,7 @@ import {
   getCurrentRates,
   getVolumes,
   getTimeDifferenceInMs,
+  getTokens,
 } from '@/utils/utils';
 import { getPairsInformation } from '@/utils/token-manager';
 import {
@@ -17,8 +18,9 @@ import {
   batcherTimerId,
   updateRemainingTime,
   newError,
+  updateTokens,
 } from '@/actions';
-import { BatcherStatus, CurrentSwap, SwapNames } from '@/types';
+import { BatcherStatus, CurrentSwap, SwapNames, Token } from '@/types';
 
 const fetchPairInfosCmd = (pair: string) =>
   Cmd.run(
@@ -93,10 +95,10 @@ const fetchOraclePriceCmd = (tokenPair: string, { swap }: CurrentSwap) => {
   );
 };
 
-const fetchVolumesCmd = (batchNumber: number) => {
+const fetchVolumesCmd = (batchNumber: number, tokens:Map<string,Token>) => {
   return Cmd.run(
     () => {
-      return getVolumes(batchNumber);
+      return getVolumes(batchNumber,tokens);
     },
     {
       successActionCreator: updateVolumes,
@@ -105,11 +107,25 @@ const fetchVolumesCmd = (batchNumber: number) => {
   );
 };
 
+const fetchTokensCmd = () => {
+  return Cmd.run(
+    async () => {
+      const tokens = await getTokens();
+
+      return tokens;
+    },
+    {
+      successActionCreator: updateTokens,
+      failActionCreator: (e: string) => newError(e),
+    }
+  );
+};
 export {
   fetchPairInfosCmd,
   fetchCurrentBatchNumberCmd,
   fetchBatcherStatusCmd,
   setupBatcherCmd,
   fetchOraclePriceCmd,
   fetchVolumesCmd,
+  fetchTokensCmd,
 };
diff --git a/batcher-ui/src/pages/index.tsx b/batcher-ui/src/pages/index.tsx
@@ -4,12 +4,22 @@ import BatcherInfo from '@/components/batcher/BatcherInfo';
 import PriceStrategy from '@/components/batcher/PriceStrategy';
 
 import { useSelector, useDispatch } from 'react-redux';
-import { currentPairSelector, userAddressSelector } from '@/reducers';
-import { fetchUserBalances, batcherUnsetup, getPairsInfos } from '@/actions';
+import {
+  currentPairSelector,
+  userAddressSelector,
+  tokensSelector,
+} from '@/reducers';
+import {
+  getTokens,
+  fetchUserBalances,
+  batcherUnsetup,
+  getPairsInfos,
+} from '@/actions';
 
 const Swap = () => {
   const userAddress = useSelector(userAddressSelector);
   const tokenPair = useSelector(currentPairSelector);
+  const tokens = useSelector(tokensSelector);
 
   const dispatch = useDispatch();
 
@@ -27,6 +37,10 @@ const Swap = () => {
     }
   }, [userAddress, dispatch]);
 
+  useEffect(() => {
+    dispatch(getTokens());
+  }, [ dispatch]);
+
   return (
     <div className="flex flex-col md:mx-[15%] mx-4">
       <BatcherInfo />

diff --git a/batcher-ui/src/pages/volumes.tsx b/batcher-ui/src/pages/volumes.tsx
@@ -1,18 +1,24 @@
 import React, { useEffect } from 'react';
 import { PriceStrategy } from '@/types';
-import { batchNumberSelector, volumesSelector } from '@/reducers';
+import {
+  batchNumberSelector,
+  volumesSelector,
+  tokensSelector,
+} from '@/reducers';
 import { useSelector } from 'react-redux';
 import { useDispatch } from 'react-redux';
 import { getVolumes } from '@/actions';
+import { batch } from 'react-redux';
 
 const Volume = () => {
   const { sell, buy } = useSelector(volumesSelector);
   const batchNumber = useSelector(batchNumberSelector);
+  const tokens = useSelector(tokensSelector);
   const dispatch = useDispatch();
 
   useEffect(() => {
     if (batchNumber) dispatch(getVolumes());
-  }, [dispatch, batchNumber]);
+  }, [dispatch, batchNumber, tokens]);
 
   const listOfBuyVolumesColumns = [
     {
@@ -58,7 +64,8 @@ const Volume = () => {
             {listOfBuyVolumesColumns.map((b, i) => (
               <th
                 className="border border-white p-2 text-center bg-darkgray"
-                key={i}>
+                key={i}
+              >
                 {b.title}
               </th>
             ))}
@@ -70,7 +77,8 @@ const Volume = () => {
               return (
                 <td
                   className="border border-white p-2 text-center bg-lightgray"
-                  key={i}>
+                  key={i}
+                >
                   {buy[b.key]}
                 </td>
               );
@@ -82,7 +90,8 @@ const Volume = () => {
             {listOfSellVolumesColumns.map((b, i) => (
               <th
                 className="border border-white p-2 text-center bg-darkgray"
-                key={i}>
+                key={i}
+              >
                 {b.title}
               </th>
             ))}
@@ -94,7 +103,8 @@ const Volume = () => {
               return (
                 <td
                   className="border border-white p-2 text-center bg-lightgray"
-                  key={i}>
+                  key={i}
+                >
                   {sell[b.key]}
                 </td>
               );

diff --git a/batcher-ui/src/reducers/exchange.ts b/batcher-ui/src/reducers/exchange.ts
@@ -5,21 +5,23 @@ import {
   getCurrentBatchNumber,
   getOraclePrice,
   getPairsInfos,
-} from '../../src/actions';
+} from '@/actions';
 import {
   BatcherStatus,
   CurrentSwap,
   ExchangeState,
   PriceStrategy,
-} from '../../src/types';
+  Token,
+} from '@/types';
 import {
   fetchBatcherStatusCmd,
   fetchCurrentBatchNumberCmd,
   fetchPairInfosCmd,
   fetchVolumesCmd,
   fetchOraclePriceCmd,
   setupBatcherCmd,
-} from '../../src/commands/exchange';
+  fetchTokensCmd,
+} from '@/commands/exchange';
 import { getTimeDifference } from 'src/utils/utils';
 
 const initialSwap: CurrentSwap = {
@@ -55,9 +57,10 @@ const initialState: ExchangeState = {
     startTime: null,
     remainingTime: 0,
   },
-  swapPairName: 'tzBTC/USDT',
+  swapPairName: 'tzBTC-USDT',
   batchNumber: 0,
   oraclePrice: 0,
+  tokens: new Map<string, Token>(),
   volumes: {
     sell: Object.keys(PriceStrategy).reduce(
       (acc, k) => ({ ...acc, [k]: 0 }),
@@ -193,9 +196,13 @@ const exchangeReducer = (
     case 'UPDATE_ORACLE_PRICE':
       return { ...state, oraclePrice: action.payload.oraclePrice };
     case 'GET_VOLUMES':
-      return loop(state, fetchVolumesCmd(state.batchNumber));
+      return loop(state, fetchVolumesCmd(state.batchNumber, state.tokens));
     case 'UPDATE_VOLUMES':
       return { ...state, volumes: action.payload.volumes };
+    case 'UPDATE_TOKENS':
+      return { ...state, tokens: action.payload.tokens };
+    case 'GET_TOKENS':
+      return loop(state, fetchTokensCmd());
     default:
       return state;
   }

diff --git a/batcher-ui/src/reducers/index.ts b/batcher-ui/src/reducers/index.ts
@@ -8,6 +8,7 @@ import {
   MarketHoldingsState,
   EventsState,
   HoldingsState,
+  TokensState,
 } from '../types';
 import { marketHoldingsReducer } from '@/reducers/marketholdings';
 import { eventReducer } from '@/reducers/events';
@@ -49,6 +50,8 @@ export const batchNumberSelector = (state: AppState) =>
 export const oraclePriceSelector = (state: AppState) =>
   state.exchange.oraclePrice;
 
+export const tokensSelector = (state: AppState) => state.exchange.tokens;
+
 export const volumesSelector = (state: AppState) => state.exchange.volumes;
 
 // Holdings selectors