feat: update ramos admin page to new v2

apps/dapp/src/components/Pages/Ramos/admin/components/AddLiquidity.tsx

@@ -57,7 +57,7 @@ export const AddLiquidity: React.FC<IProps> = ({ calculateFunc, handleInput }) =
       />
       {joinPoolInfo && (
         <>
-          <p>To apply, create a RAMOS.addLiquidity() transaction with parameters</p>
+          <p>To apply, create a RamosStrategy.addLiquidity() transaction with parameters</p>
           <RequestArea>request: {joinPoolInfo.joinPoolRequest}</RequestArea>
           <RequestArea>minBptOut: {`${joinPoolInfo.minBptOut}`}</RequestArea>
         </>

apps/dapp/src/components/Pages/Ramos/admin/components/RemoveLiquidity.tsx

@@ -52,7 +52,7 @@ export const RemoveLiquidity: React.FC<IProps> = ({ calculateFunc }) => {
       />
       {exitPoolRequest && (
         <>
-          <p>To apply, create a RAMOS.removeLiquidity() transaction with parameters</p>
+          <p>To apply, create a RamosStrategy.removeLiquidity() transaction with parameters</p>
           <RequestArea>request: {exitPoolRequest}</RequestArea>
         </>
       )}

apps/dapp/src/components/Pages/Ramos/admin/index.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import styled, { css } from 'styled-components';
 
 import { tabletAndAbove } from 'styles/breakpoints';
@@ -15,11 +16,9 @@ import {
   RebalanceUp,
   WithdrawStable,
 } from './components';
-import { limitInput, handleBlur } from './helpers';
 import { TransactionSettingsModal } from 'components/TransactionSettingsModal/TransactionSettingsModal';
 import { useState } from 'react';
 import environmentConfig from 'constants/env';
-import { Input } from 'components/Pages/Core/NewUI/HomeInput';
 
 const Container = styled.div`
   display: grid;
@@ -40,53 +39,65 @@ const RamosAdmin = () => {
   const {
     tpf,
     templePrice,
-    percentageOfGapToClose,
     rebalanceUpAmounts,
     rebalanceDownAmounts,
     depositStableAmounts,
     withdrawStableAmounts,
+    totalAvailableDaiTrv,
+    totalAvailableTempleTrv,
+    ramosStrategyVersion,
     handleAddLiquidityInput,
     createJoinPoolRequest,
     createExitPoolRequest,
     createDepositAndStakeRequest,
-    setPercentageOfGapToClose,
     setSlippageTolerance,
     calculateRecommendedAmounts,
   } = 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 tabs = [
     {
-      label: 'Rebalance',
+      label: 'Liquidity',
       content: (
         <Container>
-          <RebalanceUp amounts={rebalanceUpAmounts} />
-          <RebalanceDown amounts={rebalanceDownAmounts} />
+          <AddLiquidity calculateFunc={createJoinPoolRequest} handleInput={handleAddLiquidityInput} />
+          <RemoveLiquidity calculateFunc={createExitPoolRequest} />
+          <DepositAndStakeBpt calculateFunc={createDepositAndStakeRequest} />
         </Container>
       ),
     },
     {
-      label: 'Stable',
+      label: 'Rebalance',
       content: (
         <Container>
-          <DepositStable amounts={depositStableAmounts} />
-          <WithdrawStable amounts={withdrawStableAmounts} />
+          <RebalanceUp amounts={rebalanceUpAmounts} />
+          <RebalanceDown amounts={rebalanceDownAmounts} />
+          <Button isSmall onClick={calculateRecommendedAmounts} label="RECALCULATE" />
         </Container>
       ),
     },
     {
-      label: 'Liquidity',
+      label: 'Stable',
       content: (
         <Container>
-          <AddLiquidity calculateFunc={createJoinPoolRequest} handleInput={handleAddLiquidityInput} />
-          <RemoveLiquidity calculateFunc={createExitPoolRequest} />
-          <DepositAndStakeBpt calculateFunc={createDepositAndStakeRequest} />
+          <DepositStable amounts={depositStableAmounts} />
+          <WithdrawStable amounts={withdrawStableAmounts} />
+          <Button isSmall onClick={calculateRecommendedAmounts} label="RECALCULATE" />
         </Container>
       ),
     },
   ];
 
-  const ramosAddress = environmentConfig.contracts.ramos;
+  const {
+    ramos: RAMOS_ADDRESS,
+    treasuryReservesVault: TRV_ADDRESS,
+    ramosStrategy: RAMOS_STRATEGY,
+  } = environmentConfig.contracts;
 
   return (
     <div>
@@ -103,38 +114,47 @@ const RamosAdmin = () => {
           setSlippageTolerance(settings.slippageTolerance);
         }}
       />
-      <div>
-        <p>
-          RAMOS:{' '}
-          <a href={`https://etherscan.io/address/${ramosAddress}`} target="_blank">
-            {ramosAddress}
-          </a>
-        </p>
-      </div>
       <Container>
-        <p>
-          Current Spot Price: <strong>{templePrice?.formatUnits() ?? <EllipsisLoader />}</strong>
-        </p>
-        <p>
-          Current Treasury Price Index: <strong>{tpf?.formatUnits() ?? <EllipsisLoader />}</strong>
-        </p>
+        <Header
+          alias="RAMOS"
+          contractAddress={RAMOS_ADDRESS}
+          additionalDetails={
+            <>
+              <p>
+                Current Spot Price: <strong>{templePriceFormatted ?? <EllipsisLoader />}</strong>
+              </p>
+              <p>
+                Current Treasury Price Index: <strong>{tpfFormatted ?? <EllipsisLoader />}</strong>
+              </p>
+            </>
+          }
+        />
+        <Header
+          alias="TRV"
+          contractAddress={TRV_ADDRESS}
+          additionalDetails={
+            <>
+              <p>
+                Total Available Dai: <strong>{totalAvailableDaiTrvFormatted ?? <EllipsisLoader />}</strong>
+              </p>
+              <p>
+                Total Available Temple: <strong>{totalAvailableTempleTrvFormatted ?? <EllipsisLoader />}</strong>
+              </p>
+            </>
+          }
+        />
+        <Header
+          alias="RAMOS STRATEGY"
+          contractAddress={RAMOS_STRATEGY}
+          additionalDetails={
+            <p>
+              Version: <strong>{ramosStrategyVersion ?? <EllipsisLoader />}</strong>
+            </p>
+          }
+        />
       </Container>
       <Container>
         <Content>
-          <p>Percentage of gap to close: </p>
-          <Input
-            value={percentageOfGapToClose}
-            small
-            max={100}
-            suffix="%"
-            handleChange={(e: string) => {
-              setPercentageOfGapToClose(limitInput(e));
-            }}
-            onBlur={() => setPercentageOfGapToClose(handleBlur(percentageOfGapToClose ?? 100, 0, 100))}
-          />
-        </Content>
-        <Content>
-          <Button isSmall onClick={calculateRecommendedAmounts} label="RECALCULATE" />
           <Button isSmall onClick={() => setIsTxSettingsOpen(true)} label="TRANSACTION SETTINGS" />
         </Content>
       </Container>
@@ -144,4 +164,24 @@ const RamosAdmin = () => {
   );
 };
 
+type Props = {
+  alias: string;
+  contractAddress: string;
+  additionalDetails?: ReactNode;
+};
+const Header = (props: Props) => {
+  const { alias, contractAddress, additionalDetails } = props;
+  return (
+    <div>
+      <p>
+        {alias + ' '}
+        <a href={`https://etherscan.io/address/${contractAddress}`} target="_blank" rel="noreferrer">
+          {contractAddress.slice(0, 6) + '.....' + contractAddress.slice(-6)}
+        </a>
+      </p>
+      {additionalDetails}
+    </div>
+  );
+};
+
 export default RamosAdmin;