From fabf08b75c15e6dee894de44812fb7f5ed4d7def Mon Sep 17 00:00:00 2001
From: Aaron Cox <aaron@greymass.com>
Date: Sun, 7 Jul 2024 14:53:35 -0700
Subject: [PATCH] Staking (#192)

* Support REX stake/unstake

* Fix bootstrap step

* Show error details if possible

* Change default percent to 0

* REX only supported on eos and jungle4

* Fix missing type

* Add placeholder

* Show matured balance

* Overview page button status

* Fix code format

* Tooltip for matured balanced

* Apply design change

* Minor fix

* Fix matured rex balance

* Add claim

* Fix savings balance

* Fix eos rex convert

* Added APY earnings

* Fixing bug that will be resolved once we move to Wharf

* Remove 72 hour message

* Change icon

---------

Co-authored-by: apporc <appleorchard2000@gmail.com>
---
 src/abi-types.ts                              |  18 +
 src/app.svelte                                |   4 +
 .../elements/input/token/selector.svelte      |   1 -
 .../elements/input/token/selector/row.svelte  |   7 +-
 src/components/elements/slider.svelte         | 310 +++++++++++++++
 src/components/layout/navigation/index.svelte |  11 +
 src/config.ts                                 |   4 +
 src/lib/rex.ts                                |   5 +
 src/pages/earn/components/label.svelte        |  53 +++
 src/pages/earn/components/progress.svelte     |  27 ++
 src/pages/earn/index.svelte                   | 353 ++++++++++++++++++
 src/pages/earn/step/bootstrap.svelte          | 150 ++++++++
 src/pages/earn/step/claim.svelte              | 190 ++++++++++
 src/pages/earn/step/confirm.svelte            | 128 +++++++
 src/pages/earn/step/error.svelte              |  59 +++
 src/pages/earn/step/overview.svelte           | 198 ++++++++++
 src/pages/earn/step/stake.svelte              | 178 +++++++++
 src/pages/earn/step/unstake.svelte            | 190 ++++++++++
 src/pages/earn/types.ts                       |  19 +
 src/stores/account-provider.ts                |  10 +
 20 files changed, 1913 insertions(+), 2 deletions(-)
 create mode 100644 src/components/elements/slider.svelte
 create mode 100644 src/lib/rex.ts
 create mode 100644 src/pages/earn/components/label.svelte
 create mode 100644 src/pages/earn/components/progress.svelte
 create mode 100644 src/pages/earn/index.svelte
 create mode 100644 src/pages/earn/step/bootstrap.svelte
 create mode 100644 src/pages/earn/step/claim.svelte
 create mode 100644 src/pages/earn/step/confirm.svelte
 create mode 100644 src/pages/earn/step/error.svelte
 create mode 100644 src/pages/earn/step/overview.svelte
 create mode 100644 src/pages/earn/step/stake.svelte
 create mode 100644 src/pages/earn/step/unstake.svelte
 create mode 100644 src/pages/earn/types.ts

diff --git a/src/abi-types.ts b/src/abi-types.ts
index 7770a8fa..309d40c5 100644
--- a/src/abi-types.ts
+++ b/src/abi-types.ts
@@ -121,6 +121,24 @@ export class REXDeposit extends Struct {
     @Struct.field('asset') amount!: Asset
 }
 
+@Struct.type('rexwithdraw')
+export class REXWithdraw extends Struct {
+    @Struct.field('name') owner!: Name
+    @Struct.field('asset') amount!: Asset
+}
+
+@Struct.type('rexbuyrex')
+export class REXBUYREX extends Struct {
+    @Struct.field('name') from!: Name
+    @Struct.field('asset') amount!: Asset
+}
+
+@Struct.type('rexsellrex')
+export class REXSELLREX extends Struct {
+    @Struct.field('name') from!: Name
+    @Struct.field('asset') rex!: Asset
+}
+
 @Struct.type('rexrentcpu')
 export class REXRentCPU extends Struct {
     @Struct.field('name') from!: Name
diff --git a/src/app.svelte b/src/app.svelte
index b6c8a310..3533c14d 100644
--- a/src/app.svelte
+++ b/src/app.svelte
@@ -8,6 +8,7 @@
 
     import Login from '~/pages/login.svelte'
     import Dashboard from '~/pages/dashboard/index.svelte'
+    import Earn from '~/pages/earn/index.svelte'
     import Request from '~/pages/request/index.svelte'
     import Send from '~/pages/send/index.svelte'
     import TokensPurchase from '~/pages/tokens/purchase/index.svelte'
@@ -178,6 +179,9 @@
             <Route path="/">
                 <Dashboard />
             </Route>
+            <Route path="/earn">
+                <Earn />
+            </Route>
             <Route path="/send">
                 <Send />
             </Route>
diff --git a/src/components/elements/input/token/selector.svelte b/src/components/elements/input/token/selector.svelte
index ddf1bedf..e66d60cc 100644
--- a/src/components/elements/input/token/selector.svelte
+++ b/src/components/elements/input/token/selector.svelte
@@ -1,6 +1,5 @@
 <script>
     import {writable} from 'svelte/store'
-    import {Asset} from 'anchor-link'
 
     import {activeBlockchain} from '~/store'
     import type {Token} from '~/stores/tokens'
diff --git a/src/components/elements/input/token/selector/row.svelte b/src/components/elements/input/token/selector/row.svelte
index 5a650ad6..0662e47f 100644
--- a/src/components/elements/input/token/selector/row.svelte
+++ b/src/components/elements/input/token/selector/row.svelte
@@ -14,7 +14,12 @@
     let balance
 
     $: {
-        balance = $balances && $balances.find((balance) => balance.tokenKey === token.key)?.quantity
+        if (token.balance) {
+            balance = token.balance
+        } else {
+            balance =
+                $balances && $balances.find((balance) => balance.tokenKey === token.key)?.quantity
+        }
 
         if (typeof balance === 'string') {
             formattedTokenBalance = balance
diff --git a/src/components/elements/slider.svelte b/src/components/elements/slider.svelte
new file mode 100644
index 00000000..883c1eff
--- /dev/null
+++ b/src/components/elements/slider.svelte
@@ -0,0 +1,310 @@
+<script>
+    import {createEventDispatcher} from 'svelte'
+    import {fly, fade} from 'svelte/transition'
+
+    // Props
+    export let min = 0
+    export let max = 100
+    export let initialValue = 0
+    export let id: any = null
+    export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue
+
+    // Node Bindings
+    let container = null
+    let thumb = null
+    let progressBar = null
+    let element = null
+
+    // Internal State
+    let elementX = null
+    let currentThumb = null
+    let holding = false
+    let thumbHover = false
+    let keydownAcceleration = 0
+    let accelerationTimer = null
+
+    // Dispatch 'change' events
+    const dispatch = createEventDispatcher()
+
+    // Mouse shield used onMouseDown to prevent any mouse events penetrating other elements,
+    // ie. hover events on other elements while dragging. Especially for Safari
+    const mouseEventShield = document.createElement('div')
+    mouseEventShield.setAttribute('class', 'mouse-over-shield')
+    mouseEventShield.addEventListener('mouseover', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+    })
+
+    function resizeWindow() {
+        elementX = element.getBoundingClientRect().left
+    }
+
+    // Allows both bind:value and on:change for parent value retrieval
+    function setValue(val) {
+        value = val
+        dispatch('change', {value})
+    }
+
+    function onTrackEvent(e) {
+        // Update value immediately before beginning drag
+        updateValueOnEvent(e)
+        onDragStart(e)
+    }
+
+    function onHover(e) {
+        thumbHover = thumbHover ? false : true
+    }
+
+    function onDragStart(e) {
+        // If mouse event add a pointer events shield
+        if (e.type === 'mousedown') document.body.append(mouseEventShield)
+        currentThumb = thumb
+    }
+
+    function onDragEnd(e) {
+        // If using mouse - remove pointer event shield
+        if (e.type === 'mouseup') {
+            if (document.body.contains(mouseEventShield))
+                document.body.removeChild(mouseEventShield)
+            // Needed to check whether thumb and mouse overlap after shield removed
+            if (isMouseInElement(e, thumb)) thumbHover = true
+        }
+        currentThumb = null
+    }
+
+    // Check if mouse event cords overlay with an element's area
+    function isMouseInElement(event, element) {
+        if (element === null) {
+            return false
+        }
+        let rect = element.getBoundingClientRect()
+        let {clientX: x, clientY: y} = event
+        if (x < rect.left || x >= rect.right) return false
+        if (y < rect.top || y >= rect.bottom) return false
+        return true
+    }
+
+    // Accessible keypress handling
+    function onKeyPress(e) {
+        // Max out at +/- 10 to value per event (50 events / 5)
+        // 100 below is to increase the amount of events required to reach max velocity
+        if (keydownAcceleration < 50) keydownAcceleration++
+        let throttled = Math.ceil(keydownAcceleration / 5)
+
+        if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
+            if (value + throttled > max || value >= max) {
+                setValue(max)
+            } else {
+                setValue(value + throttled)
+            }
+        }
+        if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
+            if (value - throttled < min || value <= min) {
+                setValue(min)
+            } else {
+                setValue(value - throttled)
+            }
+        }
+
+        // Reset acceleration after 100ms of no events
+        clearTimeout(accelerationTimer)
+        accelerationTimer = setTimeout(() => (keydownAcceleration = 1), 100)
+    }
+
+    function calculateNewValue(clientX) {
+        // Find distance between cursor and element's left cord (20px / 2 = 10px) - Center of thumb
+        let delta = clientX - (elementX + 10)
+
+        // Use width of the container minus (5px * 2 sides) offset for percent calc
+        let percent = (delta * 100) / (container.clientWidth - 10)
+
+        // Limit percent 0 -> 100
+        percent = percent < 0 ? 0 : percent > 100 ? 100 : percent
+
+        // Limit value min -> max
+        setValue(parseInt((percent * (max - min)) / 100) + min)
+    }
+
+    // Handles both dragging of touch/mouse as well as simple one-off click/touches
+    function updateValueOnEvent(e) {
+        // touchstart && mousedown are one-off updates, otherwise expect a currentPointer node
+        if (!currentThumb && e.type !== 'touchstart' && e.type !== 'mousedown') return false
+
+        if (e.stopPropagation) e.stopPropagation()
+        if (e.preventDefault) e.preventDefault()
+
+        // Get client's x cord either touch or mouse
+        const clientX =
+            e.type === 'touchmove' || e.type === 'touchstart' ? e.touches[0].clientX : e.clientX
+
+        calculateNewValue(clientX)
+    }
+
+    // React to left position of element relative to window
+    $: if (element) elementX = element.getBoundingClientRect().left
+
+    // Set a class based on if dragging
+    $: holding = Boolean(currentThumb)
+
+    // Update progressbar and thumb styles to represent value
+    $: if (progressBar && thumb) {
+        // Limit value min -> max
+        value = value > min ? value : min
+        value = value < max ? value : max
+
+        let percent = ((value - min) * 100) / (max - min)
+        let offsetLeft = (container.clientWidth - 10) * (percent / 100) + 5
+
+        // Update thumb position + active slider track width
+        thumb.style.left = `${offsetLeft}px`
+        progressBar.style.width = `${offsetLeft}px`
+    }
+</script>
+
+<style>
+    .slider {
+        position: relative;
+        flex: 1;
+    }
+
+    .slider__wrapper {
+        min-width: 100%;
+        position: relative;
+        padding: 0.5rem;
+        box-sizing: border-box;
+        outline: none;
+    }
+
+    .slider__wrapper:focus-visible > .slider__track {
+        box-shadow: 0 0 0 2px white, 0 0 0 3px var(--main-blue);
+    }
+
+    .slider__track {
+        height: 6px;
+        background-color: var(--cultured);
+        border-radius: 999px;
+    }
+
+    .slider__track--highlighted {
+        background-color: var(--main-blue);
+        width: 0;
+        height: 6px;
+        position: absolute;
+        border-radius: 999px;
+    }
+
+    .slider__thumb {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background-color: var(--thumb-bgcolor, white);
+        cursor: pointer;
+        border-radius: 999px;
+        margin-top: -8px;
+        transition: box-shadow 100ms;
+        user-select: none;
+        box-shadow: var(
+            --thumb-boxshadow,
+            0 1px 1px 0 rgba(0, 0, 0, 0.14),
+            0 0px 2px 1px rgba(0, 0, 0, 0.2)
+        );
+    }
+
+    .slider__thumb--holding {
+        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 1px rgba(0, 0, 0, 0.2),
+            0 0 0 6px var(--thumb-holding-outline, rgba(113, 119, 250, 0.3));
+    }
+
+    .slider__tooltip {
+        pointer-events: none;
+        position: absolute;
+        top: -33px;
+        color: var(--tooltip-text, white);
+        width: 38px;
+        padding: 4px 0;
+        border-radius: 4px;
+        text-align: center;
+        background-color: var(--main-blue);
+    }
+
+    .slider__tooltip::after {
+        content: '';
+        display: block;
+        position: absolute;
+        height: 7px;
+        width: 7px;
+        background-color: var(--main-blue);
+        bottom: -3px;
+        left: calc(50% - 3px);
+        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+        transform: rotate(-45deg);
+        border-radius: 0 0 0 3px;
+    }
+</style>
+
+<svelte:window
+    on:touchmove|nonpassive={updateValueOnEvent}
+    on:touchcancel={onDragEnd}
+    on:touchend={onDragEnd}
+    on:mousemove={updateValueOnEvent}
+    on:mouseup={onDragEnd}
+    on:resize={resizeWindow}
+/>
+<div class="slider">
+    <div
+        class="slider__wrapper"
+        tabindex="0"
+        on:keydown={onKeyPress}
+        bind:this={element}
+        role="slider"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        {id}
+        on:mousedown={onTrackEvent}
+        on:touchstart={onTrackEvent}
+    >
+        <div class="slider__track" bind:this={container}>
+            <div class="slider__track--highlighted" bind:this={progressBar} />
+            <div
+                class="slider__thumb"
+                class:slider__thumb--holding={holding}
+                bind:this={thumb}
+                on:touchstart={onDragStart}
+                on:mousedown={onDragStart}
+                on:mouseover={() => (thumbHover = true)}
+                on:focus={() => (thumbHover = true)}
+                on:mouseout={() => (thumbHover = false)}
+                on:blur={() => (thumbHover = false)}
+            >
+                {#if holding || thumbHover}
+                    <div
+                        class="slider__tooltip"
+                        in:fly={{y: 7, duration: 200}}
+                        out:fade={{duration: 100}}
+                    >
+                        {value + ' %'}
+                    </div>
+                {/if}
+            </div>
+        </div>
+    </div>
+</div>
+
+<svelte:head>
+    <style>
+        .mouse-over-shield {
+            position: fixed;
+            top: 0px;
+            left: 0px;
+            height: 100%;
+            width: 100%;
+            background-color: rgba(255, 0, 0, 0);
+            z-index: 10000;
+            cursor: grabbing;
+        }
+    </style>
+</svelte:head>
diff --git a/src/components/layout/navigation/index.svelte b/src/components/layout/navigation/index.svelte
index 4f77dd0c..b728a047 100644
--- a/src/components/layout/navigation/index.svelte
+++ b/src/components/layout/navigation/index.svelte
@@ -6,6 +6,7 @@
     import {activeBlockchain, preferences} from '~/store'
     import type {NavigationItem} from '~/ui-types'
     import {banxaIsAvailable} from '~/lib/banxa'
+    import {rexIsAvailable} from '~/lib/rex'
 
     import MediaQuery from '~/components/utils/media-query.svelte'
     import NavigationContent from '~/components/layout/navigation/content.svelte'
@@ -30,6 +31,16 @@
             name: 'Transfer',
             path: '/transfer',
         },
+        ...(rexIsAvailable($activeBlockchain)
+            ? [
+                  {
+                      icon: 'dollar-sign',
+                      name: 'Earn',
+                      path: '/earn',
+                  },
+              ]
+            : []),
+
         ...(banxaIsAvailable($activeBlockchain)
             ? [
                   {
diff --git a/src/config.ts b/src/config.ts
index 4df19377..98f8a0fb 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -78,6 +78,8 @@ export interface ChainConfig {
     banxaEnabled?: boolean
     /** Banxa coin_code */
     banxa_coin_code?: string
+    /** Is REX available for this chain */
+    rexEnabled?: boolean
 }
 
 /** Supported chains. */
@@ -105,6 +107,7 @@ export const chains: ChainConfig[] = [
         bloksUrl: 'https://bloks.io',
         balanceProviders: new Set([BalanceProviders.LightAPI]),
         banxaEnabled: true,
+        rexEnabled: true,
     },
     {
         id: 'fio',
@@ -172,6 +175,7 @@ export const chains: ChainConfig[] = [
         nodeUrl: 'https://jungle4.greymass.com',
         testnet: true,
         bloksUrl: 'https://eosauthority.com/?network=jungle',
+        rexEnabled: true,
     },
     {
         id: 'proton',
diff --git a/src/lib/rex.ts b/src/lib/rex.ts
new file mode 100644
index 00000000..8bc62568
--- /dev/null
+++ b/src/lib/rex.ts
@@ -0,0 +1,5 @@
+import type {ChainConfig} from '~/config'
+
+export const rexIsAvailable = (chainData: ChainConfig | undefined): boolean => {
+    return !!chainData?.rexEnabled
+}
diff --git a/src/pages/earn/components/label.svelte b/src/pages/earn/components/label.svelte
new file mode 100644
index 00000000..31e1e4de
--- /dev/null
+++ b/src/pages/earn/components/label.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import Icon from '~/components/elements/icon.svelte'
+
+    export let header: string
+    export let subheader: string | undefined = undefined
+    export let changeStep: (() => void) | undefined = undefined
+</script>
+
+<style type="scss">
+    .container {
+        display: flex;
+        min-height: 60px;
+        border-bottom: 1px solid var(--divider-grey);
+        align-items: center;
+    }
+    .label {
+        h3 {
+            display: block;
+            font-weight: bold;
+        }
+    }
+
+    .value {
+        flex: 1;
+        text-align: right;
+    }
+    .changeStep {
+        color: var(--main-blue);
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 16px 0 16px 16px;
+    }
+</style>
+
+<div class="container">
+    <div class="label">
+        <h3>{header}</h3>
+        {#if subheader}
+            <p>{subheader}</p>
+        {/if}
+    </div>
+
+    <div class="value">
+        <slot />
+    </div>
+    {#if changeStep}
+        <div class="changeStep" on:click={changeStep}>
+            <Icon size="large" name="edit-2" />
+        </div>
+    {/if}
+</div>
diff --git a/src/pages/earn/components/progress.svelte b/src/pages/earn/components/progress.svelte
new file mode 100644
index 00000000..c277f404
--- /dev/null
+++ b/src/pages/earn/components/progress.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    export let step: number = 1
+</script>
+
+<style type="scss">
+    .progress {
+        margin: 18px 0 42px;
+        text-align: center;
+        .step {
+            display: inline-block;
+            height: 4px;
+            width: 105px;
+            margin: 0 3px 0 0;
+            background: var(--main-blue);
+            opacity: 0.3;
+        }
+        &.step-1 .step:nth-child(-n + 1),
+        &.step-2 .step:nth-child(-n + 2) {
+            opacity: 1;
+        }
+    }
+</style>
+
+<div class={`progress step-${step}`}>
+    <div class="step" />
+    <div class="step" />
+</div>
diff --git a/src/pages/earn/index.svelte b/src/pages/earn/index.svelte
new file mode 100644
index 00000000..05f286bc
--- /dev/null
+++ b/src/pages/earn/index.svelte
@@ -0,0 +1,353 @@
+<script lang="ts">
+    import type {Readable, Writable} from 'svelte/store'
+    import {derived, writable, get} from 'svelte/store'
+    import {Asset} from 'anchor-link'
+
+    import {currentAccount} from '~/store'
+    import {activeBlockchain, activeSession} from '~/store'
+    import type {Token} from '~/stores/tokens'
+    import {systemTokenKey, tokens} from '~/stores/tokens'
+    import {balances} from '~/stores/balances'
+    import {REXDeposit, REXWithdraw, REXBUYREX, REXSELLREX} from '~/abi-types'
+    import type {FormTransaction} from '~/ui-types'
+    import {rexIsAvailable} from '~/lib/rex'
+
+    import Page from '~/components/layout/page.svelte'
+    import TransactionForm from '~/components/elements/form/transaction.svelte'
+
+    import {stateREX} from '~/pages/resources/resources'
+    import {Step, REXInfo} from '~/pages/earn/types'
+    import REXBootstrap from '~/pages/earn/step/bootstrap.svelte'
+    import REXError from '~/pages/earn/step/error.svelte'
+    import REXOverview from '~/pages/earn/step/overview.svelte'
+    import REXStake from '~/pages/earn/step/stake.svelte'
+    import REXUnstake from '~/pages/earn/step/unstake.svelte'
+    import REXClaim from '~/pages/earn/step/claim.svelte'
+    import REXConfirm from '~/pages/earn/step/confirm.svelte'
+
+    let selectedAmount: string
+    let selectedAction: string
+    let onConfirmBack: () => void
+    let error: string = ''
+
+    $: {
+        if (!rexIsAvailable($activeBlockchain)) {
+            window.location.href = window.origin
+        }
+    }
+    const availableSystemTokens: Readable<Asset> = derived(
+        [balances, currentAccount, systemTokenKey, activeBlockchain],
+        ([$balances, $currentAccount, $systemTokenKey, $activeBlockchain]) => {
+            let amount = 0
+            if ($currentAccount) {
+                $balances
+                    .filter(
+                        (record) =>
+                            record.account.equals($currentAccount.account_name) &&
+                            record.tokenKey === $systemTokenKey
+                    )
+                    .map((record) => {
+                        amount += record.quantity.value
+                    })
+            }
+            return Asset.from(amount, $activeBlockchain.coreTokenSymbol)
+        }
+    )
+
+    const systemToken: Readable<Token | undefined> = derived(
+        [systemTokenKey, tokens],
+        ([$systemTokenKey, $tokens]) => {
+            let token = $tokens.find((t: Token) => t.key === $systemTokenKey)
+            return token
+        }
+    )
+
+    const convertEosToRex = (eos: number) => {
+        const pool = $stateREX
+        const S0 = pool!.total_lendable.value
+        const R0 = pool!.total_rex.value
+        const S1 = S0 + eos
+        const R1 = (S1 * R0) / S0
+        return Asset.from(R1 - R0, $currentAccount!.rex_info!.rex_balance.symbol)
+    }
+
+    const convertRexToEos = (rex: number) => {
+        const pool = $stateREX
+        const S0 = pool!.total_lendable.value
+        const R0 = pool!.total_rex.value
+        const R1 = R0 + rex
+        const S1 = (S0 * R1) / R0
+        return Asset.from(S1 - S0, $systemToken!.symbol)
+    }
+
+    const rexInfo: Readable<REXInfo> = derived(
+        [currentAccount, stateREX, systemToken],
+        ([$currentAccount, $stateREX, $systemToken]) => {
+            let defaultZero = Asset.from(0, $systemToken!.symbol)
+            let total = defaultZero
+            let savings = defaultZero
+            let matured = defaultZero
+            let apy = ''
+            const fiveYearsFromNow = new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 5
+
+            if ($stateREX && $stateREX.value) {
+                const annualReward = 31250000
+                const totalStaked = Number($stateREX.total_lendable.value)
+                apy = ((annualReward / totalStaked) * 100).toFixed(2)
+                if ($currentAccount && $currentAccount.rex_info) {
+                    total = convertRexToEos($currentAccount.rex_info.rex_balance.value)
+                    matured = convertRexToEos(
+                        Asset.fromUnits(
+                            $currentAccount.rex_info.matured_rex,
+                            $currentAccount.rex_info.rex_balance.symbol
+                        ).value
+                    )
+
+                    let savingsBucket = $currentAccount.rex_info.rex_maturities.find(
+                        (maturity) => +new Date(maturity.first!.toString()) > +fiveYearsFromNow
+                    )
+                    if (savingsBucket) {
+                        savings = convertRexToEos(
+                            Asset.fromUnits(
+                                savingsBucket.second!,
+                                $currentAccount.rex_info.rex_balance.symbol
+                            ).value
+                        )
+                    }
+                }
+            }
+
+            return {apy, total, savings, matured}
+        }
+    )
+
+    const rexToken: Readable<Token> = derived(
+        [systemToken, rexInfo],
+        ([$systemToken, $rexInfo]) => {
+            let tokenValue = $systemToken!
+            let newToken = {...tokenValue}
+            newToken.balance = $rexInfo.total
+            return newToken
+        }
+    )
+
+    const defaultStep: Readable<Step> = derived(rexInfo, ($rexInfo) => {
+        let result: Step = Step.Bootstrap
+        if ($rexInfo && $rexInfo.total.value != 0) {
+            result = Step.Overview
+        }
+        return result
+    })
+
+    const initialStep: Step = Step.Bootstrap
+    const step: Writable<Step> = writable(initialStep, () => {
+        const unsubscribeStep = defaultStep.subscribe((s) => {
+            let current: Step = get(step)
+            if (current === Step.Bootstrap || current == Step.Overview) {
+                if (current != s) {
+                    step.set(s)
+                }
+            }
+        })
+        return () => {
+            unsubscribeStep()
+        }
+    })
+
+    function switchStep(s: Step) {
+        step.set(s)
+    }
+
+    function toStakeConfirm(fromStep: Step) {
+        if (fromStep === Step.Stake || fromStep === Step.Bootstrap) {
+            selectedAction = 'Stake'
+        } else if (fromStep === Step.Claim) {
+            selectedAction = 'Claim'
+        } else {
+            selectedAction = 'Unstake'
+        }
+        onConfirmBack = () => {
+            switchStep(fromStep)
+        }
+        switchStep(Step.Confirm)
+    }
+
+    function getActionData() {
+        if (selectedAction === 'Stake') {
+            return getStakeAction()
+        } else if (selectedAction === 'Unstake') {
+            return getUnstakeAction()
+        } else if (selectedAction === 'Claim') {
+            return getClaimAction()
+        } else {
+            throw new Error('Unknown action')
+        }
+    }
+
+    function getStakeAction() {
+        return [
+            {
+                authorization: [$activeSession!.auth],
+                account: 'eosio',
+                name: 'deposit',
+                data: REXDeposit.from({
+                    owner: $activeSession!.auth.actor,
+                    amount: Asset.from(Number(selectedAmount), $systemToken!.symbol),
+                }),
+            },
+            {
+                authorization: [$activeSession!.auth],
+                account: 'eosio',
+                name: 'buyrex',
+                data: REXBUYREX.from({
+                    from: $activeSession!.auth.actor,
+                    amount: Asset.from(Number(selectedAmount), $systemToken!.symbol),
+                }),
+            },
+        ]
+    }
+
+    function getUnstakeAction() {
+        let rexAmount = convertEosToRex(Number(selectedAmount))
+        return [
+            {
+                authorization: [$activeSession!.auth],
+                account: 'eosio',
+                name: 'mvfrsavings',
+                data: REXWithdraw.from({
+                    owner: $activeSession!.auth.actor,
+                    amount: rexAmount,
+                }),
+            },
+        ]
+    }
+
+    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,
+                }),
+            },
+            {
+                authorization: [$activeSession!.auth],
+                account: 'eosio',
+                name: 'withdraw',
+                data: REXWithdraw.from({
+                    owner: $activeSession!.auth.actor,
+                    amount: eosAmount,
+                }),
+            },
+        ]
+    }
+
+    // Create a derived store of the rex field we expect to be modified
+    export const rexField = derived([currentAccount], ([$currentAccount]) => {
+        if ($currentAccount && $currentAccount.rex_info && $currentAccount.rex_info.rex_balance) {
+            return $currentAccount.rex_info.rex_balance
+        }
+        return Asset.from(0, $systemToken!.symbol)
+    })
+
+    async function handleConfirm(context: FormTransaction) {
+        const actions = getActionData()
+        try {
+            const result = await $activeSession!.transact({
+                actions,
+            })
+            // If the context exists and this is part of a FormTransaction
+            if (context) {
+                // Pass the transaction ID to the parent
+                const txid = String(result.transaction.id)
+                context.setTransaction(txid)
+                // Await an update on the field expected for this transaction
+                context.awaitAccountUpdate(rexField)
+            }
+        } catch (e) {
+            console.warn('Error during transact', e)
+            if (context) {
+                let msg = String(e)
+                if (e.details && e.details.length > 0 && e.details[0].message) {
+                    msg = e.details[0].message
+                }
+                context.setTransactionError(msg)
+            }
+        }
+    }
+
+    function resetCallback() {
+        step.set(get(defaultStep))
+    }
+
+    function retryCallback() {
+        step.set(Step.Confirm)
+    }
+</script>
+
+<style type="scss">
+</style>
+
+<Page divider={$step === Step.Bootstrap || $step === Step.Overview}>
+    <TransactionForm {resetCallback} {retryCallback}>
+        {#if $step === Step.Error}
+            <REXError {error} handleBack={() => switchStep($defaultStep)} />
+        {:else if $step === Step.Bootstrap}
+            <REXBootstrap
+                bind:amount={selectedAmount}
+                rexInfo={$rexInfo}
+                availableTokens={$availableSystemTokens}
+                nextStep={() => toStakeConfirm(Step.Bootstrap)}
+            />
+        {:else if $step === Step.Overview}
+            <REXOverview
+                availableTokens={$availableSystemTokens}
+                rexInfo={$rexInfo}
+                toStake={() => switchStep(Step.Stake)}
+                toUnstake={() => switchStep(Step.Unstake)}
+                toClaim={() => switchStep(Step.Claim)}
+            />
+        {:else if $step === Step.Stake}
+            <REXStake
+                bind:amount={selectedAmount}
+                rexInfo={$rexInfo}
+                token={$systemToken}
+                availableTokens={$availableSystemTokens}
+                nextStep={() => toStakeConfirm(Step.Stake)}
+                handleBack={() => switchStep($defaultStep)}
+            />
+        {:else if $step === Step.Unstake}
+            <REXUnstake
+                bind:amount={selectedAmount}
+                rexInfo={$rexInfo}
+                token={$rexToken}
+                availableTokens={$rexInfo.savings}
+                nextStep={() => toStakeConfirm(Step.Unstake)}
+                handleBack={() => switchStep($defaultStep)}
+            />
+        {:else if $step === Step.Claim}
+            <REXClaim
+                bind:amount={selectedAmount}
+                rexInfo={$rexInfo}
+                token={$rexToken}
+                availableTokens={$rexInfo.matured}
+                nextStep={() => toStakeConfirm(Step.Claim)}
+                handleBack={() => switchStep($defaultStep)}
+            />
+        {:else if $step === Step.Confirm}
+            <REXConfirm
+                action={selectedAction}
+                amount={Asset.from(Number(selectedAmount), $availableSystemTokens.symbol)}
+                token={$systemToken}
+                tokenKey={$systemTokenKey}
+                {handleConfirm}
+                handleBack={onConfirmBack}
+            />
+        {/if}
+    </TransactionForm>
+</Page>
diff --git a/src/pages/earn/step/bootstrap.svelte b/src/pages/earn/step/bootstrap.svelte
new file mode 100644
index 00000000..68d3d4fb
--- /dev/null
+++ b/src/pages/earn/step/bootstrap.svelte
@@ -0,0 +1,150 @@
+<script lang="ts">
+    import {Asset} from 'anchor-link'
+    import type {InputResponse} from 'src/ui-types'
+
+    import Slider from '~/components/elements/slider.svelte'
+    import Button from '~/components/elements/button.svelte'
+    import Form from '~/components/elements/form.svelte'
+    import InputAsset from '~/components/elements/input/asset.svelte'
+    import InputLabel from '~/components/elements/input/label.svelte'
+    import {REXInfo} from '../types'
+
+    export let amount: string
+    export let availableTokens: Asset
+    export let rexInfo: REXInfo
+    export let nextStep: () => void
+
+    let percent = 0
+    let amountValid = false
+
+    function onAmountChanged(event: CustomEvent<InputResponse>) {
+        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) {
+        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()
+    }
+</script>
+
+<style type="scss">
+    .container {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+        margin: 0 auto;
+        max-width: 28rem;
+    }
+    .top-section {
+        margin-bottom: 42px;
+    }
+    .middle-section {
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+        align-items: center;
+        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;
+        text-align: center;
+    }
+    .header {
+        color: var(--black);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 24px;
+        line-height: 29px;
+        text-align: center;
+        letter-spacing: -0.47px;
+        margin-bottom: 7px;
+    }
+    .subheader {
+        color: var(--dark-grey);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 19px;
+        text-align: center;
+        letter-spacing: -0.18px;
+    }
+    .input {
+        width: 100%;
+    }
+    .slider {
+        margin-top: 20px;
+        margin-bottom: 30px;
+    }
+</style>
+
+<div class="container">
+    <div class="top-section">
+        <div class="header">EOS Staking</div>
+        <div class="subheader">Earn ~{rexInfo.apy}% APY*</div>
+    </div>
+    <div class="middle-section">
+        <div class="input">
+            <div class="top-section">
+                <div class="header">{availableTokens}</div>
+                <div class="subheader">Available Tokens</div>
+            </div>
+            <Form>
+                <InputLabel>selected amount to stake</InputLabel>
+                <InputAsset
+                    bind:valid={amountValid}
+                    bind:value={amount}
+                    symbol={availableTokens.symbol}
+                    focus
+                    fluid
+                    name="amount"
+                    placeholder={`Enter amount of tokens`}
+                    balance={availableTokens}
+                    on:changed={onAmountChanged}
+                />
+            </Form>
+            <div class="slider">
+                <Slider min={0} max={100} bind:value={percent} on:change={onPercentChanged} />
+            </div>
+            <Button
+                fluid
+                style="primary"
+                size="large"
+                disabled={!amountValid}
+                formValidation
+                on:action={onConfirm}
+            >
+                Stake
+            </Button>
+        </div>
+    </div>
+    <div class="bottom-section">
+        <p>The unstaking process takes 21 days before the tokens become available for claim.</p>
+        <br />
+        <p>* The APY changes based on the total number of EOS tokens staked at any given moment.</p>
+    </div>
+</div>
diff --git a/src/pages/earn/step/claim.svelte b/src/pages/earn/step/claim.svelte
new file mode 100644
index 00000000..dbd090ec
--- /dev/null
+++ b/src/pages/earn/step/claim.svelte
@@ -0,0 +1,190 @@
+<script lang="ts">
+    import {Asset} from 'anchor-link'
+
+    import type {Token} from '~/stores/tokens'
+    import type {InputResponse} from '~/ui-types'
+    import Form from '~/components/elements/form.svelte'
+
+    import ProgressBar from '~/pages/earn/components/progress.svelte'
+    import Button from '~/components/elements/button.svelte'
+    import InputAsset from '~/components/elements/input/asset.svelte'
+    import InputLabel from '~/components/elements/input/label.svelte'
+    import TokenSelector from '~/components/elements/input/token/selector.svelte'
+
+    import type {REXInfo} from '~/pages/earn/types'
+
+    export let amount: string
+    export let token: Token | undefined
+    export let rexInfo: REXInfo
+    export let availableTokens: Asset
+    export let nextStep: () => void
+    export let handleBack: () => void
+
+    let selectedToken: Token
+
+    let tokenOptions: Token[] = []
+    if (token) {
+        let newToken = {...token, balance: availableTokens}
+        selectedToken = newToken
+        tokenOptions = [newToken]
+    }
+    let amountValid = false
+
+    function maxBalance() {
+        if (availableTokens) {
+            amount = String(availableTokens.value)
+            amountValid = true
+        }
+    }
+
+    function onConfirm() {
+        nextStep()
+    }
+
+    function onAmountChanged(event: CustomEvent<InputResponse>) {
+        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>
+
+<style type="scss">
+    .container {
+        border: 1px solid var(--divider-grey);
+        border-radius: 20px;
+        padding: 26px;
+    }
+    .top-section {
+        margin-bottom: 42px;
+    }
+    .middle-section {
+        margin: 0 auto;
+        max-width: 28rem;
+        margin-bottom: 31px;
+    }
+    .bottom-section {
+        margin: 0 auto;
+        max-width: 28rem;
+    }
+    .header {
+        color: var(--black);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 24px;
+        line-height: 29px;
+        text-align: center;
+        letter-spacing: -0.47px;
+        margin-bottom: 7px;
+    }
+    .subheader {
+        color: var(--dark-grey);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 19px;
+        text-align: center;
+        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">
+    <div class="top-section">
+        <div class="header">Claim</div>
+        <div class="subheader">Remove from your staked balance</div>
+        <ProgressBar step={1} />
+    </div>
+    <div class="middle-section">
+        <Form on:submit={onConfirm}>
+            <InputLabel>amount to claim</InputLabel>
+            <div class="token-selector">
+                <TokenSelector
+                    defaultToken={selectedToken}
+                    {tokenOptions}
+                    {selectedToken}
+                    onTokenSelect={() => {}}
+                />
+            </div>
+            <div class="label">
+                total staked {rexInfo.total}
+            </div>
+
+            <InputAsset
+                bind:valid={amountValid}
+                bind:value={amount}
+                symbol={availableTokens.symbol}
+                focus
+                fluid
+                name="amount"
+                placeholder={`Enter amount of tokens`}
+                balance={availableTokens}
+                on:changed={onAmountChanged}
+            />
+            <div class="actions">
+                <span on:click={maxBalance}>Entire Balance</span>
+            </div>
+        </Form>
+    </div>
+    <div class="bottom-section">
+        <Button
+            fluid
+            style="primary"
+            size="large"
+            disabled={!amountValid}
+            formValidation
+            on:action={onConfirm}
+        >
+            Unstake tokens
+        </Button>
+
+        <div class="controls">
+            <Button style="no-frame" on:action={handleBack}>Cancel</Button>
+        </div>
+    </div>
+</div>
diff --git a/src/pages/earn/step/confirm.svelte b/src/pages/earn/step/confirm.svelte
new file mode 100644
index 00000000..d5e71241
--- /dev/null
+++ b/src/pages/earn/step/confirm.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+    import {getContext} from 'svelte'
+    import type {Asset} from 'anchor-link'
+    import type {Token} from '~/stores/tokens'
+    import type {FormTransaction} from '~/ui-types'
+
+    import Button from '~/components/elements/button.svelte'
+    import TokenImage from '~/components/elements/image/token.svelte'
+    import ProgressBar from '~/pages/earn/components/progress.svelte'
+    import LabelValue from '~/pages/earn/components/label.svelte'
+
+    export let action: string
+    export let amount: Asset
+    export let token: Token | undefined
+    let usd: string | null = token
+        ? token.price
+            ? (Number(amount.value) * token.price).toFixed(2)
+            : null
+        : null
+
+    export let tokenKey: string
+    export let handleConfirm: (context: FormTransaction) => void
+    export let handleBack: () => void
+
+    const context: FormTransaction = getContext('transaction')
+</script>
+
+<style type="scss">
+    .container {
+        border: 1px solid var(--divider-grey);
+        border-radius: 20px;
+        padding: 26px;
+        :global(.button) {
+            margin-top: 31px;
+        }
+    }
+    .top-section {
+        margin-bottom: 42px;
+    }
+    .middle-section {
+        margin: 0 auto;
+        max-width: 28rem;
+        margin-bottom: 62px;
+    }
+    .bottom-section {
+        margin: 0 auto;
+        max-width: 28rem;
+    }
+    .header {
+        color: var(--black);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 24px;
+        line-height: 29px;
+        text-align: center;
+        letter-spacing: -0.47px;
+        margin-bottom: 7px;
+    }
+    .subheader {
+        color: var(--dark-grey);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 19px;
+        text-align: center;
+        letter-spacing: -0.18px;
+    }
+    .amount {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+
+    .logo-container {
+        display: flex;
+        margin-right: 10px;
+    }
+
+    .value {
+        padding-top: 8px;
+        font-weight: 550;
+        font-size: 10px;
+        line-height: 12px;
+        letter-spacing: 0.1px;
+        text-transform: uppercase;
+        color: var(--light-grey);
+    }
+</style>
+
+<div class="container">
+    <div class="top-section">
+        <div class="header">{action}</div>
+        <div class="subheader">Review and sign</div>
+        <ProgressBar step={2} />
+    </div>
+    <div class="middle-section">
+        <LabelValue header="Action">
+            <span>{action}</span>
+        </LabelValue>
+        <LabelValue header="Token Amount" changeStep={handleBack}>
+            <div class="amount">
+                <span class="logo-container">
+                    <TokenImage width="18" height="18" {tokenKey} />
+                </span>
+                <span>{amount}</span>
+            </div>
+            {#if usd}
+                <div class="value">≈ $ {usd} USD</div>
+            {/if}
+        </LabelValue>
+    </div>
+    <div class="bottom-section">
+        <Button
+            fluid
+            style="primary"
+            size="large"
+            disabled={false}
+            formValidation
+            on:action={() => {
+                handleConfirm(context)
+            }}
+        >
+            Sign transaction
+        </Button>
+    </div>
+</div>
diff --git a/src/pages/earn/step/error.svelte b/src/pages/earn/step/error.svelte
new file mode 100644
index 00000000..7db1791c
--- /dev/null
+++ b/src/pages/earn/step/error.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import Button from '~/components/elements/button.svelte'
+
+    export let error: string
+    export let handleBack: () => void
+</script>
+
+<style type="scss">
+    .container {
+        width: 100%;
+        margin: 0 auto;
+        padding: 1em;
+        text-align: center;
+
+        .top-section {
+            padding: 10px;
+
+            h1 {
+                margin-bottom: 10px;
+                color: var(--main-red);
+            }
+        }
+
+        .middle-section {
+            border: 2px solid var(--main-grey);
+            border-radius: 10px;
+            padding: 20px;
+            margin-top: 2em;
+
+            p {
+                width: 100%;
+                padding: 5px;
+                text-align: left;
+            }
+        }
+
+        .bottom-section {
+            padding: 30px;
+            max-width: 300px;
+            margin: auto;
+        }
+    }
+</style>
+
+<div class="container">
+    <div class="top-section">
+        <h1>Transfer Failed</h1>
+    </div>
+
+    <div class="middle-section">
+        <p>
+            {error}
+        </p>
+    </div>
+
+    <div class="bottom-section">
+        <Button fluid style="primary" on:action={handleBack}>Retry</Button>
+    </div>
+</div>
diff --git a/src/pages/earn/step/overview.svelte b/src/pages/earn/step/overview.svelte
new file mode 100644
index 00000000..15c8c07d
--- /dev/null
+++ b/src/pages/earn/step/overview.svelte
@@ -0,0 +1,198 @@
+<script lang="ts">
+    import type {Asset} from 'anchor-link'
+
+    import Button from '~/components/elements/button.svelte'
+
+    import type {REXInfo} from '~/pages/earn/types'
+
+    export let availableTokens: Asset
+    export let rexInfo: REXInfo
+    export let toStake: () => void
+    export let toUnstake: () => void
+    export let toClaim: () => void
+</script>
+
+<style type="scss">
+    .container {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+        margin: 0 auto;
+        max-width: 28rem;
+    }
+    .top-section {
+        margin-bottom: 42px;
+    }
+    .middle-section {
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+        align-items: center;
+        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;
+        text-align: center;
+    }
+    .header {
+        color: var(--black);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 24px;
+        line-height: 29px;
+        text-align: center;
+        letter-spacing: -0.47px;
+        margin-bottom: 7px;
+    }
+    .subheader {
+        color: var(--dark-grey);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 19px;
+        text-align: center;
+        letter-spacing: -0.18px;
+    }
+    .rex {
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+        align-items: center;
+        width: 100%;
+    }
+    .buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        gap: 12px;
+    }
+    .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: center;
+    }
+    .staked {
+        color: var(--black);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 24px;
+        line-height: 29px;
+        text-align: center;
+        letter-spacing: -0.47px;
+        margin-bottom: 2px;
+    }
+    .unstakable {
+        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: 2px;
+    }
+    .claimable {
+        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;
+    }
+
+    .faq {
+        color: var(--main-blue);
+        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;
+        text-decoration: none;
+    }
+</style>
+
+<div class="container">
+    <div class="top-section">
+        <div class="header">EOS Staking</div>
+        <div class="subheader">Earn ~{rexInfo.apy}% APY*</div>
+    </div>
+    <div class="middle-section">
+        <div class="rex">
+            <div class="label">currently staked balance</div>
+            <div class="staked">
+                {rexInfo.total}
+            </div>
+            {#if Number(rexInfo.savings.value) > 0}
+                <div class="unstakable">
+                    {rexInfo.savings} unstakable
+                </div>
+            {/if}
+            {#if Number(rexInfo.matured.value) > 0}
+                <div class="claimable">
+                    {rexInfo.matured} claimable
+                </div>
+            {/if}
+
+            <div class="buttons">
+                <Button
+                    fluid
+                    style="primary"
+                    size="regular"
+                    disabled={availableTokens.value <= 0}
+                    formValidation
+                    on:action={toStake}
+                >
+                    Stake
+                </Button>
+                <Button
+                    fluid
+                    style="primary"
+                    size="regular"
+                    disabled={rexInfo.savings.value <= 0}
+                    formValidation
+                    on:action={toUnstake}
+                >
+                    Unstake
+                </Button>
+                <Button
+                    fluid
+                    style="primary"
+                    size="regular"
+                    disabled={rexInfo.matured.value <= 0}
+                    formValidation
+                    on:action={toClaim}
+                >
+                    Claim
+                </Button>
+            </div>
+        </div>
+    </div>
+    <div class="bottom-section">
+        <p>The unstaking process takes 21 days before the tokens become available for claim.</p>
+        <br />
+        <p>* The APY changes based on the total number of EOS tokens staked at any given moment.</p>
+    </div>
+</div>
diff --git a/src/pages/earn/step/stake.svelte b/src/pages/earn/step/stake.svelte
new file mode 100644
index 00000000..112bf3fa
--- /dev/null
+++ b/src/pages/earn/step/stake.svelte
@@ -0,0 +1,178 @@
+<script lang="ts">
+    import {Asset} from 'anchor-link'
+
+    import type {Token} from '~/stores/tokens'
+    import type {InputResponse} from 'src/ui-types'
+    import Form from '~/components/elements/form.svelte'
+
+    import ProgressBar from '~/pages/earn/components/progress.svelte'
+    import Button from '~/components/elements/button.svelte'
+    import InputAsset from '~/components/elements/input/asset.svelte'
+    import InputLabel from '~/components/elements/input/label.svelte'
+    import TokenSelector from '~/components/elements/input/token/selector.svelte'
+
+    import type {REXInfo} from '~/pages/earn/types'
+
+    export let availableTokens: Asset
+    export let nextStep: () => void
+    export let amount: string
+    export let token: Token | undefined
+    export let rexInfo: REXInfo
+    export let handleBack: () => void
+
+    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>) {
+        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>
+
+<style type="scss">
+    .container {
+        border: 1px solid var(--divider-grey);
+        border-radius: 20px;
+        padding: 26px;
+    }
+    .top-section {
+        margin-bottom: 42px;
+    }
+    .middle-section {
+        margin: 0 auto;
+        max-width: 28rem;
+        margin-bottom: 31px;
+    }
+    .bottom-section {
+        margin: 0 auto;
+        max-width: 28rem;
+    }
+    .header {
+        color: var(--black);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 24px;
+        line-height: 29px;
+        text-align: center;
+        letter-spacing: -0.47px;
+        margin-bottom: 7px;
+    }
+    .subheader {
+        color: var(--dark-grey);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 19px;
+        text-align: center;
+        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">
+    <div class="top-section">
+        <div class="header">Stake</div>
+        <div class="subheader">Add to your staked balance</div>
+        <ProgressBar step={1} />
+    </div>
+    <div class="middle-section">
+        <Form on:submit={onConfirm}>
+            <InputLabel>amount to stake</InputLabel>
+            <div class="token-selector">
+                <TokenSelector defaultToken={token} {tokenOptions} onTokenSelect={() => {}} />
+            </div>
+            <div class="label">
+                currently staked {rexInfo.total}
+            </div>
+
+            <InputAsset
+                bind:valid={amountValid}
+                bind:value={amount}
+                symbol={availableTokens.symbol}
+                focus
+                fluid
+                name="amount"
+                placeholder={`Enter amount of tokens`}
+                balance={availableTokens}
+                on:changed={onAmountChanged}
+            />
+            <div class="actions">
+                <span on:click={maxBalance}>Entire Balance</span>
+            </div>
+        </Form>
+    </div>
+    <div class="bottom-section">
+        <Button
+            fluid
+            style="primary"
+            size="large"
+            disabled={!amountValid}
+            formValidation
+            on:action={onConfirm}
+        >
+            Stake tokens
+        </Button>
+
+        <div class="controls">
+            <Button style="no-frame" on:action={handleBack}>Cancel</Button>
+        </div>
+    </div>
+</div>
diff --git a/src/pages/earn/step/unstake.svelte b/src/pages/earn/step/unstake.svelte
new file mode 100644
index 00000000..63f8e1ae
--- /dev/null
+++ b/src/pages/earn/step/unstake.svelte
@@ -0,0 +1,190 @@
+<script lang="ts">
+    import {Asset} from 'anchor-link'
+
+    import type {Token} from '~/stores/tokens'
+    import type {InputResponse} from '~/ui-types'
+    import Form from '~/components/elements/form.svelte'
+
+    import ProgressBar from '~/pages/earn/components/progress.svelte'
+    import Button from '~/components/elements/button.svelte'
+    import InputAsset from '~/components/elements/input/asset.svelte'
+    import InputLabel from '~/components/elements/input/label.svelte'
+    import TokenSelector from '~/components/elements/input/token/selector.svelte'
+
+    import type {REXInfo} from '~/pages/earn/types'
+
+    export let amount: string
+    export let token: Token | undefined
+    export let rexInfo: REXInfo
+    export let availableTokens: Asset
+    export let nextStep: () => void
+    export let handleBack: () => void
+
+    let selectedToken: Token
+
+    let tokenOptions: Token[] = []
+    if (token) {
+        let newToken = {...token, balance: availableTokens}
+        selectedToken = newToken
+        tokenOptions = [newToken]
+    }
+    let amountValid = false
+
+    function maxBalance() {
+        if (availableTokens) {
+            amount = String(availableTokens.value)
+            amountValid = true
+        }
+    }
+
+    function onConfirm() {
+        nextStep()
+    }
+
+    function onAmountChanged(event: CustomEvent<InputResponse>) {
+        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>
+
+<style type="scss">
+    .container {
+        border: 1px solid var(--divider-grey);
+        border-radius: 20px;
+        padding: 26px;
+    }
+    .top-section {
+        margin-bottom: 42px;
+    }
+    .middle-section {
+        margin: 0 auto;
+        max-width: 28rem;
+        margin-bottom: 31px;
+    }
+    .bottom-section {
+        margin: 0 auto;
+        max-width: 28rem;
+    }
+    .header {
+        color: var(--black);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 24px;
+        line-height: 29px;
+        text-align: center;
+        letter-spacing: -0.47px;
+        margin-bottom: 7px;
+    }
+    .subheader {
+        color: var(--dark-grey);
+        font-family: Inter;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 19px;
+        text-align: center;
+        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">
+    <div class="top-section">
+        <div class="header">Unstake</div>
+        <div class="subheader">Unstake to be claimable</div>
+        <ProgressBar step={1} />
+    </div>
+    <div class="middle-section">
+        <Form on:submit={onConfirm}>
+            <InputLabel>amount to unstake</InputLabel>
+            <div class="token-selector">
+                <TokenSelector
+                    defaultToken={selectedToken}
+                    {tokenOptions}
+                    {selectedToken}
+                    onTokenSelect={() => {}}
+                />
+            </div>
+            <div class="label">
+                total staked {rexInfo.total}
+            </div>
+
+            <InputAsset
+                bind:valid={amountValid}
+                bind:value={amount}
+                symbol={availableTokens.symbol}
+                focus
+                fluid
+                name="amount"
+                placeholder={`Enter amount of tokens`}
+                balance={availableTokens}
+                on:changed={onAmountChanged}
+            />
+            <div class="actions">
+                <span on:click={maxBalance}>Entire Balance</span>
+            </div>
+        </Form>
+    </div>
+    <div class="bottom-section">
+        <Button
+            fluid
+            style="primary"
+            size="large"
+            disabled={!amountValid}
+            formValidation
+            on:action={onConfirm}
+        >
+            Unstake tokens
+        </Button>
+
+        <div class="controls">
+            <Button style="no-frame" on:action={handleBack}>Cancel</Button>
+        </div>
+    </div>
+</div>
diff --git a/src/pages/earn/types.ts b/src/pages/earn/types.ts
new file mode 100644
index 00000000..55a33213
--- /dev/null
+++ b/src/pages/earn/types.ts
@@ -0,0 +1,19 @@
+import type {Asset} from 'anchor-link'
+
+export const enum Step {
+    Bootstrap,
+    Overview,
+    Stake,
+    Unstake,
+    Claim,
+    Confirm,
+    Success,
+    Error,
+}
+
+export interface REXInfo {
+    total: Asset
+    savings: Asset
+    matured: Asset
+    apy: string
+}
diff --git a/src/stores/account-provider.ts b/src/stores/account-provider.ts
index 2562596e..e5505569 100644
--- a/src/stores/account-provider.ts
+++ b/src/stores/account-provider.ts
@@ -109,6 +109,16 @@ export async function loadAccount(
     if (row) {
         const age = Date.now() - row.updated.getTime()
         stale = age > maxAge
+        // TODO: Remove this once Wharf is implemented
+        // This was needed to fix a bug where the last_vote_weight and proxied_vote_weight fields were missing
+        if (row.account && row.account.voter_info) {
+            if (!row.account.voter_info.last_vote_weight) {
+                row.account.voter_info.last_vote_weight = '0'
+            }
+            if (!row.account.voter_info.proxied_vote_weight) {
+                row.account.voter_info.proxied_vote_weight = '0'
+            }
+        }
         set({account: API.v1.AccountObject.from(row.account), stale})
     }
     if (stale || refresh) {