From 06f9aef6ec8f7e074d3b590e52a3cf90e32c23ee Mon Sep 17 00:00:00 2001
From: apporc <appleorchard2000@gmail.com>
Date: Sat, 29 Jun 2024 11:17:38 +0800
Subject: [PATCH] Apply design change

---
 src/pages/earn/index.svelte          |  2 +
 src/pages/earn/step/bootstrap.svelte | 28 +++++++----
 src/pages/earn/step/confirm.svelte   |  8 +++-
 src/pages/earn/step/overview.svelte  | 45 ++++++++++--------
 src/pages/earn/step/stake.svelte     | 71 +++++++++++++++++++++++++---
 src/pages/earn/step/unstake.svelte   | 69 +++++++++++++++++++++++++--
 6 files changed, 179 insertions(+), 44 deletions(-)

diff --git a/src/pages/earn/index.svelte b/src/pages/earn/index.svelte
index 7a68b8a0..fc0eb5e4 100644
--- a/src/pages/earn/index.svelte
+++ b/src/pages/earn/index.svelte
@@ -274,6 +274,7 @@
         {:else if $step === Step.Stake}
             <REXStake
                 bind:amount={selectedAmount}
+                rexBalance={$rexBalance}
                 token={$systemToken}
                 availableTokens={$availableSystemTokens}
                 nextStep={() => toStakeConfirm(Step.Stake)}
@@ -281,6 +282,7 @@
         {:else if $step === Step.Unstake}
             <REXUnstake
                 bind:amount={selectedAmount}
+                rexBalance={$rexBalance}
                 token={$rexToken}
                 availableTokens={$maturedBalance}
                 nextStep={() => toStakeConfirm(Step.Unstake)}
