Initial Proof of Concept UI #1

matt-mertens · 2021-03-06T04:48:09Z

General layout and application shell for the UI created as well as provide an interface for many of the debug / files API endpoints

Dev

Add troubleshooting block

vojtechsimetka

Great work so far! I really like it as a general skeleton. If I can ask you, please focus mostly on the Status tab for now. We really want it to be something that guides new users when setting up bee and can alert them on problem. I don't want to impose my ideas, but I'd like to share my very rudimental idea (feel free to do it as you want!). I imagined it as the Vertical Stepper component which would detect which steps are already done and which is the one user still needs to do as per the original assignment.

I know this is WIP, but I'll share few things that I noticed:

The SideBardoes not show active element
Status page is mapped to both / and /status
You often have fetch function and state variable where you store the result. This can be extracted into custom hook which would be more readable and easier to reuse https://reactjs.org/docs/hooks-custom.html
Try and use the corresponding bee-js function calls rather than custom Axios. If you are missing any functionality let us know and we build it :) .

Also a comment for myself - add linter and linting rules. We usually use rules like interfaces should not be prepended with I, no semicolon at the end of command, no functions starting with upper case or some of the spacing. Don't worry about this though - we can solve linter later.

package.json

public/index.html

src/components/NavBar.tsx

src/pages/accounting/AccountCard.tsx

vojtechsimetka · 2021-03-06T15:36:21Z

src/pages/accounting/index.tsx

+    const [chequebookAddress, setChequebookAddress] = useState({ chequebookaddress: '' });
+    const [loadingChequebookAddress, setLoadingChequebookAddress] = useState(false);
+
+    const [chequebookBalance, setChequebookBalance] = useState({ totalBalance: 0, availableBalance: 0});
+    const [loadingChequebookBalance, setLoadingChequebookBalance] = useState(false);
+
+    const [peerBalances, setPeerBalances] = useState({ balances: [{peer: '-', balance: 0 }] });
+    const [loadingPeerBalances, setLoadingPeerBalances] = useState(false);
+
+    const [peerCheques, setPeerCheques] = useState({ lastcheques: [{peer: '-', lastsent: {beneficiary: '', chequebook: '', payout: 0}, lastreceived: {beneficiary: '', chequebook: '', payout: 0} }] });
+    const [loadingPeerCheques, setLoadingPeerCheques] = useState(false);
+
+    const [nodeAddresses, setNodeAddresses] = useState({ overlay: '', underlay: [""], ethereum: '', public_key: '', pss_public_key: ''});
+    const [loadingNodeAddresses, setLoadingNodeAddresses] = useState(false);
+
+    const [nodeSettlements, setNodeSettlements] = useState({ totalreceived: 0, totalsent: 0, settlements: [{peer: '-', received: 0, sent: 0}] });
+    const [loadingNodeSettlements, setLoadingNodeSettlements] = useState(false);


These should probably be typed just to avoid type mistakes. E.g. one of these

import type { PeerBalance, BalanceResponse } from '@ethersphere/bee-js' const [peerBalances, setPeerBalances] = useState<BalanceResponse>({ balances: [{peer: '-', balance: 0 }] }); // OR const [peerBalances, setPeerBalances] = useState<PeerBalance[]>([{peer: '-', balance: 0 }]);

Btw it also likely can be just an empty array :)

Yeah now that I know that beeJS has all the types included I agree. I dont have a ton of experience with Typescript so I wasnt really sure how to handle this situation. Theres defintely a few places where I used types of "any" that'll need to be fixed.

vojtechsimetka · 2021-03-06T15:47:26Z

src/services/bee.tsx

+const beeApiClient = (): AxiosInstance => {
+    return axios.create({
+        baseURL: process.env.REACT_APP_BEE_HOST
+    })
+}
+
+const beeDebugApiClient = (): AxiosInstance => {
+    return axios.create({
+        baseURL: process.env.REACT_APP_BEE_DEBUG_HOST
+    })
+}


Could this be replaced by bee-js calls on top of Bee resp BeeDebug class?

Yeah Im just getting familar with beeJS so I wasn't too sure of all the functionality. I just realized all the types for bee were already in the library! Should have read through the documentation more haha.

I removed the beeJS api client but kept the debug one though since I dont see all the APIs for the debug on beeJS.

Im leaving it wrapped in the "service" for now because I wasnt sure how stable the beeJS library API was and think its easier to update API changes from the single place. I think once the beeJS library is stable and out of beta this can definitely be removed.

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

add initial setup workflow

…orkflow

vojtechsimetka · 2021-03-07T15:57:25Z

