feat: bob collateral suprlus

apps/frontend/src/app/5_pages/BobGateway/BobGateway.tsx

@@ -3,18 +3,45 @@ import { QueryClientProvider } from '@tanstack/react-query';
 
 import React, { FC } from 'react';
 
+import { t } from 'i18next';
+import { Helmet } from 'react-helmet-async';
+
+import { Heading, Paragraph, ParagraphSize } from '@sovryn/ui';
+
+import { translations } from '../../../locales/i18n';
+import { Promotions } from '../MarketMakingPage/components/Promotions/Promotions';
 import { queryClient } from './BobGateway.utils';
 import { BobGatewayForm } from './BobGatewayForm';
 
 const BobGateway: FC = () => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <SatsWagmiConfig network={Network.testnet} queryClient={queryClient}>
-        <div className="px-0 container md:mx-9 mx-0 md:mb-2 mb-7">
-          <BobGatewayForm />
-        </div>
-      </SatsWagmiConfig>
-    </QueryClientProvider>
+    <>
+      <Helmet>
+        <title>{t(translations.bobGatewayPage.meta.title)}</title>
+      </Helmet>
+      <div className="px-0 container md:mx-9 mx-0 md:mb-2 mb-7 mt-8">
+        <Heading className="text-center mb-3 lg:text-2xl">
+          {t(translations.bobGatewayPage.meta.title)}
+        </Heading>
+
+        <Paragraph
+          className="text-center mb-6 lg:mb-10"
+          size={ParagraphSize.base}
+        >
+          {t(translations.bobGatewayPage.description)}
+        </Paragraph>
+
+        <Promotions setActivePool={() => {}} onClick={() => {}} />
+
+        <QueryClientProvider client={queryClient}>
+          <SatsWagmiConfig network={Network.mainnet} queryClient={queryClient}>
+            <div className="px-0 container md:mx-9 mx-0 md:mb-2 mb-7">
+              <BobGatewayForm />
+            </div>
+          </SatsWagmiConfig>
+        </QueryClientProvider>
+      </div>
+    </>
   );
 };
 export default BobGateway;

apps/frontend/src/app/5_pages/BobGateway/BobGateway.utils.ts

@@ -1,6 +1,6 @@
 import { GatewaySDK } from '@gobob/bob-sdk';
 import { QueryClient } from '@tanstack/react-query';
 
-export const bobGateway = new GatewaySDK('bob-sepolia');
+export const bobGateway = new GatewaySDK('bob');
 
 export const queryClient = new QueryClient();

apps/frontend/src/app/5_pages/BobGateway/BobGatewayForm.tsx

