Skip to content

Commit

Permalink
Merge pull request #32 from fabriziovigevani/fix/redeem-token-decimals
Browse files Browse the repository at this point in the history 
Allow to redeem fractions of a token && add redeem icon
  • Loading branch information
@0xGabi
0xGabi committed Jun 7, 2019
2 parents 64c428c + de8cd02 commit d06855a
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 33 deletions.
4 changes: 3 additions & 1 deletion app/src/App.js
View file
Expand Up @@ -5,6 +5,7 @@ import { Main, SidePanel } from '@aragon/ui'
import { capitalizeFirst } from './lib/utils'
import { getSignatureFields, soliditySha3 } from './lib/web3-utils'

import redeemIcon from './assets/icono.svg'
import Balances from './components/Balances'
import AppLayout from './components/AppLayout'
import EmptyState from './screens/EmptyState'
Expand Down Expand Up @@ -102,7 +103,7 @@ class App extends React.Component {
? {
label: 'Redeem',
onClick: this.handleLaunchRedeemTokens,
icon: '',
icon: <img src={redeemIcon} height="30px" alt="" />,
}
: null
}
Expand Down Expand Up @@ -134,6 +135,7 @@ class App extends React.Component {
tokens={tokens}
tokenAddress={tokenAddress}
onUpdateTokens={this.handleUpdateTokens}
opened={sidePanelProps.opened}
/>
)}
</SidePanel>
Expand Down
1 change: 1 addition & 0 deletions app/src/assets/icono.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion app/src/components/Balances.js
View file
Expand Up @@ -36,8 +36,9 @@ class Balances extends Component {
) : (
<EmptyListItem />
)}
{!below('medium') &&
AddTokenButton(false, 'outline', onAddToken)}
</List>
{!below('medium') && AddTokenButton(false, 'outline', onAddToken)}
</ScrollView>