diff --git a/src/pages/earn/step/bootstrap.svelte b/src/pages/earn/step/bootstrap.svelte
index a8e4d548..1a9a3122 100644
--- a/src/pages/earn/step/bootstrap.svelte
+++ b/src/pages/earn/step/bootstrap.svelte
@@ -16,18 +16,26 @@
     let amountValid = false
 
     function onAmountChanged(event: CustomEvent<InputResponse>) {
-        let newAmount = Asset.from(Number(event.detail.value), availableTokens.symbol).value
-        amount = String(newAmount)
-        percent = Math.floor((newAmount / availableTokens.value) * 100)
+        try {
+            let newAmount = Asset.from(Number(event.detail.value), availableTokens.symbol).value
+            amount = String(newAmount)
+            percent = Math.floor((newAmount / availableTokens.value) * 100)
+        } catch (error) {
+            console.log('failed to apply amount change', error)
+        }
     }
     function onPercentChanged(event: any) {
-        let newPercent = Number(event.detail.value)
-        percent = newPercent
-        let newAmount = Asset.from(
-            (newPercent / 100) * availableTokens.value,
-            availableTokens.symbol
-        ).value
-        amount = String(newAmount)
+        try {
+            let newPercent = Number(event.detail.value)
+            percent = newPercent
+            let newAmount = Asset.from(
+                (newPercent / 100) * availableTokens.value,
+                availableTokens.symbol
+            ).value
+            amount = String(newAmount)
+        } catch (error) {
+            console.log('failed to apply percent change', error)
+        }
     }
     function onConfirm() {
         nextStep()
diff --git a/src/pages/earn/step/confirm.svelte b/src/pages/earn/step/confirm.svelte
index 3af52a39..88132818 100644
--- a/src/pages/earn/step/confirm.svelte
+++ b/src/pages/earn/step/confirm.svelte
@@ -40,7 +40,7 @@
     .middle-section {
         margin: 0 auto;
         max-width: 28rem;
-        margin-bottom: 84px;
+        margin-bottom: 62px;
     }
     .bottom-section {
         margin: 0 auto;
@@ -99,12 +99,16 @@
         <LabelValue header="Action">
             <span>{action}</span>
         </LabelValue>
+        <LabelValue header="Time to fully matured">
+            <span>72 hours</span>
+        </LabelValue>
+
         <LabelValue header="Token Amount" changeStep={handleBack}>
             <div class="amount">
                 <span class="logo-container">
                     <TokenImage width="18" height="18" {tokenKey} />
                 </span>
-                <span>{amount.value}</span>
+                <span>{amount}</span>
             </div>
             {#if usd}
                 <div class="value">≈ $ {usd} USD</div>
diff --git a/src/pages/earn/step/overview.svelte b/src/pages/earn/step/overview.svelte
index 866c8c63..a9a3451f 100644
--- a/src/pages/earn/step/overview.svelte
+++ b/src/pages/earn/step/overview.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type {Asset} from 'anchor-link'
+    import {Asset} from 'anchor-link'
 
     import Button from '~/components/elements/button.svelte'
 
@@ -29,6 +29,13 @@
         border: 1px solid var(--divider-grey);
         border-radius: 8px;
         padding: 26px;
+        margin-bottom: 21px;
+    }
+    .bottom-section {
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+        align-items: center;
     }
     .header {
         color: var(--black);
@@ -67,7 +74,7 @@
         gap: 12px;
     }
     .label {
-        color: var(--main-black);
+        color: var(--dark-grey);
         font-weight: 600;
         font-size: 10px;
         line-height: 12px;
@@ -88,14 +95,17 @@
         margin-bottom: 2px;
     }
     .matured {
-        position: relative;
-        display: inline-block;
-        border-bottom: 1px dotted black;
+        color: var(--dark-grey);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 12px;
+        line-height: 29px;
+        text-align: center;
+        letter-spacing: -0.47px;
         margin-bottom: 26px;
     }
-
-    .matured .maturedtooltip {
-        visibility: hidden;
+    .faq {
         color: var(--main-blue);
         font-family: Inter;
         font-style: normal;
@@ -104,16 +114,8 @@
         line-height: 29px;
         text-align: center;
         letter-spacing: -0.47px;
-        background-color: var(--cultured);
-        padding: 0px 0;
-        border-radius: 6px;
-
-        position: absolute;
-        z-index: 1;
-    }
-
-    .matured:hover .maturedtooltip {
-        visibility: visible;
+        margin-bottom: 26px;
+        text-decoration: none;
     }
 </style>
 
@@ -129,8 +131,7 @@
                 {rexBalance}
             </div>
             <div class="matured">
-                {maturedBalance}
-                <div class="maturedtooltip">matured</div>
+                {maturedBalance} matured
             </div>
 
             <div class="buttons">
@@ -157,5 +158,7 @@
             </div>
         </div>
     </div>
-    <div class="bottom-section" />
+    <div class="bottom-section">
+        <a href="/staking/faq" class="faq">How staking works?</a>
+    </div>
 </div>
diff --git a/src/pages/earn/step/stake.svelte b/src/pages/earn/step/stake.svelte
index bd659c1c..09f28455 100644
--- a/src/pages/earn/step/stake.svelte
+++ b/src/pages/earn/step/stake.svelte
@@ -15,17 +15,29 @@
     export let nextStep: () => void
     export let amount: string
     export let token: Token | undefined
+    export let rexBalance: Asset
 
     let amountValid = false
     let tokenOptions = token ? [token] : []
 
+    function maxBalance() {
+        if (availableTokens) {
+            amount = String(availableTokens.value)
+            amountValid = true
+        }
+    }
+
     function onConfirm() {
         nextStep()
     }
 
     function onAmountChanged(event: CustomEvent<InputResponse>) {
-        let newAmount = Asset.from(Number(event.detail.value), availableTokens.symbol).value
-        amount = String(newAmount)
+        try {
+            let newAmount = Asset.from(Number(event.detail.value), availableTokens.symbol).value
+            amount = String(newAmount)
+        } catch (error) {
+            console.log('failed to apply amount change', error)
+        }
     }
 </script>
 
@@ -34,9 +46,6 @@
         border: 1px solid var(--divider-grey);
         border-radius: 20px;
         padding: 26px;
-        :global(.button) {
-            margin-top: 31px;
-        }
     }
     .top-section {
         margin-bottom: 42px;
@@ -44,7 +53,7 @@
     .middle-section {
         margin: 0 auto;
         max-width: 28rem;
-        margin-bottom: 84px;
+        margin-bottom: 31px;
     }
     .bottom-section {
         margin: 0 auto;
@@ -72,8 +81,47 @@
         letter-spacing: -0.18px;
     }
     .token-selector {
+        margin-bottom: 10px;
+    }
+    .label {
+        color: var(--dark-grey);
+        font-weight: 600;
+        font-size: 10px;
+        line-height: 12px;
+        letter-spacing: 0.1px;
+        text-transform: uppercase;
+        margin-bottom: 12px;
+        text-align: start;
         margin-bottom: 32px;
     }
+    .controls {
+        margin-top: 31px;
+        text-align: center;
+        :global(.button) {
+            background: none;
+            color: var(--main-blue);
+            font-size: 10px;
+            text-transform: uppercase;
+        }
+    }
+    .actions {
+        padding: 13px;
+        cursor: pointer;
+        font-family: Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 10px;
+        line-height: 12px;
+        display: flex;
+        justify-content: end;
+        align-items: center;
+        text-align: center;
+        letter-spacing: 0.1px;
+        text-transform: uppercase;
+        color: var(--main-blue);
+        user-select: none;
+        -webkit-user-select: none;
+    }
 </style>
 
 <div class="container">
@@ -88,6 +136,10 @@
             <div class="token-selector">
                 <TokenSelector defaultToken={token} {tokenOptions} onTokenSelect={() => {}} />
             </div>
+            <div class="label">
+                currently staked {rexBalance}
+            </div>
+
             <InputAsset
                 bind:valid={amountValid}
                 bind:value={amount}
@@ -99,6 +151,9 @@
                 balance={availableTokens}
                 on:changed={onAmountChanged}
             />
+            <div class="actions">
+                <span on:click={maxBalance}>Entire Balance</span>
+            </div>
         </Form>
     </div>
     <div class="bottom-section">
@@ -112,5 +167,9 @@
         >
             Stake tokens
         </Button>
+
+        <div class="controls">
+            <Button href="/" style="no-frame">Cancel</Button>
+        </div>
     </div>
 </div>
diff --git a/src/pages/earn/step/unstake.svelte b/src/pages/earn/step/unstake.svelte
index ec947b5a..1d7c5773 100644
--- a/src/pages/earn/step/unstake.svelte
+++ b/src/pages/earn/step/unstake.svelte
@@ -13,6 +13,7 @@
 
     export let amount: string
     export let token: Token | undefined
+    export let rexBalance: Asset
     export let availableTokens: Asset
     export let nextStep: () => void
 
@@ -26,13 +27,24 @@
     }
     let amountValid = false
 
+    function maxBalance() {
+        if (availableTokens) {
+            amount = String(availableTokens.value)
+            amountValid = true
+        }
+    }
+
     function onConfirm() {
         nextStep()
     }
 
     function onAmountChanged(event: CustomEvent<InputResponse>) {
-        let newAmount = Asset.from(Number(event.detail.value), availableTokens.symbol).value
-        amount = String(newAmount)
+        try {
+            let newAmount = Asset.from(Number(event.detail.value), availableTokens.symbol).value
+            amount = String(newAmount)
+        } catch (error) {
+            console.log('failed to apply amount change', error)
+        }
     }
 </script>
 
@@ -41,9 +53,6 @@
         border: 1px solid var(--divider-grey);
         border-radius: 20px;
         padding: 26px;
-        :global(.button) {
-            margin-top: 31px;
-        }
     }
     .top-section {
         margin-bottom: 42px;
@@ -79,8 +88,47 @@
         letter-spacing: -0.18px;
     }
     .token-selector {
+        margin-bottom: 10px;
+    }
+    .label {
+        color: var(--dark-grey);
+        font-weight: 600;
+        font-size: 10px;
+        line-height: 12px;
+        letter-spacing: 0.1px;
+        text-transform: uppercase;
+        margin-bottom: 12px;
+        text-align: start;
         margin-bottom: 32px;
     }
+    .controls {
+        margin-top: 31px;
+        text-align: center;
+        :global(.button) {
+            background: none;
+            color: var(--main-blue);
+            font-size: 10px;
+            text-transform: uppercase;
+        }
+    }
+    .actions {
+        padding: 13px;
+        cursor: pointer;
+        font-family: Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 10px;
+        line-height: 12px;
+        display: flex;
+        justify-content: end;
+        align-items: center;
+        text-align: center;
+        letter-spacing: 0.1px;
+        text-transform: uppercase;
+        color: var(--main-blue);
+        user-select: none;
+        -webkit-user-select: none;
+    }
 </style>
 
 <div class="container">
@@ -100,6 +148,10 @@
                     onTokenSelect={() => {}}
                 />
             </div>
+            <div class="label">
+                total staked {rexBalance}
+            </div>
+
             <InputAsset
                 bind:valid={amountValid}
                 bind:value={amount}
@@ -111,6 +163,9 @@
                 balance={availableTokens}
                 on:changed={onAmountChanged}
             />
+            <div class="actions">
+                <span on:click={maxBalance}>Entire Balance</span>
+            </div>
         </Form>
     </div>
     <div class="bottom-section">
@@ -124,5 +179,9 @@
         >
             Unstake tokens
         </Button>
+
+        <div class="controls">
+            <Button href="/" style="no-frame">Cancel</Button>
+        </div>
     </div>
 </div>