@@ -34,7 +34,7 @@ export const BobGatewayForm: FC = () => {
     isPending,
     sendGatewayTransaction,
   } = useSendGatewayTransaction({
-    toChain: 'bob-sepolia',
+    toChain: 'bob',
   });
 
   useEffect(() => {

apps/frontend/src/app/5_pages/MarketMakingPage/components/BobDepositModal/BobDepositModal.tsx

@@ -137,20 +137,17 @@ export const BobDepositModal: FC<BobDepositModalProps> = ({
               className="flex justify-between"
             />
           </div>
-
           <AmountForm pool={pool} />
           <PriceRange pool={pool} />
           <SlippageSettings />
           <NewPoolStatistics pool={pool} />
-
           <div className="mt-8">
             <Checkbox
               checked={hasDisclaimerBeenChecked}
               onChangeValue={setHasDisclaimerBeenChecked}
               label={t(pageTranslations.depositDisclaimer)}
             />
           </div>
-
           <Button
             type={ButtonType.submit}
             style={ButtonStyle.primary}

apps/frontend/src/app/5_pages/MarketMakingPage/components/BobDepositModal/components/PriceRange/components/AmountForm/AmountForm.tsx

@@ -1,9 +1,15 @@
-import React, { FC, useCallback, useEffect, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
 import { concDepositSkew } from '@sovryn/sdex';
-import { FormGroup, AmountInput, ErrorBadge, ErrorLevel } from '@sovryn/ui';
+import {
+  FormGroup,
+  AmountInput,
+  ErrorBadge,
+  ErrorLevel,
+  Toggle,
+} from '@sovryn/ui';
 
 import { AssetRenderer } from '../../../../../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { MaxButton } from '../../../../../../../../2_molecules/MaxButton/MaxButton';
@@ -16,6 +22,7 @@ import { DEFAULT_RANGE_WIDTH } from '../../../../BobDepositModal.constants';
 import { useDepositContext } from '../../../../contexts/BobDepositModalContext';
 import { useGetMaxDeposit } from '../../../../hooks/useGetMaxDeposit';
 import { useGetPoolInfo } from '../../../../hooks/useGetPoolInfo';
+import { useSurplusCollateralBalance } from '../../../../hooks/useSurplusCollateralBalance';
 import { useValidateDepositAmounts } from '../../../../hooks/useValidateDepositAmounts';
 
 type AmountFormProps = {
@@ -31,6 +38,19 @@ export const AmountForm: FC<AmountFormProps> = ({ pool }) => {
   const { isFirstAssetValueInvalid, isSecondAssetValueInvalid } =
     useValidateDepositAmounts(base, quote);
 
+  const tokenASurplus = useSurplusCollateralBalance(
+    poolTokens?.tokenA.tokenAddr,
+  );
+  const tokenBSurplus = useSurplusCollateralBalance(
+    poolTokens?.tokenB.tokenAddr,
+  );
+  console.log({
+    tokenASurplus,
+    tokenBSurplus,
+  });
+  const [useSurplusA, setUseSurplusA] = useState(false);
+  const [useSurplusB, setUseSurplusB] = useState(false);
+
   const {
     firstAssetValue,
     setFirstAssetValue,
@@ -308,6 +328,12 @@ export const AmountForm: FC<AmountFormProps> = ({ pool }) => {
           invalid={isFirstAssetValueInvalid}
           placeholder="0"
         />
+        <Toggle
+          checked={useSurplusA}
+          onChange={() => setUseSurplusA(!useSurplusA)}
+          className="mt-2"
+          label={t(translations.bobMarketMakingPage.depositModal.allowSurplus)}
+        />
         {isFirstAssetValueInvalid && (
           <ErrorBadge
             level={ErrorLevel.Critical}
@@ -352,6 +378,12 @@ export const AmountForm: FC<AmountFormProps> = ({ pool }) => {
           invalid={isSecondAssetValueInvalid}
           placeholder="0"
         />
+        <Toggle
+          checked={useSurplusB}
+          onChange={() => setUseSurplusB(!useSurplusB)}
+          className="mt-2"
+          label={t(translations.bobMarketMakingPage.depositModal.allowSurplus)}
+        />
         {isSecondAssetValueInvalid && (
           <ErrorBadge
             level={ErrorLevel.Critical}

apps/frontend/src/app/5_pages/MarketMakingPage/components/BobDepositModal/hooks/useHandleSubmit.ts

@@ -108,12 +108,12 @@ export const useHandleSubmit = (
       tokenA: {
         address: poolTokens.tokenA.tokenAddr,
         qty: firstAssetBigNumberAmount,
-        isWithdrawFromDexChecked: false,
+        isWithdrawFromDexChecked: true,
       },
       tokenB: {
         address: poolTokens.tokenB.tokenAddr,
         qty: secondAssetBigNumberAmount,
-        isWithdrawFromDexChecked: false,
+        isWithdrawFromDexChecked: true,
       },
       isTokenAPrimaryRange: usesBaseToken,
       tick,

apps/frontend/src/app/5_pages/MarketMakingPage/components/BobDepositModal/hooks/useSurplusCollateralBalance.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+import { BigNumber } from 'ethers';
+
+import { useCrocContext } from '../../../../../../contexts/CrocContext';
+import { useAccount } from '../../../../../../hooks/useAccount';
+
+export const useSurplusCollateralBalance = (token: string | undefined) => {
+  const { account } = useAccount();
+  const { croc } = useCrocContext();
+  const [balance, setBalance] = useState(BigNumber.from(0));
+
+  useEffect(() => {
+    if (croc && account && token) {
+      croc.token(token).wallet(account).then(setBalance);
+    }
+  }, [account, croc, token]);
+
+  return balance;
+};

apps/frontend/src/locales/en/translations.json

@@ -1381,6 +1381,7 @@
             "priceRange": "Price range",
             "balanced": "Balanced",
             "infinite": "Infinite",
+            "allowSurplus": "Allow Personal Reserve Vault Balances",
             "newPoolStatistics": {
                 "newPoolBalance": "New pool balance",
                 "currentPrice": "Current {{token}} price",
@@ -1942,5 +1943,11 @@
     "unclaimedVestings": {
         "text": "You have {{value}} LM SOV rewards vested stakes that you need to withdraw before claiming more.",
         "cta": "Open Rewards page"
+    },
+    "bobGatewayPage": {
+        "meta": {
+            "title": "BOB Gateway"
+        },
+        "description": "New way earning in AMM"
     }
 }

apps/frontend/src/utils/graphql/bob/generated.tsx

@@ -1,5 +1,6 @@
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
+
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {

apps/frontend/src/utils/graphql/mynt/generated.tsx

@@ -1,5 +1,6 @@
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
+
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {

apps/frontend/src/utils/graphql/rsk/generated.tsx

@@ -1,5 +1,6 @@
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
+
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {

apps/frontend/src/utils/graphql/zero/generated.tsx

@@ -1,5 +1,6 @@
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
+
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {