Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixes #7

Merged
merged 3 commits into from
Oct 4, 2023
Merged

fixes #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a4d667a
fix: ui earn card strategy alignement
FazioNico Oct 4, 2023
14fcb61
fix: prevent open modal fail after close on time
FazioNico Oct 4, 2023
f4812eb
fix: exclude error from toast ui
FazioNico Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions src/components/ConnectButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,14 @@ const ConnectButton = (props: {
// Hide the loader
await hideLoader()
} catch (error:any) {
// Hide the loader
await hideLoader();
// Log any errors that occur during the connection process
// console.error("handleConnect:", error);
// filter out the error message if user stop the connection ([-32603] Internal JSON-RPC error.)
if (error?.code === -32603) {
return;
}
console.error("[ERROR] handleConnect:", error);
await presentToast({
message: `[ERROR] Connect Failed with reason: ${error?.message||error}`,
color: "danger",
Expand All @@ -57,8 +63,6 @@ const ConnectButton = (props: {
}}
]
});
// Hide the loader
await hideLoader();
}
}

Expand Down
8 changes: 4 additions & 4 deletions src/components/ETHLiquidStakingstrategy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,9 +360,9 @@ export function ETHLiquidStakingstrategyCard() {
);

return (
<IonCol size="auto" className="ion-padding-bottom">
<IonCard className="strategyCard" style={{ maxWidth: 350 }}>
<IonGrid>
<>
<IonCard className="strategyCard" style={{ width: 330 }}>
<IonGrid style={{width: '100%'}}>
<IonRow class="ion-text-center ion-padding">
<IonCol size="12" class="ion-padding">
<IonImg
Expand Down Expand Up @@ -539,6 +539,6 @@ export function ETHLiquidStakingstrategyCard() {
}
/>
</IonModal>
</IonCol>
</>
);
}
8 changes: 4 additions & 4 deletions src/components/ETHOptimizedStrategy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ export function EthOptimizedStrategyModal({ dismiss }: IStrategyModalProps) {
}