{below('medium') && (
Expand Down Expand Up @@ -98,6 +99,8 @@ const List = styled.ul`
`
width: auto;
display: flex;
flex-wrap: wrap;
align-items: center
padding: 0 10px;
`
)};
Expand Down
73 changes: 48 additions & 25 deletions app/src/components/Forms/RedeemTokens.js
View file
Expand Up @@ -4,24 +4,34 @@ import styled from 'styled-components'

import RedeemTokenList from './RedeemTokenList'
import { ErrorMessage, InfoMessage } from './Message'
import {
formatTokenAmount,
toDecimals,
safeDiv,
fromDecimals,
round,
} from '../../lib/math-utils'

import { formatTokenAmount, toDecimals, safeDiv } from '../../lib/math-utils'
const MAX_INPUT_DECIMAL_BASE = 6

function getTokenExchange(tokens, amount, totalSupply) {
return tokens.map(t => safeDiv(amount * t.amount, totalSupply))
}

const initialState = {
amount: {
value: '',
max: '',
error: null,
},
progress: 0,
function formatAmount(amount, decimals) {
const rounding = Math.min(MAX_INPUT_DECIMAL_BASE, decimals)
return formatTokenAmount(amount, false, decimals, false, { rounding })
}

class RedeemTokens extends Component {
state = { ...initialState }
state = {
amount: {
value: formatAmount(this.props.balance, this.props.decimals),
max: formatAmount(this.props.balance, this.props.decimals),
error: null,
},
progress: 1,
}

//react to account balance changes
componentDidUpdate(prevProps) {
Expand All @@ -33,7 +43,7 @@ class RedeemTokens extends Component {

handleAmountChange = event => {
const { balance, decimals } = this.props
const formattedBalance = formatTokenAmount(balance, false, decimals)
const formattedBalance = formatAmount(balance, decimals)

const amount = Math.min(event.target.value, formattedBalance)
const progress = safeDiv(amount, formattedBalance)
Expand All @@ -43,10 +53,11 @@ class RedeemTokens extends Component {

handleSliderChange = progress => {
const { balance, decimals } = this.props
const formattedBalance = formatTokenAmount(balance, false, decimals)
const formattedBalance = formatAmount(balance, decimals)

const amount = Math.round(progress * formattedBalance)
const rounding = Math.min(MAX_INPUT_DECIMAL_BASE, decimals)

const amount = round(progress * formattedBalance, rounding)
this.updateAmount(amount, progress)
}

Expand All @@ -61,37 +72,45 @@ class RedeemTokens extends Component {
event.preventDefault()

const { decimals } = this.props
const {
amount: { value },
} = this.state
const { amount } = this.state

console.log('value', value)
this.props.onRedeemTokens(toDecimals(String(value), decimals))
this.props.onRedeemTokens(toDecimals(String(amount.value), decimals))
}

render() {
const { amount, progress } = this.state
const { balance, symbol, decimals, totalSupply, tokens } = this.props

const formattedBalance = formatTokenAmount(balance, false, decimals)
const formattedSupply = formatTokenAmount(totalSupply, false, decimals)
const formattedBalance = formatAmount(balance, decimals)
const formattedSupply = formatAmount(totalSupply, decimals)

const youGet = getTokenExchange(
tokens,
amount.value,
totalSupply / Math.pow(10, decimals)
)

const minTokenStep = fromDecimals(
'1',
Math.min(MAX_INPUT_DECIMAL_BASE, decimals)
)

const errorMessage = amount.error

return (
<div>
<form onSubmit={this.handleFormSubmit}>
<InfoMessage
title={'Redeemption action'}
text={`You have ${formattedBalance} ${symbol} tokens for redemption out of a total of ${formattedSupply}. \n This action will redeem ${
amount.value
} tokens`}
text={`This action will redeem ${amount.value} tokens`}
/>
<TokenInfo>
You have{' '}
<Text weight="bold">
{formattedBalance} out of a total of {formattedSupply} {symbol}{' '}
</Text>{' '}
tokens for redemption
</TokenInfo>
<InputWrapper>
<SliderWrapper label="Amount to redeem">
<Slider value={progress} onUpdate={this.handleSliderChange} />
Expand All @@ -102,8 +121,7 @@ class RedeemTokens extends Component {
value={amount.value}
max={amount.max}
min={'0'}
step={'1'}
disabled={amount.max === '0'}
step={minTokenStep}
onChange={this.handleAmountChange}
required
/>
Expand Down Expand Up @@ -140,7 +158,8 @@ const InputWrapper = styled.div`
align-items: center;
margin-bottom: 20px;
border-bottom: 1px solid #eaf6f6;
padding: 15px 0px;
border-top: 1px solid #eaf6f6;
padding: 20px 0px;
> :not(:last-child) {
margin-right: 15px;
}
Expand All @@ -161,3 +180,7 @@ const Info = styled.div`
margin-bottom: 20px;
text-align: center;
`

const TokenInfo = styled.div`
padding: 20px 0;
`
35 changes: 29 additions & 6 deletions app/src/components/Forms/UpdateTokens.js
View file
Expand Up @@ -18,20 +18,37 @@ const validate = (mode, address, tokens) => {
return null
}

const initialState = {
address: {
value: '',
error: null,
},
}

class UpdateTokens extends Component {
state = {
...initialState,
address: {
value: this.props.tokenAddress || '',
error: null,
value: this.props.tokenAddress,
},
}

componentDidUpdate({ tokenAddress }, prevState) {
if (tokenAddress != this.props.tokenAddress) {
componentDidUpdate({ opened }) {
if (!opened && this.props.opened) {
// setTimeout is needed as a small hack to wait until the input's on
// screen until we call focus
this.props.mode === 'add' &&
this.addressRef &&
setTimeout(() => this.addressRef.focus(), 100)

this.setState(({ address }) => ({
address: { ...address, value: this.props.tokenAddress },
}))
}

if (opened && !this.props.opened) {
this.setState({ ...initialState })
}
}

handleAddressChange = event => {
Expand Down Expand Up @@ -88,10 +105,16 @@ class UpdateTokens extends Component {
wide={true}
onChange={this.handleAddressChange}
value={address.value}
disabled={mode === 'remove'}
ref={address => (this.addressRef = address)}
/>
) : (
<TokenBadge address={address.value} name={name} symbol={symbol} />
address.value && (
<TokenBadge
address={address.value}
name={name}
symbol={symbol}
/>
)
)}
</Field>
<Button mode="strong" wide={true} type="submit">
Expand Down

0 comments on commit d06855a

Please sign in to comment.