From c967fa224995f8170030b9bbaa2e7df8d79224b5 Mon Sep 17 00:00:00 2001
From: apporc <appleorchard2000@gmail.com>
Date: Sat, 22 Jun 2024 11:17:27 +0800
Subject: [PATCH] Support REX stake/unstake

---
 src/abi-types.ts                              |  18 +
 src/app.svelte                                |   4 +
 .../elements/input/token/selector.svelte      |   1 -
 .../elements/input/token/selector/row.svelte  |   8 +-
 src/components/elements/slider.svelte         | 308 ++++++++++++++++++
 src/components/layout/navigation/index.svelte |   6 +
 src/pages/earn/components/label.svelte        |  53 +++
 src/pages/earn/components/progress.svelte     |  27 ++
 src/pages/earn/index.svelte                   | 270 +++++++++++++++
 src/pages/earn/step/bootstrap.svelte          | 124 +++++++
 src/pages/earn/step/confirm.svelte            | 128 ++++++++
 src/pages/earn/step/error.svelte              |  59 ++++
 src/pages/earn/step/overview.svelte           | 126 +++++++
 src/pages/earn/step/stake.svelte              | 116 +++++++
 src/pages/earn/step/unstake.svelte            | 126 +++++++
 src/pages/earn/types.ts                       |   9 +
 16 files changed, 1381 insertions(+), 2 deletions(-)
 create mode 100644 src/components/elements/slider.svelte
 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/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..ddafd348 100644
--- a/src/components/elements/input/token/selector/row.svelte
+++ b/src/components/elements/input/token/selector/row.svelte
@@ -1,4 +1,5 @@
 <script>
+    import type {Readable} from 'svelte/store'
     import Icon from '~/components/elements/icon.svelte'
     import TokenImage from '~/components/elements/image/token.svelte'
     import type {Token} from '~/stores/tokens'
