Skip to content

Commit

Permalink
Merge pull request #210 from greymass/dev
Browse files Browse the repository at this point in the history 
Release
  • Loading branch information
@aaroncox
aaroncox authored Sep 10, 2024
2 parents a2b4d1e + add8eb7 commit 92ba012
Show file tree
Hide file tree
Showing 7 changed files with 96 additions and 58 deletions.
6 changes: 6 additions & 0 deletions src/abi-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,12 @@ export class REXDeposit extends Struct {
@Struct.field('asset') amount!: Asset
}

@Struct.type('mvfrsavings')
export class MVFRSAVINGS extends Struct {
@Struct.field('name') owner!: Name
@Struct.field('asset') rex!: Asset
}

@Struct.type('rexwithdraw')
export class REXWithdraw extends Struct {
@Struct.field('name') owner!: Name
Expand Down
6 changes: 6 additions & 0 deletions src/app.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,9 @@
--main-blue: var(--lapis-lazuli);
--main-black: #585d6e;
--ivory: var(--cultured);
--sky-blue: rgba(0, 93, 172, 0.3);
}
body.darkmode {
Expand Down Expand Up @@ -148,6 +151,9 @@
--main-blue: var(--middle-green-eagle);
--main-black: #c4c4c4;
--ivory: #5d504d;
--sky-blue: rgba(249, 197, 184, 0.3);
}
body {
Expand Down
86 changes: 47 additions & 39 deletions src/components/elements/slider.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
<script>
<script lang="ts">
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 min: number = 0
export let max: number = 100
export let initialValue: number = 0
export let id: any = null
export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue
export let value: number = initialValue
// Node Bindings
let container = null
let thumb = null
let progressBar = null
let element = null
let container: HTMLElement | null = null
let thumb: HTMLElement | null = null
let progressBar: HTMLElement | null = null
let element: HTMLElement | null = null
// Internal State
let elementX = null
let currentThumb = null
let holding = false
let thumbHover = false
let elementX: number = 0
let currentThumb: HTMLElement | null = null
let holding: boolean = false
let thumbHover: boolean = false
let keydownAcceleration = 0
let accelerationTimer = null
let accelerationTimer: NodeJS.Timeout | null = null
// Dispatch 'change' events
const dispatch = createEventDispatcher()
Expand All @@ -36,44 +36,40 @@
})
function resizeWindow() {
elementX = element.getBoundingClientRect().left
if (element) elementX = element.getBoundingClientRect().left
}
// Allows both bind:value and on:change for parent value retrieval
function setValue(val) {
function setValue(val: number) {
value = val
dispatch('change', {value})
}
function onTrackEvent(e) {
function onTrackEvent(e: MouseEvent | TouchEvent) {
// Update value immediately before beginning drag
updateValueOnEvent(e)
onDragStart(e)
}
function onHover(e) {
thumbHover = thumbHover ? false : true
}
function onDragStart(e) {
function onDragStart(e: MouseEvent | TouchEvent) {
// If mouse event add a pointer events shield
if (e.type === 'mousedown') document.body.append(mouseEventShield)
currentThumb = thumb
}
function onDragEnd(e) {
function onDragEnd(e: MouseEvent | TouchEvent) {
// 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
if (e instanceof MouseEvent && isMouseInElement(e, thumb)) thumbHover = true
}
currentThumb = null
}
// Check if mouse event cords overlay with an element's area
function isMouseInElement(event, element) {
function isMouseInElement(event: MouseEvent, element: HTMLElement | null) {
if (element === null) {
return false
}
Expand All @@ -85,7 +81,7 @@
}
// Accessible keypress handling
function onKeyPress(e) {
function onKeyPress(e: KeyboardEvent) {
// 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++
Expand All @@ -105,28 +101,27 @@
setValue(value - throttled)
}
}
// Reset acceleration after 100ms of no events
clearTimeout(accelerationTimer)
if (accelerationTimer) clearTimeout(accelerationTimer)
accelerationTimer = setTimeout(() => (keydownAcceleration = 1), 100)
}
function calculateNewValue(clientX) {
function calculateNewValue(clientX: number) {
// 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)
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)
setValue(Math.floor((percent * (max - min)) / 100) + min)
}
// Handles both dragging of touch/mouse as well as simple one-off click/touches
function updateValueOnEvent(e) {
function updateValueOnEvent(e: MouseEvent | TouchEvent) {
// touchstart && mousedown are one-off updates, otherwise expect a currentPointer node
if (!currentThumb && e.type !== 'touchstart' && e.type !== 'mousedown') return false
Expand All @@ -135,7 +130,11 @@
// Get client's x cord either touch or mouse
const clientX =
e.type === 'touchmove' || e.type === 'touchstart' ? e.touches[0].clientX : e.clientX
e.type === 'touchmove' || (e.type === 'touchstart' && e instanceof TouchEvent)
? (e as TouchEvent).touches[0].clientX
: e instanceof MouseEvent
? (e as MouseEvent).clientX
: 0
calculateNewValue(clientX)
}
Expand All @@ -153,15 +152,15 @@
value = value < max ? value : max
let percent = ((value - min) * 100) / (max - min)
let offsetLeft = (container.clientWidth - 10) * (percent / 100) + 5
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>
<style lang="scss">
.slider {
position: relative;
flex: 1;
Expand All @@ -181,7 +180,7 @@
.slider__track {
height: 6px;
background-color: var(--cultured);
background-color: var(--ivory);
border-radius: 999px;
}
Expand All @@ -200,7 +199,7 @@
position: absolute;
width: 20px;
height: 20px;
background-color: var(--thumb-bgcolor, white);
background-color: var(--main-blue);
cursor: pointer;
border-radius: 999px;
margin-top: -8px;
Expand All @@ -213,16 +212,25 @@
);
}
.slider__thumb::after {
content: '';
width: 15px;
height: 15px;
background-color: var(--main-blue);
border: 2px solid var(--white, white);
border-radius: 50%;
}
.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));
0 0 0 6px var(--sky-blue);
}
.slider__tooltip {
pointer-events: none;
position: absolute;
top: -33px;
color: var(--tooltip-text, white);
color: var(--white);
width: 38px;
padding: 4px 0;
border-radius: 4px;
Expand Down
14 changes: 9 additions & 5 deletions src/components/layout/account/list.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@
.list {
margin: 10px;
.add-account {
padding: 0 16px;
}
.network {
.header {
color: var(--dark-grey);
Expand Down Expand Up @@ -138,7 +141,6 @@
}
:global(.button) {
line-height: 1em;
margin: 0 16px;
}
}
Expand Down Expand Up @@ -191,10 +193,12 @@

{#if $activeSession}
<div class="list">
<Button fluid style="primary" on:action={handleAdd}>
<Icon name="user-plus" />
<Text>Add another account</Text>
</Button>
<div class="add-account">
<Button fluid style="primary" on:action={handleAdd}>
<Icon name="user-plus" />
<Text>Add another account</Text>
</Button>
</div>
{#each $groupings as group}
<div class="network">
<div class="header" on:click={() => toggle(group.chainId)}>
Expand Down
14 changes: 8 additions & 6 deletions src/pages/dashboard/row.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,8 +210,8 @@
}
}
.extra {
:global(.button) {
margin: 9px;
.send {
padding: 9px;
}
}
&.expanded .extra {
Expand Down Expand Up @@ -283,10 +283,12 @@
{/if}
</div>
{#if transferable}
<Button fluid href={$url} style="secondary">
<Icon name="arrow-up" />
<Text>Send</Text>
</Button>
<div class="send">
<Button fluid href={$url} style="secondary">
<Icon name="arrow-up" />
<Text>Send</Text>
</Button>
</div>
{/if}
</div>
</div>
Expand Down
20 changes: 16 additions & 4 deletions src/pages/earn/index.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<script lang="ts">
import type {Readable, Writable} from 'svelte/store'
import {derived, writable, get} from 'svelte/store'
import {AnyAction, Asset, Int128} from 'anchor-link'
import {AnyAction, Asset, Int128, Int64} 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 {REXDeposit, MVFRSAVINGS, REXWithdraw, REXBUYREX, REXSELLREX} from '~/abi-types'
import type {FormTransaction} from '~/ui-types'
import {rexIsAvailable} from '~/lib/rex'
Expand Down Expand Up @@ -130,16 +130,26 @@
let matured = defaultZero
let apy = ''
const fiveYearsFromNow = new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 5
const now = new Date()
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)
const claimableBuckets = $currentAccount.rex_info.rex_maturities.filter(
(maturity) => +new Date(maturity.first!.toString()) < +now
)
let claimable = claimableBuckets.reduce(
(acc, r) => acc.adding(r.second!),
Int64.from(0)
)
matured = convertRexToEos(
Asset.fromUnits(
$currentAccount.rex_info.matured_rex,
$currentAccount.rex_info.matured_rex.adding(claimable),
$currentAccount.rex_info.rex_balance.symbol
).value
)
Expand Down Expand Up @@ -194,6 +204,8 @@
})
if (result.rows.length > 0) {
rexEOSBalance.set(Asset.from(result.rows[0].balance, $systemToken!.symbol))
} else {
rexEOSBalance.set(Asset.from(0, $systemToken!.symbol))
}
})
return () => {
Expand Down Expand Up @@ -276,7 +288,7 @@
authorization: [$activeSession!.auth],
account: 'eosio',
name: 'mvfrsavings',
data: REXWithdraw.from({
data: MVFRSAVINGS.from({
owner: $activeSession!.auth.actor,
amount: rexAmount,
}),
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1741,10 +1741,10 @@ ajv@^8.0.1:
require-from-string "^2.0.2"
uri-js "^4.2.2"

anchor-link-browser-transport@^3.2.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/anchor-link-browser-transport/-/anchor-link-browser-transport-3.3.0.tgz#ffb4f0e41cc2b900a714be3969e322491110b4f9"
integrity sha512-0pHuBtxtzdT4hkbtMVfjT0ksAfWvmTwyzldxI32I2oo4j3jsao7IfqCf/Oew5DqMOr9ZSDYQiwbPxt8QhU1zOQ==
anchor-link-browser-transport@^3.2.1:
version "3.6.1"
resolved "https://registry.yarnpkg.com/anchor-link-browser-transport/-/anchor-link-browser-transport-3.6.1.tgz#8e112f00f2322f466bb69a93008976df1021b9c8"
integrity sha512-lrV+qpXVN28VyAK3nKTXKvBQNLdKcwqTM92iBBnZVqulPFhhNAVAqDeLgq78zd9Pl4m9Cdq27hlSC1wcMyr63w==
dependencies:
tslib "^2.0.3"

Expand Down

0 comments on commit 92ba012

Please sign in to comment.