Changed UI to support new contract structure

batcher-ui/package.json

@@ -49,6 +49,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
+    "react-number-format": "^5.3.1",
     "react-redux": "^8.1.1",
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
@@ -78,4 +79,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

batcher-ui/src/actions/marketholdings.ts

@@ -3,74 +3,38 @@ import { MarketHoldingsState } from '@/types';
 export const addLiquidity = () =>
   ({
     type: 'ADDLIQUIDITY',
-  } as const);
+  }) as const;
 
 export const removeLiquidity = () =>
   ({
     type: 'REMOVELIQUIDITY',
-  } as const);
+  }) as const;
 
 export const claimRewards = () =>
   ({
     type: 'CLAIMREWARDS',
-  } as const);
+  }) as const;
 
 export const updateMarketHoldings = (
-  vaults: Partial<Omit<MarketHoldingsState, 'currentVault'>>
+  holdings: Partial<Omit<MarketHoldingsState, 'currentVault'>>
 ) =>
   ({
     type: 'UPDATE_MARKET_HOLDINGS',
-    payload: { vaults },
-  } as const);
+    payload: { holdings },
+  }) as const;
 
 export const getMarketHoldings = (
-  contractAddress: string,
-  userAddress: string
+  token: string,
+  userAddress: string | undefined
 ) =>
   ({
     type: 'GET_MARKET_HOLDINGS',
-    payload: { contractAddress, userAddress },
-  } as const);
-
-export const changeVault = (vault: string) =>
-  ({
-    type: 'CHANGE_VAULT',
-    payload: { vault },
-  } as const);
-
-// ---- WIP ---- //
-
-export const getUserVault = (userAddress: string) =>
-  ({
-    type: 'GET_USER_VAULT',
-    payload: { userAddress },
-  } as const);
-
-export const updateUserVault = (vault: any) =>
-  ({
-    type: 'UPDATE_USER_VAULT',
-    payload: { vault },
-  } as const);
-
-export const getGlobalVault = () =>
-  ({
-    type: 'GET_GLOBAL_VAULT',
-  } as const);
-
-export const updateGlobalVault = (vault: any) =>
-  ({
-    type: 'UPDATE_GLOBAL_VAULT',
-    payload: { vault },
-  } as const);
+    payload: { token, userAddress },
+  }) as const;
 
 export type MarketHoldingsActions =
   | ReturnType<typeof addLiquidity>
   | ReturnType<typeof removeLiquidity>
   | ReturnType<typeof claimRewards>
-  | ReturnType<typeof changeVault>
   | ReturnType<typeof getMarketHoldings>
-  | ReturnType<typeof getUserVault>
-  | ReturnType<typeof updateUserVault>
-  | ReturnType<typeof getGlobalVault>
-  | ReturnType<typeof updateGlobalVault>
   | ReturnType<typeof updateMarketHoldings>;

batcher-ui/src/commands/exchange.ts

@@ -4,10 +4,10 @@ import {
   getBatcherStatus,
   fetchCurrentBatchNumber,
   getCurrentRates,
-  getPairsInformations,
   getVolumes,
   getTimeDifferenceInMs,
 } from '@/utils/utils';
