Skip to content

Commit

Permalink
refactor: use dedicated coponent
Browse files Browse the repository at this point in the history
  • Loading branch information
@FazioNico
FazioNico committed Oct 6, 2023
1 parent 0d2c63e commit 3b0c50e
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 148 deletions.
38 changes: 20 additions & 18 deletions src/components/ETHLiquidStakingstrategy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -502,24 +502,26 @@ export function ETHLiquidStakingstrategyCard() {
<IonRow>
<IonCol size="12" class="ion-padding-horizontal ion-padding-bottom">
<HowItWork>
<IonText>
<h4>Staking WETH with Lido</h4>
<p className="ion-no-margin ion-margin-bottom">
<small>
By swapping WETH to wstETH you will incrase your WETH
holdings by {baseAPRstETH.toFixed(2)}% APY revard from
staking WETH using{" "}
<a
href="https://lido.fi/"
target="_blank"
rel="noopener noreferrer"
>
Lido
</a>
.
</small>
</p>
</IonText>
<div className="ion-padding-horizontal">
<IonText>
<h4>Staking WETH with Lido</h4>
<p className="ion-no-margin ion-padding-bottom">
<small>
By swapping WETH to wstETH you will incrase your WETH
holdings by {baseAPRstETH.toFixed(2)}% APY revard from
staking WETH using{" "}
<a
href="https://lido.fi/"
target="_blank"
rel="noopener noreferrer"
>
Lido
</a>
.
</small>
</p>
</IonText>
</div>
</HowItWork>
{CardButton}
</IonCol>
Expand Down
213 changes: 83 additions & 130 deletions src/components/ETHOptimizedStrategy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import { useAave } from "../context/AaveContext";
import { FormattedNumber } from "./FormattedNumber";
import { AssetInput } from "./AssetInput";
import { ApyDetail } from "./ApyDetail";
import { HowItWork } from "./HowItWork";

export const minBaseTokenRemainingByNetwork: Record<number, string> = {
[ChainId.optimism]: "0.0001",
Expand Down Expand Up @@ -952,136 +953,88 @@ export function EthOptimizedStrategyCard(props: { asImage?: boolean }) {
const Loader = <IonSpinner name="dots" />;
const InfoButton = (
<>
<IonButton
size="small"
fill="clear"
onClick={() => setIsDisplayHowItWork(true)}
>
how it work
</IonButton>
<IonModal
className="modalAlert"
isOpen={isDisplayHowItWork}
onWillDismiss={() => setIsDisplayHowItWork(false)}
>
<IonGrid className="ion-padding">
<IonRow class="ion-align-items-top">
<IonCol size="10">
<IonText>
<h3 className="ion-no-margin">How it work</h3>
</IonText>
</IonCol>
<IonCol size="2" class="ion-text-end">
<IonButton
size="small"
fill="clear"
onClick={() =>
!isDisplayAPYDef
? setIsDisplayHowItWork(false)
: setIsDisplayHowItWork(false)
}
>
<IonIcon slot="icon-only" icon={closeSharp}></IonIcon>
</IonButton>
</IonCol>
<IonCol size="12">
<IonText color="medium">
<p className="ion-no-margin ion-margin-bottom">
<small>
Strategy setps process below explained how you can incrase
your APY revard.
</small>
</p>
</IonText>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12">

<IonAccordionGroup>
<IonAccordion value="1">
<IonItem slot="header">
<div className="bulletStep">1</div>
<IonLabel>Staking WETH with Lido</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
<p className="ion-no-margin ion-margin-bottom">
<small>
By swapping WETH to wstETH you will incrase your WETH
holdings by {baseAPRstETH}% APY revard from staking WETH
using{" "}
<a
href="https://lido.fi/"
target="_blank"
rel="noopener noreferrer"
>
Lido
</a>
.
</small>
</p>
</div>
</IonAccordion>
<IonAccordion value="2">
<IonItem slot="header">
<div className="bulletStep">2</div>
<IonLabel>Deposit wstETH to AAVE</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
<p className="ion-no-margin ion-margin-bottom">
<small>
By deposit wstETH as collateral on{" "}
<a
href="https://aave.com/"
target="_blank"
rel="noopener noreferrer"
>
AAVE
</a>{" "}
you will be able to borrow up to{" "}
{Number(strategy?.userLiquidationThreshold) * 100}% of
your wstETH value in WETH.
</small>
</p>
</div>
</IonAccordion>
<IonAccordion value="3">
<IonItem slot="header">
<div className="bulletStep">3</div>
<IonLabel>Borrow WETH from AAVE</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
<p className="ion-no-margin ion-margin-bottom">
<small>
By borrowing WETH from AAVE you will incrase your WETH
holdings by{" "}
{Number(strategy?.userLiquidationThreshold) * 100}%.
</small>
</p>
</div>
</IonAccordion>
<IonAccordion value="4">
<IonItem slot="header">
<div className="bulletStep">4</div>
<IonLabel>Swap WETH to wstETH</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
<p className="ion-no-margin ion-margin-bottom">
<small>
By repeating step 1, you will incrase your wstETH holdings
by {Number(strategy?.userLiquidationThreshold) * 100}% and
you will cumulate {baseAPRstETH}% APY. You can now repeat
again all process untill you reach the maximum AAVE user
threshold liquidation.
</small>
</p>
</div>
</IonAccordion>
</IonAccordionGroup>
</IonCol>
</IonRow>
</IonGrid>
</IonModal>
<HowItWork>
<IonAccordionGroup>
<IonAccordion value="1">
<IonItem slot="header">
<div className="bulletStep">1</div>
<IonLabel>Staking WETH with Lido</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
<p className="ion-no-margin ion-margin-bottom">
<small>
By swapping WETH to wstETH you will incrase your WETH
holdings by {baseAPRstETH}% APY revard from staking WETH
using{" "}
<a
href="https://lido.fi/"
target="_blank"
rel="noopener noreferrer"
>
Lido
</a>
.
</small>
</p>
</div>
</IonAccordion>
<IonAccordion value="2">
<IonItem slot="header">
<div className="bulletStep">2</div>
<IonLabel>Deposit wstETH to AAVE</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
<p className="ion-no-margin ion-margin-bottom">
<small>
By deposit wstETH as collateral on{" "}
<a
href="https://aave.com/"
target="_blank"
rel="noopener noreferrer"
>
AAVE
</a>{" "}
you will be able to borrow up to{" "}
{Number(strategy?.userLiquidationThreshold) * 100}% of
your wstETH value in WETH.
</small>
</p>
</div>
</IonAccordion>
<IonAccordion value="3">
<IonItem slot="header">
<div className="bulletStep">3</div>
<IonLabel>Borrow WETH from AAVE</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
<p className="ion-no-margin ion-margin-bottom">
<small>
By borrowing WETH from AAVE you will incrase your WETH
holdings by{" "}
{Number(strategy?.userLiquidationThreshold) * 100}%.
</small>
</p>
</div>
</IonAccordion>
<IonAccordion value="4">
<IonItem slot="header">
<div className="bulletStep">4</div>
<IonLabel>Swap WETH to wstETH</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
<p className="ion-no-margin ion-margin-bottom">
<small>
By repeating step 1, you will incrase your wstETH holdings
by {Number(strategy?.userLiquidationThreshold) * 100}% and
you will cumulate {baseAPRstETH}% APY. You can now repeat
again all process untill you reach the maximum AAVE user
threshold liquidation.
</small>
</p>
</div>
</IonAccordion>
</IonAccordionGroup>
</HowItWork>
</>
);
const CardButton =
Expand Down

0 comments on commit 3b0c50e

Please sign in to comment.