From 54b9039fbd1e7713e1524172210307703e025029 Mon Sep 17 00:00:00 2001 From: eli-d <64763513+eli-d@users.noreply.github.com> Date: Wed, 10 Apr 2024 16:06:15 +0930 Subject: [PATCH 1/4] begin to support fly unstaking finalization --- .../components/FLYStakingStatsModal/index.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx b/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx index 44388efbf..cc1f9bcc2 100644 --- a/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx +++ b/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx @@ -61,6 +61,8 @@ const FlyStakingStatsModal = ({ visible, close, showConnectWalletModal, shouldUp flyStakingDetails, flyStakingBeginUnstake, flyStakingAmountUnstaking, + flyStakingFinaliseUnstake, + flyStakingSecondsUntilSoonestUnstake, } = useContext(FluidityFacadeContext) const [flyBalance, setFlyBalance] = useState(new BN(0)); @@ -136,6 +138,23 @@ const FlyStakingStatsModal = ({ visible, close, showConnectWalletModal, shouldUp })(); }, [address, flyStakingAmountUnstaking]); + const [flyUnstakable, setFlyUnstakable] = useState(new BN(0)); + const [flyUnstaked, setFlyUnstaked] = useState(false) + + const finaliseUnstake = async() => { + const unstaked = await flyStakingFinaliseUnstake?.() + setFlyUnstaked(unstaked?.gt(new BN(0)) || false) + } + + useEffect(() => { + (async() => { + if (!address) return; + const seconds = await flyStakingSecondsUntilSoonestUnstake?.(address) + if (!seconds || seconds.eq(new BN(0))) + setFlyUnstakable(flyUnstaking) + })() + }, [flyUnstaking, flyStakingSecondsUntilSoonestUnstake]) + const [isStaking, setIsStaking] = useState(staking) const [currentAction, setCurrentAction] = useState("Connect") const [showTermsModal, setShowTermsModal] = useState(false) From 73067b9f05c7c7b8fe5d66c0c4b284b4f8b3085d Mon Sep 17 00:00:00 2001 From: eli-d <64763513+eli-d@users.noreply.github.com> Date: Wed, 10 Apr 2024 16:06:54 +0930 Subject: [PATCH 2/4] add unstaked $FLY claim button to staking modal --- .../components/FLYStakingStatsModal/index.tsx | 146 ++++++++++-------- .../app/styles/dashboard/airdrop.css | 21 +++ .../app/styles/dashboard/airdrop.scss | 21 +++ 3 files changed, 127 insertions(+), 61 deletions(-) diff --git a/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx b/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx index cc1f9bcc2..ce107ec1e 100644 --- a/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx +++ b/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx @@ -359,75 +359,99 @@ const FlyStakingStatsModal = ({ visible, close, showConnectWalletModal, shouldUp -
- - +
+ + + + The amount of $FLY Token you have claimed. + +
+ } + >
- - The amount of $FLY Token you have claimed. - -
- } - > -
-
- - {getValueFromFlyAmount(flyBalance)?.toString()} -
-
- $FLY Balance - +
+ + {getValueFromFlyAmount(flyBalance)?.toString()} +
+
+ $FLY Balance + +
-
- - - - + + + + + The amount of $FLY Token you have staked from your total $FLY Balance. + +
+ } + >
- - The amount of $FLY Token you have staked from your total $FLY Balance. - -
- } - > -
- { - (() => { - const s = getValueFromFlyAmount(new BN(flyStaked.toString()))?.toString(); - if (!s) return flyStaked.toString(); - return s; - })() } -
- Staked - + { + (() => { + const s = getValueFromFlyAmount(new BN(flyStaked.toString()))?.toString(); + if (!s) return flyStaked.toString(); + return s; + })() } +
+ Staked + +
-
- - - - + + + + + The amount of $FLY Tokens you have unstaked from your total Staked $FLY Balance. Includes unbonding amount. + + + } + >
- - The amount of $FLY Tokens you have unstaked from your total Staked $FLY Balance. Includes unbonding amount. - + {getValueFromFlyAmount(flyUnstaking)?.toString()} +
+ Unstaking + +
- } - > -
- {getValueFromFlyAmount(flyUnstaking)?.toString()} -
- Unstaking - + + + +
+
+ {getValueFromFlyAmount(flyUnstakable)?.toString()} +
+ Claimable Unstaked $FLY +
+ + + {flyUnstaked ? "Claimed" : "Claim"} + +
- - + +
: diff --git a/web/app.fluidity.money/app/styles/dashboard/airdrop.css b/web/app.fluidity.money/app/styles/dashboard/airdrop.css index fdc9c3688..4c90de254 100644 --- a/web/app.fluidity.money/app/styles/dashboard/airdrop.css +++ b/web/app.fluidity.money/app/styles/dashboard/airdrop.css @@ -1278,6 +1278,21 @@ align-self: normal !important; } +.fly-unstaking-claim-action-button { + width: 30% !important; + align-self: center; +} + +.fly-staking-grid-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1em; +} + +.fly-staking-grid-item-long { + grid-column: 1/-1; +} + .underline { text-decoration: underline; } @@ -1359,6 +1374,12 @@ width: 100%; } +.fly-staking-claimable { + display: flex; + flex-direction: column; + justify-content: center; +} + .text-with-info-popup { display: flex; gap: 0.5em; diff --git a/web/app.fluidity.money/app/styles/dashboard/airdrop.scss b/web/app.fluidity.money/app/styles/dashboard/airdrop.scss index 249a96598..d4b4631f8 100644 --- a/web/app.fluidity.money/app/styles/dashboard/airdrop.scss +++ b/web/app.fluidity.money/app/styles/dashboard/airdrop.scss @@ -1420,6 +1420,21 @@ $holo: linear-gradient( align-self: normal !important; } +.fly-unstaking-claim-action-button { + width: 30% !important; + align-self: center; +} + +.fly-staking-grid-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1em; +} + +.fly-staking-grid-item-long { + grid-column: 1 / -1; +} + .underline { text-decoration: underline; } @@ -1505,6 +1520,12 @@ $holo: linear-gradient( width: 100%; } +.fly-staking-claimable { + display: flex; + flex-direction: column; + justify-content: center; +} + .text-with-info-popup { display: flex; gap: 0.5em; From 1ebc485cf56d3d792e5f04300a77c0b7e8639870 Mon Sep 17 00:00:00 2001 From: eli-d <64763513+eli-d@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:40:33 +0930 Subject: [PATCH 3/4] display fly points staking tiers in modal --- .../components/FLYStakingStatsModal/index.tsx | 83 +++++++++++++++++++ .../app/styles/dashboard/airdrop.css | 23 +++++ .../app/styles/dashboard/airdrop.scss | 24 ++++++ 3 files changed, 130 insertions(+) diff --git a/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx b/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx index ce107ec1e..9a03f11ca 100644 --- a/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx +++ b/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx @@ -361,6 +361,72 @@ const FlyStakingStatsModal = ({ visible, close, showConnectWalletModal, shouldUp
+ +
+ +
+ + 😔 No Tier + + + {"5000 > No Tier"} + +
+
+ + 🦐 Shrimp + + + {"30,000 > Shrimp"} + +
+
+ + 🐬 Dolphin + + + {"80,000 > Dolphin"} + +
+
+ + 🏄‍♂️ Surfer + + + {"250,000 > Surfer"} + +
+
+ + 🗿 Tiki Warrior + + + {"1,000,000 > Tiki"} + +
+
+ + 🌌 Super Surfer + + + {"∞ > Super Surfer"} + +
+
+ } + > +
+
+ {tierText(flyStaked)} + +
+
+ +
+ { + switch (true) { + case (flyStaked.lt(BigNumber.from(5000))): + return <>😔 No Tier; + case (flyStaked.lt(BigNumber.from(30000))): + return <>🦐 Shrimp Tier; + case (flyStaked.lt(BigNumber.from(80000))): + return <>🐬 Dolphin Tier; + case (flyStaked.lt(BigNumber.from(250000))): + return <>🏄‍♂️ Surfer Tier; + case (flyStaked.lt(BigNumber.from(1000000))): + return <>🗿 Tiki Warrior Tier; + default: + return <>🌌 Super Surfer Tier; + } +} + const StakingWarning = ({ header, body }: { header: ReactNode, body: ReactNode }) => { return
diff --git a/web/app.fluidity.money/app/styles/dashboard/airdrop.css b/web/app.fluidity.money/app/styles/dashboard/airdrop.css index 4c90de254..7e14dd6b9 100644 --- a/web/app.fluidity.money/app/styles/dashboard/airdrop.css +++ b/web/app.fluidity.money/app/styles/dashboard/airdrop.css @@ -1293,6 +1293,26 @@ grid-column: 1/-1; } +.fly-staking-popup-icon-text { + text-align: right; + white-space: nowrap; +} + +.fly-staking-popup-container-outer { + display: flex; + flex-direction: column; + width: fit-content; +} + +.fly-staking-popup-container { + display: flex; + justify-content: space-between; +} + +.centre { + align-self: center; +} + .underline { text-decoration: underline; } @@ -1495,6 +1515,9 @@ claim-error-message-none { min-width: 100px; max-width: 140px; } +.staking-stats-info-text .nowrap { + white-space: nowrap; +} .airdrop-image-banner { padding-top: 20px; diff --git a/web/app.fluidity.money/app/styles/dashboard/airdrop.scss b/web/app.fluidity.money/app/styles/dashboard/airdrop.scss index d4b4631f8..7709eff7a 100644 --- a/web/app.fluidity.money/app/styles/dashboard/airdrop.scss +++ b/web/app.fluidity.money/app/styles/dashboard/airdrop.scss @@ -1435,6 +1435,26 @@ $holo: linear-gradient( grid-column: 1 / -1; } +.fly-staking-popup-icon-text { + text-align: right; + white-space: nowrap; +} + +.fly-staking-popup-container-outer { + display: flex; + flex-direction: column; + width: fit-content; +} + +.fly-staking-popup-container { + display: flex; + justify-content: space-between; +} + +.centre { + align-self: center; +} + .underline { text-decoration: underline; } @@ -1653,6 +1673,10 @@ claim-error-message-none { .staking-stats-info-text { min-width: 100px; max-width: 140px; + + .nowrap { + white-space: nowrap; + } } .airdrop-image-banner { From 5672755f15116a6797adb3825e8b268c333f8e3c Mon Sep 17 00:00:00 2001 From: eli-d <64763513+eli-d@users.noreply.github.com> Date: Mon, 15 Apr 2024 16:26:00 +0930 Subject: [PATCH 4/4] remove duplicated card from merge --- .../components/FLYStakingStatsModal/index.tsx | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx b/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx index 00992990c..97fc5a3c8 100644 --- a/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx +++ b/web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx @@ -493,26 +493,6 @@ const FlyStakingStatsModal = ({ visible, close, showConnectWalletModal, shouldUp if (!s) return flyStaked.toString(); return s; })() } -
- Staked - -
-
- - - - - - The amount of $FLY Tokens you have unstaked from your total Staked $FLY Balance. Includes unbonding amount. - -
- } - > -
- {getValueFromFlyAmount(flyUnstaking)?.toString()}
Unstaking