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/components/SideBar.tsx
+1 -3
View File
@@ -9,7 +9,6 @@ import HomeIcon from 'remixicon-react/Home3LineIcon'
import SettingsIcon from 'remixicon-react/Settings2LineIcon'
import AccountIcon from 'remixicon-react/Wallet3LineIcon'
import { Context as BeeContext } from '../providers/Bee'
import { Context as TopUpContext } from '../providers/TopUp'
import DashboardLogo from '../assets/dashboard-logo.svg'
import DesktopLogo from '../assets/desktop-logo.svg'
import { config } from '../config'
@@ -69,7 +68,6 @@ const useStyles = makeStyles((theme: Theme) =>
export default function SideBar(): ReactElement {
const classes = useStyles()
const { isBeeDesktop } = useIsBeeDesktop()
const { providerUrl } = useContext(TopUpContext)
const { nodeInfo } = useContext(BeeContext)
const navBarItems = [
@@ -86,7 +84,7 @@ export default function SideBar(): ReactElement {
},
{
label: 'Account',
path: providerUrl === null ? ROUTES.WALLET : ROUTES.ACCOUNT_WALLET,
path: ROUTES.ACCOUNT_WALLET,
icon: AccountIcon,
pathMatcherSubstring: '/account/',
},
src/config.ts
+2
View File
@@ -8,6 +8,7 @@ class Config {
public readonly BEE_DESKTOP_URL: string
public readonly SENTRY_KEY: string | undefined
public readonly SENTRY_ENVIRONMENT: string | undefined
public readonly DEFAULT_RPC_URL: string
constructor() {
this.BEE_API_HOST = sessionStorage.getItem('api_host') ?? process.env.REACT_APP_BEE_HOST ?? 'http://localhost:1633'
@@ -21,6 +22,7 @@ class Config {
this.BEE_DISCORD_HOST = process.env.REACT_APP_BEE_DISCORD_HOST ?? 'https://discord.gg/eKr9XPv7'
this.GITHUB_REPO_URL = process.env.REACT_APP_BEE_GITHUB_REPO_URL ?? 'https://api.github.com/repos/ethersphere/bee'
this.BEE_DESKTOP_URL = process.env.REACT_APP_BEE_DESKTOP_URL ?? window.location.origin
this.DEFAULT_RPC_URL = process.env.REACT_APP_DEFAULT_RPC_URL ?? 'https://xdai.fairdatasociety.org'
}
}
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>
</>
)
src/providers/TopUp.tsx
+5 -4
View File
@@ -1,5 +1,6 @@
import { providers, Wallet } from 'ethers'
import { createContext, ReactElement, useEffect, useState } from 'react'
import config from '../config'
import { setJsonRpcInDesktop } from '../utils/desktop'
const LocalStorageKeys = {
@@ -10,18 +11,18 @@ const LocalStorageKeys = {
}
interface ContextInterface {
providerUrl: string | null
provider: providers.JsonRpcProvider | null
providerUrl: string
provider: providers.JsonRpcProvider
giftWallets: Wallet[]
setProviderUrl: (providerUrl: string) => void
addGiftWallet: (wallet: Wallet) => void
}
const providerUrl = localStorage.getItem('json-rpc-provider') || null
const providerUrl = localStorage.getItem('json-rpc-provider') || config.DEFAULT_RPC_URL
const initialValues: ContextInterface = {
providerUrl,
provider: providerUrl ? new providers.JsonRpcProvider(providerUrl) : null,
provider: new providers.JsonRpcProvider(providerUrl),
giftWallets: [],
setProviderUrl: () => {}, // eslint-disable-line
addGiftWallet: () => {}, // eslint-disable-line
src/routes.tsx
+3 -6
View File
@@ -14,8 +14,7 @@ import { UploadLander } from './pages/files/UploadLander'
import GiftCards from './pages/gift-code'
import Info from './pages/info'
import LightModeRestart from './pages/restart/LightModeRestart'
import Wallet from './pages/rpc'
import Confirmation from './pages/rpc/Confirmation'
import TopUp from './pages/top-up'
import Settings from './pages/settings'
import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampPage'
import Status from './pages/status'
@@ -34,8 +33,7 @@ export enum ROUTES {
HASH = '/files/hash/:hash',
SETTINGS = '/settings',
STATUS = '/status',
WALLET = '/account/wallet/top-up',
CONFIRMATION = '/account/wallet/top-up/confirmation',
TOP_UP = '/account/wallet/top-up',
TOP_UP_CRYPTO = '/account/wallet/top-up/crypto',
TOP_UP_CRYPTO_SWAP = '/account/wallet/top-up/crypto/swap',
TOP_UP_BANK_CARD = '/account/wallet/top-up/bank-card',
@@ -70,8 +68,7 @@ const BaseRouter = (): ReactElement => (
<Route path={ROUTES.SETTINGS} element={<Settings />} />
<Route path={ROUTES.STATUS} element={<Status />} />
<Route path={ROUTES.INFO} element={<Info />} />
<Route path={ROUTES.WALLET} element={<Wallet />} />
<Route path={ROUTES.CONFIRMATION} element={<Confirmation />} />
<Route path={ROUTES.TOP_UP} element={<TopUp />} />
<Route path={ROUTES.TOP_UP_CRYPTO} element={<CryptoTopUpIndex />} />
<Route path={ROUTES.TOP_UP_CRYPTO_SWAP} element={<Swap header="Top-up with cryptocurrencies" />} />
<Route path={ROUTES.TOP_UP_BANK_CARD} element={<BankCardTopUpIndex />} />