woggioni-opencode-agent/bee-dashboard
1
0
Fork 0
Code Actions Packages Releases Activity

feat: set default rpc endpoint (#485)

Browse Source 
* feat: add default RPC endpoint

* feat: removed setting RPC endpoint altogherher and altered the routes accordingly
This commit is contained in:
Vojtech Simetka
2022-07-22 10:55:19 +02:00
committed by GitHub
parent 318592653c
commit cba21bb2e0
15 changed files with 179 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/account/wallet/AccountWallet.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export function AccountWallet(): ReactElement {
}
function onDeposit() {
navigate(ROUTES.CONFIRMATION)
navigate(ROUTES.TOP_UP)
}
return (
src/pages/gift-code/index.tsx
-1
View File
@@ -29,7 +29,6 @@ export default function Index(): ReactElement {
useEffect(() => {
async function mapGiftWallets() {
if (!provider) return
const results = []
for (const giftWallet of giftWallets) {
results.push(await ResolvedWallet.make(giftWallet, provider))
src/pages/info/index.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export default function Status(): ReactElement {
buttonProps={{
iconType: Wallet,
children: 'Setup wallet',
onClick: () => navigate(ROUTES.WALLET),
onClick: () => navigate(ROUTES.TOP_UP),
}}
icon={<Upload />}
title="Your wallet is not setup."
src/pages/rpc/Confirmation.tsx
-120
View File
@@ -1,120 +0,0 @@
import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
import { ReactElement, useContext, useState } from 'react'
import Check from 'remixicon-react/CheckLineIcon'
import BankCard from 'remixicon-react/BankCard2LineIcon'
import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
import Gift from 'remixicon-react/GiftLineIcon'
import { useNavigate } from 'react-router'
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import { HistoryHeader } from '../../components/HistoryHeader'
import { SwarmButton } from '../../components/SwarmButton'
import { ROUTES } from '../../routes'
import { Context as BeeContext } from '../../providers/Bee'
import { Context as TopUpContext } from '../../providers/TopUp'
import { useIsBeeDesktop } from '../../hooks/apiHooks'
import { BeeModes } from '@ethersphere/bee-js'
import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
import { Loading } from '../../components/Loading'
import { useSnackbar } from 'notistack'
const useStyles = makeStyles(() =>
createStyles({
checkWrapper: {
background: 'rgba(0, 230, 118, 0.25)',
borderRadius: 99999,
width: '180px',
height: '180px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
}),
)
const MINIMUM_XDAI = '0.05'
const MINIMUM_XBZZ = '0.1'
export default function Confirmation(): ReactElement {
const navigate = useNavigate()
const styles = useStyles()
const { isBeeDesktop } = useIsBeeDesktop()
const { balance, nodeInfo } = useContext(BeeContext)
const { providerUrl } = useContext(TopUpContext)
const [loading, setLoading] = useState(false)
const { enqueueSnackbar } = useSnackbar()
const canUpgradeToLightNode =
isBeeDesktop &&
nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT &&
balance?.dai.toDecimal.gte(MINIMUM_XDAI) &&
balance?.bzz.toDecimal.gte(MINIMUM_XBZZ)
async function restart() {
if (!providerUrl) {
return
}
setLoading(true)
try {
await upgradeToLightNode(providerUrl)
await restartBeeNode()
enqueueSnackbar('Upgraded to light node', { variant: 'success' })
navigate(ROUTES.RESTART_LIGHT)
} catch (error) {
enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
}
setLoading(false)
}
if (!balance) {
return <Loading />
}
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&apos;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&apos;re not familiar with cryptocurrencies, you can start with a bank card.
</Typography>
</Box>
<ExpandableListItemActions>
<SwarmButton iconType={Gift} onClick={() => navigate(ROUTES.TOP_UP_GIFT_CODE)}>
Use a gift code
</SwarmButton>
<SwarmButton iconType={MoneyDollarCircle} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
Use DAI
</SwarmButton>
<SwarmButton iconType={BankCard} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
Get started with bank card
</SwarmButton>
</ExpandableListItemActions>
{canUpgradeToLightNode && (
<>
<Box mt={8} mb={2}>
<Typography align="center">
It seems that you have enough balance to upgrade your bee node to light node. By upgrading you will gain
access to file upload and faster downloads.
</Typography>
</Box>
<ExpandableListItemActions>
<SwarmButton iconType={Check} onClick={restart} disabled={loading} loading={loading}>
Upgrade now
</SwarmButton>
<div />
</ExpandableListItemActions>
</>
)}
</Grid>
</>
)
}
src/pages/rpc/index.tsx
-67
View File
@@ -1,67 +0,0 @@
import { Box, Typography } from '@material-ui/core'
import { useSnackbar } from 'notistack'
import { ReactElement, useContext, useState } from 'react'
import Check from 'remixicon-react/CheckLineIcon'
import { useNavigate } from 'react-router'
import { providers } from 'ethers'
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 { providerUrl, setProviderUrl } = useContext(Context)
const [localProviderUrl, setLocalProviderUrl] = useState(providerUrl)
const { enqueueSnackbar } = useSnackbar()
const navigate = useNavigate()
async function onSubmit() {
if (!localProviderUrl) return
try {
await Rpc.eth_getBlockByNumber(new providers.JsonRpcProvider(localProviderUrl))
enqueueSnackbar('Connected to RPC provider successfully.', { variant: 'success' })
setProviderUrl(localProviderUrl)
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&apos;ll need to connect to a publicly-provided node
via the node&apos;s RPC endpoint. If you&apos;re not familiar with this, please read{' '}
<a
href="https://medium.com/ethereum-swarm/upgrading-swarm-deskotp-app-beta-from-an-ultra-light-to-a-light-node-65d52cab7f2c"
target="_blank"
rel="noreferrer"
>
this guide
</a>
.
</Typography>
</Box>
<Box mb={2}>
<SwarmTextInput
name="rpc-endpoint"
label="RPC Endpoint"
onChange={event => setLocalProviderUrl(event.target.value)}
defaultValue={providerUrl || ''}
/>
</Box>
<SwarmButton iconType={Check} onClick={onSubmit}>
Connect
</SwarmButton>
</>
)
}
src/pages/top-up/Balance.tsx
+60
View File
@@ -0,0 +1,60 @@
import { Box, Grid, Typography } from '@material-ui/core'
import { ReactElement, useContext } from 'react'
import { useNavigate } from 'react-router'
import Check from 'remixicon-react/CheckLineIcon'
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'
const MINIMUM_XDAI = '0.5'
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.lt(MINIMUM_XDAI)
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={nodeAddresses.ethereum} 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 at least {MINIMUM_XDAI} xDAI to the address above in order to proceed.</Typography>
) : null}
</Grid>
</>
)
}
src/pages/top-up/BankCardTopUpIndex.tsx
+2 -2
View File
@@ -1,11 +1,11 @@
import { Typography } from '@material-ui/core'
import { ReactElement } from 'react'
import Index from '.'
import Balance from './Balance'
import { ROUTES } from '../../routes'
export function BankCardTopUpIndex(): ReactElement {
return (
<Index
<Balance
header={'Top-up with bank card'}
title={'Use a bank card to buy xDAI to the funding wallet address below'}
p={
src/pages/top-up/CryptoTopUpIndex.tsx
+2 -2
View File
@@ -1,11 +1,11 @@
import { Typography } from '@material-ui/core'
import { ReactElement } from 'react'
import Index from '.'
import Balance from './Balance'
import { ROUTES } from '../../routes'
export function CryptoTopUpIndex(): ReactElement {
return (
<Index
<Balance
header={'Top-up with cryptocurrencies'}
title={'Send xDAI to the funding wallet below'}
p={
src/pages/top-up/GiftCardFund.tsx
-4
View File
@@ -48,10 +48,6 @@ export function GiftCardFund(): ReactElement {
const canUpgradeToLightNode = isBeeDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
async function restart() {
if (!providerUrl) {
return
}
try {
await sleepMs(5_000)
await upgradeToLightNode(providerUrl)
src/pages/top-up/Swap.tsx
+1 -5
View File
@@ -78,10 +78,6 @@ export function Swap({ header }: Props): ReactElement {
const canUpgradeToLightNode = isBeeDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
async function restart() {
if (!providerUrl) {
return
}
try {
await sleepMs(5_000)
await upgradeToLightNode(providerUrl)
@@ -94,7 +90,7 @@ export function Swap({ header }: Props): ReactElement {
}
async function onSwap() {
if (hasSwapped || !providerUrl) {
if (hasSwapped) {
return
}
setLoading(true)
src/pages/top-up/index.tsx
+101 -43
View File
@@ -1,59 +1,117 @@
import { Box, Grid, Typography } from '@material-ui/core'
import { ReactElement, useContext } from 'react'
import { useNavigate } from 'react-router'
import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
import { ReactElement, useContext, useState } from 'react'
import Check from 'remixicon-react/CheckLineIcon'
import ExpandableListItem from '../../components/ExpandableListItem'
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
import Download from 'remixicon-react/DownloadLineIcon'
import BankCard from 'remixicon-react/BankCard2LineIcon'
import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
import Gift from 'remixicon-react/GiftLineIcon'
import { useNavigate } from 'react-router'
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
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'
import { ROUTES } from '../../routes'
import { Context as BeeContext } from '../../providers/Bee'
import { Context as TopUpContext } from '../../providers/TopUp'
import { useIsBeeDesktop } from '../../hooks/apiHooks'
import { BeeModes } from '@ethersphere/bee-js'
import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
import { Loading } from '../../components/Loading'
import { useSnackbar } from 'notistack'
const MINIMUM_XDAI = '0.5'
const useStyles = makeStyles(() =>
createStyles({
checkWrapper: {
background: 'rgba(0, 230, 118, 0.25)',
borderRadius: 99999,
width: '180px',
height: '180px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
}),
)
interface Props {
header: string
title: string
p: ReactElement
next: string
}
const MINIMUM_XDAI = '0.05'
const MINIMUM_XBZZ = '0.1'
export default function Index({ header, title, p, next }: Props): ReactElement {
const { nodeAddresses, balance } = useContext(Context)
export default function TopUp(): ReactElement {
const navigate = useNavigate()
const styles = useStyles()
const { isBeeDesktop } = useIsBeeDesktop()
const { balance, nodeInfo } = useContext(BeeContext)
const { providerUrl } = useContext(TopUpContext)
const [loading, setLoading] = useState(false)
const { enqueueSnackbar } = useSnackbar()
if (!balance || !nodeAddresses) {
const canUpgradeToLightNode =
isBeeDesktop &&
nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT &&
balance?.dai.toDecimal.gte(MINIMUM_XDAI) &&
balance?.bzz.toDecimal.gte(MINIMUM_XBZZ)
async function restart() {
setLoading(true)
try {
await upgradeToLightNode(providerUrl)
await restartBeeNode()
enqueueSnackbar('Upgraded to light node', { variant: 'success' })
navigate(ROUTES.RESTART_LIGHT)
} catch (error) {
enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
}
setLoading(false)
}
if (!balance) {
return <Loading />
}
const disabled = balance.dai.toDecimal.lt(MINIMUM_XDAI)
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={nodeAddresses.ethereum} 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 at least {MINIMUM_XDAI} xDAI to the address above in order to proceed.</Typography>
) : null}
<HistoryHeader>Account</HistoryHeader>
<Grid container direction="column" alignItems="center">
<Box mb={6}>
<div className={styles.checkWrapper}>
<Download size={100} color="#ededed" />
</div>
</Box>
<Box mb={1}>
<Typography style={{ fontWeight: 'bold' }}>Transfer funds to your Swarm account</Typography>
</Box>
<Box mb={4}>
<Typography align="center">Top up your account with xBZZ and xDAI.</Typography>
<Typography align="center">
If you&apos;re not familiar with cryptocurrencies, you can start with a bank card.
</Typography>
</Box>
<ExpandableListItemActions>
<SwarmButton iconType={Gift} onClick={() => navigate(ROUTES.TOP_UP_GIFT_CODE)}>
Use a gift code
</SwarmButton>
<SwarmButton iconType={MoneyDollarCircle} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
Use xDAI
</SwarmButton>
<SwarmButton iconType={BankCard} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
Get started with bank card
</SwarmButton>
</ExpandableListItemActions>
{canUpgradeToLightNode && (
<>
<Box mt={8} mb={2}>
<Typography align="center">
It seems that you have enough balance to upgrade your bee node to light node. By upgrading you will gain
access to file upload and faster downloads.
</Typography>
</Box>
<ExpandableListItemActions>
<SwarmButton iconType={Check} onClick={restart} disabled={loading} loading={loading}>
Upgrade now
</SwarmButton>
<div />
</ExpandableListItemActions>
</>
)}
</Grid>
</>
)