Added UI changes manually

batcher-ui/.husky/pre-commit

@@ -1,4 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx lint-staged
+# npx lint-staged
+cd batcher-ui && npm run lint

batcher-ui/.lintstagedrc.js

@@ -5,6 +5,7 @@ const buildEslintCommand = filenames =>
     .map(f => path.relative(process.cwd(), f))
     .join(' --file ')}`;
 
+
 module.exports = {
   '*.{js,jsx,ts,tsx}': [buildEslintCommand],
 };

batcher-ui/global.d.ts

@@ -1,7 +1,22 @@
 declare global {
   namespace NodeJS {
     interface ProcessEnv {
-      SECRET: string;
+      NEXT_PUBLIC_BATCHER_CONTRACT_HASH: string;
+      NEXT_PUBLIC_MARKET_MAKER_CONTRACT_HASH: string;
+      NEXT_PUBLIC_TOKEN_MANAGER_CONTRACT_HASH: string;
+      NEXT_PUBLIC_TZBTC_VAULT_CONTRACT_HASH: string;
+      NEXT_PUBLIC_USDT_VAULT_CONTRACT_HASH: string;
+      NEXT_PUBLIC_EURL_VAULT_CONTRACT_HASH: string;
+      NEXT_PUBLIC_USDTZ_VAULT_CONTRACT_HASH: string;
+      NEXT_PUBLIC_BTCTZ_VAULT_CONTRACT_HASH: string;
+
+      NEXT_PUBLIC_NETWORK_TARGET: string;
+      NEXT_PUBLIC_BATCHER_URI: string;
+      NEXT_PUBLIC_BATCHER_LOGO_PATH: string;
+      NEXT_PUBLIC_TEZOS_NODE_URI: string;
+      NEXT_PUBLIC_TZKT_API_URI: string;
+      NEXT_PUBLIC_LOCAL_STORAGE_KEY_STATE: string;
+      NEXT_PUBLIC_GA_TRACKING_ID: string;
     }
   }
 }

batcher-ui/next.config.js

@@ -1,15 +1,38 @@
 /** @type {import('next').NextConfig} */
 
-const config = require('./src/config/env.ts');
 
 const env = process.env.ENV; // 'mainnet' | 'ghostnet'
 
+const config = require('./src/config/env.js');
+const contractsConfig = require('./src/config/contracts.js');
+
+const contractHashes = contractsConfig[env];
+const envConfig = config[env];
+
+if (
+  !contractHashes ||
+  !contractsConfig.isContractsWellConfigured(contractHashes)
+) {
+  throw new Error(
+    'Configuration error on contracts hashes. Please check in src/config/contracts.js file.'
+  );
+}
+
+if (!envConfig || !config.isConfigOK(envConfig)) {
+  throw new Error(
+    'Configuration error on environment variables. Please check in src/config/env.js file.'
+  );
+}
+
 console.info('🚀 Current env:', env);
 
 const nextConfig = {
   reactStrictMode: false,
   swcMinify: true,
-  env: config[env],
+  env: {
+    ...config.toEnvVar(envConfig),
+    ...contractsConfig.toEnvVar(contractHashes),
+  },
   webpack: (config, { isServer, webpack }) => {
     if (!isServer) config.resolve.fallback['fs'] = false;
 

batcher-ui/package.json

@@ -13,7 +13,7 @@
     "start": "ENV=mainnet next start -p 80",
     "start:ghostnet": "ENV=ghostnet next start -p 80",
     "build:ghostnet": "ENV=ghostnet next build",
-    "lint": "next lint"
+    "lint": "ENV=ghostnet next lint"
   },
   "lint-staged": {
     "**/*.{js,jsx,tsx,ts,less,md,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/events.ts

@@ -1,30 +1,30 @@
-import { BigMapEvent } from 'src/types/events';
+import type { BigMapEvent } from '@/types';
 
 export const newEvent = (event: BigMapEvent) =>
   ({
     type: 'NEW_EVENT',
     payload: { event },
   } as const);
 
-  export const closeToast = () =>
-    ({
-      type: 'CLOSE_TOAST',
-    } as const);
+export const closeToast = () =>
+  ({
+    type: 'CLOSE_TOAST',
+  } as const);
 
-  export const newError = (errorContent: string) =>
-    ({
-      type: 'NEW_ERROR',
-      payload: { errorContent },
-    } as const);
+export const newError = (errorContent: string) =>
+  ({
+    type: 'NEW_ERROR',
+    payload: { errorContent },
+  } as const);
 
-  export const newInfo = (infoContent: string) =>
-    ({
-      type: 'NEW_INFO',
-      payload: { infoContent },
-    } as const);
+export const newInfo = (infoContent: string) =>
+  ({
+    type: 'NEW_INFO',
+    payload: { infoContent },
+  } as const);
 
-  export type EventActions =
-    | ReturnType<typeof newEvent>
-    | ReturnType<typeof newError>
-    | ReturnType<typeof newInfo>
-    | ReturnType<typeof closeToast>;
+export type EventActions =
+  | ReturnType<typeof newEvent>
+  | ReturnType<typeof newError>
+  | ReturnType<typeof newInfo>
+  | ReturnType<typeof closeToast>;

batcher-ui/src/actions/exchange.ts

@@ -1,4 +1,4 @@
-import { BatcherStatus, CurrentSwap, PriceStrategy } from '../types';
+import { BatcherStatus, CurrentSwap, PriceStrategy } from '@/types';
 
 export const updatePriceStrategy = (priceStrategy: PriceStrategy) =>
   ({

batcher-ui/src/actions/holdings.ts

@@ -1,4 +1,4 @@
-import { HoldingsState } from 'src/types';
+import { HoldingsState } from '@/types';
 
 export const redeem = () =>
   ({

batcher-ui/src/actions/marketholdings.ts

@@ -1,4 +1,4 @@
-import { MarketHoldingsState } from 'src/types';
+import { MarketHoldingsState } from '@/types';
 
 export const addLiquidity = () =>
   ({
@@ -16,32 +16,25 @@ export const claimRewards = () =>
   }) 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 },
+    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 updateMarketHoldings>;

batcher-ui/src/actions/wallet.ts

@@ -1,5 +1,4 @@
-// import { Option } from 'fp-ts/Option';
-import { Balances } from 'src/utils/utils';
+import { Balances } from '@/utils/utils';
 
 const connectedWallet = ({ userAddress }: { userAddress: string }) =>
   ({

batcher-ui/src/commands/events.ts

@@ -4,17 +4,21 @@ import {
   updateVolumes,
   updateOraclePrice,
   updateBatcherStatus,
-} from 'src/actions';
-import { updateHoldings } from 'src/actions/holdings';
-import { userAddressSelector } from 'src/reducers';
-import { BatchBigmap, OrderBookBigmap, RatesCurrentBigmap } from 'src/types';
-import { BigMapEvent } from 'src/types/events';
+} from '@/actions';
+import { updateHoldings } from '@/actions/holdings';
+import { userAddressSelector } from '@/reducers';
+import type {
+  BatchBigmap,
+  OrderBookBigmap,
+  RatesCurrentBigmap,
+  BigMapEvent,
+} from '@/types';
 import {
   computeAllHoldings,
   computeOraclePrice,
   mapStatus,
   toVolumes,
-} from 'src/utils/utils';
+} from '@/utils/utils';
 
 export const newEventCmd = (event: BigMapEvent) => {
   return Cmd.run(

batcher-ui/src/commands/exchange.ts

@@ -4,10 +4,10 @@ import {
   getBatcherStatus,
   fetchCurrentBatchNumber,
   getCurrentRates,
-  getPairsInformations,
   getVolumes,
   getTimeDifferenceInMs,
-} from '../utils/utils';
+} from '@/utils/utils';
+import { getPairsInformation } from '@/utils/token-manager';
 import {
   updateBatchNumber,
   updateBatcherStatus,
@@ -18,17 +18,18 @@ import {
   updateRemainingTime,
   noBatchError,
   newError,
-} from '../actions';
-import { BatcherStatus, CurrentSwap, SwapNames } from 'src/types';
+} from '@/actions';
+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/holdings.ts

@@ -1,7 +1,7 @@
 import { Cmd } from 'redux-loop';
-import { getOrdersBook } from '../utils/utils';
-import { updateHoldings } from 'src/actions/holdings';
-import { newError } from 'src/actions';
+import { getOrdersBook } from '@/utils/utils';
+import { updateHoldings } from '@/actions/holdings';
+import { newError } from '@/actions';
 
 const fetchHoldingsCmd = (userAddress?: string) => {
   return Cmd.run(

batcher-ui/src/commands/marketholdings.ts

@@ -1,15 +1,11 @@
 import { Cmd } from 'redux-loop';
-import { getMarketHoldings } from '../utils/utils';
-import { updateMarketHoldings } from 'src/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;
     },
     {

batcher-ui/src/commands/wallet.ts

@@ -1,6 +1,6 @@
 import { Cmd } from 'redux-loop';
-import { getBalances } from '../utils/utils';
-import { gotUserBalances } from '../actions';
+import { getBalances } from '@/utils/utils';
+import { gotUserBalances } from '@/actions';
 
 const fetchUserBalancesCmd = (userAddress?: string) => {
   return Cmd.run(