Merge pull request #899 from TempleDAO/fostrich-ramos-admin-v2

refactor: useRamosAdmin easier to read
TempleDAO · Dec 11, 2023 · 9195057 · 9195057
2 parents 4456748 + 8a5316a
commit 9195057
Show file tree

Hide file tree

Showing 5 changed files with 258 additions and 272 deletions.
diff --git a/apps/dapp/src/components/Pages/Ramos/admin/components/AddLiquidity.tsx b/apps/dapp/src/components/Pages/Ramos/admin/components/AddLiquidity.tsx
@@ -8,10 +8,10 @@ import { DBN_ZERO, DecimalBigNumber } from 'utils/DecimalBigNumber';
 import { InputArea, RequestArea, TitleWrapper } from '../styles';
 
 interface IProps {
-  handleInput: (
+  handleInput?: (
     stableAmount: DecimalBigNumber
   ) => Promise<{ templeAmount: DecimalBigNumber; stableAmount: DecimalBigNumber }>;
-  calculateFunc: (
+  calculateFunc?: (
     templeAmount: BigNumber,
     stableAmount: BigNumber
   ) => Promise<{ joinPoolRequest: string; minBptOut: string } | undefined>;
@@ -42,6 +42,7 @@ export const AddLiquidity: React.FC<IProps> = ({ calculateFunc, handleInput }) =
         small
         handleChange={async (e: string) => {
           if (Number(e)) {
+            if(!handleInput) return;
             setAmounts(await handleInput(DecimalBigNumber.parseUnits(e, 18)));
           } else setAmounts({ templeAmount: DBN_ZERO, stableAmount: DBN_ZERO });
         }}
@@ -51,6 +52,7 @@ export const AddLiquidity: React.FC<IProps> = ({ calculateFunc, handleInput }) =
         isSmall
         label="CREATE REQUEST PARAMS"
         onClick={async () => {
+          if(!calculateFunc) return;
           const poolInfo = await calculateFunc(amounts.templeAmount.toBN(18), amounts.stableAmount.toBN(18));
           setJoinPoolInfo(poolInfo);
         }}

diff --git a/apps/dapp/src/components/Pages/Ramos/admin/components/DepositAndStakeBpt.tsx b/apps/dapp/src/components/Pages/Ramos/admin/components/DepositAndStakeBpt.tsx
@@ -6,7 +6,7 @@ import { DecimalBigNumber } from 'utils/DecimalBigNumber';
 import { InputArea, RequestArea } from '../styles';
 
 interface IProps {
-  calculateFunc: (
+  calculateFunc?: (
     bptAmountIn: DecimalBigNumber
   ) => Promise<{ bptAmountIn: BigNumber; useContractBalance: boolean } | undefined>;
 }
@@ -33,6 +33,7 @@ export const DepositAndStakeBpt: React.FC<IProps> = ({ calculateFunc }) => {
         label="CREATE REQUEST PARAMS"
         onClick={async () => {
           if (amount) {
+            if(!calculateFunc) return;
             const amounts = await calculateFunc(amount);
             if (amounts) setStakeParams(amounts);
           }

diff --git a/apps/dapp/src/components/Pages/Ramos/admin/components/RemoveLiquidity.tsx b/apps/dapp/src/components/Pages/Ramos/admin/components/RemoveLiquidity.tsx
@@ -8,7 +8,7 @@ import { ZERO } from 'utils/bigNumber';
 import { InputArea, RequestArea, TitleWrapper } from '../styles';
 
 interface IProps {
-  calculateFunc: (exitAmountBpt: BigNumber) => Promise<string | undefined>;
+  calculateFunc?: (exitAmountBpt: BigNumber) => Promise<string | undefined>;
 }
 export const RemoveLiquidity: React.FC<IProps> = ({ calculateFunc }) => {
   const [exitAmountBpt, setExitAmountBpt] = useState(ZERO);
@@ -46,6 +46,7 @@ export const RemoveLiquidity: React.FC<IProps> = ({ calculateFunc }) => {
         isSmall
         label="CREATE REQUEST PARAMS"
         onClick={async () => {
+          if(!calculateFunc) return;
           const request = await calculateFunc(exitAmountBpt);
           setExitPoolRequest(request);
         }}

diff --git a/apps/dapp/src/components/Pages/Ramos/admin/index.tsx b/apps/dapp/src/components/Pages/Ramos/admin/index.tsx
@@ -36,59 +36,42 @@ const Content = styled.div`
 `;
 
 const RamosAdmin = () => {
-  const {
-    tpf,
-    templePrice,
-    rebalanceUpAmounts,
-    rebalanceDownAmounts,
-    depositStableAmounts,
-    withdrawStableAmounts,
-    totalAvailableDaiTrv,
-    totalAvailableTempleTrv,
-    ramosStrategyVersion,
-    slippageTolerance,
-    handleAddLiquidityInput,
-    createJoinPoolRequest,
-    createExitPoolRequest,
-    createDepositAndStakeRequest,
-    setSlippageTolerance,
-    calculateRecommendedAmounts,
-  } = useRamosAdmin();
+  const ramosAdmin = useRamosAdmin();
   const [isTxSettingsOpen, setIsTxSettingsOpen] = useState(false);
 
-  const tpfFormatted = tpf?.formatUnits(5);
-  const templePriceFormatted = templePrice?.formatUnits(5);
-  const totalAvailableDaiTrvFormatted = totalAvailableDaiTrv?.formatUnits(5);
-  const totalAvailableTempleTrvFormatted = totalAvailableTempleTrv?.formatUnits(5);
+  const tpfFormatted = ramosAdmin && ramosAdmin.tpf?.formatUnits(5);
+  const templePriceFormatted = ramosAdmin && ramosAdmin.templePrice?.formatUnits(5);
+  const totalAvailableDaiTrvFormatted = ramosAdmin && ramosAdmin.totalAvailableDaiTrv?.formatUnits(5);
+  const totalAvailableTempleTrvFormatted = ramosAdmin && ramosAdmin.totalAvailableTempleTrv?.formatUnits(5);
 
   const tabs = [
     {
       label: 'Liquidity',
       content: (
         <Container>
-          <AddLiquidity calculateFunc={createJoinPoolRequest} handleInput={handleAddLiquidityInput} />
-          <RemoveLiquidity calculateFunc={createExitPoolRequest} />
-          <DepositAndStakeBpt calculateFunc={createDepositAndStakeRequest} />
+          <AddLiquidity calculateFunc={ramosAdmin.createJoinPoolRequest} handleInput={ramosAdmin.handleAddLiquidityInput} />
+          <RemoveLiquidity calculateFunc={ramosAdmin.createExitPoolRequest} />
+          <DepositAndStakeBpt calculateFunc={ramosAdmin.createDepositAndStakeRequest} />
         </Container>
       ),
     },
     {
       label: 'Rebalance',
       content: (
         <Container>
-          <RebalanceUp amounts={rebalanceUpAmounts} />
-          <RebalanceDown amounts={rebalanceDownAmounts} />
-          <Button isSmall onClick={calculateRecommendedAmounts} label="RECALCULATE" />
+          <RebalanceUp amounts={ramosAdmin.rebalanceUpAmounts} />
+          <RebalanceDown amounts={ramosAdmin.rebalanceDownAmounts} />
+          <Button isSmall onClick={ramosAdmin.calculateRecommendedAmounts} label="RECALCULATE" />
         </Container>
       ),
     },
     {
       label: 'Stable',
       content: (
         <Container>
-          <DepositStable amounts={depositStableAmounts} />
-          <WithdrawStable amounts={withdrawStableAmounts} />
-          <Button isSmall onClick={calculateRecommendedAmounts} label="RECALCULATE" />
+          <DepositStable amounts={ramosAdmin.depositStableAmounts} />
+          <WithdrawStable amounts={ramosAdmin.withdrawStableAmounts} />
+          <Button isSmall onClick={ramosAdmin.calculateRecommendedAmounts} label="RECALCULATE" />
         </Container>
       ),
     },
@@ -105,14 +88,14 @@ const RamosAdmin = () => {
       <TransactionSettingsModal
         hasDeadline={false}
         closeOnClickOutside={false}
-        defaultSlippage={slippageTolerance}
+        defaultSlippage={ramosAdmin.slippageTolerance}
         isOpen={isTxSettingsOpen}
         onClose={() => {
           setIsTxSettingsOpen(false);
-          calculateRecommendedAmounts();
+          ramosAdmin.calculateRecommendedAmounts();
         }}
         onChange={(settings) => {
-          setSlippageTolerance(settings.slippageTolerance);
+          ramosAdmin.setSlippageTolerance(settings.slippageTolerance);
         }}
       />
       <Container>
@@ -122,10 +105,10 @@ const RamosAdmin = () => {
           additionalDetails={
             <>
               <p>
-                Current Spot Price: <strong>{templePriceFormatted ?? <EllipsisLoader />}</strong>
+                Current Spot Price: <strong>{templePriceFormatted ?? <EllipsisLoader /> }</strong>
               </p>
               <p>
-                Current Treasury Price Index: <strong>{tpfFormatted ?? <EllipsisLoader />}</strong>
+                Current Treasury Price Index: <strong>{tpfFormatted ?? <EllipsisLoader /> }</strong>
               </p>
             </>
           }
@@ -136,10 +119,10 @@ const RamosAdmin = () => {
           additionalDetails={
             <>
               <p>
-                Total Available Dai: <strong>{totalAvailableDaiTrvFormatted ?? <EllipsisLoader />}</strong>
+                Total Available Dai: <strong>{ totalAvailableDaiTrvFormatted ?? <EllipsisLoader /> }</strong>
               </p>
               <p>
-                Total Available Temple: <strong>{totalAvailableTempleTrvFormatted ?? <EllipsisLoader />}</strong>
+                Total Available Temple: <strong>{ totalAvailableTempleTrvFormatted ?? <EllipsisLoader /> }</strong>
               </p>
             </>
           }
@@ -149,7 +132,7 @@ const RamosAdmin = () => {
           contractAddress={RAMOS_STRATEGY}
           additionalDetails={
             <p>
-              Version: <strong>{ramosStrategyVersion ?? <EllipsisLoader />}</strong>
+              Version: <strong>{ ramosAdmin ? ramosAdmin.ramosStrategyVersion : <EllipsisLoader /> }</strong>
             </p>
           }
         />