Fix CMM UI

batcher-ui/pages/_app.tsx

@@ -1,9 +1,4 @@
-<<<<<<< HEAD
-import Footer from '../src/components/Footer';
-import React, { useEffect, useState } from 'react';
-=======
 import React from 'react';
->>>>>>> release-ghostnet
 import { AppProps } from 'next/app';
 import { TezosToolkitProvider } from '../src/contexts/tezos-toolkit';
 import { WalletProvider } from '../src/contexts/wallet';

batcher-ui/pages/marketmaker.tsx

@@ -1,14 +1,13 @@
 import React, {   useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { getMarketHoldingsState, userAddressSelector } from 'src/reducers';
+import { userAddressSelector } from 'src/reducers';
 import { getMarketHoldings as getMarketHoldingsAction } from 'src/actions';
 import MMVault from '../src/components/MMVault';
 
 const MarketMakerHoldings = () => {
   const contractAddress =
     process.env.NEXT_PUBLIC_MARKETMAKER_CONTRACT_HASH || '';
 
-  // const { vaults, current_vault } = useSelector(getMarketHoldingsState);
   const userAddress = useSelector(userAddressSelector);
 
   const dispatch = useDispatch();

batcher-ui/src/actions/index.ts

@@ -2,14 +2,17 @@ import { WalletActions } from './wallet';
 import { ExchangeActions } from './exchange';
 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
   | EventActions
+  | MarketHoldingsActions
   | HoldingsActions;

batcher-ui/src/actions/marketholdings.ts

@@ -15,11 +15,13 @@ export const claimRewards = () =>
     type: 'CLAIMREWARDS',
   }) as const;
 
