Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 bee-worker
|
ac500543ec | ||
 Vojtech Simetka
|
ee864bdbe9 | ||
 Cafe137
|
36fc4bfe98 | ||
|
Vojtech Simetka
|
127d44fd7a | ||
 Adam Uhlíř
|
b3028d7893 | ||
|
Vojtech Simetka
|
2be9735e0c | ||
|
Cafe137
|
0f0d72e7c5 | ||
|
Adam Uhlíř
|
e9666639b2 | ||
|
Vojtech Simetka
|
f38e8e11d6 | ||
|
Vojtech Simetka
|
80d684c1e5 | ||
|
Vojtech Simetka
|
caea5ae309 | ||
|
Cafe137
|
41432bc346 | ||
|
Adam Uhlíř
|
199516d60c | ||
|
Adam Uhlíř
|
2b58b30122 | ||
|
Adam Uhlíř
|
109e07b097 | ||
|
Adam Uhlíř
|
2edf99c323 |
+13
-13
@@ -1,19 +1,19 @@
|
||||
{
|
||||
"ignores": [
|
||||
"@types/jest",
|
||||
"@commitlint/config-conventional",
|
||||
"@types/react-router",
|
||||
"@babel/core",
|
||||
"@babel/plugin-proposal-class-properties",
|
||||
"@babel/plugin-transform-runtime",
|
||||
"@babel/preset-env",
|
||||
"@babel/preset-react",
|
||||
"@babel/preset-typescript",
|
||||
"babel-loader",
|
||||
"babel-plugin-syntax-dynamic-import",
|
||||
"babel-plugin-tsconfig-paths",
|
||||
"@testing-library/react",
|
||||
"@types/*",
|
||||
"@commitlint/config-conventional",
|
||||
"@babel/*",
|
||||
"babel*",
|
||||
"eslint*",
|
||||
"file-loader",
|
||||
"ts-node",
|
||||
"webpack-cli"
|
||||
"webpack-cli",
|
||||
"assert",
|
||||
"buffer",
|
||||
"crypto*",
|
||||
"stream*",
|
||||
"env-paths",
|
||||
"open"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -23,7 +23,6 @@
|
||||
"sourceType": "module",
|
||||
"ecmaVersion": 2018
|
||||
},
|
||||
"plugins": ["jest"],
|
||||
"rules": {
|
||||
"array-bracket-newline": ["error", "consistent"],
|
||||
"strict": ["error", "safe"],
|
||||
|
||||
@@ -14,12 +14,14 @@ jobs:
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [14.x]
|
||||
node-version: [18.x]
|
||||
|
||||
env:
|
||||
REACT_APP_BEE_HOST: https://api.test-node.staging.ethswarm.org/
|
||||
REACT_APP_BEE_DEBUG_HOST: https://debug.test-node.staging.ethswarm.org/
|
||||
REACT_APP_DEV_MODE: 1
|
||||
REACT_APP_SENTRY_KEY: ${{ secrets.SENTRY_KEY }}
|
||||
REACT_APP_SENTRY_ENVIRONMENT: 'preview'
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
@@ -12,7 +12,7 @@ jobs:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
node-version: 18
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
- run: npm ci
|
||||
- run: npm run compile:types
|
||||
@@ -20,3 +20,11 @@ jobs:
|
||||
- run: npm publish --access public
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
|
||||
- name: Create Sentry release
|
||||
uses: getsentry/action-release@v1
|
||||
env:
|
||||
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
|
||||
SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
|
||||
SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
|
||||
with:
|
||||
sourcemaps: ./build/static/js
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
# After new release is published on github, publish it to npmjs
|
||||
name: Publish the project to Github Pages
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
release:
|
||||
types: [published]
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 18
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
- run: npm ci
|
||||
- run: npm run build
|
||||
env:
|
||||
REACT_APP_SENTRY_KEY: ${{ secrets.SENTRY_KEY }}
|
||||
REACT_APP_SENTRY_ENVIRONMENT: 'pages'
|
||||
- run: echo "dashboard.ethswarm.org" > ./build/CNAME
|
||||
- name: Deploy to gh-pages
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./build
|
||||
@@ -14,7 +14,7 @@ jobs:
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [14.x]
|
||||
node-version: [18.x]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
@@ -1,5 +1,28 @@
|
||||
# Changelog
|
||||
|
||||
## [0.17.0](https://github.com/ethersphere/bee-dashboard/compare/v0.16.0...v0.17.0) (2022-06-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add account tabs ([#378](https://github.com/ethersphere/bee-dashboard/issues/378)) ([41432bc](https://github.com/ethersphere/bee-dashboard/commit/41432bc346b1b89f87489a0b38a5383b834edd62))
|
||||
* add map with peers to info page ([#398](https://github.com/ethersphere/bee-dashboard/issues/398)) ([2be9735](https://github.com/ethersphere/bee-dashboard/commit/2be9735e0c98f066afbd8c1fda27c8365b80f489))
|
||||
* gh pages deployment ([#389](https://github.com/ethersphere/bee-dashboard/issues/389)) ([2b58b30](https://github.com/ethersphere/bee-dashboard/commit/2b58b301225dba5809f0afb3849f97007123c61a))
|
||||
* improve stamp selector ([#400](https://github.com/ethersphere/bee-dashboard/issues/400)) ([0f0d72e](https://github.com/ethersphere/bee-dashboard/commit/0f0d72e7c5848559962b3020575d1b5f2d18a60e))
|
||||
* info page redesign ([#390](https://github.com/ethersphere/bee-dashboard/issues/390)) ([caea5ae](https://github.com/ethersphere/bee-dashboard/commit/caea5ae309028fef12c5cd036dcd1d264dd451e6))
|
||||
* sentry feedback form ([#388](https://github.com/ethersphere/bee-dashboard/issues/388)) ([b3028d7](https://github.com/ethersphere/bee-dashboard/commit/b3028d7893790010e417ccf091b7eb4981ed21d6))
|
||||
* sentry integration ([#385](https://github.com/ethersphere/bee-dashboard/issues/385)) ([109e07b](https://github.com/ethersphere/bee-dashboard/commit/109e07b0972309b9260db2e26a643be8562a9386))
|
||||
* sentry proxy ([#399](https://github.com/ethersphere/bee-dashboard/issues/399)) ([e966663](https://github.com/ethersphere/bee-dashboard/commit/e9666639b2df3b1586121df61a7eda24bc57766d))
|
||||
* update logo ([#401](https://github.com/ethersphere/bee-dashboard/issues/401)) ([36fc4bf](https://github.com/ethersphere/bee-dashboard/commit/36fc4bfe982b03589478acb36e5bb6ec5aff9b44))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* all wallet flows to use ethers ([#395](https://github.com/ethersphere/bee-dashboard/issues/395)) ([80d684c](https://github.com/ethersphere/bee-dashboard/commit/80d684c1e5c74b3bdae6eca974ed3a0b7408be93))
|
||||
* change color of pins and show population instead of depth ([#402](https://github.com/ethersphere/bee-dashboard/issues/402)) ([127d44f](https://github.com/ethersphere/bee-dashboard/commit/127d44fd7ac763fd78d1eab99f10f952ba6bb1b6))
|
||||
* download preview ([#397](https://github.com/ethersphere/bee-dashboard/issues/397)) ([f38e8e1](https://github.com/ethersphere/bee-dashboard/commit/f38e8e11d6814e5246b0a7a25e32a009581a76a9))
|
||||
* map size in safari ([#404](https://github.com/ethersphere/bee-dashboard/issues/404)) ([ee864bd](https://github.com/ethersphere/bee-dashboard/commit/ee864bdbe9029184cc905f36af08fdea9431b4a8))
|
||||
|
||||
## [0.16.0](https://github.com/ethersphere/bee-dashboard/compare/v0.15.0...v0.16.0) (2022-06-02)
|
||||
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
[](https://github.com/RichardLitt/standard-readme)
|
||||
[](https://github.com/feross/standard)
|
||||
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_shield)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> An app which helps users to setup their Bee node and do actions like cash out cheques, upload and download files or
|
||||
> manage your postage stamps.
|
||||
@@ -96,6 +96,16 @@ The Bee Dashboard runs in development mode on [http://localhost:3031/](http://lo
|
||||
|
||||
> Setting the `REACT_APP_DEV_MODE=1` environment variable, or opening Bee Dashboard with the query string `?devMode=1` loosens some checks. This makes it possible to develop Bee Dashboard without having connected peers and chequebook properly set up, effectively supporting the dev mode of Bee itself.
|
||||
|
||||
#### Bee Desktop development
|
||||
|
||||
If you want to develop Bee Dashboard in the Bee Desktop mode, then spin up `bee-desktop` to the point where you see Bee Dashboard (eq. install Bee etc.) and:
|
||||
|
||||
```sh
|
||||
echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3000" > .env.development.local
|
||||
npm start
|
||||
npm run desktop # This will inject the API key to the Dashboard
|
||||
```
|
||||
|
||||
## Contribute
|
||||
|
||||
There are some ways you can make this module better:
|
||||
@@ -117,4 +127,4 @@ See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintaine
|
||||
[BSD-3-Clause](./LICENSE)
|
||||
|
||||
|
||||
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)
|
||||
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)
|
||||
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
import envPaths from 'env-paths'
|
||||
import open from 'open'
|
||||
|
||||
import { readFile } from 'node:fs/promises'
|
||||
import { join } from 'node:path'
|
||||
|
||||
const paths = envPaths('bee-desktop')
|
||||
const apiKey = await readFile(join(paths.data, 'api-key.txt'), {encoding: 'utf-8'})
|
||||
const url = `http://localhost:3001/?v=${apiKey}#/`
|
||||
|
||||
console.log('Opening: ' + url)
|
||||
await open(url)
|
||||
Generated
+9497
-26194
File diff suppressed because it is too large
Load Diff
+35
-23
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ethersphere/bee-dashboard",
|
||||
"version": "0.16.0",
|
||||
"version": "0.17.0",
|
||||
"description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
|
||||
"keywords": [
|
||||
"bee",
|
||||
@@ -27,14 +27,20 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ethersphere/bee-js": "^4.1.1",
|
||||
"@ethersphere/manifest-js": "1.1.0",
|
||||
"@ethersphere/manifest-js": "1.2.1",
|
||||
"@ethersphere/swarm-cid": "^0.1.0",
|
||||
"@material-ui/core": "4.12.3",
|
||||
"@material-ui/icons": "4.11.2",
|
||||
"@material-ui/lab": "4.0.0-alpha.57",
|
||||
"@sentry/react": "^7.1.1",
|
||||
"@sentry/tracing": "^7.1.1",
|
||||
"assert": "^2.0.0",
|
||||
"axios": "0.24.0",
|
||||
"bignumber.js": "9.0.1",
|
||||
"ethereumjs-wallet": "^1.0.2",
|
||||
"buffer": "^6.0.3",
|
||||
"crypto": "npm:crypto-browserify",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"dotted-map": "^2.2.3",
|
||||
"ethers": "^5.6.4",
|
||||
"file-saver": "^2.0.5",
|
||||
"formik": "2.2.9",
|
||||
@@ -53,7 +59,9 @@
|
||||
"react-router-dom": "6.2.1",
|
||||
"react-syntax-highlighter": "15.4.4",
|
||||
"semver": "7.3.5",
|
||||
"serve-handler": "6.1.3"
|
||||
"serve-handler": "6.1.3",
|
||||
"stream": "npm:stream-browserify",
|
||||
"stream-browserify": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.16.0",
|
||||
@@ -78,34 +86,36 @@
|
||||
"@types/react-router-dom": "5.3.2",
|
||||
"@types/react-syntax-highlighter": "13.5.2",
|
||||
"@types/semver": "7.3.9",
|
||||
"@typescript-eslint/eslint-plugin": "4.33.0",
|
||||
"@typescript-eslint/parser": "4.33.0",
|
||||
"@typescript-eslint/eslint-plugin": "5.28.0",
|
||||
"@typescript-eslint/parser": "5.28.0",
|
||||
"babel-eslint": "10.1.0",
|
||||
"babel-loader": "8.1.0",
|
||||
"babel-plugin-syntax-dynamic-import": "6.18.0",
|
||||
"babel-plugin-tsconfig-paths": "1.0.2",
|
||||
"cors": "^2.8.5",
|
||||
"depcheck": "^1.4.3",
|
||||
"eslint": "7.24.0",
|
||||
"env-paths": "^3.0.0",
|
||||
"eslint": "8.17.0 ",
|
||||
"eslint-config-prettier": "8.5.0",
|
||||
"eslint-config-react-app": "6.0.0",
|
||||
"eslint-plugin-flowtype": "5.10.0",
|
||||
"eslint-plugin-import": "2.25.2",
|
||||
"eslint-plugin-jest": "24.3.5",
|
||||
"eslint-plugin-jsx-a11y": "6.4.1",
|
||||
"eslint-plugin-prettier": "3.4.0",
|
||||
"eslint-plugin-react": "7.23.2",
|
||||
"eslint-plugin-react-hooks": "4.2.0",
|
||||
"eslint-plugin-testing-library": "3.10.2",
|
||||
"eslint-config-react-app": "7.0.1",
|
||||
"eslint-plugin-flowtype": "8.0.3",
|
||||
"eslint-plugin-import": "2.26.0",
|
||||
"eslint-plugin-jest": "26.5.3",
|
||||
"eslint-plugin-jsx-a11y": "6.5.1",
|
||||
"eslint-plugin-prettier": "4.0.0",
|
||||
"eslint-plugin-react": "7.30.0",
|
||||
"eslint-plugin-react-hooks": "4.5.0",
|
||||
"eslint-plugin-testing-library": "5.5.1",
|
||||
"express": "^4.17.3",
|
||||
"file-loader": "6.2.0",
|
||||
"open": "^8.4.0",
|
||||
"prettier": "2.4.1",
|
||||
"react-scripts": "4.0.3",
|
||||
"ts-node": "^10.7.0",
|
||||
"typescript": "4.4.4",
|
||||
"react-scripts": "^5.0.1",
|
||||
"ts-node": "^10.8.1",
|
||||
"typescript": "4.7.3",
|
||||
"web-vitals": "2.1.2",
|
||||
"webpack": "4.44.2",
|
||||
"webpack-cli": "^4.9.1"
|
||||
"webpack": "^5.73.0",
|
||||
"webpack-cli": "^4.10.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 17.0.2",
|
||||
@@ -114,6 +124,7 @@
|
||||
"scripts": {
|
||||
"prepare": "npm run build",
|
||||
"start": "react-scripts start",
|
||||
"desktop": "node ./desktop.mjs",
|
||||
"build": "react-scripts build",
|
||||
"build:component": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' webpack --mode=production",
|
||||
"compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
|
||||
@@ -122,7 +133,8 @@
|
||||
"depcheck": "depcheck .",
|
||||
"lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
|
||||
"lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
|
||||
"check:types": "tsc --project tsconfig.lib.json"
|
||||
"check:types": "tsc --project tsconfig.lib.json",
|
||||
"update-map-data": "node ./utils/update-map-data.js"
|
||||
},
|
||||
"files": [
|
||||
"lib",
|
||||
@@ -143,7 +155,7 @@
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0",
|
||||
"npm": ">=6.0.0",
|
||||
"npm": ">=6.9.0",
|
||||
"bee": ">=0.6.0"
|
||||
}
|
||||
}
|
||||
|
||||
+11
-46
@@ -1,63 +1,28 @@
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
font-family: 'iAWriterQuattroV';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url(assets/fonts/WorkSans/WorkSans-Light.ttf) format('truetype');
|
||||
src: url(assets/fonts/iAWriterQuattroV.ttf) format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
font-family: 'iAWriterMonoV';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(assets/fonts/WorkSans/WorkSans-Regular.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(assets/fonts/WorkSans/WorkSans-Medium.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(assets/fonts/WorkSans/WorkSans-SemiBold.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'IBMPlexMono500';
|
||||
src: url(assets/fonts/IBMPlexMono500.ttf) format('truetype');
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'IBMPlexMono600';
|
||||
src: url(assets/fonts/IBMPlexMono600.ttf) format('truetype');
|
||||
font-weight: 600;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'IBMPlexMonoregular';
|
||||
src: url(assets/fonts/IBMPlexMonoregular.ttf) format('truetype');
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'WorkSans-Italic-VariableFont_wght';
|
||||
src: url(assets/fonts/WorkSans-Italic-VariableFont_wght.ttf) format('truetype');
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'WorkSans-VariableFont_wght';
|
||||
src: url(assets/fonts/WorkSans-VariableFont_wght.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(assets/fonts/iAWriterMonoV.ttf) format('truetype');
|
||||
}
|
||||
|
||||
.App {
|
||||
font-family: 'Work Sans', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
|
||||
font-family: 'iAWriterQuattroV', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
font-family: 'IBMPlexMono500' !important;
|
||||
font-family: 'iAWriterMonoV' !important;
|
||||
color: #dd7700;
|
||||
}
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
import { render } from '@testing-library/react'
|
||||
import App from './App'
|
||||
|
||||
// Mocks methods that are not implemented in JSDOM
|
||||
// see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: jest.fn().mockImplementation(query => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: jest.fn(), // deprecated
|
||||
removeListener: jest.fn(), // deprecated
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
dispatchEvent: jest.fn(),
|
||||
})),
|
||||
})
|
||||
|
||||
// TODO: this is not a good test and should be removed. Keeping it in to make sure the whole app renders (to be used in CI)
|
||||
test('should render the app', () => {
|
||||
render(<App />)
|
||||
})
|
||||
+55
-30
@@ -3,6 +3,7 @@ import { ThemeProvider } from '@material-ui/core/styles'
|
||||
import { SnackbarProvider } from 'notistack'
|
||||
import React, { ReactElement } from 'react'
|
||||
import { HashRouter as Router } from 'react-router-dom'
|
||||
import * as Sentry from '@sentry/react'
|
||||
import './App.css'
|
||||
import Dashboard from './layout/Dashboard'
|
||||
import { Provider as BeeProvider } from './providers/Bee'
|
||||
@@ -14,6 +15,9 @@ import { Provider as StampsProvider } from './providers/Stamps'
|
||||
import { Provider as TopUpProvider } from './providers/TopUp'
|
||||
import BaseRouter from './routes'
|
||||
import { theme } from './theme'
|
||||
import { config } from './config'
|
||||
import ItsBroken from './layout/ItsBroken'
|
||||
import { initSentry } from './utils/sentry'
|
||||
|
||||
interface Props {
|
||||
beeApiUrl?: string
|
||||
@@ -21,35 +25,56 @@ interface Props {
|
||||
lockedApiSettings?: boolean
|
||||
}
|
||||
|
||||
const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => (
|
||||
<div className="App">
|
||||
<ThemeProvider theme={theme}>
|
||||
<SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
|
||||
<BeeProvider>
|
||||
<StampsProvider>
|
||||
<FileProvider>
|
||||
<FeedsProvider>
|
||||
<PlatformProvider>
|
||||
<TopUpProvider>
|
||||
<SnackbarProvider>
|
||||
<Router>
|
||||
<>
|
||||
<CssBaseline />
|
||||
<Dashboard>
|
||||
<BaseRouter />
|
||||
</Dashboard>
|
||||
</>
|
||||
</Router>
|
||||
</SnackbarProvider>
|
||||
</TopUpProvider>
|
||||
</PlatformProvider>
|
||||
</FeedsProvider>
|
||||
</FileProvider>
|
||||
</StampsProvider>
|
||||
</BeeProvider>
|
||||
</SettingsProvider>
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
)
|
||||
if (config.SENTRY_KEY) {
|
||||
// eslint-disable-next-line no-console
|
||||
initSentry().catch(e => console.error(e))
|
||||
}
|
||||
|
||||
const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => {
|
||||
const mainApp = (
|
||||
<div className="App">
|
||||
<ThemeProvider theme={theme}>
|
||||
<SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
|
||||
<TopUpProvider>
|
||||
<BeeProvider>
|
||||
<StampsProvider>
|
||||
<FileProvider>
|
||||
<FeedsProvider>
|
||||
<PlatformProvider>
|
||||
<SnackbarProvider>
|
||||
<Router>
|
||||
<>
|
||||
<CssBaseline />
|
||||
<Dashboard>
|
||||
<BaseRouter />
|
||||
</Dashboard>
|
||||
</>
|
||||
</Router>
|
||||
</SnackbarProvider>
|
||||
</PlatformProvider>
|
||||
</FeedsProvider>
|
||||
</FileProvider>
|
||||
</StampsProvider>
|
||||
</BeeProvider>
|
||||
</TopUpProvider>
|
||||
</SettingsProvider>
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
)
|
||||
|
||||
// Displays Report Dialog when some component crashes
|
||||
if (config.SENTRY_KEY) {
|
||||
return (
|
||||
<Sentry.ErrorBoundary
|
||||
showDialog
|
||||
fallback={({ error, componentStack, resetError }) => <ItsBroken message={error.message} />}
|
||||
>
|
||||
{mainApp}
|
||||
</Sentry.ErrorBoundary>
|
||||
)
|
||||
}
|
||||
|
||||
return mainApp
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,77 @@
|
||||
import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
import { AlertCircle, Check } from 'react-feather'
|
||||
import { SwarmButton, SwarmButtonProps } from './SwarmButton'
|
||||
|
||||
interface Props {
|
||||
icon: ReactElement
|
||||
title: string
|
||||
subtitle: string
|
||||
buttonProps: SwarmButtonProps
|
||||
status: 'ok' | 'error'
|
||||
}
|
||||
|
||||
const useStyles = (backgroundColor: string) =>
|
||||
makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
flexGrow: 1,
|
||||
flexBasis: '100px',
|
||||
},
|
||||
wrapper: {
|
||||
backgroundColor,
|
||||
padding: '16px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
},
|
||||
iconWrapper: {
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: '18px',
|
||||
},
|
||||
button: {
|
||||
width: '100%',
|
||||
marginTop: '2px',
|
||||
backgroundColor,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: 'white',
|
||||
boxShadow: 'none',
|
||||
// https://github.com/mui-org/material-ui/issues/22543
|
||||
'@media (hover: none)': {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: 'white',
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
export default function Card({ buttonProps, icon, title, subtitle, status }: Props): ReactElement {
|
||||
const backgroundColor = status === 'error' ? 'white' : '#f3f3f3'
|
||||
const { className, ...rest } = buttonProps
|
||||
const classes = useStyles(backgroundColor)()
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.iconWrapper}>
|
||||
{icon}
|
||||
{status === 'ok' ? (
|
||||
<Check size="13" stroke="#09ca6c" />
|
||||
) : (
|
||||
<AlertCircle size="13" fill="#f44336" stroke="white" />
|
||||
)}
|
||||
</div>
|
||||
<Typography variant="h2" style={{ marginBottom: '8px' }}>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography variant="caption">{subtitle}</Typography>
|
||||
</div>
|
||||
<SwarmButton className={[classes.button, className].join(' ')} {...rest} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Component, ErrorInfo, ReactElement } from 'react'
|
||||
import ItsBroken from '../layout/ItsBroken'
|
||||
|
||||
interface Props {
|
||||
children: ReactElement
|
||||
@@ -26,8 +27,7 @@ export default class ErrorBoundary extends Component<Props, State> {
|
||||
|
||||
render(): ReactElement {
|
||||
if (this.state.error) {
|
||||
// You can render any custom fallback UI
|
||||
return <h1>Something went wrong. Error: {this.state.error.message}</h1>
|
||||
return <ItsBroken message={this.state.error.message} />
|
||||
}
|
||||
|
||||
return this.props.children
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
import { ReactElement, useEffect, useState } from 'react'
|
||||
import * as Sentry from '@sentry/react'
|
||||
import { Link } from '@material-ui/core'
|
||||
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
|
||||
import { MessageSquare } from 'react-feather'
|
||||
|
||||
import config from '../config'
|
||||
import SideBarItem from './SideBarItem'
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
link: {
|
||||
color: '#9f9f9f',
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
textDecoration: 'none',
|
||||
|
||||
// https://github.com/mui-org/material-ui/issues/22543
|
||||
'@media (hover: none)': {
|
||||
textDecoration: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
icon: {
|
||||
height: theme.spacing(4),
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
/**
|
||||
* Parses Sentry DNS so it could be transformed into API call
|
||||
* Sentry DNS like https://1asfasdf2312asdf3@o132123.ingest.sentry.io/13123123
|
||||
*/
|
||||
const SENTRY_PARSING_REGEX = /^https:\/\/(?<key>\w+)@(?<sub>\w+)\.ingest\.sentry\.io\/(?<path>\d+)$/gm
|
||||
|
||||
async function isSentryReachable(): Promise<boolean> {
|
||||
const key = config.SENTRY_KEY
|
||||
|
||||
if (!key) {
|
||||
return false
|
||||
}
|
||||
|
||||
const match = SENTRY_PARSING_REGEX.exec(key)
|
||||
|
||||
if (!match) {
|
||||
return false
|
||||
}
|
||||
|
||||
const url = `https://${match.groups?.sub}.ingest.sentry.io/api/${match.groups?.path}/envelope/?sentry_key=${match.groups?.key}`
|
||||
|
||||
try {
|
||||
await fetch(url, { method: 'POST' })
|
||||
|
||||
// Since we got some reply (even though most probably with some error) that means Sentry is reachable ==> lets provide the Feedback form
|
||||
return true
|
||||
} catch (e) {
|
||||
// If an error was thrown than the request was blocked by the browser so Sentry is not accessible to us
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function showFeedbackForm(): void {
|
||||
const eventId = Sentry.captureMessage('User feedback')
|
||||
Sentry.showReportDialog({
|
||||
eventId,
|
||||
title: 'Provide us feedback!',
|
||||
subtitle: 'Share with us what you like and/or dislike.',
|
||||
subtitle2: 'We will be very happy.',
|
||||
labelComments: 'What is your impression about this app?',
|
||||
labelSubmit: 'Send Feedback',
|
||||
})
|
||||
}
|
||||
|
||||
export default function Feedback(): ReactElement {
|
||||
const [sentryEnabled, setSentryEnabled] = useState(false)
|
||||
const classes = useStyles()
|
||||
|
||||
// Run this only on component mount to verify once that Sentry is reachable
|
||||
useEffect(() => {
|
||||
isSentryReachable().then(result => {
|
||||
setSentryEnabled(result)
|
||||
})
|
||||
}, [])
|
||||
|
||||
if (sentryEnabled) {
|
||||
return (
|
||||
<Link onClick={showFeedbackForm} className={classes.link}>
|
||||
<SideBarItem iconStart={<MessageSquare className={classes.icon} />} label={<span>Send feedback</span>} />
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
return <></>
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { ReactElement, CSSProperties, useContext, useState, useEffect } from 'react'
|
||||
import type { Peer } from '@ethersphere/bee-js'
|
||||
import DottedMap, { DottedMapWithoutCountriesLib } from 'dotted-map/without-countries'
|
||||
import nodesDb from '../assets/data/nodes-db.json'
|
||||
import { Context } from '../providers/Bee'
|
||||
import mapData from '../assets/data/map-data.json'
|
||||
|
||||
interface Props {
|
||||
style?: CSSProperties
|
||||
}
|
||||
|
||||
interface MapRecord {
|
||||
lat: number
|
||||
lng: number
|
||||
}
|
||||
|
||||
type MapDB = Record<string, MapRecord>
|
||||
|
||||
const fullMapDb = nodesDb as unknown as MapDB
|
||||
const deduplicatedRecords = deduplicate(fullMapDb)
|
||||
|
||||
function deduplicate(db: MapDB): MapRecord[] {
|
||||
const noDuplicates: Record<string, MapRecord> = {}
|
||||
|
||||
Object.entries(fullMapDb).forEach(([key, record]) => {
|
||||
noDuplicates[`${record.lat} ${record.lng}`] = record
|
||||
})
|
||||
|
||||
return Object.values(noDuplicates)
|
||||
}
|
||||
|
||||
function findIntersection(db: MapDB, peers: Peer[]): MapRecord[] {
|
||||
const noDuplicates: Record<string, MapRecord> = {}
|
||||
peers.forEach(({ address }) => {
|
||||
const record = db[address]
|
||||
|
||||
if (record) noDuplicates[`${record.lat} ${record.lng}`] = record
|
||||
})
|
||||
|
||||
return Object.values(noDuplicates)
|
||||
}
|
||||
|
||||
function addPins(map: DottedMap, pins: MapRecord[], color: string) {
|
||||
pins.forEach(({ lat, lng }) => {
|
||||
map.addPin({ lat, lng, svgOptions: { color } })
|
||||
})
|
||||
}
|
||||
|
||||
const mapPrecomputed = new DottedMap({ map: JSON.parse(mapData) })
|
||||
addPins(mapPrecomputed, deduplicatedRecords, '#303030')
|
||||
|
||||
const mapSvgOptions: DottedMapWithoutCountriesLib.SvgSettings = { shape: 'hexagon', radius: 0.21, color: '#dadada' }
|
||||
|
||||
export default function Card({ style }: Props): ReactElement {
|
||||
const { peers } = useContext(Context)
|
||||
const [map, setMap] = useState<string>(mapPrecomputed.getSVG(mapSvgOptions))
|
||||
|
||||
useEffect(() => {
|
||||
if (!peers) return
|
||||
|
||||
const points = findIntersection(fullMapDb, peers)
|
||||
const mapNew = Object.create(mapPrecomputed)
|
||||
addPins(mapNew, points, '#09CA6C')
|
||||
setMap(mapNew.getSVG(mapSvgOptions))
|
||||
}, [peers])
|
||||
|
||||
return (
|
||||
<div
|
||||
style={Object.assign({}, style, {
|
||||
width: '100%',
|
||||
height: '380px',
|
||||
backgroundColor: '#f3f3f3',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
})}
|
||||
>
|
||||
<img
|
||||
alt="world map"
|
||||
src={`data:image/svg+xml;utf8,${encodeURIComponent(map)}`}
|
||||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', flex: 1 }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+39
-37
@@ -1,14 +1,19 @@
|
||||
import { BeeModes } from '@ethersphere/bee-js'
|
||||
import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
|
||||
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
|
||||
import { OpenInNewSharp } from '@material-ui/icons'
|
||||
import type { ReactElement } from 'react'
|
||||
import { Bookmark, BookOpen, Briefcase, DollarSign, FileText, Gift, Home, Layers, Settings } from 'react-feather'
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import { BookOpen, Briefcase, DollarSign, FileText, Home, Settings } from 'react-feather'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Logo from '../assets/logo.svg'
|
||||
import DashboardLogo from '../assets/dashboard-logo.svg'
|
||||
import DesktopLogo from '../assets/desktop-logo.svg'
|
||||
import { config } from '../config'
|
||||
import { useIsBeeDesktop } from '../hooks/apiHooks'
|
||||
import { Context } from '../providers/Bee'
|
||||
import { ROUTES } from '../routes'
|
||||
import SideBarItem from './SideBarItem'
|
||||
import SideBarStatus from './SideBarStatus'
|
||||
import Feedback from './Feedback'
|
||||
|
||||
const navBarItems = [
|
||||
{
|
||||
@@ -20,37 +25,25 @@ const navBarItems = [
|
||||
label: 'Files',
|
||||
path: ROUTES.UPLOAD,
|
||||
icon: FileText,
|
||||
pathMatcherSubstring: '/files/',
|
||||
},
|
||||
{
|
||||
label: 'Feeds',
|
||||
path: ROUTES.FEEDS,
|
||||
icon: Bookmark,
|
||||
label: 'Account',
|
||||
path: ROUTES.ACCOUNT_WALLET,
|
||||
icon: Briefcase,
|
||||
pathMatcherSubstring: '/account/',
|
||||
},
|
||||
{
|
||||
label: 'Stamps',
|
||||
path: ROUTES.STAMPS,
|
||||
icon: Layers,
|
||||
},
|
||||
{
|
||||
label: 'Accounting',
|
||||
path: ROUTES.ACCOUNTING,
|
||||
label: 'Top Up',
|
||||
path: ROUTES.WALLET,
|
||||
icon: DollarSign,
|
||||
requiresMode: BeeModes.ULTRA_LIGHT,
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
path: ROUTES.SETTINGS,
|
||||
icon: Settings,
|
||||
},
|
||||
{
|
||||
label: 'Account',
|
||||
path: ROUTES.WALLET,
|
||||
icon: Briefcase,
|
||||
},
|
||||
{
|
||||
label: 'Gift Wallets',
|
||||
path: ROUTES.GIFT_CODES,
|
||||
icon: Gift,
|
||||
},
|
||||
]
|
||||
|
||||
const drawerWidth = 300
|
||||
@@ -70,6 +63,7 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||
drawerPaper: {
|
||||
width: drawerWidth,
|
||||
backgroundColor: '#212121',
|
||||
zIndex: 988,
|
||||
},
|
||||
logo: {
|
||||
marginLeft: theme.spacing(8),
|
||||
@@ -103,27 +97,32 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||
|
||||
export default function SideBar(): ReactElement {
|
||||
const classes = useStyles()
|
||||
const { nodeInfo } = useContext(Context)
|
||||
const { isBeeDesktop } = useIsBeeDesktop()
|
||||
|
||||
return (
|
||||
<Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
|
||||
<Grid container direction="column" justifyContent="space-between" className={classes.root}>
|
||||
<Grid className={classes.logo}>
|
||||
<Link to={ROUTES.INFO}>
|
||||
<img alt="swarm" src={Logo} />
|
||||
<img alt="swarm" src={isBeeDesktop ? DesktopLogo : DashboardLogo} />
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<List>
|
||||
{navBarItems.map(p => (
|
||||
<Link to={p.path} key={p.path} className={classes.link}>
|
||||
<SideBarItem
|
||||
key={p.path}
|
||||
iconStart={<p.icon className={classes.icon} />}
|
||||
path={p.path}
|
||||
label={p.label}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
{navBarItems
|
||||
.filter(p => !p.requiresMode || nodeInfo?.beeMode === p.requiresMode)
|
||||
.map(p => (
|
||||
<Link to={p.path} key={p.path} className={classes.link}>
|
||||
<SideBarItem
|
||||
key={p.path}
|
||||
iconStart={<p.icon className={classes.icon} />}
|
||||
path={p.path}
|
||||
pathMatcherSubstring={p.pathMatcherSubstring}
|
||||
label={p.label}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</List>
|
||||
<Divider className={classes.divider} />
|
||||
<List>
|
||||
@@ -137,9 +136,12 @@ export default function SideBar(): ReactElement {
|
||||
</List>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Link to={ROUTES.STATUS} className={classes.link}>
|
||||
<SideBarStatus path={ROUTES.STATUS} />
|
||||
</Link>
|
||||
<List>
|
||||
<Link to={ROUTES.STATUS} className={classes.link}>
|
||||
<SideBarStatus path={ROUTES.STATUS} />
|
||||
</Link>
|
||||
<Feedback />
|
||||
</List>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Drawer>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
|
||||
import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles'
|
||||
import type { ReactElement, ReactNode } from 'react'
|
||||
import { useLocation, matchPath } from 'react-router-dom'
|
||||
|
||||
import { createStyles, Theme, makeStyles, withStyles } from '@material-ui/core/styles'
|
||||
import { ListItemText, ListItemIcon, ListItem } from '@material-ui/core'
|
||||
import { matchPath, useLocation } from 'react-router-dom'
|
||||
|
||||
const StyledListItem = withStyles((theme: Theme) => ({
|
||||
root: {
|
||||
@@ -45,12 +44,15 @@ interface Props {
|
||||
iconEnd?: ReactNode
|
||||
path?: string
|
||||
label: ReactNode
|
||||
pathMatcherSubstring?: string
|
||||
}
|
||||
|
||||
export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {
|
||||
export default function SideBarItem({ iconStart, iconEnd, path, label, pathMatcherSubstring }: Props): ReactElement {
|
||||
const classes = useStyles()
|
||||
const location = useLocation()
|
||||
const isSelected = Boolean(path && matchPath(location.pathname, path))
|
||||
const isSelected = pathMatcherSubstring
|
||||
? location.pathname.startsWith(pathMatcherSubstring)
|
||||
: Boolean(path && matchPath(location.pathname, path))
|
||||
|
||||
return (
|
||||
<StyledListItem button selected={isSelected} disableRipple>
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
import { Button, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
|
||||
import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
|
||||
import React, { ReactElement } from 'react'
|
||||
import { IconProps } from 'react-feather'
|
||||
|
||||
interface Props {
|
||||
onClick: () => void
|
||||
export interface SwarmButtonProps extends ButtonProps {
|
||||
iconType: React.ComponentType<IconProps>
|
||||
children: string
|
||||
className?: string
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
cancel?: boolean
|
||||
variant?: 'text' | 'contained' | 'outlined'
|
||||
@@ -16,7 +12,7 @@ interface Props {
|
||||
const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
button: {
|
||||
height: '52px',
|
||||
height: '42px',
|
||||
position: 'relative',
|
||||
whiteSpace: 'nowrap',
|
||||
color: '#242424',
|
||||
@@ -51,7 +47,9 @@ export function SwarmButton({
|
||||
loading,
|
||||
cancel,
|
||||
variant = 'contained',
|
||||
}: Props): ReactElement {
|
||||
style,
|
||||
...other
|
||||
}: SwarmButtonProps): ReactElement {
|
||||
const classes = useStyles()
|
||||
|
||||
function getIconColor() {
|
||||
@@ -73,14 +71,18 @@ export function SwarmButton({
|
||||
|
||||
return (
|
||||
<Button
|
||||
style={style}
|
||||
className={getButtonClassName()}
|
||||
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
onClick()
|
||||
event.currentTarget.blur()
|
||||
if (onClick) {
|
||||
onClick(event)
|
||||
event.currentTarget.blur()
|
||||
}
|
||||
}}
|
||||
variant={variant}
|
||||
startIcon={icon}
|
||||
disabled={disabled}
|
||||
{...other}
|
||||
>
|
||||
{children}
|
||||
{loading && (
|
||||
|
||||
@@ -1,13 +1,27 @@
|
||||
import { createStyles, FormHelperText, makeStyles, MenuItem, Select as SimpleSelect, Theme } from '@material-ui/core'
|
||||
import { createStyles, FormHelperText, makeStyles, MenuItem, Select as MuiSelect, Theme } from '@material-ui/core'
|
||||
import { Field } from 'formik'
|
||||
import { Select } from 'formik-material-ui'
|
||||
import { ReactElement } from 'react'
|
||||
import { ReactElement, ReactNode } from 'react'
|
||||
|
||||
export type SelectEvent = React.ChangeEvent<{
|
||||
name?: string | undefined
|
||||
value: unknown
|
||||
}>
|
||||
|
||||
function renderValue(value: unknown): ReactNode {
|
||||
if (typeof value === 'string') {
|
||||
return value
|
||||
}
|
||||
|
||||
const label = Reflect.get(value as object, 'label')
|
||||
|
||||
if (label) {
|
||||
return label
|
||||
}
|
||||
|
||||
return value as ReactNode
|
||||
}
|
||||
|
||||
interface Props {
|
||||
label?: string
|
||||
name?: string
|
||||
@@ -15,6 +29,7 @@ interface Props {
|
||||
onChange?: (event: SelectEvent) => void
|
||||
formik?: boolean
|
||||
defaultValue?: string
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
@@ -37,7 +52,15 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||
}),
|
||||
)
|
||||
|
||||
export function SwarmSelect({ defaultValue, formik, name, options, onChange, label }: Props): ReactElement {
|
||||
export function SwarmSelect({
|
||||
defaultValue,
|
||||
formik,
|
||||
name,
|
||||
options,
|
||||
onChange,
|
||||
label,
|
||||
placeholder,
|
||||
}: Props): ReactElement {
|
||||
const classes = useStyles()
|
||||
|
||||
if (formik) {
|
||||
@@ -50,9 +73,10 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
|
||||
name={name}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
defaultValue={defaultValue || ''}
|
||||
defaultValue={defaultValue}
|
||||
className={classes.select}
|
||||
placeholder={label}
|
||||
displayEmpty
|
||||
renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
|
||||
MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
|
||||
>
|
||||
{options.map((x, i) => (
|
||||
@@ -68,15 +92,16 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
|
||||
return (
|
||||
<>
|
||||
{label && <FormHelperText>{label}</FormHelperText>}
|
||||
<SimpleSelect
|
||||
<MuiSelect
|
||||
required
|
||||
name={name}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
className={classes.select}
|
||||
defaultValue={defaultValue || ''}
|
||||
defaultValue={defaultValue}
|
||||
onChange={onChange}
|
||||
placeholder={label}
|
||||
displayEmpty
|
||||
renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
|
||||
MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
|
||||
>
|
||||
{options.map((x, i) => (
|
||||
@@ -84,7 +109,7 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
|
||||
{x.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</SimpleSelect>
|
||||
</MuiSelect>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
+11
-13
@@ -1,7 +1,3 @@
|
||||
function getProcessEnv(key: string): string | undefined | false {
|
||||
return typeof process === 'object' && process.env[key]
|
||||
}
|
||||
|
||||
class Config {
|
||||
public readonly BEE_API_HOST: string
|
||||
public readonly BEE_DEBUG_API_HOST: string
|
||||
@@ -10,19 +6,21 @@ class Config {
|
||||
public readonly BEE_DISCORD_HOST: string
|
||||
public readonly GITHUB_REPO_URL: string
|
||||
public readonly BEE_DESKTOP_URL: string
|
||||
public readonly SENTRY_KEY: string | undefined
|
||||
public readonly SENTRY_ENVIRONMENT: string | undefined
|
||||
|
||||
constructor() {
|
||||
this.BEE_API_HOST =
|
||||
sessionStorage.getItem('api_host') || getProcessEnv('REACT_APP_BEE_HOST') || 'http://localhost:1633'
|
||||
this.BEE_API_HOST = sessionStorage.getItem('api_host') ?? process.env.REACT_APP_BEE_HOST ?? 'http://localhost:1633'
|
||||
this.SENTRY_KEY = process.env.REACT_APP_SENTRY_KEY
|
||||
this.SENTRY_ENVIRONMENT = process.env.REACT_APP_SENTRY_ENVIRONMENT
|
||||
this.BEE_DEBUG_API_HOST =
|
||||
sessionStorage.getItem('debug_api_host') || getProcessEnv('REACT_APP_BEE_DEBUG_HOST') || 'http://localhost:1635'
|
||||
sessionStorage.getItem('debug_api_host') ?? process.env.REACT_APP_BEE_DEBUG_HOST ?? 'http://localhost:1635'
|
||||
this.BLOCKCHAIN_EXPLORER_URL =
|
||||
getProcessEnv('REACT_APP_BLOCKCHAIN_EXPLORER_URL') || 'https://blockscout.com/xdai/mainnet'
|
||||
this.BEE_DOCS_HOST = getProcessEnv('REACT_APP_BEE_DOCS_HOST') || 'https://docs.ethswarm.org/docs/'
|
||||
this.BEE_DISCORD_HOST = getProcessEnv('REACT_APP_BEE_DISCORD_HOST') || 'https://discord.gg/eKr9XPv7'
|
||||
this.GITHUB_REPO_URL =
|
||||
getProcessEnv('REACT_APP_BEE_GITHUB_REPO_URL') || 'https://api.github.com/repos/ethersphere/bee'
|
||||
this.BEE_DESKTOP_URL = getProcessEnv('REACT_APP_BEE_DESKTOP_URL') || window.location.origin
|
||||
process.env.REACT_APP_BLOCKCHAIN_EXPLORER_URL ?? 'https://blockscout.com/xdai/mainnet'
|
||||
this.BEE_DOCS_HOST = process.env.REACT_APP_BEE_DOCS_HOST ?? 'https://docs.ethswarm.org/docs/'
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+10
-5
@@ -2,9 +2,8 @@ body {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-family: 'iAWriterQuattroV', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -16,6 +15,12 @@ body {
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.sentry-error-embed * {
|
||||
font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
+31
-14
@@ -1,9 +1,12 @@
|
||||
import { CircularProgress, Container } from '@material-ui/core'
|
||||
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import React, { ReactElement, useContext } from 'react'
|
||||
import ErrorBoundary from '../components/ErrorBoundary'
|
||||
import SideBar from '../components/SideBar'
|
||||
import { Context } from '../providers/Bee'
|
||||
import config from '../config'
|
||||
import * as Sentry from '@sentry/react'
|
||||
import ItsBroken from './ItsBroken'
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
@@ -22,23 +25,37 @@ const Dashboard = (props: Props): ReactElement => {
|
||||
const classes = useStyles()
|
||||
|
||||
const { isLoading } = useContext(Context)
|
||||
const content = (
|
||||
<>
|
||||
{isLoading ? (
|
||||
<div style={{ textAlign: 'center', width: '100%' }}>
|
||||
<CircularProgress />
|
||||
</div>
|
||||
) : (
|
||||
props.children
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
let errorBoundaryWithContent
|
||||
|
||||
if (config.SENTRY_KEY) {
|
||||
errorBoundaryWithContent = (
|
||||
<Sentry.ErrorBoundary
|
||||
showDialog
|
||||
fallback={({ error, componentStack, resetError }) => <ItsBroken message={error.message} />}
|
||||
>
|
||||
{content}
|
||||
</Sentry.ErrorBoundary>
|
||||
)
|
||||
} else {
|
||||
errorBoundaryWithContent = <ErrorBoundary>{content}</ErrorBoundary>
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<SideBar />
|
||||
<Container className={classes.content}>
|
||||
<ErrorBoundary>
|
||||
<>
|
||||
{isLoading ? (
|
||||
<div style={{ textAlign: 'center', width: '100%' }}>
|
||||
<CircularProgress />
|
||||
</div>
|
||||
) : (
|
||||
props.children
|
||||
)}
|
||||
</>
|
||||
</ErrorBoundary>
|
||||
</Container>
|
||||
<Container className={classes.content}>{errorBoundaryWithContent}</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Container } from '@material-ui/core'
|
||||
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
|
||||
import { ReactElement } from 'react'
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
content: {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
minHeight: '100vh',
|
||||
textAlign: 'center',
|
||||
},
|
||||
errorMsg: {
|
||||
marginTop: '30px',
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
interface Props {
|
||||
message: string
|
||||
}
|
||||
|
||||
// TODO: Provide some nicer design
|
||||
const ItsBroken = ({ message }: Props): ReactElement => {
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Container className={classes.content}>
|
||||
<h1>Ups, there was a problem 😅</h1>
|
||||
<h3 className={classes.errorMsg}>Error: {message}</h3>
|
||||
</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ItsBroken
|
||||
@@ -2,7 +2,7 @@ import { BigNumber } from 'bignumber.js'
|
||||
import { Token } from './Token'
|
||||
|
||||
export class BzzToken extends Token {
|
||||
constructor(amount: BigNumber | string | BigInt) {
|
||||
constructor(amount: BigNumber | string | bigint) {
|
||||
super(amount, 16)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import { BigNumber } from 'bignumber.js'
|
||||
import { Token } from './Token'
|
||||
|
||||
export class DaiToken extends Token {
|
||||
constructor(amount: BigNumber | string | BigInt) {
|
||||
constructor(amount: BigNumber | string | bigint) {
|
||||
super(amount, 18)
|
||||
}
|
||||
}
|
||||
|
||||
+3
-3
@@ -10,7 +10,7 @@ export class Token {
|
||||
private amount: BigNumber // Represented in the base units, so it is always an integer value
|
||||
private readonly decimals: digits
|
||||
|
||||
constructor(amount: BigNumber | string | BigInt, decimals: digits = BZZ_DECIMALS) {
|
||||
constructor(amount: BigNumber | string | bigint, decimals: digits = BZZ_DECIMALS) {
|
||||
const a = makeBigNumber(amount)
|
||||
|
||||
if (!isInteger(a) || !POSSIBLE_DECIMALS.includes(decimals)) {
|
||||
@@ -31,7 +31,7 @@ export class Token {
|
||||
*
|
||||
* @returns new Token
|
||||
*/
|
||||
static fromDecimal(amount: BigNumber | string | BigInt, decimals: digits = BZZ_DECIMALS): Token | never {
|
||||
static fromDecimal(amount: BigNumber | string | bigint, decimals: digits = BZZ_DECIMALS): Token | never {
|
||||
const a = makeBigNumber(amount)
|
||||
|
||||
// No need to do any validation here, it is done when the new token is created
|
||||
@@ -40,7 +40,7 @@ export class Token {
|
||||
return new Token(t, decimals)
|
||||
}
|
||||
|
||||
get toBigInt(): BigInt {
|
||||
get toBigInt(): bigint {
|
||||
return BigInt(this.amount.toFixed(0))
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { ACCOUNT_TABS } from '../../routes'
|
||||
|
||||
const tabMap = {
|
||||
WALLET: 0,
|
||||
CHEQUEBOOK: 1,
|
||||
STAMPS: 2,
|
||||
FEEDS: 3,
|
||||
}
|
||||
|
||||
interface Props {
|
||||
active: 'WALLET' | 'CHEQUEBOOK' | 'STAMPS' | 'FEEDS'
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
flexGrow: 1,
|
||||
marginBottom: theme.spacing(4),
|
||||
textTransform: 'none',
|
||||
},
|
||||
leftTab: {
|
||||
marginRight: theme.spacing(0.125),
|
||||
},
|
||||
centerTab: {
|
||||
marginLeft: theme.spacing(0.125),
|
||||
marginRight: theme.spacing(0.125),
|
||||
},
|
||||
rightTab: {
|
||||
marginLeft: theme.spacing(0.125),
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
export function AccountNavigation({ active }: Props): ReactElement {
|
||||
const classes = useStyles()
|
||||
const navigate = useNavigate()
|
||||
|
||||
function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
|
||||
navigate(ACCOUNT_TABS[newValue])
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Tabs value={tabMap[active]} onChange={onChange} variant="fullWidth">
|
||||
<Tab className={classes.leftTab} key="WALLET" label="Wallet" />
|
||||
<Tab className={classes.centerTab} key="CHEQUEBOOK" label="Chequebook" />
|
||||
<Tab className={classes.centerTab} key="STAMPS" label="Stamps" />
|
||||
<Tab className={classes.rightTab} key="FEEDS" label="Feeds" />
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { ReactElement } from 'react'
|
||||
|
||||
export function Header(): ReactElement {
|
||||
return (
|
||||
<Box mb={4}>
|
||||
<Typography variant="h1">Account</Typography>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import ExpandableList from '../../../components/ExpandableList'
|
||||
import ExpandableListItem from '../../../components/ExpandableListItem'
|
||||
import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
|
||||
import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
|
||||
import DepositModal from '../../../containers/DepositModal'
|
||||
import WithdrawModal from '../../../containers/WithdrawModal'
|
||||
import { useAccounting } from '../../../hooks/accounting'
|
||||
import { CheckState, Context as BeeContext } from '../../../providers/Bee'
|
||||
import { Context as SettingsContext } from '../../../providers/Settings'
|
||||
import PeerBalances from '../../accounting/PeerBalances'
|
||||
import { AccountNavigation } from '../AccountNavigation'
|
||||
import { Header } from '../Header'
|
||||
|
||||
export function AccountChequebook(): ReactElement {
|
||||
const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
|
||||
useContext(BeeContext)
|
||||
const { beeDebugApi } = useContext(SettingsContext)
|
||||
|
||||
const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
|
||||
|
||||
if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<AccountNavigation active="CHEQUEBOOK" />
|
||||
<div>
|
||||
<ExpandableList label="Chequebook" defaultOpen>
|
||||
<ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
|
||||
<ExpandableListItem
|
||||
label="Available Uncommitted Balance"
|
||||
value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
|
||||
/>
|
||||
<ExpandableListItem
|
||||
label="Total Cheques Amount Sent"
|
||||
value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
|
||||
/>
|
||||
<ExpandableListItem
|
||||
label="Total Cheques Amount Received"
|
||||
value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
|
||||
/>
|
||||
<ExpandableListItemActions>
|
||||
<WithdrawModal />
|
||||
<DepositModal />
|
||||
</ExpandableListItemActions>
|
||||
</ExpandableList>
|
||||
<ExpandableList label="Blockchain" defaultOpen>
|
||||
<ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
|
||||
<ExpandableListItemKey
|
||||
label="Chequebook contract address"
|
||||
value={chequebookAddress?.chequebookAddress || ''}
|
||||
/>
|
||||
</ExpandableList>
|
||||
<PeerBalances accounting={accounting} isLoadingUncashed={isLoadingUncashed} totalUncashed={totalUncashed} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import { Box } from '@material-ui/core'
|
||||
import { ReactElement, useContext, useState } from 'react'
|
||||
import { Download, Info, PlusSquare, Trash } from 'react-feather'
|
||||
import { useNavigate } from 'react-router'
|
||||
import ExpandableList from '../../../components/ExpandableList'
|
||||
import ExpandableListItem from '../../../components/ExpandableListItem'
|
||||
import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
|
||||
import { SwarmButton } from '../../../components/SwarmButton'
|
||||
import { Context as IdentityContext, Identity } from '../../../providers/Feeds'
|
||||
import { ROUTES } from '../../../routes'
|
||||
import { formatEnum } from '../../../utils'
|
||||
import { persistIdentitiesWithoutUpdate } from '../../../utils/identity'
|
||||
import { DeleteFeedDialog } from '../../feeds/DeleteFeedDialog'
|
||||
import { ExportFeedDialog } from '../../feeds/ExportFeedDialog'
|
||||
import { ImportFeedDialog } from '../../feeds/ImportFeedDialog'
|
||||
import { AccountNavigation } from '../AccountNavigation'
|
||||
import { Header } from '../Header'
|
||||
|
||||
export function AccountFeeds(): ReactElement {
|
||||
const { identities, setIdentities } = useContext(IdentityContext)
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
|
||||
const [showImport, setShowImport] = useState(false)
|
||||
const [showExport, setShowExport] = useState(false)
|
||||
const [showDelete, setShowDelete] = useState(false)
|
||||
|
||||
function createNewFeed() {
|
||||
return navigate(ROUTES.ACCOUNT_FEEDS_NEW)
|
||||
}
|
||||
|
||||
function viewFeed(uuid: string) {
|
||||
navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uuid))
|
||||
}
|
||||
|
||||
function onDialogClose() {
|
||||
setShowDelete(false)
|
||||
setShowExport(false)
|
||||
setShowImport(false)
|
||||
setSelectedIdentity(null)
|
||||
}
|
||||
|
||||
function onDelete(identity: Identity) {
|
||||
onDialogClose()
|
||||
const updatedFeeds = identities.filter(x => x.uuid !== identity.uuid)
|
||||
setIdentities(updatedFeeds)
|
||||
persistIdentitiesWithoutUpdate(updatedFeeds)
|
||||
}
|
||||
|
||||
function onShowExport(identity: Identity) {
|
||||
setSelectedIdentity(identity)
|
||||
setShowExport(true)
|
||||
}
|
||||
|
||||
function onShowDelete(identity: Identity) {
|
||||
setSelectedIdentity(identity)
|
||||
setShowDelete(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<AccountNavigation active="FEEDS" />
|
||||
{showImport && <ImportFeedDialog onClose={() => setShowImport(false)} />}
|
||||
{showExport && selectedIdentity && <ExportFeedDialog identity={selectedIdentity} onClose={onDialogClose} />}
|
||||
{showDelete && selectedIdentity && (
|
||||
<DeleteFeedDialog
|
||||
identity={selectedIdentity}
|
||||
onClose={onDialogClose}
|
||||
onConfirm={(identity: Identity) => onDelete(identity)}
|
||||
/>
|
||||
)}
|
||||
<Box mb={4}>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton iconType={PlusSquare} onClick={createNewFeed}>
|
||||
Create New Feed
|
||||
</SwarmButton>
|
||||
<SwarmButton iconType={PlusSquare} onClick={() => setShowImport(true)}>
|
||||
Import Feed
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</Box>
|
||||
{identities.map((x, i) => (
|
||||
<ExpandableList key={i} label={`${x.name} Website`} defaultOpen>
|
||||
<Box mb={0.5}>
|
||||
<ExpandableList label={x.name} level={1}>
|
||||
<ExpandableListItemKey label="Identity address" value={x.address} />
|
||||
<ExpandableListItem label="Identity type" value={formatEnum(x.type)} />
|
||||
</ExpandableList>
|
||||
</Box>
|
||||
<ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
|
||||
{x.feedHash && <ExpandableListItemKey label="Feed hash" value={x.feedHash} />}
|
||||
<Box mt={0.75}>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton onClick={() => viewFeed(x.uuid)} iconType={Info}>
|
||||
View Feed Page
|
||||
</SwarmButton>
|
||||
<SwarmButton onClick={() => onShowExport(x)} iconType={Download}>
|
||||
Export...
|
||||
</SwarmButton>
|
||||
<SwarmButton onClick={() => onShowDelete(x)} iconType={Trash}>
|
||||
Delete...
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</Box>
|
||||
</ExpandableList>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
|
||||
import { ReactElement, useContext, useEffect } from 'react'
|
||||
import { PlusSquare } from 'react-feather'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { SwarmButton } from '../../../components/SwarmButton'
|
||||
import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
|
||||
import { CheckState, Context as BeeContext } from '../../../providers/Bee'
|
||||
import { Context as StampsContext } from '../../../providers/Stamps'
|
||||
import { ROUTES } from '../../../routes'
|
||||
import StampsTable from '../../stamps/StampsTable'
|
||||
import { AccountNavigation } from '../AccountNavigation'
|
||||
import { Header } from '../Header'
|
||||
|
||||
const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
root: {
|
||||
width: '100%',
|
||||
display: 'grid',
|
||||
},
|
||||
actions: {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flex: '0 1 auto',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
export function AccountStamps(): ReactElement {
|
||||
const classes = useStyles()
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
|
||||
const { status } = useContext(BeeContext)
|
||||
|
||||
useEffect(() => {
|
||||
if (!status.all) return
|
||||
start()
|
||||
|
||||
return () => stop()
|
||||
}, [status]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
|
||||
|
||||
function navigateToNewStamp() {
|
||||
navigate(ROUTES.ACCOUNT_STAMPS_NEW)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<AccountNavigation active="STAMPS" />
|
||||
<div className={classes.root}>
|
||||
{error && (
|
||||
<Container style={{ textAlign: 'center', padding: '50px' }}>
|
||||
Error loading postage stamps details: {error.message}
|
||||
</Container>
|
||||
)}
|
||||
{!error && (
|
||||
<>
|
||||
<div className={classes.actions}>
|
||||
<SwarmButton onClick={navigateToNewStamp} iconType={PlusSquare}>
|
||||
Buy New Postage Stamp
|
||||
</SwarmButton>
|
||||
<div style={{ height: '5px' }}>{isLoading && <CircularProgress />}</div>
|
||||
</div>
|
||||
<StampsTable postageStamps={stamps} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { Box, Grid, Typography } from '@material-ui/core'
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import { Download, Gift, Link } from 'react-feather'
|
||||
import { useNavigate } from 'react-router'
|
||||
import ExpandableListItem from '../../../components/ExpandableListItem'
|
||||
import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
|
||||
import { Loading } from '../../../components/Loading'
|
||||
import { SwarmButton } from '../../../components/SwarmButton'
|
||||
import { Context } from '../../../providers/Bee'
|
||||
import { ROUTES } from '../../../routes'
|
||||
import { AccountNavigation } from '../AccountNavigation'
|
||||
import { Header } from '../Header'
|
||||
|
||||
export function AccountWallet(): ReactElement {
|
||||
const { balance, nodeAddresses } = useContext(Context)
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
if (!balance || !nodeAddresses) {
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
function onCheckTransactions() {
|
||||
window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
|
||||
}
|
||||
|
||||
function onInvite() {
|
||||
navigate(ROUTES.ACCOUNT_INVITATIONS)
|
||||
}
|
||||
|
||||
function onDeposit() {
|
||||
navigate(ROUTES.WALLET)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<AccountNavigation active="WALLET" />
|
||||
<Box mb={4}>
|
||||
<Grid container direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="h2">Wallet balance</Typography>
|
||||
<SwarmButton onClick={onDeposit} iconType={Download}>
|
||||
Deposit
|
||||
</SwarmButton>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} 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>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton onClick={onCheckTransactions} iconType={Link}>
|
||||
Check transactions on Blockscout
|
||||
</SwarmButton>
|
||||
<SwarmButton onClick={onInvite} iconType={Gift}>
|
||||
Invite to Swarm...
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { ReactElement, useContext } from 'react'
|
||||
|
||||
import PeerBalances from './PeerBalances'
|
||||
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
|
||||
import { CheckState, Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { useAccounting } from '../../hooks/accounting'
|
||||
import ExpandableList from '../../components/ExpandableList'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import WithdrawModal from '../../containers/WithdrawModal'
|
||||
import DepositModal from '../../containers/DepositModal'
|
||||
|
||||
export default function Accounting(): ReactElement {
|
||||
const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
|
||||
useContext(BeeContext)
|
||||
const { beeDebugApi } = useContext(SettingsContext)
|
||||
|
||||
const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
|
||||
|
||||
if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ExpandableList label="Chequebook" defaultOpen>
|
||||
<ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
|
||||
<ExpandableListItem
|
||||
label="Available Uncommitted Balance"
|
||||
value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
|
||||
/>
|
||||
<ExpandableListItem
|
||||
label="Total Cheques Amount Sent"
|
||||
value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
|
||||
/>
|
||||
<ExpandableListItem
|
||||
label="Total Cheques Amount Received"
|
||||
value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
|
||||
/>
|
||||
<ExpandableListItemActions>
|
||||
<WithdrawModal />
|
||||
<DepositModal />
|
||||
</ExpandableListItemActions>
|
||||
</ExpandableList>
|
||||
<ExpandableList label="Blockchain" defaultOpen>
|
||||
<ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
|
||||
<ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
|
||||
</ExpandableList>
|
||||
<PeerBalances accounting={accounting} isLoadingUncashed={isLoadingUncashed} totalUncashed={totalUncashed} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -65,7 +65,7 @@ export default function CreateNewFeed(): ReactElement {
|
||||
const identity = await convertWalletToIdentity(wallet, values.type, values.identityName, values.password)
|
||||
persistIdentity(identities, identity)
|
||||
setIdentities(identities)
|
||||
navigate(ROUTES.FEEDS)
|
||||
navigate(ROUTES.ACCOUNT_FEEDS)
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ import * as swarmCid from '@ethersphere/swarm-cid'
|
||||
import { Box } from '@material-ui/core'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { X } from 'react-feather'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { DocumentationText } from '../../components/DocumentationText'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
@@ -40,13 +40,13 @@ export function FeedSubpage(): ReactElement {
|
||||
}, [beeApi, uuid, identity])
|
||||
|
||||
if (!identity || !status.all) {
|
||||
navigate(ROUTES.FEEDS, { replace: true })
|
||||
navigate(ROUTES.ACCOUNT_FEEDS, { replace: true })
|
||||
|
||||
return <></>
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
navigate(ROUTES.FEEDS)
|
||||
navigate(ROUTES.ACCOUNT_FEEDS)
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Box, Grid, Typography } from '@material-ui/core'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { Bookmark, X } from 'react-feather'
|
||||
import { useParams, useNavigate } from 'react-router'
|
||||
import { useNavigate, useParams } from 'react-router'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
@@ -73,10 +73,10 @@ export default function UpdateFeed(): ReactElement {
|
||||
}
|
||||
|
||||
try {
|
||||
await updateFeed(beeApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
|
||||
await updateFeed(beeApi, beeDebugApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
|
||||
persistIdentity(identities, identity)
|
||||
setIdentities([...identities])
|
||||
navigate(ROUTES.FEEDS_PAGE.replace(':uuid', identity.uuid))
|
||||
navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', identity.uuid))
|
||||
} catch (error: unknown) {
|
||||
setLoading(false)
|
||||
|
||||
|
||||
@@ -29,11 +29,11 @@ export default function Feeds(): ReactElement {
|
||||
const [showDelete, setShowDelete] = useState(false)
|
||||
|
||||
function createNewFeed() {
|
||||
return navigate(ROUTES.FEEDS_NEW)
|
||||
return navigate(ROUTES.ACCOUNT_FEEDS_NEW)
|
||||
}
|
||||
|
||||
function viewFeed(uuid: string) {
|
||||
navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uuid))
|
||||
navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uuid))
|
||||
}
|
||||
|
||||
function onDialogClose() {
|
||||
|
||||
@@ -99,7 +99,7 @@ export function Share(): ReactElement {
|
||||
}
|
||||
|
||||
function onUpdateFeed() {
|
||||
navigate(ROUTES.FEEDS_UPDATE.replace(':hash', reference))
|
||||
navigate(ROUTES.ACCOUNT_FEEDS_UPDATE.replace(':hash', reference))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -13,6 +13,7 @@ import { Context as FileContext } from '../../providers/File'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { Context as StampsContext, EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
import { ROUTES } from '../../routes'
|
||||
import { waitUntilStampUsable } from '../../utils'
|
||||
import { detectIndexHtml, getAssetNameFromFiles, packageFile } from '../../utils/file'
|
||||
import { persistIdentity, updateFeed } from '../../utils/identity'
|
||||
import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
|
||||
@@ -30,8 +31,8 @@ export function Upload(): ReactElement {
|
||||
const [isUploading, setUploading] = useState(false)
|
||||
const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
|
||||
|
||||
const { refresh } = useContext(StampsContext)
|
||||
const { beeApi } = useContext(SettingsContext)
|
||||
const { stamps, refresh } = useContext(StampsContext)
|
||||
const { beeApi, beeDebugApi } = useContext(SettingsContext)
|
||||
const { files, setFiles, uploadOrigin, metadata, previewUri, previewBlob } = useContext(FileContext)
|
||||
const { identities, setIdentities } = useContext(IdentityContext)
|
||||
const { status } = useContext(BeeContext)
|
||||
@@ -39,6 +40,8 @@ export function Upload(): ReactElement {
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const hasAnyStamps = stamps !== null && stamps.length > 0
|
||||
|
||||
useEffect(() => {
|
||||
refresh()
|
||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
@@ -66,7 +69,7 @@ export function Upload(): ReactElement {
|
||||
}
|
||||
}
|
||||
|
||||
const uploadFiles = (password?: string) => {
|
||||
const uploadFiles = async (password?: string) => {
|
||||
if (!beeApi || !files.length || !stamp || !metadata) {
|
||||
return
|
||||
}
|
||||
@@ -122,6 +125,10 @@ export function Upload(): ReactElement {
|
||||
|
||||
setUploading(true)
|
||||
|
||||
if (beeDebugApi) {
|
||||
await waitUntilStampUsable(stamp.batchID, beeDebugApi)
|
||||
}
|
||||
|
||||
beeApi
|
||||
.uploadFiles(stamp.batchID, fls, { indexDocument })
|
||||
.then(hash => {
|
||||
@@ -130,11 +137,13 @@ export function Upload(): ReactElement {
|
||||
if (uploadOrigin.origin === 'UPLOAD') {
|
||||
navigate(ROUTES.HASH.replace(':hash', hash.reference), { replace: true })
|
||||
} else {
|
||||
updateFeed(beeApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(() => {
|
||||
persistIdentity(identities, identity as Identity)
|
||||
setIdentities([...identities])
|
||||
navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
|
||||
})
|
||||
updateFeed(beeApi, beeDebugApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(
|
||||
() => {
|
||||
persistIdentity(identities, identity as Identity)
|
||||
setIdentities([...identities])
|
||||
navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
|
||||
},
|
||||
)
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
@@ -173,7 +182,7 @@ export function Upload(): ReactElement {
|
||||
{step === 1 && (
|
||||
<>
|
||||
<Box mb={2}>
|
||||
{stampMode === 'SELECT' ? (
|
||||
{hasAnyStamps && stampMode === 'SELECT' ? (
|
||||
<PostageStampSelector onSelect={stamp => setStamp(stamp)} defaultValue={stamp?.batchID} />
|
||||
) : (
|
||||
<PostageStampCreation onFinished={() => setStampMode('SELECT')} />
|
||||
@@ -203,6 +212,7 @@ export function Upload(): ReactElement {
|
||||
onUpload={onUpload}
|
||||
isUploading={isUploading}
|
||||
hasStamp={Boolean(stamp)}
|
||||
hasAnyStamps={hasAnyStamps}
|
||||
uploadLabel={identity ? 'Update Feed' : 'Upload To Your Node'}
|
||||
stampMode={stampMode}
|
||||
setStampMode={setStampMode}
|
||||
|
||||
@@ -13,6 +13,7 @@ interface Props {
|
||||
onProceed: () => void
|
||||
isUploading: boolean
|
||||
hasStamp: boolean
|
||||
hasAnyStamps: boolean
|
||||
uploadLabel: string
|
||||
stampMode: 'BUY' | 'SELECT'
|
||||
setStampMode: (mode: 'BUY' | 'SELECT') => void
|
||||
@@ -26,6 +27,7 @@ export function UploadActionBar({
|
||||
onProceed,
|
||||
isUploading,
|
||||
hasStamp,
|
||||
hasAnyStamps,
|
||||
uploadLabel,
|
||||
stampMode,
|
||||
setStampMode,
|
||||
@@ -62,6 +64,7 @@ export function UploadActionBar({
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
<SwarmButton
|
||||
disabled={stampMode === 'BUY' && !hasAnyStamps}
|
||||
onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
|
||||
iconType={stampMode === 'BUY' ? Layers : PlusSquare}
|
||||
>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import { Check, X } from 'react-feather'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { Wallet } from 'ethers'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
@@ -12,11 +13,10 @@ 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 { giftWallets, addGiftWallet, provider } = useContext(TopUpContext)
|
||||
const { balance } = useContext(BeeContext)
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
@@ -26,13 +26,13 @@ export default function Index(): ReactElement {
|
||||
async function mapGiftWallets() {
|
||||
const results = []
|
||||
for (const giftWallet of giftWallets) {
|
||||
results.push(await ResolvedWallet.make(giftWallet))
|
||||
results.push(await ResolvedWallet.make(giftWallet, provider))
|
||||
}
|
||||
setBalances(results)
|
||||
}
|
||||
|
||||
mapGiftWallets()
|
||||
}, [giftWallets])
|
||||
}, [giftWallets, provider])
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
const navigate = useNavigate()
|
||||
@@ -41,9 +41,9 @@ export default function Index(): ReactElement {
|
||||
enqueueSnackbar('Sending funds to gift wallet...')
|
||||
setLoading(true)
|
||||
try {
|
||||
const wallet = generateWallet()
|
||||
const wallet = Wallet.createRandom()
|
||||
addGiftWallet(wallet)
|
||||
await createGiftWallet(wallet.getAddressString())
|
||||
await createGiftWallet(wallet.address)
|
||||
enqueueSnackbar('Succesfully funded gift wallet', { variant: 'success' })
|
||||
} catch (error) {
|
||||
enqueueSnackbar(`Failed to fund gift wallet: ${error}`, { variant: 'error' })
|
||||
|
||||
+116
-40
@@ -1,12 +1,13 @@
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import { Button } from '@material-ui/core'
|
||||
import { Globe, Briefcase, Search, Settings, ArrowUp, RefreshCcw } from 'react-feather'
|
||||
|
||||
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
|
||||
import { CheckState, Context as BeeContext } from '../../providers/Bee'
|
||||
import ExpandableList from '../../components/ExpandableList'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import Card from '../../components/Card'
|
||||
import Map from '../../components/Map'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import TopologyStats from '../../components/TopologyStats'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { ROUTES } from '../../routes'
|
||||
|
||||
export default function Status(): ReactElement {
|
||||
const {
|
||||
@@ -15,48 +16,123 @@ export default function Status(): ReactElement {
|
||||
isLatestBeeVersion,
|
||||
latestBeeVersionUrl,
|
||||
topology,
|
||||
nodeAddresses,
|
||||
chequebookAddress,
|
||||
nodeInfo,
|
||||
balance,
|
||||
chequebookBalance,
|
||||
} = useContext(BeeContext)
|
||||
|
||||
if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ExpandableList label="Bee Node" defaultOpen>
|
||||
<ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
|
||||
<ExpandableListItem
|
||||
label="Agent"
|
||||
value={
|
||||
<div>
|
||||
<a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
|
||||
Bee
|
||||
</a>
|
||||
{` ${latestUserVersion || '-'} `}
|
||||
<Button size="small" variant="outlined" href={latestBeeVersionUrl} target="_blank">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', alignContent: 'stretch' }}>
|
||||
{status.all ? (
|
||||
<Card
|
||||
buttonProps={{ iconType: Search, children: 'Access Content', onClick: () => navigate(ROUTES.DOWNLOAD) }}
|
||||
icon={<Globe />}
|
||||
title="Your node is connected."
|
||||
subtitle="You can now access content hosted on Swarm."
|
||||
status="ok"
|
||||
/>
|
||||
) : (
|
||||
<Card
|
||||
buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
|
||||
icon={<Globe />}
|
||||
title="Your node is not connected…"
|
||||
subtitle="You’re not connected to Swarm."
|
||||
status="error"
|
||||
/>
|
||||
)}
|
||||
<div style={{ width: '8px' }}></div>
|
||||
{nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) ? (
|
||||
<Card
|
||||
buttonProps={{
|
||||
iconType: Briefcase,
|
||||
children: 'Manage your wallet',
|
||||
onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
|
||||
}}
|
||||
icon={<Briefcase />}
|
||||
title={`${balance?.bzz.toSignificantDigits(4)} xBZZ | ${balance?.dai.toSignificantDigits(4)} xDAI`}
|
||||
subtitle="Current wallet balance."
|
||||
status="ok"
|
||||
/>
|
||||
) : (
|
||||
<Card
|
||||
buttonProps={{
|
||||
iconType: Settings,
|
||||
children: 'Setup wallet',
|
||||
onClick: () => navigate(ROUTES.WALLET),
|
||||
}}
|
||||
icon={<ArrowUp />}
|
||||
title="Your wallet is not setup."
|
||||
subtitle="To share content on Swarm, please setup your wallet."
|
||||
status="error"
|
||||
/>
|
||||
)}
|
||||
{nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) && (
|
||||
<>
|
||||
<div style={{ width: '8px' }} />
|
||||
{chequebookBalance?.availableBalance !== undefined &&
|
||||
chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) ? (
|
||||
<Card
|
||||
buttonProps={{
|
||||
iconType: RefreshCcw,
|
||||
children: 'View chequebook',
|
||||
onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
|
||||
}}
|
||||
icon={<RefreshCcw />}
|
||||
title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
|
||||
subtitle="Your chequebook is setup and has balance"
|
||||
status="ok"
|
||||
/>
|
||||
) : (
|
||||
<Card
|
||||
buttonProps={{
|
||||
iconType: RefreshCcw,
|
||||
children: 'View chequebook',
|
||||
onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
|
||||
}}
|
||||
icon={<RefreshCcw />}
|
||||
title={
|
||||
chequebookBalance?.availableBalance
|
||||
? `${chequebookBalance.availableBalance.toFixedDecimal(4)} xBZZ`
|
||||
: 'No available balance'
|
||||
}
|
||||
subtitle="Your chequebook is not setup or has no balance."
|
||||
status="error"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ height: '16px' }} />
|
||||
<Map />
|
||||
<div style={{ height: '2px' }} />
|
||||
<ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
|
||||
<ExpandableListItem label="Population" value={topology?.population ?? '-'} />
|
||||
<div style={{ height: '16px' }} />
|
||||
<ExpandableListItem
|
||||
label="Bee version"
|
||||
value={
|
||||
<div>
|
||||
<a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
|
||||
Bee
|
||||
</a>
|
||||
{` ${latestUserVersion ?? '-'} `}
|
||||
{latestUserVersion && (
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
href={latestBeeVersionUrl}
|
||||
target="_blank"
|
||||
style={{ height: '26px' }}
|
||||
>
|
||||
{isLatestBeeVersion ? 'latest' : 'update'}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<ExpandableListItemKey label="Public key" value={nodeAddresses?.publicKey || ''} />
|
||||
<ExpandableListItemKey label="PSS public key" value={nodeAddresses?.pssPublicKey || ''} />
|
||||
<ExpandableListItemKey label="Overlay address (Peer ID)" value={nodeAddresses?.overlay || ''} />
|
||||
|
||||
<ExpandableList level={1} label="Underlay addresses">
|
||||
{nodeAddresses?.underlay.map(addr => (
|
||||
<ExpandableListItem key={addr} value={addr} />
|
||||
))}
|
||||
</ExpandableList>
|
||||
</ExpandableList>
|
||||
<ExpandableList label="Blockchain" defaultOpen>
|
||||
<ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
|
||||
<ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
|
||||
</ExpandableList>
|
||||
<ExpandableList label="Connectivity" defaultOpen>
|
||||
<TopologyStats topology={topology} />
|
||||
</ExpandableList>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useContext, useState } from 'react'
|
||||
import { Check } from 'react-feather'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { providers } from 'ethers'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
import { SwarmTextInput } from '../../components/SwarmTextInput'
|
||||
@@ -11,18 +12,17 @@ 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 { providerUrl, setProviderUrl } = useContext(Context)
|
||||
const [localProviderUrl, setLocalProviderUrl] = useState(providerUrl)
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
const navigate = useNavigate()
|
||||
|
||||
async function onSubmit() {
|
||||
try {
|
||||
await Rpc.eth_getBlockByNumber(provider)
|
||||
await Rpc.eth_getBlockByNumber(new providers.JsonRpcProvider(localProviderUrl))
|
||||
enqueueSnackbar('Connected to RPC provider successfully.', { variant: 'success' })
|
||||
setJsonRpcProvider(provider)
|
||||
setProviderUrl(localProviderUrl)
|
||||
navigate(ROUTES.CONFIRMATION)
|
||||
} catch (error) {
|
||||
enqueueSnackbar('Could not connect to RPC provider.', { variant: 'error' })
|
||||
@@ -49,8 +49,8 @@ export default function Index(): ReactElement {
|
||||
<SwarmTextInput
|
||||
name="rpc-endpoint"
|
||||
label="RPC Endpoint"
|
||||
onChange={event => setProvider(event.target.value)}
|
||||
defaultValue={jsonRpcProvider}
|
||||
onChange={event => setLocalProviderUrl(event.target.value)}
|
||||
defaultValue={providerUrl}
|
||||
/>
|
||||
</Box>
|
||||
<SwarmButton iconType={Check} onClick={onSubmit}>
|
||||
|
||||
@@ -8,7 +8,7 @@ export function CreatePostageStampPage(): ReactElement {
|
||||
const navigate = useNavigate()
|
||||
|
||||
function onFinished() {
|
||||
navigate(ROUTES.STAMPS)
|
||||
navigate(ROUTES.ACCOUNT_STAMPS)
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -9,13 +9,7 @@ import { SwarmTextInput } from '../../components/SwarmTextInput'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { Context as StampsContext } from '../../providers/Stamps'
|
||||
import {
|
||||
calculateStampPrice,
|
||||
convertAmountToSeconds,
|
||||
convertDepthToBytes,
|
||||
secondsToTimeString,
|
||||
waitUntilStampUsable,
|
||||
} from '../../utils'
|
||||
import { calculateStampPrice, convertAmountToSeconds, convertDepthToBytes, secondsToTimeString } from '../../utils'
|
||||
import { getHumanReadableFileSize } from '../../utils/file'
|
||||
|
||||
interface FormValues {
|
||||
@@ -88,8 +82,7 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
|
||||
const amount = BigInt(values.amount)
|
||||
const depth = Number.parseInt(values.depth)
|
||||
const options = values.label ? { label: values.label } : undefined
|
||||
const batch = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
|
||||
await waitUntilStampUsable(batch, beeDebugApi)
|
||||
await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
|
||||
actions.resetForm()
|
||||
await refresh()
|
||||
onFinished()
|
||||
@@ -107,7 +100,7 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
|
||||
const depth = new BigNumber(values.depth)
|
||||
|
||||
if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
|
||||
else if (depth.isLessThan(16)) errors.depth = 'Minimal depth is 16'
|
||||
else if (depth.isLessThan(17)) errors.depth = 'Minimal depth is 17'
|
||||
else if (depth.isGreaterThan(255)) errors.depth = 'Depth has to be at most 255'
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { ReactElement, useContext } from 'react'
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import { SwarmSelect } from '../../components/SwarmSelect'
|
||||
import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
|
||||
@@ -26,6 +26,7 @@ export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactEl
|
||||
options={(stamps || []).map(x => ({ label: x.batchID.slice(0, 8), value: x.batchID }))}
|
||||
onChange={event => onChange(event.target.value as string)}
|
||||
defaultValue={defaultValue}
|
||||
placeholder="Please select a postage stamp..."
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -44,7 +44,7 @@ export default function Stamp(): ReactElement {
|
||||
if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
|
||||
|
||||
function navigateToNewStamp() {
|
||||
navigate(ROUTES.STAMPS_NEW)
|
||||
navigate(ROUTES.ACCOUNT_STAMPS_NEW)
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -19,7 +19,7 @@ import { ResolvedWallet } from '../../utils/wallet'
|
||||
|
||||
export function GiftCardFund(): ReactElement {
|
||||
const { nodeAddresses, balance } = useContext(BeeContext)
|
||||
const { jsonRpcProvider } = useContext(TopUpContext)
|
||||
const { provider, providerUrl } = useContext(TopUpContext)
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [wallet, setWallet] = useState<ResolvedWallet | null>(null)
|
||||
@@ -34,8 +34,8 @@ export function GiftCardFund(): ReactElement {
|
||||
return
|
||||
}
|
||||
|
||||
ResolvedWallet.make(privateKeyString).then(setWallet)
|
||||
}, [privateKeyString])
|
||||
ResolvedWallet.make(privateKeyString, provider).then(setWallet)
|
||||
}, [privateKeyString, provider])
|
||||
|
||||
if (!wallet || !balance) {
|
||||
return <Loading />
|
||||
@@ -49,10 +49,10 @@ export function GiftCardFund(): ReactElement {
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
await wallet.transfer(nodeAddresses.ethereum)
|
||||
await wallet.transfer(nodeAddresses.ethereum, providerUrl)
|
||||
enqueueSnackbar('Successfully funded node, restarting...', { variant: 'success' })
|
||||
await sleepMs(5_000)
|
||||
await upgradeToLightNode(jsonRpcProvider)
|
||||
await upgradeToLightNode(providerUrl)
|
||||
await restartBeeNode()
|
||||
navigate(ROUTES.RESTART_LIGHT)
|
||||
} catch (error) {
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { Box, Typography } from '@material-ui/core'
|
||||
import { Wallet } from 'ethers'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { ReactElement, useState } from 'react'
|
||||
import { ReactElement, useContext, useState } from 'react'
|
||||
import { ArrowRight } from 'react-feather'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { Context as TopUpContext } from '../../providers/TopUp'
|
||||
import { HistoryHeader } from '../../components/HistoryHeader'
|
||||
import { ProgressIndicator } from '../../components/ProgressIndicator'
|
||||
import { SwarmButton } from '../../components/SwarmButton'
|
||||
@@ -11,10 +13,10 @@ 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 { provider } = useContext(TopUpContext)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [giftCode, setGiftCode] = useState('')
|
||||
|
||||
@@ -24,9 +26,9 @@ export function GiftCardTopUpIndex(): ReactElement {
|
||||
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()))
|
||||
const wallet = new Wallet(giftCode, provider)
|
||||
const dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, provider))
|
||||
const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.address, provider))
|
||||
|
||||
if (dai.toDecimal.lt(0.001) || bzz.toDecimal.lt(0.001)) {
|
||||
throw Error('Gift wallet does not have enough funds')
|
||||
|
||||
@@ -28,13 +28,13 @@ 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 { providerUrl } = useContext(TopUpContext)
|
||||
const { balance, nodeAddresses } = useContext(BeeContext)
|
||||
|
||||
const navigate = useNavigate()
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
if (!balance) {
|
||||
if (!balance || !nodeAddresses) {
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@ export function Swap({ header }: Props): ReactElement {
|
||||
await performSwap(daiToSwap.toString)
|
||||
enqueueSnackbar('Successfully swapped, restarting...', { variant: 'success' })
|
||||
await sleepMs(5_000)
|
||||
await upgradeToLightNode(jsonRpcProvider)
|
||||
await upgradeToLightNode(providerUrl)
|
||||
await restartBeeNode()
|
||||
navigate(ROUTES.RESTART_LIGHT)
|
||||
enqueueSnackbar('Upgraded to light node', { variant: 'success' })
|
||||
@@ -98,7 +98,7 @@ export function Swap({ header }: Props): ReactElement {
|
||||
<ArrowDown size={24} color="#aaaaaa" />
|
||||
</Box>
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItemKey label="Funding wallet address" value={balance.address} expanded />
|
||||
<ExpandableListItemKey label="Funding wallet address" value={nodeAddresses.ethereum} expanded />
|
||||
</Box>
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItem
|
||||
|
||||
@@ -40,7 +40,7 @@ export default function Index({ header, title, p, next }: Props): ReactElement {
|
||||
<Box mb={4}>{p}</Box>
|
||||
<SwarmDivider mb={4} />
|
||||
<Box mb={0.25}>
|
||||
<ExpandableListItemKey label="Funding wallet address" value={balance.address} expanded />
|
||||
<ExpandableListItemKey label="Funding wallet address" value={nodeAddresses.ethereum} expanded />
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<ExpandableListItem label="xDAI balance" value={balance.dai.toSignificantDigits(4)} />
|
||||
|
||||
@@ -11,12 +11,13 @@ import {
|
||||
} from '@ethersphere/bee-js'
|
||||
import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import semver from 'semver'
|
||||
import { engines } from '../../package.json'
|
||||
import PackageJson from '../../package.json'
|
||||
import { useLatestBeeRelease } from '../hooks/apiHooks'
|
||||
import { Token } from '../models/Token'
|
||||
import type { Balance, ChequebookBalance, Settlements } from '../types'
|
||||
import { WalletAddress } from '../utils/wallet'
|
||||
import { Context as SettingsContext } from './Settings'
|
||||
import { Context as TopUpContext } from './TopUp'
|
||||
|
||||
export enum CheckState {
|
||||
OK = 'OK',
|
||||
@@ -130,7 +131,7 @@ function getStatus(
|
||||
status.version.isEnabled = true
|
||||
status.version.checkState =
|
||||
debugApiHealth &&
|
||||
semver.satisfies(debugApiHealth.version, engines.bee, {
|
||||
semver.satisfies(debugApiHealth.version, PackageJson.engines.bee, {
|
||||
includePrerelease: true,
|
||||
})
|
||||
? CheckState.OK
|
||||
@@ -184,6 +185,7 @@ function getStatus(
|
||||
|
||||
export function Provider({ children }: Props): ReactElement {
|
||||
const { beeApi, beeDebugApi } = useContext(SettingsContext)
|
||||
const { provider } = useContext(TopUpContext)
|
||||
const [apiHealth, setApiHealth] = useState<boolean>(false)
|
||||
const [debugApiHealth, setDebugApiHealth] = useState<Health | null>(null)
|
||||
const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
|
||||
@@ -238,9 +240,9 @@ export function Provider({ children }: Props): ReactElement {
|
||||
|
||||
useEffect(() => {
|
||||
if (nodeAddresses?.ethereum) {
|
||||
WalletAddress.make(nodeAddresses.ethereum).then(setWalletAddress)
|
||||
WalletAddress.make(nodeAddresses.ethereum, provider).then(setWalletAddress)
|
||||
}
|
||||
}, [nodeAddresses])
|
||||
}, [nodeAddresses, provider])
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => walletAddress?.refresh().then(setWalletAddress), 30_000)
|
||||
|
||||
@@ -34,7 +34,7 @@ interface Props {
|
||||
children: ReactChild
|
||||
}
|
||||
|
||||
function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
|
||||
export function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
|
||||
const { depth, bucketDepth, utilization } = postageBatch
|
||||
|
||||
const usage = utilization / Math.pow(2, depth - bucketDepth)
|
||||
|
||||
+21
-19
@@ -1,26 +1,27 @@
|
||||
import Wallet from 'ethereumjs-wallet'
|
||||
import { providers, Wallet } from 'ethers'
|
||||
import { createContext, ReactElement, useEffect, useState } from 'react'
|
||||
import { setJsonRpcInDesktop } from '../utils/desktop'
|
||||
import { getWalletFromPrivateKeyString } from '../utils/identity'
|
||||
|
||||
const LocalStorageKeys = {
|
||||
jsonRpcProvider: 'json-rpc-provider',
|
||||
providerUrl: 'json-rpc-provider',
|
||||
depositWallet: 'deposit-wallet',
|
||||
giftWallets: 'gift-wallets',
|
||||
invitation: 'invitation',
|
||||
}
|
||||
|
||||
interface ContextInterface {
|
||||
jsonRpcProvider: string
|
||||
providerUrl: string
|
||||
provider: providers.JsonRpcProvider
|
||||
giftWallets: Wallet[]
|
||||
setJsonRpcProvider: (jsonRpcProvider: string) => void
|
||||
setProviderUrl: (providerUrl: string) => void
|
||||
addGiftWallet: (wallet: Wallet) => void
|
||||
}
|
||||
|
||||
const initialValues: ContextInterface = {
|
||||
jsonRpcProvider: '',
|
||||
providerUrl: '',
|
||||
provider: new providers.JsonRpcProvider(),
|
||||
giftWallets: [],
|
||||
setJsonRpcProvider: () => {}, // eslint-disable-line
|
||||
setProviderUrl: () => {}, // eslint-disable-line
|
||||
addGiftWallet: () => {}, // eslint-disable-line
|
||||
}
|
||||
|
||||
@@ -32,38 +33,39 @@ interface Props {
|
||||
}
|
||||
|
||||
export function Provider({ children }: Props): ReactElement {
|
||||
const [jsonRpcProvider, setJsonRpcProvider] = useState(
|
||||
localStorage.getItem('json-rpc-provider') || initialValues.jsonRpcProvider,
|
||||
)
|
||||
const [providerUrl, setProviderUrl] = useState(localStorage.getItem('json-rpc-provider') || initialValues.providerUrl)
|
||||
const [provider, setProvider] = useState(new providers.JsonRpcProvider(providerUrl))
|
||||
const [giftWallets, setGiftWallets] = useState(initialValues.giftWallets)
|
||||
|
||||
useEffect(() => {
|
||||
const existingGiftWallets = localStorage.getItem(LocalStorageKeys.giftWallets)
|
||||
|
||||
if (existingGiftWallets) {
|
||||
setGiftWallets(JSON.parse(existingGiftWallets).map(getWalletFromPrivateKeyString))
|
||||
setGiftWallets(JSON.parse(existingGiftWallets).map((privateKey: string) => new Wallet(privateKey, provider)))
|
||||
}
|
||||
}, [])
|
||||
}, [provider])
|
||||
|
||||
function setAndPersistJsonRpcProvider(jsonRpcProvider: string) {
|
||||
localStorage.setItem(LocalStorageKeys.jsonRpcProvider, jsonRpcProvider)
|
||||
setJsonRpcProvider(jsonRpcProvider)
|
||||
function setAndPersistJsonRpcProvider(providerUrl: string) {
|
||||
localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
|
||||
setProviderUrl(providerUrl)
|
||||
setProvider(new providers.JsonRpcProvider(providerUrl))
|
||||
// eslint-disable-next-line no-console
|
||||
setJsonRpcInDesktop(jsonRpcProvider).catch(console.error)
|
||||
setJsonRpcInDesktop(providerUrl).catch(console.error)
|
||||
}
|
||||
|
||||
function addGiftWallet(wallet: Wallet) {
|
||||
const newArray = [...giftWallets, wallet]
|
||||
localStorage.setItem(LocalStorageKeys.giftWallets, JSON.stringify(newArray.map(x => x.getPrivateKeyString())))
|
||||
localStorage.setItem(LocalStorageKeys.giftWallets, JSON.stringify(newArray.map(x => x.privateKey)))
|
||||
setGiftWallets(newArray)
|
||||
}
|
||||
|
||||
return (
|
||||
<Context.Provider
|
||||
value={{
|
||||
jsonRpcProvider,
|
||||
providerUrl,
|
||||
provider,
|
||||
giftWallets,
|
||||
setJsonRpcProvider: setAndPersistJsonRpcProvider,
|
||||
setProviderUrl: setAndPersistJsonRpcProvider,
|
||||
addGiftWallet,
|
||||
}}
|
||||
>
|
||||
|
||||
+29
-19
@@ -1,7 +1,9 @@
|
||||
import type { ReactElement } from 'react'
|
||||
import { Route, Routes } from 'react-router-dom'
|
||||
import Accounting from './pages/accounting'
|
||||
import Feeds from './pages/feeds'
|
||||
import { AccountChequebook } from './pages/account/chequebook/AccountChequebook'
|
||||
import { AccountFeeds } from './pages/account/feeds/AccountFeeds'
|
||||
import { AccountStamps } from './pages/account/stamps/AccountStamps'
|
||||
import { AccountWallet } from './pages/account/wallet/AccountWallet'
|
||||
import CreateNewFeed from './pages/feeds/CreateNewFeed'
|
||||
import { FeedSubpage } from './pages/feeds/FeedSubpage'
|
||||
import UpdateFeed from './pages/feeds/UpdateFeed'
|
||||
@@ -16,7 +18,6 @@ import Restart from './pages/restart/Restart'
|
||||
import Wallet from './pages/rpc'
|
||||
import Confirmation from './pages/rpc/Confirmation'
|
||||
import Settings from './pages/settings'
|
||||
import Stamps from './pages/stamps'
|
||||
import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampPage'
|
||||
import Status from './pages/status'
|
||||
import { BankCardTopUpIndex } from './pages/top-up/BankCardTopUpIndex'
|
||||
@@ -32,15 +33,8 @@ export enum ROUTES {
|
||||
UPLOAD_IN_PROGRESS = '/files/upload/workflow',
|
||||
DOWNLOAD = '/files/download',
|
||||
HASH = '/files/hash/:hash',
|
||||
ACCOUNTING = '/accounting',
|
||||
SETTINGS = '/settings',
|
||||
STAMPS = '/stamps',
|
||||
STAMPS_NEW = '/stamps/new',
|
||||
STATUS = '/status',
|
||||
FEEDS = '/feeds',
|
||||
FEEDS_NEW = '/feeds/new',
|
||||
FEEDS_UPDATE = '/feeds/update/:hash',
|
||||
FEEDS_PAGE = '/feeds/:uuid',
|
||||
WALLET = '/wallet',
|
||||
CONFIRMATION = '/wallet/confirmation',
|
||||
TOP_UP_CRYPTO = '/top-up/crypto',
|
||||
@@ -49,30 +43,37 @@ export enum ROUTES {
|
||||
TOP_UP_BANK_CARD_SWAP = '/top-up/bank-card/swap',
|
||||
TOP_UP_GIFT_CODE = '/top-up/gift-code',
|
||||
TOP_UP_GIFT_CODE_FUND = '/top-up/gift-code/fund/:privateKeyString',
|
||||
GIFT_CODES = '/gift-codes',
|
||||
RESTART = '/restart',
|
||||
RESTART_LIGHT = '/light-mode-restart',
|
||||
ACCOUNT_WALLET = '/account/wallet',
|
||||
ACCOUNT_CHEQUEBOOK = '/account/chequebook',
|
||||
ACCOUNT_STAMPS = '/account/stamps',
|
||||
ACCOUNT_STAMPS_NEW = '/account/stamps/new',
|
||||
ACCOUNT_FEEDS = '/account/feeds',
|
||||
ACCOUNT_FEEDS_NEW = '/account/feeds/new',
|
||||
ACCOUNT_FEEDS_UPDATE = '/account/feeds/update/:hash',
|
||||
ACCOUNT_FEEDS_VIEW = '/account/feeds/:uuid',
|
||||
ACCOUNT_INVITATIONS = '/account/invitations',
|
||||
}
|
||||
|
||||
export const ACCOUNT_TABS = [
|
||||
ROUTES.ACCOUNT_WALLET,
|
||||
ROUTES.ACCOUNT_CHEQUEBOOK,
|
||||
ROUTES.ACCOUNT_STAMPS,
|
||||
ROUTES.ACCOUNT_FEEDS,
|
||||
]
|
||||
|
||||
const BaseRouter = (): ReactElement => (
|
||||
<Routes>
|
||||
<Route path={ROUTES.UPLOAD_IN_PROGRESS} element={<Upload />} />
|
||||
<Route path={ROUTES.UPLOAD} element={<UploadLander />} />
|
||||
<Route path={ROUTES.DOWNLOAD} element={<Download />} />
|
||||
<Route path={ROUTES.HASH} element={<Share />} />
|
||||
<Route path={ROUTES.ACCOUNTING} element={<Accounting />} />
|
||||
<Route path={ROUTES.SETTINGS} element={<Settings />} />
|
||||
<Route path={ROUTES.STAMPS} element={<Stamps />} />
|
||||
<Route path={ROUTES.STAMPS_NEW} element={<CreatePostageStampPage />} />
|
||||
<Route path={ROUTES.STATUS} element={<Status />} />
|
||||
<Route path={ROUTES.FEEDS} element={<Feeds />} />
|
||||
<Route path={ROUTES.FEEDS_NEW} element={<CreateNewFeed />} />
|
||||
<Route path={ROUTES.FEEDS_UPDATE} element={<UpdateFeed />} />
|
||||
<Route path={ROUTES.FEEDS_PAGE} element={<FeedSubpage />} />
|
||||
<Route path={ROUTES.INFO} element={<Info />} />
|
||||
<Route path={ROUTES.WALLET} element={<Wallet />} />
|
||||
<Route path={ROUTES.CONFIRMATION} element={<Confirmation />} />
|
||||
<Route path={ROUTES.GIFT_CODES} element={<GiftCards />} />
|
||||
<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 />} />
|
||||
@@ -81,6 +82,15 @@ const BaseRouter = (): ReactElement => (
|
||||
<Route path={ROUTES.TOP_UP_GIFT_CODE_FUND} element={<GiftCardFund />} />
|
||||
<Route path={ROUTES.RESTART} element={<Restart />} />
|
||||
<Route path={ROUTES.RESTART_LIGHT} element={<LightModeRestart />} />
|
||||
<Route path={ROUTES.ACCOUNT_WALLET} element={<AccountWallet />} />
|
||||
<Route path={ROUTES.ACCOUNT_CHEQUEBOOK} element={<AccountChequebook />} />
|
||||
<Route path={ROUTES.ACCOUNT_STAMPS} element={<AccountStamps />} />
|
||||
<Route path={ROUTES.ACCOUNT_STAMPS_NEW} element={<CreatePostageStampPage />} />
|
||||
<Route path={ROUTES.ACCOUNT_FEEDS} element={<AccountFeeds />} />
|
||||
<Route path={ROUTES.ACCOUNT_FEEDS_NEW} element={<CreateNewFeed />} />
|
||||
<Route path={ROUTES.ACCOUNT_FEEDS_UPDATE} element={<UpdateFeed />} />
|
||||
<Route path={ROUTES.ACCOUNT_FEEDS_VIEW} element={<FeedSubpage />} />
|
||||
<Route path={ROUTES.ACCOUNT_INVITATIONS} element={<GiftCards />} />
|
||||
</Routes>
|
||||
)
|
||||
|
||||
|
||||
+15
-9
@@ -1,5 +1,5 @@
|
||||
import { createTheme, Theme } from '@material-ui/core/styles'
|
||||
import { orange } from '@material-ui/core/colors'
|
||||
import { createTheme, Theme } from '@material-ui/core/styles'
|
||||
|
||||
declare module '@material-ui/core/styles/createPalette' {
|
||||
interface TypeBackground {
|
||||
@@ -174,7 +174,7 @@ export const theme = createTheme({
|
||||
palette: {
|
||||
type: 'light',
|
||||
background: {
|
||||
default: '#efefef',
|
||||
default: '#ededed',
|
||||
},
|
||||
primary: {
|
||||
light: '#fcf2e8',
|
||||
@@ -186,23 +186,29 @@ export const theme = createTheme({
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
|
||||
fontFamily: ['iAWriterQuattroV', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
|
||||
h1: {
|
||||
fontSize: '1.3rem',
|
||||
fontWeight: 500,
|
||||
fontSize: '1.1rem',
|
||||
fontWeight: 600,
|
||||
},
|
||||
h2: {
|
||||
fontSize: '1rem',
|
||||
fontWeight: 500,
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: 600,
|
||||
},
|
||||
h3: {
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 500,
|
||||
},
|
||||
body1: {
|
||||
fontSize: '0.85rem',
|
||||
},
|
||||
body2: {
|
||||
fontFamily: '"IBM Plex Mono", monospace',
|
||||
fontFamily: '"iAWriterMonoV", monospace',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
fontSize: '0.85rem',
|
||||
},
|
||||
button: {
|
||||
textTransform: 'none',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
+23
-7
@@ -1,5 +1,5 @@
|
||||
import axios from 'axios'
|
||||
import { getJson, postJson } from './net'
|
||||
import { getJson, postJson, sendRequest } from './net'
|
||||
|
||||
interface DesktopStatus {
|
||||
status: 0 | 1 | 2
|
||||
@@ -9,7 +9,7 @@ interface DesktopStatus {
|
||||
}
|
||||
|
||||
export async function getDesktopStatus(): Promise<DesktopStatus> {
|
||||
const response = await getJson(`http://${getDesktopHost()}/status`)
|
||||
const response = await getJson(`${getDesktopHost()}/status`)
|
||||
|
||||
return response as DesktopStatus
|
||||
}
|
||||
@@ -33,21 +33,37 @@ export async function setJsonRpcInDesktop(value: string): Promise<void> {
|
||||
}
|
||||
|
||||
async function updateDesktopConfiguration(values: Record<string, unknown>): Promise<void> {
|
||||
await postJson(`http://${getDesktopHost()}/config`, values)
|
||||
await postJson(`${getDesktopHost()}/config`, values)
|
||||
}
|
||||
|
||||
export async function restartBeeNode(): Promise<void> {
|
||||
await postJson(`http://${getDesktopHost()}/restart`)
|
||||
await postJson(`${getDesktopHost()}/restart`)
|
||||
}
|
||||
|
||||
export async function createGiftWallet(address: string): Promise<void> {
|
||||
await postJson(`http://${getDesktopHost()}/gift-wallet/${address}`)
|
||||
await postJson(`${getDesktopHost()}/gift-wallet/${address}`)
|
||||
}
|
||||
|
||||
export async function performSwap(daiAmount: string): Promise<void> {
|
||||
await postJson(`http://${getDesktopHost()}/swap`, { dai: daiAmount })
|
||||
await postJson(`${getDesktopHost()}/swap`, { dai: daiAmount })
|
||||
}
|
||||
|
||||
export async function getBeeDesktopLogs(): Promise<string> {
|
||||
const response = await sendRequest(`${getDesktopHost()}/logs/bee-desktop`, 'GET')
|
||||
|
||||
return response as unknown as string
|
||||
}
|
||||
|
||||
export async function getBeeLogs(): Promise<string> {
|
||||
const response = await sendRequest(`${getDesktopHost()}/logs/bee`, 'GET')
|
||||
|
||||
return response as unknown as string
|
||||
}
|
||||
|
||||
function getDesktopHost(): string {
|
||||
return window.location.host
|
||||
if (process.env.REACT_APP_BEE_DESKTOP_URL) {
|
||||
return process.env.REACT_APP_BEE_DESKTOP_URL
|
||||
}
|
||||
|
||||
return `http://${window.location.host}`
|
||||
}
|
||||
|
||||
+16
-28
@@ -1,14 +1,10 @@
|
||||
import { Bee, Reference } from '@ethersphere/bee-js'
|
||||
import Wallet from 'ethereumjs-wallet'
|
||||
import { uuidV4 } from '.'
|
||||
import { BatchId, Bee, BeeDebug, Reference } from '@ethersphere/bee-js'
|
||||
import { Wallet } from 'ethers'
|
||||
import { uuidV4, waitUntilStampUsable } from '.'
|
||||
import { Identity, IdentityType } from '../providers/Feeds'
|
||||
|
||||
export function generateWallet(): Wallet {
|
||||
const buffer = new Uint8Array(32)
|
||||
crypto.getRandomValues(buffer)
|
||||
const wallet = new Wallet(Buffer.from(buffer))
|
||||
|
||||
return wallet
|
||||
return Wallet.createRandom()
|
||||
}
|
||||
|
||||
export function persistIdentity(identities: Identity[], identity: Identity): void {
|
||||
@@ -35,14 +31,13 @@ export async function convertWalletToIdentity(
|
||||
throw Error('V3 passwords require password')
|
||||
}
|
||||
|
||||
const identityString =
|
||||
type === 'PRIVATE_KEY' ? identity.getPrivateKeyString() : await identity.toV3String(password as string)
|
||||
const identityString = type === 'PRIVATE_KEY' ? identity.privateKey : await identity.encrypt(password as string)
|
||||
|
||||
return {
|
||||
uuid: uuidV4(),
|
||||
name,
|
||||
type: password ? 'V3' : 'PRIVATE_KEY',
|
||||
address: identity.getAddressString(),
|
||||
address: identity.address,
|
||||
identity: identityString,
|
||||
}
|
||||
}
|
||||
@@ -56,14 +51,14 @@ export async function importIdentity(name: string, data: string): Promise<Identi
|
||||
name,
|
||||
type: 'PRIVATE_KEY',
|
||||
identity: data,
|
||||
address: wallet.getAddressString(),
|
||||
address: wallet.address,
|
||||
}
|
||||
}
|
||||
|
||||
if (data.length === 66 && data.toLowerCase().startsWith('0x')) {
|
||||
const wallet = await getWallet('PRIVATE_KEY', data.slice(2))
|
||||
|
||||
return { uuid: uuidV4(), name, type: 'PRIVATE_KEY', identity: data, address: wallet.getAddressString() }
|
||||
return { uuid: uuidV4(), name, type: 'PRIVATE_KEY', identity: data, address: wallet.address }
|
||||
}
|
||||
try {
|
||||
const { address } = JSON.parse(data)
|
||||
@@ -79,15 +74,12 @@ function getWalletFromIdentity(identity: Identity, password?: string): Promise<W
|
||||
}
|
||||
|
||||
async function getWallet(type: IdentityType, data: string, password?: string): Promise<Wallet> {
|
||||
return type === 'PRIVATE_KEY' ? getWalletFromPrivateKeyString(data) : await Wallet.fromV3(data, password as string)
|
||||
}
|
||||
|
||||
export function getWalletFromPrivateKeyString(privateKey: string): Wallet {
|
||||
return Wallet.fromPrivateKey(Buffer.from(trimHexString(privateKey), 'hex'))
|
||||
return type === 'PRIVATE_KEY' ? new Wallet(data) : await Wallet.fromEncryptedJson(data, password as string)
|
||||
}
|
||||
|
||||
export async function updateFeed(
|
||||
beeApi: Bee,
|
||||
beeDebugApi: BeeDebug | null,
|
||||
identity: Identity,
|
||||
hash: string,
|
||||
stamp: string,
|
||||
@@ -96,17 +88,13 @@ export async function updateFeed(
|
||||
const wallet = await getWalletFromIdentity(identity, password)
|
||||
|
||||
if (!identity.feedHash) {
|
||||
identity.feedHash = await beeApi.createFeedManifest(stamp, 'sequence', '00'.repeat(32), wallet.getAddressString())
|
||||
identity.feedHash = await beeApi.createFeedManifest(stamp, 'sequence', '00'.repeat(32), wallet.address)
|
||||
}
|
||||
|
||||
const writer = beeApi.makeFeedWriter('sequence', '00'.repeat(32), wallet.getPrivateKeyString())
|
||||
const writer = beeApi.makeFeedWriter('sequence', '00'.repeat(32), wallet.privateKey)
|
||||
|
||||
if (beeDebugApi) {
|
||||
await waitUntilStampUsable(stamp as BatchId, beeDebugApi)
|
||||
}
|
||||
await writer.upload(stamp, hash as Reference)
|
||||
}
|
||||
|
||||
function trimHexString(string: string): string {
|
||||
if (string.toLowerCase().startsWith('0x')) {
|
||||
return string.slice(2)
|
||||
}
|
||||
|
||||
return string
|
||||
}
|
||||
|
||||
+1
-1
@@ -24,7 +24,7 @@ export function isInteger(value: unknown): value is BigNumber | bigint {
|
||||
*
|
||||
* @returns BigNumber - but it may still be NaN or Infinite
|
||||
*/
|
||||
export function makeBigNumber(value: BigNumber | BigInt | number | string): BigNumber | never {
|
||||
export function makeBigNumber(value: BigNumber | bigint | number | string): BigNumber | never {
|
||||
if (BigNumber.isBigNumber(value)) return value
|
||||
|
||||
if (typeof value === 'string') return new BigNumber(value)
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@ export function postJson(url: string, data?: Record<string, any>): Promise<Recor
|
||||
return sendRequest(url, 'POST', data)
|
||||
}
|
||||
|
||||
async function sendRequest(
|
||||
export async function sendRequest(
|
||||
url: string,
|
||||
method: 'GET' | 'POST',
|
||||
data?: Record<string, unknown>,
|
||||
|
||||
+7
-33
@@ -1,45 +1,20 @@
|
||||
import { debounce } from '@material-ui/core'
|
||||
import axios from 'axios'
|
||||
import { Contract, providers, Wallet } from 'ethers'
|
||||
import { bzzContractInterface } from './bzz-contract-interface'
|
||||
|
||||
export const JSON_RPC_PROVIDER = 'https://gno.getblock.io/mainnet/?api_key=d7b92d96-9784-49a8-a800-b3edd1647fc7'
|
||||
|
||||
async function eth_getBalance(address: string): Promise<string> {
|
||||
async function eth_getBalance(address: string, provider: providers.JsonRpcProvider): Promise<string> {
|
||||
if (!address.startsWith('0x')) {
|
||||
address = `0x${address}`
|
||||
}
|
||||
const response = await axios(JSON_RPC_PROVIDER, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
data: {
|
||||
jsonrpc: '2.0',
|
||||
method: 'eth_getBalance',
|
||||
params: [address, 'latest'],
|
||||
id: 1,
|
||||
},
|
||||
})
|
||||
const balance = await provider.getBalance(address)
|
||||
|
||||
return response.data.result
|
||||
return balance.toString()
|
||||
}
|
||||
|
||||
async function eth_getBlockByNumber(provider = JSON_RPC_PROVIDER): Promise<string> {
|
||||
const response = await axios(provider, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
data: {
|
||||
jsonrpc: '2.0',
|
||||
method: 'eth_getBlockByNumber',
|
||||
params: ['latest', false],
|
||||
id: 1,
|
||||
},
|
||||
})
|
||||
async function eth_getBlockByNumber(provider: providers.JsonRpcProvider): Promise<string> {
|
||||
const blockNumber = await provider.getBlockNumber()
|
||||
|
||||
return response.data.result
|
||||
return blockNumber.toString()
|
||||
}
|
||||
|
||||
const partialERC20tokenABI = [
|
||||
@@ -63,10 +38,9 @@ const partialERC20tokenABI = [
|
||||
},
|
||||
]
|
||||
|
||||
const provider = new providers.JsonRpcProvider(JSON_RPC_PROVIDER)
|
||||
|
||||
async function eth_getBalanceERC20(
|
||||
address: string,
|
||||
provider: providers.JsonRpcProvider,
|
||||
tokenAddress = '0xdbf3ea6f5bee45c02255b2c26a16f300502f68da',
|
||||
): Promise<string> {
|
||||
if (!address.startsWith('0x')) {
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { config } from '../config'
|
||||
import * as Sentry from '@sentry/react'
|
||||
import packageJson from '../../package.json'
|
||||
import { BrowserTracing } from '@sentry/tracing'
|
||||
import { getBeeDesktopLogs, getBeeLogs } from './desktop'
|
||||
|
||||
export async function initSentry(): Promise<void> {
|
||||
let tunnelAvailable
|
||||
|
||||
try {
|
||||
const result = await fetch(`${config.BEE_DESKTOP_URL}/sentry`, { method: 'OPTIONS' })
|
||||
|
||||
if (result.status === 204) {
|
||||
tunnelAvailable = true
|
||||
}
|
||||
} catch (e) {
|
||||
// There was an error, so tunnel is not available
|
||||
tunnelAvailable = false
|
||||
}
|
||||
|
||||
Sentry.init({
|
||||
dsn: config.SENTRY_KEY,
|
||||
release: packageJson.version,
|
||||
environment: config.SENTRY_ENVIRONMENT,
|
||||
tunnel: tunnelAvailable ? `${config.BEE_DESKTOP_URL}/sentry` : undefined,
|
||||
integrations: [new BrowserTracing({ tracingOrigins: ['localhost'] })],
|
||||
tracesSampleRate: 0.3,
|
||||
beforeSend: async (event, hint) => {
|
||||
hint.attachments = []
|
||||
|
||||
try {
|
||||
// This will fail if we are not running in Bee Desktop, but that is alright
|
||||
hint.attachments.push({ filename: 'bee-desktop.log', data: await getBeeDesktopLogs() })
|
||||
// eslint-disable-next-line no-empty
|
||||
} catch (e) {}
|
||||
|
||||
try {
|
||||
// This will fail if we are not running in Bee Desktop, but that is alright
|
||||
hint.attachments.push({ filename: 'bee.log', data: await getBeeLogs() })
|
||||
// eslint-disable-next-line no-empty
|
||||
} catch (e) {}
|
||||
|
||||
return event
|
||||
},
|
||||
})
|
||||
}
|
||||
+30
-24
@@ -1,23 +1,27 @@
|
||||
import Wallet from 'ethereumjs-wallet'
|
||||
import { providers, Wallet } from 'ethers'
|
||||
import { sleepMs } from '.'
|
||||
import { BzzToken } from '../models/BzzToken'
|
||||
import { DaiToken } from '../models/DaiToken'
|
||||
import { getWalletFromPrivateKeyString } from './identity'
|
||||
import { Rpc } from './rpc'
|
||||
|
||||
export class WalletAddress {
|
||||
private constructor(public address: string, public bzz: BzzToken, public dai: DaiToken) {}
|
||||
private constructor(
|
||||
public address: string,
|
||||
public bzz: BzzToken,
|
||||
public dai: DaiToken,
|
||||
public provider: providers.JsonRpcProvider,
|
||||
) {}
|
||||
|
||||
static async make(address: string): Promise<WalletAddress> {
|
||||
const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(address))
|
||||
const dai = new DaiToken(await Rpc._eth_getBalance(address))
|
||||
static async make(address: string, provider: providers.JsonRpcProvider): Promise<WalletAddress> {
|
||||
const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(address, provider))
|
||||
const dai = new DaiToken(await Rpc._eth_getBalance(address, provider))
|
||||
|
||||
return new WalletAddress(address, bzz, dai)
|
||||
return new WalletAddress(address, bzz, dai, provider)
|
||||
}
|
||||
|
||||
public async refresh(): Promise<WalletAddress> {
|
||||
this.bzz = new BzzToken(await Rpc._eth_getBalanceERC20(this.address))
|
||||
this.dai = new DaiToken(await Rpc._eth_getBalance(this.address))
|
||||
this.bzz = new BzzToken(await Rpc._eth_getBalanceERC20(this.address, this.provider))
|
||||
this.dai = new DaiToken(await Rpc._eth_getBalance(this.address, this.provider))
|
||||
|
||||
return this
|
||||
}
|
||||
@@ -27,32 +31,34 @@ export class ResolvedWallet {
|
||||
public address: string
|
||||
public privateKey: string
|
||||
|
||||
private constructor(public wallet: Wallet, public bzz: BzzToken, public dai: DaiToken) {
|
||||
this.address = wallet.getAddressString()
|
||||
this.privateKey = wallet.getPrivateKeyString()
|
||||
private constructor(
|
||||
public wallet: Wallet,
|
||||
public bzz: BzzToken,
|
||||
public dai: DaiToken,
|
||||
public provider: providers.JsonRpcProvider,
|
||||
) {
|
||||
this.address = wallet.address
|
||||
this.privateKey = wallet.privateKey
|
||||
}
|
||||
|
||||
static async make(privateKeyOrWallet: string | Wallet): Promise<ResolvedWallet> {
|
||||
static async make(privateKeyOrWallet: string | Wallet, provider: providers.JsonRpcProvider): Promise<ResolvedWallet> {
|
||||
const wallet =
|
||||
typeof privateKeyOrWallet === 'string' ? getWalletFromPrivateKeyString(privateKeyOrWallet) : privateKeyOrWallet
|
||||
const address = wallet.getAddressString()
|
||||
const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(address))
|
||||
const dai = new DaiToken(await Rpc._eth_getBalance(address))
|
||||
typeof privateKeyOrWallet === 'string' ? new Wallet(privateKeyOrWallet, provider) : privateKeyOrWallet
|
||||
const address = wallet.address
|
||||
const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(address, provider))
|
||||
const dai = new DaiToken(await Rpc._eth_getBalance(address, provider))
|
||||
|
||||
return new ResolvedWallet(wallet, bzz, dai)
|
||||
return new ResolvedWallet(wallet, bzz, dai, provider)
|
||||
}
|
||||
|
||||
public async refresh(): Promise<ResolvedWallet> {
|
||||
this.bzz = new BzzToken(await Rpc._eth_getBalanceERC20(this.address))
|
||||
this.dai = new DaiToken(await Rpc._eth_getBalance(this.address))
|
||||
this.bzz = new BzzToken(await Rpc._eth_getBalanceERC20(this.address, this.provider))
|
||||
this.dai = new DaiToken(await Rpc._eth_getBalance(this.address, this.provider))
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
public async transfer(
|
||||
destination: string,
|
||||
jsonRpcProvider = 'https://gno.getblock.io/mainnet/?api_key=d7b92d96-9784-49a8-a800-b3edd1647fc7',
|
||||
): Promise<void> {
|
||||
public async transfer(destination: string, jsonRpcProvider: string): Promise<void> {
|
||||
const DUMMY_GAS_PRICE = '300000000000000'
|
||||
|
||||
if (this.bzz.toDecimal.gt(0.1)) {
|
||||
|
||||
Executable
+54
@@ -0,0 +1,54 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const axios = require('axios')
|
||||
const fs = require('fs')
|
||||
const getMapJSON = require('dotted-map').getMapJSON
|
||||
|
||||
const DATA_SOURCE = 'https://swarmscan-api.resenje.org/v1/network/dump'
|
||||
const DATA_DESTINATION = './src/assets/data/nodes-db.json'
|
||||
const MAP_HEIGHT = 50
|
||||
const MAP_DESTINATION = './src/assets/data/map-data.json'
|
||||
|
||||
async function getData(url) {
|
||||
const res = await axios.get(url)
|
||||
|
||||
return res.data
|
||||
}
|
||||
|
||||
function processData(data) {
|
||||
const db = new Map()
|
||||
data.nodes.forEach(node => {
|
||||
db.set(node.overlay, { lat: node.location.latitude, lng: node.location.longitude })
|
||||
})
|
||||
|
||||
return Object.fromEntries([...db.entries()].sort())
|
||||
}
|
||||
|
||||
function saveFile(db, path) {
|
||||
return fs.writeFileSync(path, JSON.stringify(db, null, 2))
|
||||
}
|
||||
|
||||
function preComputeMap() {
|
||||
return getMapJSON({ height: MAP_HEIGHT, grid: 'diagonal' })
|
||||
}
|
||||
|
||||
async function main() {
|
||||
console.log('Fetching DB data')
|
||||
const dataDump = await getData(DATA_SOURCE)
|
||||
|
||||
console.log('Processing DB data')
|
||||
const db = processData(dataDump)
|
||||
|
||||
console.log('Saving DB data')
|
||||
saveFile(db, DATA_DESTINATION)
|
||||
|
||||
console.log('Pre-computing the word map')
|
||||
const map = preComputeMap()
|
||||
|
||||
console.log('Saving map data')
|
||||
saveFile(map, MAP_DESTINATION)
|
||||
|
||||
console.log('Done')
|
||||
}
|
||||
|
||||
main()
|
||||
Reference in New Issue
Block a user