Few more UX suggestions:

make the steps clickable so that users can skip back and forth more easily
I would consider overwriting the numbers with status icon or just keep the numbers and put the status icon in front of the step name
the troubleshoot text is only for linux. That is fine for now, but please think about how this could be separated into different supported OSes. Also having OS detection would be nice

-Consider making the Ethereum Swarm footer non-fixed or putting it to the left column

In general if we can shave off some margins would be nice so that it is less likely to overflow
Not sure if already implemented but several things for me don't work - dark mode, wallet connection, the copy on ETH address etc

matt-mertens · 2021-03-07T16:11:13Z

Thanks for the feedback.

make the steps clickable so that users can skip back and forth more easily
I would consider overwriting the numbers with status icon or just keep the numbers and put the status icon in front of the step name

100% agree with both of the above suggestions, will plan on adding

the troubleshoot text is only for linux. That is fine for now, but please think about how this could be separated into different supported OSes. Also having OS detection would be nice

Agree, for now I plan on just getting it up for linux but would appreciate input from others to make it more helpful for all OS's

matt-mertens · 2021-03-07T16:15:47Z

-Consider making the Ethereum Swarm footer non-fixed or putting it to the left column

^^^ Ive been playing around with this an cannot get it to function properly

Not sure if already implemented but several things for me don't work - dark mode, wallet connection, the copy on ETH address etc

Dark mode - currently it works off device preference detection, just need to add the last bit of enabling control with the navbar button

Wallet Connection - placeholder for now but was intending to make it so that you can connect a wallet to directly fund the node from the UI to help with a more seemless setup process

Copy on ETH address - this is currently working for me, perhaps open an issue and note any errors your seeing

src/App.tsx

src/pages/status/index.tsx

vojtechsimetka

Hey, great work! Let's aim to merge this, but before we do so:

There is a lot of warnings in the compilation of unused variables etc. Can we clean those up?
I am also confused by the amount of logos, can this also be cleaned up?
Please remove all the functionality that does not exist - e.g. file uploading. We can do this in some other PR :)

We did a thorough review today with the team and identified number of improvements we'd like to see. I'm listing here those that I would like to see implemented in this PR:

src/App.tsx

src/components/CashoutModal.tsx

vojtechsimetka · 2021-03-10T15:38:07Z

src/components/CodeBlockTabs.tsx

+      const AntTab = withStyles((theme: Theme) =>
+        createStyles({
+          root: {
+            textTransform: 'none',
+            minWidth: 72,
+            backgroundColor: 'transparent',
+            fontWeight: theme.typography.fontWeightRegular,
+            marginRight: theme.spacing(4),
+            fontFamily: [
+              '-apple-system',
+              'BlinkMacSystemFont',
+              '"Segoe UI"',
+              'Roboto',
+              '"Helvetica Neue"',
+              'Arial',
+              'sans-serif',
+              '"Apple Color Emoji"',
+              '"Segoe UI Emoji"',
+              '"Segoe UI Symbol"',
+            ].join(','),
+            '&:hover': {
+              color: '#3f51b5',
+              opacity: 1,
+            },
+            '&$selected': {
+              color: '#3f51b5',
+              fontWeight: theme.typography.fontWeightMedium,
+            },
+            '&:focus': {
+              color: '#3f51b5',
+            },
+          },
+          selected: {},
+        }),
+      )((props: StyledTabProps) => <Tab disableRipple {...props} />);


This is extremely inefficient, can you externalize it into a separate component?

src/components/WithdrawlModal.tsx

src/hooks/apiHooks.tsx

vojtechsimetka · 2021-03-10T15:50:02Z

src/pages/accounting/index.tsx

+      const AntTab = withStyles((theme: Theme) =>
+        createStyles({
+          root: {
+            textTransform: 'none',
+            minWidth: 72,
+            backgroundColor: 'transparent',
+            fontWeight: theme.typography.fontWeightRegular,
+            marginRight: theme.spacing(4),
+            fontFamily: [
+              '-apple-system',
+              'BlinkMacSystemFont',
+              '"Segoe UI"',
+              'Roboto',
+              '"Helvetica Neue"',
+              'Arial',
+              'sans-serif',
+              '"Apple Color Emoji"',
+              '"Segoe UI Emoji"',
+              '"Segoe UI Symbol"',
+            ].join(','),
+            '&:hover': {
+              color: '#3f51b5',
+              opacity: 1,
+            },
+            '&$selected': {
+              color: '#3f51b5',
+              fontWeight: theme.typography.fontWeightMedium,
+            },
+            '&:focus': {
+              color: '#3f51b5',
+            },
+          },
+          selected: {},
+        }),
+      )((props: StyledTabProps) => <Tab disableRipple {...props} />);