@@ -14,7 +15,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..9ac1dfe2
--- /dev/null
+++ b/src/components/elements/slider.svelte
@@ -0,0 +1,308 @@
+<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:mouseout={() => (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..8fc5816c 100644
--- a/src/components/layout/navigation/index.svelte
+++ b/src/components/layout/navigation/index.svelte
@@ -30,6 +30,12 @@
             name: 'Transfer',
             path: '/transfer',
         },
+        {
+            icon: 'battery-charging',
+            name: 'Earn',
+            path: '/earn',
+        },
+
         ...(banxaIsAvailable($activeBlockchain)
             ? [
                   {
diff --git a/src/pages/earn/components/label.svelte b/src/pages/earn/components/label.svelte
new file mode 100644
index 00000000..a0ad8cf6
--- /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..e55c8a48
--- /dev/null
+++ b/src/pages/earn/index.svelte
@@ -0,0 +1,270 @@
+<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 Page from '~/components/layout/page.svelte'
+    import TransactionForm from '~/components/elements/form/transaction.svelte'
+
+    import {stateREX} from '~/pages/resources/resources'
+    import {Step} 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 REXConfirm from '~/pages/earn/step/confirm.svelte'
+
+    let selectedAmount: string
+    let selectedAction: string
+    let onConfirmBack: () => void
+    let error: string = ''
+
+    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 rexBalance: Readable<Asset> = derived(
+        [currentAccount, stateREX, systemToken],
+        ([$currentAccount, $stateREX, $systemToken]) => {
+            let value = 0
+            if ($currentAccount && $currentAccount.rex_info && $stateREX && $stateREX.value) {
+                if ($stateREX.value === 0.0001) {
+                    value =
+                        ($stateREX.total_lendable.value / $stateREX.total_rex.value) *
+                        $currentAccount.rex_info.rex_balance.value
+                } else {
+                    value = $stateREX.value * $currentAccount.rex_info.rex_balance.value
+                }
+            }
+            return Asset.from(value, $systemToken!.symbol)
+        }
+    )
+
+    const rexToken: Readable<Token> = derived(
+        [systemToken, rexBalance],
+        ([$systemToken, $rexBalance]) => {
+            let tokenValue = $systemToken!
+            let newToken = {...tokenValue}
+            newToken.balance = $rexBalance
+            return newToken
+        }
+    )
+
+    const defaultStep: Readable<Step> = derived(rexBalance, ($rexBalance) => {
+        let result: Step = Step.Bootstrap
+        if ($rexBalance && $rexBalance.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) {
+            selectedAction = 'Stake'
+        } else {
+            selectedAction = 'Unstake'
+        }
+        onConfirmBack = () => {
+            switchStep(fromStep)
+        }
+        switchStep(Step.Confirm)
+    }
+
+    function getActionData() {
+        if (selectedAction === 'Stake') {
+            return getStakeAction()
+        } else if (selectedAction === 'Unstake') {
+            return getUnstakeAction()
+        } 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 rexNumber =
+            Number(selectedAmount) / ($stateREX!.total_lendable.value / $stateREX!.total_rex.value)
+        let rexAsset = Asset.from(rexNumber, $currentAccount!.rex_info!.rex_balance.symbol)
+        let finalAmount = Asset.from(
+            rexAsset.value * ($stateREX!.total_lendable.value / $stateREX!.total_rex.value),
+            $systemToken!.symbol
+        )
+        return [
+            {
+                authorization: [$activeSession!.auth],
+                account: 'eosio',
+                name: 'sellrex',
+                data: REXSELLREX.from({
+                    from: $activeSession!.auth.actor,
+                    rex: rexAsset,
+                }),
+            },
+            {
+                authorization: [$activeSession!.auth],
+                account: 'eosio',
+                name: 'withdraw',
+                data: REXWithdraw.from({
+                    owner: $activeSession!.auth.actor,
+                    amount: finalAmount,
+                }),
+            },
+        ]
+    }
+
+    // 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 undefined
+    })
+
+    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) {
+                context.setTransactionError(e)
+            }
+        }
+    }
+
+    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}
+                availableTokens={$availableSystemTokens}
+                nextStep={() => toStakeConfirm(Step.Bootstrap)}
+            />
+        {:else if $step === Step.Overview}
+            <REXOverview
+                rexBalance={$rexBalance}
+                toStake={() => switchStep(Step.Stake)}
+                toUnstake={() => switchStep(Step.Unstake)}
+            />
+        {:else if $step === Step.Stake}
+            <REXStake
+                bind:amount={selectedAmount}
+                token={$systemToken}
+                availableTokens={$availableSystemTokens}
+                nextStep={() => toStakeConfirm(Step.Stake)}
+            />
+        {:else if $step === Step.Unstake}
+            <REXUnstake
+                bind:amount={selectedAmount}
+                token={$rexToken}
+                availableTokens={$rexBalance}
+                nextStep={() => toStakeConfirm(Step.Unstake)}
+            />
+        {: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..5d44e0bb
--- /dev/null
+++ b/src/pages/earn/step/bootstrap.svelte
@@ -0,0 +1,124 @@
+<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'
+
+    export let amount: string
+    export let availableTokens: Asset
+    export let nextStep: () => void
+
+    let percent = 85
+    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)
+    }
+    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)
+    }
+    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;
+    }
+    .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">How to Earn</div>
+        <div class="subheader">Earn by staking</div>
+    </div>
+    <div class="middle-section">
+        <div class="input">
+            <Form>
+                <InputLabel>selected amount to stake</InputLabel>
+                <InputAsset
+                    bind:valid={amountValid}
+                    bind:value={amount}
+                    symbol={availableTokens.symbol}
+                    focus
+                    fluid
+                    name="amount"
+                    placeholder={amount}
+                    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}
+            >
+                Deposit
+            </Button>
+        </div>
+    </div>
+    <div class="bottom-section" />
+</div>
diff --git a/src/pages/earn/step/confirm.svelte b/src/pages/earn/step/confirm.svelte
new file mode 100644
index 00000000..3af52a39
--- /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: 84px;
+    }
+    .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.value}</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..097b7430
--- /dev/null
+++ b/src/pages/earn/step/overview.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+    import type {Asset} from 'anchor-link'
+
+    import Button from '~/components/elements/button.svelte'
+
+    export let rexBalance: Asset
+    export let toStake: () => void
+    export let toUnstake: () => 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;
+    }
+    .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(--main-black);
+        font-weight: 600;
+        font-size: 10px;
+        line-height: 12px;
+        letter-spacing: 0.1px;
+        text-transform: uppercase;
+        margin-bottom: 12px;
+        text-align: center;
+    }
+    .balance {
+        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: 26px;
+    }
+</style>
+
+<div class="container">
+    <div class="top-section">
+        <div class="header">How to Earn</div>
+        <div class="subheader">Earn by staking</div>
+    </div>
+    <div class="middle-section">
+        <div class="rex">
+            <div class="label">currently staked balance</div>
+            <div class="balance">
+                {rexBalance}
+            </div>
+            <div class="buttons">
+                <Button
+                    fluid
+                    style="primary"
+                    size="regular"
+                    disabled={false}
+                    formValidation
+                    on:action={toStake}
+                >
+                    Stake
+                </Button>
+                <Button
+                    fluid
+                    style="primary"
+                    size="regular"
+                    disabled={false}
+                    formValidation
+                    on:action={toUnstake}
+                >
+                    Unstake
+                </Button>
+            </div>
+        </div>
+    </div>
+    <div class="bottom-section" />
+</div>
diff --git a/src/pages/earn/step/stake.svelte b/src/pages/earn/step/stake.svelte
new file mode 100644
index 00000000..2dda38fe
--- /dev/null
+++ b/src/pages/earn/step/stake.svelte
@@ -0,0 +1,116 @@
+<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'
+
+    export let availableTokens: Asset
+    export let nextStep: () => void
+    export let amount: string
+    export let token: Token | undefined
+
+    let amountValid = false
+    let tokenOptions = token ? [token] : []
+
+    function onConfirm() {
+        nextStep()
+    }
+
+    function onAmountChanged(event: CustomEvent<InputResponse>) {
+        let newAmount = Asset.from(Number(event.detail.value), availableTokens.symbol).value
+        amount = String(newAmount)
+    }
+</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: 84px;
+    }
+    .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: 32px;
+    }
+</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>
+            <InputLabel>amount to stake</InputLabel>
+            <div class="token-selector">
+                <TokenSelector defaultToken={token} {tokenOptions} onTokenSelect={() => {}} />
+            </div>
+            <InputAsset
+                bind:valid={amountValid}
+                bind:value={amount}
+                symbol={availableTokens.symbol}
+                focus
+                fluid
+                name="amount"
+                placeholder={amount}
+                balance={availableTokens}
+                on:changed={onAmountChanged}
+            />
+        </Form>
+    </div>
+    <div class="bottom-section">
+        <Button
+            fluid
+            style="primary"
+            size="large"
+            disabled={false}
+            formValidation
+            on:action={onConfirm}
+        >
+            Stake tokens
+        </Button>
+    </div>
+</div>
diff --git a/src/pages/earn/step/unstake.svelte b/src/pages/earn/step/unstake.svelte
new file mode 100644
index 00000000..ff6378a2
--- /dev/null
+++ b/src/pages/earn/step/unstake.svelte
@@ -0,0 +1,126 @@
+<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'
+
+    export let amount: string
+    export let token: Token | undefined
+    export let availableTokens: Asset
+    export let nextStep: () => void
+
+    let tokenOptions: Token[] = []
+    if (token) {
+        let newToken = {...token}
+        newToken.balance = availableTokens
+        tokenOptions = [newToken]
+    }
+    let amountValid = false
+
+    function onConfirm() {
+        nextStep()
+    }
+
+    function onAmountChanged(event: CustomEvent<InputResponse>) {
+        let newAmount = Asset.from(Number(event.detail.value), availableTokens.symbol).value
+        amount = String(newAmount)
+    }
+</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: 84px;
+    }
+    .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: 32px;
+    }
+</style>
+
+<div class="container">
+    <div class="top-section">
+        <div class="header">Unstake</div>
+        <div class="subheader">Remove from your staked balance</div>
+        <ProgressBar step={1} />
+    </div>
+    <div class="middle-section">
+        <Form>
+            <InputLabel>amount to unstake</InputLabel>
+            <div class="token-selector">
+                <TokenSelector
+                    defaultToken={token}
+                    {tokenOptions}
+                    selectedToken={token}
+                    onTokenSelect={() => {}}
+                />
+            </div>
+            <InputAsset
+                bind:valid={amountValid}
+                bind:value={amount}
+                symbol={availableTokens.symbol}
+                focus
+                fluid
+                name="amount"
+                placeholder={amount}
+                balance={availableTokens}
+                on:changed={onAmountChanged}
+            />
+        </Form>
+    </div>
+    <div class="bottom-section">
+        <Button
+            fluid
+            style="primary"
+            size="large"
+            disabled={false}
+            formValidation
+            on:action={onConfirm}
+        >
+            Unstake tokens
+        </Button>
+    </div>
+</div>
diff --git a/src/pages/earn/types.ts b/src/pages/earn/types.ts
new file mode 100644
index 00000000..ef219601
--- /dev/null
+++ b/src/pages/earn/types.ts
@@ -0,0 +1,9 @@
+export const enum Step {
+    Bootstrap,
+    Overview,
+    Stake,
+    Unstake,
+    Confirm,
+    Success,
+    Error,
+}