-export const updateMarketHoldings = (vaults: MarketHoldingsState) =>
+export const updateMarketHoldings = (
+  vaults: Partial<Omit<MarketHoldingsState, 'currentVault'>>
+) =>
   ({
     type: 'UPDATE_MARKET_HOLDINGS',
     payload: { vaults },
-  }) as const;
+  } as const);
 
 export const getMarketHoldings = (
   contractAddress: string,

batcher-ui/src/commands/marketholdings.ts

@@ -1,6 +1,5 @@
 import { Cmd } from 'redux-loop';
 import { getMarketHoldings } from '../utils/utils';
-import { MarketHoldingsState } from '../types/state';
 import { updateMarketHoldings } from 'src/actions';
 
 const fetchMarketHoldingsCmd = (
@@ -9,24 +8,9 @@ const fetchMarketHoldingsCmd = (
 ) => {
   return Cmd.run(
     async () => {
-      // const usrAddress = !userAddress
-      //   ? 'tz1WfhZiKXiy7zVMxBzMFrdaNJ5nhPM5W2Ef'
-      //   : userAddress;
-      const vaultArray: Array<Record<string, any>> = await getMarketHoldings(
-        contractAddress,
-        userAddress || ''
-      );
-      console.log('🚀 ~ file: marketholdings.ts:19 ~ vaultArray:', vaultArray);
-      // const vaults = new Map(vaultArray.map(i => [i.global.native.name, i]));
-      // console.info('vaults');
-      // console.info(vaults);
-      // const firstVault = vaults.values().next().value;
-      const ms: MarketHoldingsState = {
-        globalVaults: vaultArray.map(v => Object.values(v)[0]),
-        // current_vault: firstVault,
-      };
-      console.log('🚀 ~ file: marketholdings.ts:28 ~ ms:', ms);
-      return ms;
+      const vaults = await getMarketHoldings(userAddress || '');
+
+      return vaults;
     },
     {
       successActionCreator: updateMarketHoldings,

batcher-ui/src/components/Exchange.tsx

@@ -51,10 +51,14 @@ const Exchange = () => {
 
   const toTolerance = (isReverse: boolean, priceStategy: PriceStrategy) => {
     switch (priceStategy) {
+      case PriceStrategy.EXACT:
+        return 1;
+      case PriceStrategy.BETTER:
         return 2;
       case PriceStrategy.WORSE:
         return 0;
     }
+  };
 
   const depositToken = async () => {
     const amount = parseFloat(amountInput);
@@ -388,4 +392,4 @@ const Exchange = () => {
   );
 };
 
-export default Exchange;
+export default Exchange;

batcher-ui/src/components/MMVault.tsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import * as Select from '@radix-ui/react-select';
 import * as Form from '@radix-ui/react-form';
-import { MVault, VaultToken } from '../types';
-import { getFees, scaleAmountUp } from '../utils/utils';
+import { VaultToken } from '../types';
+import { scaleAmountUp } from '../utils/utils';
 import { tzip12 } from '@taquito/tzip12';
 import { tzip16 } from '@taquito/tzip16';
-import { compose, OpKind, WalletContract } from '@taquito/taquito';
+import { compose, OpKind } from '@taquito/taquito';
 import SelectMMPair from './SelectMMPair';
-import { getMVault } from 'src/utils/utils';
 import { useSelector } from 'react-redux';
 import { fetchUserBalances } from '../actions';
 import {
@@ -20,10 +18,6 @@ import { useTezosToolkit } from '../contexts/tezos-toolkit';
 import { BatchWalletOperation } from '@taquito/taquito/dist/types/wallet/batch-operation';
 import { useDispatch } from 'react-redux';
 
-// interface MMVaultProps {
-//   vaults: Map<string, MVault>;
-//   current_vault: MVault;
-// }
 const MMVaultComponent = () => {
   const dispatch = useDispatch();
   const marketMakerAddress = process.env.NEXT_PUBLIC_MARKETMAKER_CONTRACT_HASH;
@@ -35,6 +29,22 @@ const MMVaultComponent = () => {
   const currentGlobalVault = useSelector(getCurrentGlobalVaultSelector);
   const currentUserVault = useSelector(getCurrentUserVaultSelector);
 
+  useEffect(() => {
+    if (userAddress) dispatch(fetchUserBalances());
+  }, [dispatch, userAddress]);
+
+  if (!tezos)
+    return (
+      <div>
+        <p className="text-xxl">
+          {
+            "There is an error with Tezos Tool Kit, can't swap ! Please contact \
+        Marigold if problem persists."
+          }
+        </p>
+      </div>
+    );
+
   const showTokenAmount = ({ vaultToken }: { vaultToken: VaultToken }) => (
     <div className="p-3">
       <p className="text-lg text-center">
@@ -59,8 +69,6 @@ const MMVaultComponent = () => {
     tokenName: string;
     tokenAmount: number;
   }) => {
-    console.log(tokenName);
-    console.log(tokenAmount);
     if (!userAddress) {
       console.info('No user address');
       return;
@@ -72,15 +80,11 @@ const MMVaultComponent = () => {
 
     const mmContract = await tezos?.wallet.at(marketMakerAddress);
 
-    console.info(current_vault);
-
-    if (!current_vault.global.native.address) {
-      console.info('No token address');
+    if (!currentGlobalVault.native.address) {
       return; //TODO:improve this
     }
-    const token = current_vault.global.native;
-    console.info(token);
-    const tokenContract: WalletContract = await tezos.wallet.at(
+    const token = currentGlobalVault.native;
+    const tokenContract = await tezos?.wallet.at(
       token.address,
       compose(tzip12, tzip16)
     );
@@ -187,7 +191,7 @@ const MMVaultComponent = () => {
         ? console.log('Successfully added liquidity !!!!!!')
         : null;
 
-      if (!confirm.completed) {
+      if (!confirm?.completed) {
         console.error(confirm);
         throw new Error(`Failed to add liquidity ${token.name} token.`);
       } else {
@@ -215,7 +219,7 @@ const MMVaultComponent = () => {
 
       if (claimTransaction) {
         const confirm = await claimTransaction.confirmation();
-        if (!confirm.completed) {
+        if (!confirm?.completed) {
           console.error('Failed to claimed rewards' + confirm);
         } else {
           console.info('Successfully claimed rewards');
@@ -263,7 +267,7 @@ const MMVaultComponent = () => {
 
       if (claimTransaction) {
         const confirm = await claimTransaction.confirmation();
-        if (!confirm.completed) {
+        if (!confirm?.completed) {
           console.error('Failed to remove liquidity' + confirm);
         } else {
           console.info('Successfully removed liquidity ');
@@ -339,7 +343,7 @@ const MMVaultComponent = () => {
                 />
               </Form.Control>
             </div>
-            <Form.Message
+            {/* <Form.Message
               className="text-[13px] text-primary opacity-[0.8]"
               match={'valueMissing'}>
               Please input your amount
@@ -358,7 +362,7 @@ const MMVaultComponent = () => {
                 );
               }}>
               Greater than the balance.
-            </Form.Message>
+            </Form.Message> */}
           </Form.Field>
           <Form.Submit asChild>
             <button className="text-white h-10 disabled:cursor-not-allowed cursor-pointer disabled:bg-lightgray items-center justify-center rounded bg-primary px-4 mt-8 text-xl self-center">
@@ -402,16 +406,16 @@ const MMVaultComponent = () => {
               <p className="text-xl text-center">My Liquidity</p>
               <p>{`Shares: ${currentUserVault.shares}`}</p>
               {`Unclaimed Rewards: ${currentUserVault.unclaimed} TEZ`}
-              {/* {showAddLiquidity({
-                vaultToken: getMVault(current_vault).global.native,
+              {showAddLiquidity({
+                vaultToken: currentGlobalVault.native,
                 userBalances: userBalances,
               })}
               {showRemoveLiquidity({
-                vaultToken: getMVault(current_vault).global.native,
+                vaultToken: currentGlobalVault.native,
               })}
               {showClaimRewards({
-                vaultToken: getMVault(current_vault).global.native,
-              })} */}
+                vaultToken: currentGlobalVault.native,
+              })}
             </div>
           </div>
         )}

batcher-ui/src/components/NavBar.tsx

@@ -43,6 +43,10 @@ const NavBar = ({ isMenuOpen, setIsMenuOpen }: NavBarProps) => {
             <LinkComponent path="/" title={'Swap'} />
             <LinkComponent path="/volumes" title={'Volumes'} />
             <LinkComponent path="/holdings" title={'Redeem Holdings'} />
+            <LinkComponent
+              path="/marketmaker"
+              title={'Community Marker Maker'}
+            />
             <LinkComponent path="/about" title={'About'} />
           </div>
         </div>

batcher-ui/src/components/SelectMMPair.tsx

@@ -9,16 +9,7 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 import { changeVault } from 'src/actions';
 import { getCurrentVaultName, getGlobalVaults } from 'src/reducers';
-import { GlobalVault } from 'src/types';
 
-const getTokens = (vaults: Map<string, GlobalVault> | undefined) => {
-  return !vaults ? [] : Array.from(vaults.keys());
-};
-
-// interface SelectMMPairProps {
-//   vaults: Map<string, MVault>;
-//   current_vault: MVault;
-// }
 const SelectMMPair = () => {
   const dispatch = useDispatch();
 
@@ -44,7 +35,7 @@ const SelectMMPair = () => {
           </Select.ScrollUpButton>
           <Select.Viewport className="p-2">
             <Select.Group>
-              {getTokens(globalVaults).map((t: string) => (
+              {Object.keys(globalVaults).map(t => (
                 <SelectItem value={t} key={t}>
                   {t}
                 </SelectItem>

batcher-ui/src/reducers/index.ts

@@ -3,23 +3,15 @@ import exchangeReducer from './exchange';
 import walletReducer from './wallet';
 import {
   AppState,
-<<<<<<< HEAD
   ExchangeState,
   WalletState,
   MarketHoldingsState,
-} from '../types';
-import { eventReducer } from './events';
-import { holdingsReducer } from './holdings';
-import { marketHoldingsReducer } from './marketholdings';
-=======
   EventsState,
-  ExchangeState,
   HoldingsState,
-  WalletState,
 } from '../types';
+import { marketHoldingsReducer } from './marketholdings';
 import { eventReducer } from './events';
 import { holdingsReducer } from './holdings';
->>>>>>> release-ghostnet
 
 // Wallet selectors
 export const userAddressSelector = (state: AppState) => {
@@ -66,9 +58,9 @@ export const getHoldings = (state: AppState) => state.holdings;
 export const getMarketHoldingsState = (state: AppState) => state.marketHoldings;
 
 export const getCurrentUserVaultSelector = (state: AppState) =>
-  state.marketHoldings.userVaults.get(state.marketHoldings.currentVault);
+  state.marketHoldings.userVaults[state.marketHoldings.currentVault];
 export const getCurrentGlobalVaultSelector = (state: AppState) =>
-  state.marketHoldings.globalVaults.get(state.marketHoldings.currentVault);
+  state.marketHoldings.globalVaults[state.marketHoldings.currentVault];
 
 export const getCurrentVaultName = (state: AppState) =>
   state.marketHoldings.currentVault;

batcher-ui/src/reducers/marketholdings.ts

@@ -1,31 +1,12 @@
 import { Cmd, loop } from 'redux-loop';
 import { MarketHoldingsActions } from 'src/actions/marketholdings';
 import { fetchMarketHoldingsCmd } from 'src/commands/marketholdings';
-import { MarketHoldingsState, VaultToken } from 'src/types';
-
-// export const initialMVault: MVault = {
-//   global: {
-//     total_shares: 0,
-//     native: {
-//       id: 0,
-//       name: 'tzBTC',
-//       amount: 0,
-//       address: '',
-//       decimals: 8,
-//       standard: 'FA1.2 token',
-//     },
-//     foreign: new Map<string, VaultToken>(),
-//   },
-//   user: {
-//     shares: 0,
-//     unclaimed: 0,
-//   },
-// };
+import { MarketHoldingsState } from 'src/types';
 
 export const initialMHState: MarketHoldingsState = {
-  globalVaults: new Map(),
-  userVaults: new Map(),
-  currentVault: '',
+  globalVaults: {},
+  userVaults: {},
+  currentVault: 'tzBTC',
 };
 
 export const marketHoldingsReducer = (