Please externalize this into separate component. Also I believe something like that already exists, right?

src/pages/files/index.tsx

src/components/EthereumAddressCard.tsx

src/pages/accounting/AccountCard.tsx

…t anytime

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

vojtechsimetka

Went over it again, and it is quite good. So I will merge and let's tackle the improvements as individual PRs.

vojtechsimetka · 2021-03-12T15:39:13Z

src/App.tsx

+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+      toggleThemeMode(e.matches ? "dark" : "light")
+    });
+
+    return () => window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', e => {
+      toggleThemeMode(e.matches ? "dark" : "light")
+    })


Removing event listener needs the original function to be passed. Basically you are just passing in a different object to be removed.

Suggested change

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {

toggleThemeMode(e.matches ? "dark" : "light")

});

return () => window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', e => {

toggleThemeMode(e.matches ? "dark" : "light")

})

const changeHandle = e => toggleThemeMode(e.matches ? "dark" : "light")

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', changeHandle);

return () => window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', changeHandle)

Easy way to demonstrate is:

// This removes the listener const t = () => console.log('resize removed') window.addEventListener('resize', t) window.removeEventListener('resize', t) // This removes the listener window.addEventListener('resize', () => console.log('resize not removed')) window.removeEventListener('resize', () => console.log('resize not removed'))

vojtechsimetka · 2021-03-12T15:45:27Z

src/components/CodeBlockTabs.tsx

+  var userAgent = window.navigator.userAgent,
+      platform = window.navigator.platform,
+      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
+      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
+      iosPlatforms = ['iPhone', 'iPad', 'iPod'],
+      os = null;
+
+  if (macosPlatforms.indexOf(platform) !== -1) {
+    os = 'macOS';
+  } else if (iosPlatforms.indexOf(platform) !== -1) {
+    os = 'iOS';
+  } else if (windowsPlatforms.indexOf(platform) !== -1) {
+    os = 'windows';
+  } else if (/Android/.test(userAgent)) {
+    os = 'android';
+  } else if (!os && /Linux/.test(platform)) {
+    os = 'linux';
+  }
+
+  return os;


A bit more readable :)

Suggested change

var userAgent = window.navigator.userAgent,

platform = window.navigator.platform,

macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],

windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],

iosPlatforms = ['iPhone', 'iPad', 'iPod'],

os = null;

if (macosPlatforms.indexOf(platform) !== -1) {

os = 'macOS';

} else if (iosPlatforms.indexOf(platform) !== -1) {

os = 'iOS';

} else if (windowsPlatforms.indexOf(platform) !== -1) {

os = 'windows';

} else if (/Android/.test(userAgent)) {

os = 'android';

} else if (!os && /Linux/.test(platform)) {

os = 'linux';

}

return os;

const userAgent = window.navigator.userAgent

const platform = window.navigator.platform

const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K']

const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']

const iosPlatforms = ['iPhone', 'iPad', 'iPod']

if (macosPlatforms.includes(platform)) return 'macOS'

if (iosPlatforms.includes(platform)) return 'iOS'

if (windowsPlatforms.includes(platform)) return 'windows'

if (/Android/.test(userAgent)) return 'android'

if (/Linux/.test(platform)) return 'linux'

return null;

vojtechsimetka · 2021-03-12T16:50:24Z

src/pages/accounting/AccountCard.tsx

+                <div className={classes.details}>
+                    <Skeleton width={180} height={110} animation="wave" style={{ marginLeft: '12px', marginRight: '12px'}} />
+                    <Skeleton width={180} height={110} animation="wave" style={{ marginLeft: '12px', marginRight: '12px'}} />
+                    <Skeleton width={180} height={110} animation="wave" style={{ marginLeft: '12px', marginRight: '12px'}} />
+                    <Skeleton width={180} height={110} animation="wave" />
+                </div>


The style should be extracted into classname with lastchild selector.

vojtechsimetka · 2021-03-12T16:53:06Z

src/pages/accounting/PeerDetailDrawer.tsx

+function truncStringPortion(str: string, firstCharCount=10, endCharCount=10) {
+	var convertedStr="";
+	convertedStr+=str.substring(0, firstCharCount);
+	convertedStr += ".".repeat(3);


Haha this is a bit excessive :). Also it should probably be a template string rather than operation on string

vojtechsimetka · 2021-03-12T16:56:40Z

src/pages/status/NodeSetupWorkflow.tsx