+import { getPairsInformation } from '@/utils/token-manager';
 import {
   updateBatchNumber,
   updateBatcherStatus,
@@ -24,11 +24,12 @@ import { BatcherStatus, CurrentSwap, SwapNames } from '@/types';
 const fetchPairInfosCmd = (pair: string) =>
   Cmd.run(
     () => {
-      return getPairsInformations(pair);
+      return getPairsInformation(pair);
     },
     {
       successActionCreator: updatePairsInfos,
-      failActionCreator: () => newError('Fail to get pair informations.'),
+      failActionCreator: (e: any) =>
+        newError('Fail to get pair informations.' + e),
     }
   );
 
@@ -78,7 +79,9 @@ const setupBatcherCmd = (startTime: string | null, status: BatcherStatus) => {
 const fetchOraclePriceCmd = (tokenPair: string, { swap }: CurrentSwap) => {
   return Cmd.run(
     async () => {
+      console.info('TokenPair', tokenPair);
       const rates = await getCurrentRates(tokenPair);
+      console.info('Rates', rates);
       return computeOraclePrice(rates[0].rate, {
         buyDecimals: swap.to.decimals,
         sellDecimals: swap.from.token.decimals,

batcher-ui/src/commands/marketholdings.ts

@@ -1,22 +1,11 @@
 import { Cmd } from 'redux-loop';
-import {
-  getGlobalVault,
-  getMarketHoldings,
-  getUserVault2,
-} from '@/utils/market-maker';
-import {
-  updateGlobalVault,
-  updateMarketHoldings,
-  updateUserVault,
-} from '@/actions';
+import { getMarketHoldings } from '@/utils/market-maker';
+import { updateMarketHoldings } from '@/actions';
 
-const fetchMarketHoldingsCmd = (
-  contractAddress: string,
-  userAddress: string
-) => {
+const fetchMarketHoldingsCmd = (token: string, userAddress: string | undefined) => {
   return Cmd.run(
     async () => {
-      const vaults = await getMarketHoldings(userAddress || '');
+      const vaults = await getMarketHoldings(token, userAddress || '');
       return vaults;
     },
     {
@@ -25,29 +14,4 @@ const fetchMarketHoldingsCmd = (
   );
 };
 
-const fetchUserVaultCmd = (userAddress: string, tokenName: string) => {
-  return Cmd.run(
-    async () => {
-      const userVault = await getUserVault2(userAddress, tokenName);
-      return userVault;
-    },
-    {
-      successActionCreator: updateUserVault,
-    }
-  );
-};
-
-const fetchGlobalVaultCmd = (tokenName: string) => {
-  return Cmd.run(
-    async () => {
-      const globalVault = await getGlobalVault(tokenName);
-
-      return globalVault;
-    },
-    {
-      successActionCreator: updateGlobalVault,
-    }
-  );
-};
-
-export { fetchMarketHoldingsCmd, fetchUserVaultCmd, fetchGlobalVaultCmd };
+export { fetchMarketHoldingsCmd };

batcher-ui/src/components/batcher/SelectPair.tsx

@@ -51,8 +51,9 @@ const SelectPair = ({ isFrom }: SelectPairProps) => {
         const reversed =
           (!isFrom && value === 'tzBTC') || (isFrom && value !== 'tzBTC');
         dispatch(changePair(pair, reversed));
-      }}>
-      <Select.Trigger className="flex items-center text-dark w-[150px] justify-center rounded px-2 mr-1 text-base gap-2 bg-white hover:bg-hovergray outline-none">
+      }}
+    >
+      <Select.Trigger className="flex items-center text-dark w-[200px] justify-center rounded px-2 mr-1 text-base gap-2 bg-white hover:bg-hovergray outline-none">
         <Select.Value
           placeholder={isReverse ? swap.to.name : swap.from.token.name}
         />
@@ -75,7 +76,8 @@ const SelectPair = ({ isFrom }: SelectPairProps) => {
                     isReverse
                       ? swap.to.name === t.name
                       : swap.from.token.name === t.name
-                  }>
+                  }
+                >
                   <div className="flex items-center">
                     {t.icon ? (
                       <Image
@@ -130,7 +132,8 @@ const SelectItem = React.forwardRef<
           : ''
       } text-base text-dark rounded flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[highlighted]:outline-none data-[highlighted]:bg-hovergray disabled:cursor-not-allowed`}
       {...props}
-      ref={forwardedRef}>
+      ref={forwardedRef}
+    >
       <Select.ItemText>{children}</Select.ItemText>
       <Select.ItemIndicator className="absolute left-0 w-6 inline-flex items-center justify-center">
         <FontAwesomeIcon icon={faCheck} />

batcher-ui/src/components/market-maker/MMVault.tsx

@@ -4,8 +4,7 @@ import { useSelector } from 'react-redux';
 import { fetchUserBalances } from '@/actions';
 import { userAddressSelector } from '@/reducers';
 import { useDispatch } from 'react-redux';
-import GlobalVault from './GlobalVault';
-import UserVault from './UserVault';
+import Vault from './Vault';
 
 const MMVaultComponent = () => {
   const dispatch = useDispatch();
@@ -22,11 +21,8 @@ const MMVaultComponent = () => {
           <p className="text-xl text-center">Market Maker Vaults</p>
         </div>
       </div>
-      <div className="flex md:flex-row flex-col">
-        <SelectMMPair />
-        <GlobalVault />
-        <UserVault />
-      </div>
+      <SelectMMPair />
+      <Vault />
     </div>
   );
 };