feat: add light node upgrade top up methods (#372)
* feat: add top up * chore: remove console.log * build: add pseudo-missing dependency * feat: add missing top up components * fix: crypto route * feat(wip): add gift wallet logic * fix: fix gift wallet flows * feat: simplify flow without fund step * feat: add loading screens * fix: remove alert * fix: prepend http if needed * fix: fix bug that was reintroduced with merge * refactor: rename minusEther to minusBaseUnits * fix: remove unused setStartedAt * build: remove unused dependency
This commit is contained in:
Cafe137
GitHub
@@ -1,11 +1,9 @@
|
||||
import type { ReactElement } from 'react'
|
||||
|
||||
import CashoutModal from '../../components/CashoutModal'
|
||||
import ExpandableList from '../../components/ExpandableList'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
|
||||
import CashoutModal from '../../components/CashoutModal'
|
||||
import { Accounting } from '../../hooks/accounting'
|
||||
import type { Token } from '../../models/Token'
|
||||
|
||||
@@ -25,7 +23,7 @@ export default function PeerBalances({ accounting, isLoadingUncashed, totalUncas
|
||||
{accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
|
||||
<ExpandableList
|
||||
key={peer}
|
||||
label={`Peer ${peer.substr(0, 8)}[…]`}
|
||||
label={`Peer ${peer.slice(0, 8)}[…]`}
|
||||
level={1}
|
||||
info={`${uncashedAmount.toFixedDecimal()} BZZ (uncashed)`}
|
||||
>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Button, ListItemIcon, Menu, MenuItem, Typography } from '@material-ui/core'
|
||||
import React, { ReactElement } from 'react'
|
||||
import { Button, ListItemIcon, Typography, Menu, MenuItem } from '@material-ui/core'
|
||||
import { EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
|
||||
interface Props {
|
||||
@@ -35,7 +35,7 @@ export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props
|
||||
selected={stamp.batchID === selectedStamp?.batchID}
|
||||
>
|
||||
<ListItemIcon>{stamp.usageText}</ListItemIcon>
|
||||
<Typography variant="body2">{stamp.batchID.substr(0, 8)}[…]</Typography>
|
||||
<Typography variant="body2">{stamp.batchID.slice(0, 8)}[…]</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
|
||||
@@ -6,6 +6,7 @@ import { DocumentationText } from '../../components/DocumentationText'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { ProgressIndicator } from '../../components/ProgressIndicator'
|
||||
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
|
||||
import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
|
||||
import { CheckState, Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as IdentityContext, Identity } from '../../providers/Feeds'
|
||||
import { Context as FileContext } from '../../providers/File'
|
||||
@@ -21,7 +22,6 @@ import { PostageStampSelector } from '../stamps/PostageStampSelector'
|
||||
import { AssetPreview } from './AssetPreview'
|
||||
import { StampPreview } from './StampPreview'
|
||||
import { UploadActionBar } from './UploadActionBar'
|
||||
import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
|
||||
|
||||
export function Upload(): ReactElement {
|
||||
const [step, setStep] = useState(0)
|
||||
@@ -83,9 +83,9 @@ export function Upload(): ReactElement {
|
||||
// The website is in some directory, remove it
|
||||
if (idx.commonPrefix) {
|
||||
const substrStart = idx.commonPrefix.length
|
||||
indexDocument = idx.indexPath.substr(substrStart)
|
||||
indexDocument = idx.indexPath.slice(substrStart)
|
||||
fls = files.map(f => {
|
||||
const path = (f.path as string).substr(substrStart)
|
||||
const path = (f.path as string).slice(substrStart)
|
||||
|
||||
return packageFile(f, path)
|
||||
})
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { Check, X } from 'react-feather'
|
||||
import { useNavigate } from 'react-router'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { Loading } from '../../components/Loading'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as TopUpContext } from '../../providers/TopUp'
|
||||
import { createGiftWallet } from '../../utils/desktop'
|
||||
import { generateWallet } from '../../utils/identity'
|
||||
import { ResolvedWallet } from '../../utils/wallet'
|
||||
|
||||
export default function Index(): ReactElement {
|
||||
const { giftWallets, addGiftWallet } = useContext(TopUpContext)
|
||||
const { balance } = useContext(BeeContext)
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [balances, setBalances] = useState<ResolvedWallet[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
async function mapGiftWallets() {
|
||||
const results = []
|
||||
for (const giftWallet of giftWallets) {
|
||||
results.push(await ResolvedWallet.make(giftWallet))
|
||||
}
|
||||
setBalances(results)
|
||||
}
|
||||
|
||||
mapGiftWallets()
|
||||
}, [giftWallets])
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
const navigate = useNavigate()
|
||||
|
||||
async function onCreate() {
|
||||
enqueueSnackbar('Sending funds to gift wallet...')
|
||||
setLoading(true)
|
||||
try {
|
||||
const wallet = generateWallet()
|
||||
addGiftWallet(wallet)
|
||||
await createGiftWallet(wallet.getAddressString())
|
||||
enqueueSnackbar('Succesfully funded gift wallet', { variant: 'success' })
|
||||
} catch (error) {
|
||||
enqueueSnackbar(`Failed to fund gift wallet: ${error}`, { variant: 'error' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
function onCancel() {
|
||||
navigate(-1)
|
||||
}
|
||||
|
||||
if (!balance) {
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HistoryHeader>Invite to Swarm...</HistoryHeader>
|
||||
<Box mb={4}>
|
||||
<Typography>
|
||||
Generate and share a gift wallet that anyone can use to set-up their light node with Swarm Desktop. This will
|
||||
use 1 XDAI and 5 BZZ from your node wallet.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
{balances.map((x, i) => (
|
||||
<Box mb={2} key={i}>
|
||||
<ExpandableListItemKey label={`swarm${String(i).padStart(3, '0')}`} value={x.privateKey} />
|
||||
<ExpandableListItemKey label="Address" value={x.address} />
|
||||
<ExpandableListItem label="XDAI balance" value={`${x.dai.toSignificantDigits(4)} XDAI`} />
|
||||
<ExpandableListItem label="BZZ balance" value={`${x.bzz.toSignificantDigits(4)} BZZ`} />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton onClick={onCreate} iconType={Check} loading={loading} disabled={loading}>
|
||||
Generate gift wallet
|
||||
</SwarmButton>
|
||||
<SwarmButton onClick={onCancel} cancel iconType={X} disabled={loading}>
|
||||
Cancel
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { BeeModes } from '@ethersphere/bee-js'
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { Loading } from '../../components/Loading'
|
||||
import { Context } from '../../providers/Bee'
|
||||
import { ROUTES } from '../../routes'
|
||||
|
||||
export default function Settings(): ReactElement {
|
||||
const [startedAt] = useState(Date.now())
|
||||
const { apiHealth, nodeInfo } = useContext(Context)
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
if (Date.now() - startedAt < 45_000) {
|
||||
return
|
||||
}
|
||||
|
||||
if (apiHealth && nodeInfo?.beeMode === BeeModes.LIGHT) {
|
||||
navigate(ROUTES.INFO)
|
||||
}
|
||||
}, [startedAt, navigate, nodeInfo, apiHealth])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box mb={4}>
|
||||
<Loading />
|
||||
</Box>
|
||||
<Typography>Your node is being upgraded to light mode... postage syncing may take up to 10 minutes.</Typography>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { Loading } from '../../components/Loading'
|
||||
import { Context } from '../../providers/Bee'
|
||||
import { ROUTES } from '../../routes'
|
||||
|
||||
export default function Settings(): ReactElement {
|
||||
const [waited, setWaited] = useState(false)
|
||||
const { apiHealth } = useContext(Context)
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
if (waited) {
|
||||
return
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => setWaited(true), 5_000)
|
||||
|
||||
return () => clearTimeout(timeout)
|
||||
}, [waited])
|
||||
|
||||
useEffect(() => {
|
||||
if (!waited) {
|
||||
return
|
||||
}
|
||||
|
||||
if (apiHealth) {
|
||||
navigate(ROUTES.INFO)
|
||||
}
|
||||
}, [navigate, waited, apiHealth])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box mb={4}>
|
||||
<Loading />
|
||||
</Box>
|
||||
<Typography>You will be redirected automatically once your node is up and running.</Typography>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
import { Battery, BatteryCharging, Check, Gift } from 'react-feather'
|
||||
import { useNavigate } from 'react-router'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { ROUTES } from '../../routes'
|
||||
|
||||
const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
checkWrapper: {
|
||||
background: 'rgba(0, 230, 118, 0.25)',
|
||||
borderRadius: 99999,
|
||||
width: '180px',
|
||||
height: '180px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
export default function Confirmation(): ReactElement {
|
||||
const navigate = useNavigate()
|
||||
|
||||
const styles = useStyles()
|
||||
|
||||
return (
|
||||
<>
|
||||
<HistoryHeader>Connect to the blockchain</HistoryHeader>
|
||||
<Grid container direction="column" alignItems="center">
|
||||
<Box mb={6}>
|
||||
<div className={styles.checkWrapper}>
|
||||
<Check size={100} color="#ededed" />
|
||||
</div>
|
||||
</Box>
|
||||
<Box mb={1}>
|
||||
<Typography style={{ fontWeight: 'bold' }}>Your node's RPC endpoint is set up correctly!</Typography>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<Typography align="center">Lastly, you will need to top-up your node wallet.</Typography>
|
||||
<Typography align="center">
|
||||
If you're not familiar with cryptocurrencies, you can start with a bank card.
|
||||
</Typography>
|
||||
</Box>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton iconType={Battery} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
|
||||
Get started with bank card
|
||||
</SwarmButton>
|
||||
<SwarmButton iconType={BatteryCharging} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
|
||||
Use DAI
|
||||
</SwarmButton>
|
||||
<SwarmButton iconType={Gift} onClick={() => navigate(ROUTES.TOP_UP_GIFT_CODE)}>
|
||||
Use a gift code
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useState } from 'react'
|
||||
import { Check } from 'react-feather'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SwarmTextInput } from '../../components/SwarmTextInput'
|
||||
import { Context } from '../../providers/TopUp'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { Rpc } from '../../utils/rpc'
|
||||
|
||||
export default function Index(): ReactElement {
|
||||
const { jsonRpcProvider, setJsonRpcProvider } = useContext(Context)
|
||||
|
||||
const [provider, setProvider] = useState(jsonRpcProvider)
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
const navigate = useNavigate()
|
||||
|
||||
async function onSubmit() {
|
||||
try {
|
||||
await Rpc.eth_getBlockByNumber(provider)
|
||||
enqueueSnackbar('Connected to RPC provider successfully.', { variant: 'success' })
|
||||
setJsonRpcProvider(provider)
|
||||
navigate(ROUTES.CONFIRMATION)
|
||||
} catch (error) {
|
||||
enqueueSnackbar('Could not connect to RPC provider.', { variant: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HistoryHeader>Connect to the blockchain</HistoryHeader>
|
||||
<Box mb={1}>
|
||||
<Typography style={{ fontWeight: 'bold' }}>Set up RPC endpoint</Typography>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<Typography>
|
||||
To connect to and retrieve data from the blockchain, you'll need to connect to a publicly-provided node
|
||||
via the node's RPC endpoint. If you're not familiar with this, you may use{' '}
|
||||
<a href="https://getblock.io/" target="_blank" rel="noreferrer">
|
||||
https://getblock.io/
|
||||
</a>
|
||||
.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<SwarmTextInput
|
||||
name="rpc-endpoint"
|
||||
label="RPC Endpoint"
|
||||
onChange={event => setProvider(event.target.value)}
|
||||
defaultValue={jsonRpcProvider}
|
||||
/>
|
||||
</Box>
|
||||
<SwarmButton iconType={Check} onClick={onSubmit}>
|
||||
Connect
|
||||
</SwarmButton>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Typography } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
import Index from '.'
|
||||
import { ROUTES } from '../../routes'
|
||||
|
||||
export function BankCardTopUpIndex(): ReactElement {
|
||||
return (
|
||||
<Index
|
||||
header={'Top-up with bank card'}
|
||||
title={'Use a bank card to buy xDAI to the funding wallet address below'}
|
||||
p={
|
||||
<Typography>
|
||||
It's recommended to buy an amount equivalent to 5 to 10 EUR maximum. If you're not familiar with
|
||||
cryptocurrencies, you may use{' '}
|
||||
<a href="https://ramp.network/buy/" rel="noreferrer" target="_blank">
|
||||
https://ramp.network/buy/
|
||||
</a>
|
||||
.
|
||||
</Typography>
|
||||
}
|
||||
next={ROUTES.TOP_UP_BANK_CARD_SWAP}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Typography } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
import Index from '.'
|
||||
import { ROUTES } from '../../routes'
|
||||
|
||||
export function CryptoTopUpIndex(): ReactElement {
|
||||
return (
|
||||
<Index
|
||||
header={'Top-up with cryptocurrencies'}
|
||||
title={'Send xDAI to the funding wallet below'}
|
||||
p={
|
||||
<Typography>
|
||||
For security reasons it is recommended to send maximum 5 to 10 xDAI. To get xDAI from DAI you may use{' '}
|
||||
<a href="https://bridge.xdaichain.com/" rel="noreferrer" target="_blank">
|
||||
https://bridge.xdaichain.com/
|
||||
</a>
|
||||
.
|
||||
</Typography>
|
||||
}
|
||||
next={ROUTES.TOP_UP_CRYPTO_SWAP}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { ArrowDown, Check } from 'react-feather'
|
||||
import { useNavigate, useParams } from 'react-router'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { Loading } from '../../components/Loading'
|
||||
import { ProgressIndicator } from '../../components/ProgressIndicator'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SwarmDivider } from '../../components/SwarmDivider'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as TopUpContext } from '../../providers/TopUp'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { sleepMs } from '../../utils'
|
||||
import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
|
||||
import { ResolvedWallet } from '../../utils/wallet'
|
||||
|
||||
export function GiftCardFund(): ReactElement {
|
||||
const { nodeAddresses, balance } = useContext(BeeContext)
|
||||
const { jsonRpcProvider } = useContext(TopUpContext)
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [wallet, setWallet] = useState<ResolvedWallet | null>(null)
|
||||
|
||||
const { privateKeyString } = useParams()
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
if (!privateKeyString) {
|
||||
return
|
||||
}
|
||||
|
||||
ResolvedWallet.make(privateKeyString).then(setWallet)
|
||||
}, [privateKeyString])
|
||||
|
||||
if (!wallet || !balance) {
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
async function onFund() {
|
||||
if (!wallet || !nodeAddresses) {
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
await wallet.transfer(nodeAddresses.ethereum)
|
||||
enqueueSnackbar('Successfully funded node, restarting...', { variant: 'success' })
|
||||
await sleepMs(5_000)
|
||||
await upgradeToLightNode(jsonRpcProvider)
|
||||
await restartBeeNode()
|
||||
navigate(ROUTES.RESTART_LIGHT)
|
||||
} catch (error) {
|
||||
enqueueSnackbar(`Failed to fund/restart node: ${error}`, { variant: 'error' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HistoryHeader>Top-up with gift code</HistoryHeader>
|
||||
<Box mb={4}>
|
||||
<ProgressIndicator index={1} steps={['Paste gift code', 'Fund your node']} />
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<Typography style={{ fontWeight: 'bold' }}>Send funds to your Bee node</Typography>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<Typography>
|
||||
Deposit all the funds from the gift wallet to your node wallet address. You can use the button below to
|
||||
transfer all funds to your node.
|
||||
</Typography>
|
||||
</Box>
|
||||
<SwarmDivider mb={4} />
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItemKey label="Gift wallet address" value={wallet.address || 'N/A'} />
|
||||
</Box>
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItem label="XDAI balance" value={`${wallet.dai.toSignificantDigits(4)} XDAI`} />
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<ExpandableListItem label="BZZ balance" value={`${wallet.bzz.toSignificantDigits(4)} BZZ`} />
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<ArrowDown size={24} color="#aaaaaa" />
|
||||
</Box>
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItemKey label="Node wallet address" value={nodeAddresses?.ethereum || 'N/A'} expanded />
|
||||
</Box>
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
|
||||
</Box>
|
||||
<SwarmButton iconType={Check} onClick={onFund} disabled={loading} loading={loading}>
|
||||
Send all funds to your node
|
||||
</SwarmButton>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useState } from 'react'
|
||||
import { ArrowRight } from 'react-feather'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { ProgressIndicator } from '../../components/ProgressIndicator'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SwarmDivider } from '../../components/SwarmDivider'
|
||||
import { SwarmTextInput } from '../../components/SwarmTextInput'
|
||||
import { BzzToken } from '../../models/BzzToken'
|
||||
import { DaiToken } from '../../models/DaiToken'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { getWalletFromPrivateKeyString } from '../../utils/identity'
|
||||
import { Rpc } from '../../utils/rpc'
|
||||
|
||||
export function GiftCardTopUpIndex(): ReactElement {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [giftCode, setGiftCode] = useState('')
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
const navigate = useNavigate()
|
||||
|
||||
async function onProceed() {
|
||||
setLoading(true)
|
||||
try {
|
||||
const wallet = getWalletFromPrivateKeyString(giftCode)
|
||||
const dai = new DaiToken(await Rpc._eth_getBalance(wallet.getAddressString()))
|
||||
const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.getAddressString()))
|
||||
|
||||
if (dai.toDecimal.lt(0.001) || bzz.toDecimal.lt(0.001)) {
|
||||
throw Error('Gift wallet does not have enough funds')
|
||||
}
|
||||
enqueueSnackbar('Successfully verified gift wallet', { variant: 'success' })
|
||||
navigate(ROUTES.TOP_UP_GIFT_CODE_FUND.replace(':privateKeyString', giftCode))
|
||||
} catch (error) {
|
||||
enqueueSnackbar(`Gift wallet could not be verified: ${error}`, { variant: 'error' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HistoryHeader>Top-up with gift code</HistoryHeader>
|
||||
<Box mb={4}>
|
||||
<ProgressIndicator index={0} steps={['Paste gift code', 'Fund your node']} />
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<Typography style={{ fontWeight: 'bold' }}>Please paste your gift code below</Typography>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
A gift code is a unique key to a gift wallet that you can use to fund your node. Please don't share your
|
||||
gift code as it can only be used once.
|
||||
</Box>
|
||||
<SwarmDivider mb={4} />
|
||||
<Box mb={2}>
|
||||
<SwarmTextInput
|
||||
label="Gift code"
|
||||
name="gift-code"
|
||||
onChange={event => {
|
||||
setGiftCode(event.target.value)
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<SwarmButton iconType={ArrowRight} loading={loading} disabled={loading} onClick={onProceed}>
|
||||
Proceed
|
||||
</SwarmButton>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useState } from 'react'
|
||||
import { ArrowDown, Check } from 'react-feather'
|
||||
import { useNavigate } from 'react-router'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { Loading } from '../../components/Loading'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SwarmDivider } from '../../components/SwarmDivider'
|
||||
import { SwarmTextInput } from '../../components/SwarmTextInput'
|
||||
import { BzzToken } from '../../models/BzzToken'
|
||||
import { DaiToken } from '../../models/DaiToken'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as TopUpContext } from '../../providers/TopUp'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { sleepMs } from '../../utils'
|
||||
import { performSwap, restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
|
||||
import { TopUpProgressIndicator } from './TopUpProgressIndicator'
|
||||
|
||||
interface Props {
|
||||
header: string
|
||||
}
|
||||
|
||||
export function Swap({ header }: Props): ReactElement {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [hasSwapped, setSwapped] = useState(false)
|
||||
|
||||
const { jsonRpcProvider } = useContext(TopUpContext)
|
||||
const { balance } = useContext(BeeContext)
|
||||
|
||||
const navigate = useNavigate()
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
if (!balance) {
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
const daiToSwap = balance.dai.minusBaseUnits('1')
|
||||
|
||||
const daiAfterSwap = new DaiToken(balance.dai.toBigNumber.minus(daiToSwap.toBigNumber))
|
||||
const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedToIntegerBy(200))
|
||||
|
||||
async function onSwap() {
|
||||
if (hasSwapped) {
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
setSwapped(true)
|
||||
try {
|
||||
await performSwap(daiToSwap.toString)
|
||||
enqueueSnackbar('Successfully swapped, restarting...', { variant: 'success' })
|
||||
await sleepMs(5_000)
|
||||
await upgradeToLightNode(jsonRpcProvider)
|
||||
await restartBeeNode()
|
||||
navigate(ROUTES.RESTART_LIGHT)
|
||||
enqueueSnackbar('Upgraded to light node', { variant: 'success' })
|
||||
} catch (error) {
|
||||
enqueueSnackbar(`Failed to swap: ${error}`, { variant: 'error' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HistoryHeader>{header}</HistoryHeader>
|
||||
<Box mb={4}>
|
||||
<TopUpProgressIndicator index={1} />
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<Typography style={{ fontWeight: 'bold' }}>Swap some xDAI to BZZ</Typography>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<Typography>
|
||||
You need to swap xDAI to BZZ in order to use Swarm. Make sure to keep at least 1 xDAI in order to pay for
|
||||
transaction costs on the network.
|
||||
</Typography>
|
||||
</Box>
|
||||
<SwarmDivider mb={4} />
|
||||
<Box mb={4}>
|
||||
<Typography>
|
||||
Your current balance is {balance.dai.toSignificantDigits(4)} xDAI and {balance.bzz.toSignificantDigits(4)}{' '}
|
||||
BZZ.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<SwarmTextInput
|
||||
label="Amount to swap"
|
||||
defaultValue={`${daiToSwap.toSignificantDigits(4)} XDAI`}
|
||||
name="x"
|
||||
onChange={() => false}
|
||||
/>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<ArrowDown size={24} color="#aaaaaa" />
|
||||
</Box>
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItemKey label="Funding wallet address" value={balance.address} expanded />
|
||||
</Box>
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItem
|
||||
label="Resulting XDAI balance after swap"
|
||||
value={`${daiAfterSwap.toSignificantDigits(4)} XDAI`}
|
||||
/>
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<ExpandableListItem
|
||||
label="Resulting BZZ balance after swap"
|
||||
value={`${bzzAfterSwap.toSignificantDigits(4)} BZZ`}
|
||||
/>
|
||||
</Box>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton
|
||||
iconType={Check}
|
||||
onClick={onSwap}
|
||||
disabled={hasSwapped || loading || balance.dai.toDecimal.lte(1)}
|
||||
loading={loading}
|
||||
>
|
||||
Swap Now
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { ReactElement } from 'react'
|
||||
import { ProgressIndicator } from '../../components/ProgressIndicator'
|
||||
|
||||
interface Props {
|
||||
index: number
|
||||
}
|
||||
|
||||
export function TopUpProgressIndicator({ index }: Props): ReactElement {
|
||||
return <ProgressIndicator index={index} steps={['Buy xDAI', 'Swap BZZ']} />
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { Box, Grid, Typography } from '@material-ui/core'
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import { Check } from 'react-feather'
|
||||
import { useNavigate } from 'react-router'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { Loading } from '../../components/Loading'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SwarmDivider } from '../../components/SwarmDivider'
|
||||
import { Context } from '../../providers/Bee'
|
||||
import { TopUpProgressIndicator } from './TopUpProgressIndicator'
|
||||
|
||||
interface Props {
|
||||
header: string
|
||||
title: string
|
||||
p: ReactElement
|
||||
next: string
|
||||
}
|
||||
|
||||
export default function Index({ header, title, p, next }: Props): ReactElement {
|
||||
const { nodeAddresses, balance } = useContext(Context)
|
||||
const navigate = useNavigate()
|
||||
|
||||
if (!balance || !nodeAddresses) {
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
const disabled = balance.dai.toDecimal.lte(1)
|
||||
|
||||
return (
|
||||
<>
|
||||
<HistoryHeader>{header}</HistoryHeader>
|
||||
<Box mb={4}>
|
||||
<TopUpProgressIndicator index={0} />
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<Typography style={{ fontWeight: 'bold' }}>{title}</Typography>
|
||||
</Box>
|
||||
<Box mb={4}>{p}</Box>
|
||||
<SwarmDivider mb={4} />
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItemKey label="Funding wallet address" value={balance.address} expanded />
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<ExpandableListItem label="xDAI balance" value={balance.dai.toSignificantDigits(4)} />
|
||||
</Box>
|
||||
<Grid container direction="row" justifyContent="space-between">
|
||||
<SwarmButton iconType={Check} onClick={() => navigate(next)} disabled={disabled}>
|
||||
Proceed
|
||||
</SwarmButton>
|
||||
{disabled ? <Typography>Please deposit xDAI to the address above in order to proceed.</Typography> : null}
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user