return (
<IonGrid>
<IonGrid style={{width: '100%'}}>
{/* <!-- Steps Proccess Component --> */}
<IonRow
class="ion-text-center ion-padding-top ion-padding-horizontal"
Expand Down Expand Up @@ -1109,10 +1109,10 @@ export function EthOptimizedStrategyCard(props: { asImage?: boolean }) {
return !strategy ? (
Loader
) : (
<IonCol size="auto" className="ion-padding-bottom">
<>
<IonCard
className={props.asImage ? "asImage" : "strategyCard"}
style={{ maxWidth: 330 }}
style={{ width: 330 }}
>
<IonGrid>
<IonRow class="ion-text-center ion-padding">
Expand Down Expand Up @@ -1332,6 +1332,6 @@ export function EthOptimizedStrategyCard(props: { asImage?: boolean }) {
}
/>
</IonModal>
</IonCol>
</>
);
}
271 changes: 137 additions & 134 deletions src/components/PoolItemList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,155 +46,158 @@ export function PoolItemList(props: IPoolItemListProps) {
);

return (
<IonItem
lines="none"
onClick={() => setIsModalOpen(true)}
>
<IonGrid className="ion-no-padding">
<IonRow className="poolItemList ion-align-items-center ion-justify-content-between ion-no-padding ion-padding-start">
<IonCol size-md="2"
class="ion-text-start ion-padding-start"
style={{
display: "flex",
alignItems: "center",
alignContent: "center",
}}
>
<div>
<IonAvatar
style={{
height: iconSize,
width: iconSize,
minHeight: iconSize,
minWidth: iconSize,
}}
>
<IonImg src={reserve.logo}></IonImg>
</IonAvatar>
<IonIcon
style={{
fontSize: "0.8rem",
transform: "translateX(-0.2rem)",
position: "absolute",
bottom: "0.15rem",
}}
src={CHAIN_AVAILABLES.find((c) => c.id === chainId)?.logo}
></IonIcon>
</div>
<IonLabel class="ion-padding-start">
{reserve?.symbol}
{(reserve?.usageAsCollateralEnabled === false ||
reserve.isIsolated === true) && (
<>
<IonItem
lines="none"
onClick={() => setIsModalOpen(() => true)}
>
<IonGrid className="ion-no-padding">
<IonRow className="poolItemList ion-align-items-center ion-justify-content-between ion-no-padding ion-padding-start">
<IonCol size-md="2"
class="ion-text-start ion-padding-start"
style={{
display: "flex",
alignItems: "center",
alignContent: "center",
}}
>
<div>
<IonAvatar
style={{
height: iconSize,
width: iconSize,
minHeight: iconSize,
minWidth: iconSize,
}}
>
<IonImg src={reserve.logo}></IonImg>
</IonAvatar>
<IonIcon
icon={warningOutline}
color="warning"
style={{ marginLeft: "0.5rem" }}
style={{
fontSize: "0.8rem",
transform: "translateX(-0.2rem)",
position: "absolute",
bottom: "0.15rem",
}}
src={CHAIN_AVAILABLES.find((c) => c.id === chainId)?.logo}
></IonIcon>
)}
<p>
<small>
{CHAIN_AVAILABLES.find((c) => c.id === chainId)?.name} network
</small>
{user && (
<IonText color="dark">
<br />
<small>
Wallet balance: {Number(reserve.walletBalance)}
</small>
</IonText>
</div>
<IonLabel class="ion-padding-start">
{reserve?.symbol}
{(reserve?.usageAsCollateralEnabled === false ||
reserve.isIsolated === true) && (
<IonIcon
icon={warningOutline}
color="warning"
style={{ marginLeft: "0.5rem" }}
></IonIcon>
)}
</p>
</IonLabel>
</IonCol>
<IonCol size="1"
class="ion-text-end ion-hide-md-down"
>
<IonImg
style={{
width: "18px",
heigth: "18px",
position: "absolute",
right: "0",
}}
src="./assets/icons/aave.svg"
></IonImg>
</IonCol>
<IonCol size-md="2" class="ion-text-end ion-hide-md-down">
<IonLabel>
{+reserve?.supplyBalance > 0
? (+reserve?.supplyBalance).toFixed(6)
: "0.00"}
<br />
<IonText color="medium">
<small>
{getReadableAmount(
+reserve?.supplyBalance,
Number(reserve?.priceInUSD),
"No deposit"
<p>
<small>
{CHAIN_AVAILABLES.find((c) => c.id === chainId)?.name} network
</small>
{user && (
<IonText color="dark">
<br />
<small>
Wallet balance: {Number(reserve.walletBalance)}
</small>
</IonText>
)}
</small>
</IonText>
</IonLabel>
</IonCol>
<IonCol size="auto" size-md="2" class="ion-text-end ion-hide-md-down">
<IonLabel>
{+reserve?.borrowBalance > 0
? (+reserve?.borrowBalance).toFixed(6)
: reserve?.borrowingEnabled === false
? "-"
: "0.00"}
{reserve?.borrowingEnabled === true && (
</p>
</IonLabel>
</IonCol>
<IonCol size="1"
class="ion-text-end ion-hide-md-down"
>
<IonImg
style={{
width: "18px",
heigth: "18px",
position: "absolute",
right: "0",
}}
src="./assets/icons/aave.svg"
></IonImg>
</IonCol>
<IonCol size-md="2" class="ion-text-end ion-hide-md-down">
<IonLabel>
{+reserve?.supplyBalance > 0
? (+reserve?.supplyBalance).toFixed(6)
: "0.00"}
<br />
<IonText color="medium">
<br />
<small>
{getReadableAmount(
+reserve?.borrowBalance,
+reserve?.supplyBalance,
Number(reserve?.priceInUSD),
"No debit"
"No deposit"
)}
</small>
</IonText>
)}
</IonLabel>
</IonCol>
<IonCol size="auto" size-md="2" class="ion-text-end">
<IonLabel>
{Number(reserve?.supplyAPY || 0) * 100 === 0
? "0"
: Number(reserve?.supplyAPY || 0) * 100 < 0.01
? "< 0.01"
: (Number(reserve?.supplyAPY || 0) * 100).toFixed(2)}
%
</IonLabel>
</IonCol>
<IonCol size="auto" size-md="2" class="ion-text-end ion-hide-md-down">
<IonLabel className="ion-padding-end">
{Number(reserve?.variableBorrowAPY || 0) * 100 === 0
? reserve?.borrowingEnabled === false
? "- "
: `0%`
: Number(reserve?.variableBorrowAPY || 0) * 100 < 0.01
? `< 0.01%`
: (Number(reserve?.variableBorrowAPY || 0) * 100).toFixed(2) +
"%"}
</IonLabel>
</IonCol>
</IonRow>
</IonGrid>

<IonFabButton
slot="end"
color="gradient"
size="small"
className="ion-margin-horizontal"
>
<IonIcon size="small" icon={searchOutline} />
</IonFabButton>
</IonLabel>
</IonCol>
<IonCol size="auto" size-md="2" class="ion-text-end ion-hide-md-down">
<IonLabel>
{+reserve?.borrowBalance > 0
? (+reserve?.borrowBalance).toFixed(6)
: reserve?.borrowingEnabled === false
? "-"
: "0.00"}
{reserve?.borrowingEnabled === true && (
<IonText color="medium">
<br />
<small>
{getReadableAmount(
+reserve?.borrowBalance,
Number(reserve?.priceInUSD),
"No debit"
)}
</small>
</IonText>
)}
</IonLabel>
</IonCol>
<IonCol size="auto" size-md="2" class="ion-text-end">
<IonLabel>
{Number(reserve?.supplyAPY || 0) * 100 === 0
? "0"
: Number(reserve?.supplyAPY || 0) * 100 < 0.01
? "< 0.01"
: (Number(reserve?.supplyAPY || 0) * 100).toFixed(2)}
%
</IonLabel>
</IonCol>
<IonCol size="auto" size-md="2" class="ion-text-end ion-hide-md-down">
<IonLabel className="ion-padding-end">
{Number(reserve?.variableBorrowAPY || 0) * 100 === 0
? reserve?.borrowingEnabled === false
? "- "
: `0%`
: Number(reserve?.variableBorrowAPY || 0) * 100 < 0.01
? `< 0.01%`
: (Number(reserve?.variableBorrowAPY || 0) * 100).toFixed(2) +
"%"}
</IonLabel>
</IonCol>
</IonRow>
</IonGrid>

<IonFabButton
slot="end"
color="gradient"
size="small"
className="ion-margin-horizontal"
>
<IonIcon size="small" icon={searchOutline} />
</IonFabButton>
</IonItem>

<IonModal
ref={modal}
isOpen={isModalOpen}
className="modalPage"
onDidDismiss={() => setIsModalOpen(() => false)}
>
<ReserveDetail
reserve={reserve}
Expand All @@ -203,6 +206,6 @@ export function PoolItemList(props: IPoolItemListProps) {
dismiss={() => modal.current?.dismiss()}
handleSegmentChange={handleSegmentChange} />
</IonModal>
</IonItem>
</>
);
}
14 changes: 10 additions & 4 deletions src/containers/EarnContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,19 @@ export function EarnContainer() {
>
<IonGrid class="ion-no-padding" style={{height: '100%'}}>
<IonRow class="ion-justify-content-center" style={{height: '100%'}}>

{/* ETH Staking Strategy */}
<ETHLiquidStakingstrategyCard />
<IonCol size="auto" className="ion-padding-bottom">
<ETHLiquidStakingstrategyCard />
</IonCol>

{/* ETH Optimized Strategy */}
<EthOptimizedStrategyProvider>
<EthOptimizedStrategyCard />
</EthOptimizedStrategyProvider>
<IonCol size="auto" className="ion-padding-bottom">
<EthOptimizedStrategyProvider>
<EthOptimizedStrategyCard />
</EthOptimizedStrategyProvider>
</IonCol>

</IonRow>
</IonGrid>
</IonCol>
Expand Down