+  useEffect(() => {
+    evaluateNodeStatus()
+  }, [])
+
+  useEffect(() => {
+    evaluateNodeStatus()
+  }, [props])


there should probably be some isLoading state

matt-mertens added 10 commits March 4, 2021 20:55

initial dashboard layout

626fc5c

add node status card

029bf4e

add accounting section, pull peer data

249cdce

add file functionality with bee-js, first iteration of accounts page

97e60cd

Add balances and chequebook table

e197d48

add blockie / identicon for addresses

2a89e2b

add basic settlements table

517fea4

implement theme overrides

76124da

cleanup logging

e13721b

Merge pull request #1 from matmertz25/dev

a104056

Dev

bee-runner bot added the type:pull-request label Mar 6, 2021

matt-mertens added 2 commits March 6, 2021 01:14

Add troubleshooting block

4bef826

Merge pull request #2 from matmertz25/dev

2268dfd

Add troubleshooting block

vojtechsimetka reviewed Mar 6, 2021

View reviewed changes

matt-mertens and others added 12 commits March 6, 2021 13:57

add initial dark theme support, add copy to clipboard, QR code support

26bb653

show active element on sidebar

0dbe8bb

remove duplicate status page and make status page index

be4e6cd

Update package.json

d090ca5

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

Update public/index.html

c589124

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

Update src/pages/accounting/AccountCard.tsx

b934fd1

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

change bee api client to use beeJS library

e173309

add initial setup workflow

b664bb4

Merge branch 'master' into dev

d6dfcfd

Merge pull request #3 from matmertz25/dev

62f43de

add initial setup workflow

breakout ethereum address component, define initial setup workflow

4dbd817

add types to responses, add additional node troubleshooting info to w…

f1af7ed

…orkflow

vojtechsimetka reviewed Mar 7, 2021

View reviewed changes

src/App.tsx Outdated Show resolved Hide resolved

src/pages/status/index.tsx Outdated Show resolved Hide resolved

matt-mertens added 4 commits March 8, 2021 22:58

reload on theme change

1743d38

modify troubleshooting verbage, add cashout functionality and details,

1eff9c3

facilitate file upload with beeJS

f471283

update readme to show UI samples

40cb8f7

vojtechsimetka suggested changes Mar 10, 2021

View reviewed changes

matt-mertens and others added 17 commits March 10, 2021 17:04

remove nnPeersWatermark from peers page

c35880f

split node steps into separate components, make status page visible a…

e20c0b4

…t anytime

minor UI/UX enhancements

9398a9e

format accounting page

db9a4c7

remove WIP wallet connection code

0077136

Update src/components/CashoutModal.tsx

1b8ada1

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

use bigint for deposits/withdrawls

28f9ef2

revise status card

a4cc731

clean up unused imports and variables

3007ece

add api status to sidebar

8bb43dd

obfuscate pages with troubleshooting component when apis not connected

901c6a4

add localhost OS detection for troubleshooting code

e6b0cea

cleanup extra logos

5755a5a

monospace BZZ in tables

89881af

hide troubleshooting page while loading API status

2a2393e

Remove ability to remove peers

d0099c0

add null types to API responses

b1db58b

vojtechsimetka reviewed Mar 12, 2021

View reviewed changes

vojtechsimetka merged commit 34d2dfd into ethersphere:master Mar 12, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial Proof of Concept UI #1

Initial Proof of Concept UI #1

matt-mertens commented Mar 6, 2021

vojtechsimetka left a comment

vojtechsimetka Mar 6, 2021

matt-mertens Mar 6, 2021

vojtechsimetka Mar 6, 2021

matt-mertens Mar 6, 2021

vojtechsimetka commented Mar 7, 2021

matt-mertens commented Mar 7, 2021

matt-mertens commented Mar 7, 2021

vojtechsimetka left a comment •

edited by matt-mertens

vojtechsimetka Mar 10, 2021

vojtechsimetka Mar 10, 2021

vojtechsimetka left a comment

vojtechsimetka Mar 12, 2021

vojtechsimetka Mar 12, 2021

vojtechsimetka Mar 12, 2021

vojtechsimetka Mar 12, 2021

vojtechsimetka Mar 12, 2021

Initial Proof of Concept UI #1

Initial Proof of Concept UI #1

Conversation

matt-mertens commented Mar 6, 2021

vojtechsimetka left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vojtechsimetka commented Mar 7, 2021

matt-mertens commented Mar 7, 2021

matt-mertens commented Mar 7, 2021

vojtechsimetka left a comment • edited by matt-mertens

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vojtechsimetka left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vojtechsimetka left a comment •

edited by matt-mertens