Add liquid REX balances to claim + rename claim to withdraw

src/pages/earn/index.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type {Readable, Writable} from 'svelte/store'
     import {derived, writable, get} from 'svelte/store'
-    import {Asset} from 'anchor-link'
+    import {AnyAction, Asset} from 'anchor-link'
 
     import {currentAccount} from '~/store'
     import {activeBlockchain, activeSession} from '~/store'
@@ -24,6 +24,8 @@
     import REXUnstake from '~/pages/earn/step/unstake.svelte'
     import REXClaim from '~/pages/earn/step/claim.svelte'
     import REXConfirm from '~/pages/earn/step/confirm.svelte'
+    import {onMount} from 'svelte'
+    import {getClient} from '~/api-client'
 
     let selectedAmount: string
     let selectedAction: string
@@ -139,6 +141,27 @@
         return result
     })
 
+    const rexEOSBalance: Writable<Asset> = writable(Asset.from(0, $systemToken!.symbol))
+    onMount(async () => {
+        const client = getClient($activeBlockchain.chainId)
+        const unsubscribe = currentAccount.subscribe(async (account) => {
+            const result = await client.v1.chain.get_table_rows({
+                code: 'eosio',
+                scope: 'eosio',
+                table: 'rexfund',
+                json: true,
+                lower_bound: $currentAccount?.account_name,
+                upper_bound: $currentAccount?.account_name,
+            })
+            if (result.rows.length > 0) {
+                rexEOSBalance.set(Asset.from(result.rows[0].balance, $systemToken!.symbol))
+            }
+        })
+        return () => {
+            unsubscribe()
+        }
+    })
+
     const initialStep: Step = Step.Bootstrap
     const step: Writable<Step> = writable(initialStep, () => {
         const unsubscribeStep = defaultStep.subscribe((s) => {
@@ -223,28 +246,33 @@
     }
 
     function getClaimAction() {
-        let rexAmount = convertEosToRex(Number(selectedAmount))
-        let eosAmount = convertRexToEos(rexAmount.value)
-        return [
-            {
-                authorization: [$activeSession!.auth],
-                account: 'eosio',
-                name: 'sellrex',
-                data: REXSELLREX.from({
-                    from: $activeSession!.auth.actor,
-                    rex: rexAmount,
-                }),
-            },
+        const actions: AnyAction[] = [
             {
                 authorization: [$activeSession!.auth],
                 account: 'eosio',
                 name: 'withdraw',
                 data: REXWithdraw.from({
                     owner: $activeSession!.auth.actor,
-                    amount: eosAmount,
+                    amount: Asset.from(Number(selectedAmount), $systemToken!.symbol),
                 }),
             },
         ]
+
+        if (Number($rexEOSBalance.value) < Number(selectedAmount)) {
+            const difference = Number(selectedAmount) - Number($rexEOSBalance.value)
+            const rexAmount = convertEosToRex(difference)
+            actions.unshift({
+                authorization: [$activeSession!.auth],
+                account: 'eosio',
+                name: 'sellrex',
+                data: REXSELLREX.from({
+                    from: $activeSession!.auth.actor,
+                    rex: rexAmount,
+                }),
+            })
+        }
+
+        return actions
     }
 
     // Create a derived store of the rex field we expect to be modified
@@ -255,6 +283,13 @@
         return Asset.from(0, $systemToken!.symbol)
     })
 
+    const claimableTokens = derived([rexInfo, rexEOSBalance], ([$rexInfo, $rexEOSBalance]) => {
+        return Asset.fromUnits(
+            $rexInfo.matured.units.adding($rexEOSBalance.units),
+            $rexEOSBalance.symbol
+        )
+    })
+
     async function handleConfirm(context: FormTransaction) {
         const actions = getActionData()
         try {
@@ -308,6 +343,7 @@
             <REXOverview
                 availableTokens={$availableSystemTokens}
                 rexInfo={$rexInfo}
+                rexEOSBalance={$rexEOSBalance}
                 toStake={() => switchStep(Step.Stake)}
                 toUnstake={() => switchStep(Step.Unstake)}
                 toClaim={() => switchStep(Step.Claim)}
@@ -335,7 +371,7 @@
                 bind:amount={selectedAmount}
                 rexInfo={$rexInfo}
                 token={$rexToken}
-                availableTokens={$rexInfo.matured}
+                availableTokens={$claimableTokens}
                 nextStep={() => toStakeConfirm(Step.Claim)}
                 handleBack={() => switchStep($defaultStep)}
             />

src/pages/earn/step/bootstrap.svelte

@@ -143,7 +143,7 @@
         </div>
     </div>
     <div class="bottom-section">
-        <p>The unstaking process takes 21 days before the tokens become available for claim.</p>
+        <p>The unstaking process takes 21 days before the tokens become available to withdraw.</p>
         <br />
         <p>* The APY changes based on the total number of EOS tokens staked at any given moment.</p>
     </div>

src/pages/earn/step/claim.svelte

@@ -136,13 +136,13 @@
 
 <div class="container">
     <div class="top-section">
-        <div class="header">Claim</div>
-        <div class="subheader">Remove from your staked balance</div>
+        <div class="header">Withdraw</div>
+        <div class="subheader">Withdraw tokens from the staking contract</div>
         <ProgressBar step={1} />
     </div>
     <div class="middle-section">
         <Form on:submit={onConfirm}>
-            <InputLabel>amount to claim</InputLabel>
+            <InputLabel>amount to withdraw</InputLabel>
             <div class="token-selector">
                 <TokenSelector
                     defaultToken={selectedToken}
@@ -151,9 +151,6 @@
                     onTokenSelect={() => {}}
                 />
             </div>
-            <div class="label">
-                total staked {rexInfo.total}
-            </div>
 
             <InputAsset
                 bind:valid={amountValid}
@@ -180,7 +177,7 @@
             formValidation
             on:action={onConfirm}
         >
-            Unstake tokens
+            Withdraw Tokens
         </Button>
 
         <div class="controls">

src/pages/earn/step/overview.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-    import type {Asset} from 'anchor-link'
+    import {Asset} from 'anchor-link'
 
     import Button from '~/components/elements/button.svelte'
 
     import type {REXInfo} from '~/pages/earn/types'
 
     export let availableTokens: Asset
+    export let rexEOSBalance: Asset
     export let rexInfo: REXInfo
     export let toStake: () => void
     export let toUnstake: () => void
@@ -147,12 +148,15 @@
             </div>
             {#if Number(rexInfo.savings.value) > 0}
                 <div class="unstakable">
-                    {rexInfo.savings} unstakable
+                    Unstakable: {rexInfo.savings}
                 </div>
             {/if}
-            {#if Number(rexInfo.matured.value) > 0}
+            {#if Number(rexInfo.matured.value) > 0 || Number(rexEOSBalance.value) > 0}
                 <div class="claimable">
-                    {rexInfo.matured} claimable
+                    Withdrawable: {Asset.fromUnits(
+                        rexInfo.matured.units.adding(rexEOSBalance.units),
+                        rexEOSBalance.symbol
+                    )}
                 </div>
             {/if}
 
@@ -181,17 +185,17 @@
                     fluid
                     style="primary"
                     size="regular"
-                    disabled={rexInfo.matured.value <= 0}
+                    disabled={rexInfo.matured.value <= 0 && rexEOSBalance.value <= 0}
                     formValidation
                     on:action={toClaim}
                 >
-                    Claim
+                    Withdraw
                 </Button>
             </div>
         </div>
     </div>
     <div class="bottom-section">
-        <p>The unstaking process takes 21 days before the tokens become available for claim.</p>
+        <p>The unstaking process takes 21 days before the tokens become available to withdraw.</p>
         <br />
         <p>* The APY changes based on the total number of EOS tokens staked at any given moment.</p>
     </div>