feat: polish app (#669)

src/pages/account/chequebook/AccountChequebook.tsx

@@ -1,3 +1,4 @@
+import { Utils } from '@ethersphere/bee-js'
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
@@ -57,7 +58,10 @@ export function AccountChequebook(): ReactElement {
           </ExpandableList>
         )}
         <ExpandableList label="Blockchain" defaultOpen>
-          <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
+          <ExpandableListItemKey
+            label="Ethereum address"
+            value={nodeAddresses?.ethereum ? Utils.capitalizeAddressERC55(nodeAddresses.ethereum) : ''}
+          />
           <ExpandableListItemKey
             label="Chequebook contract address"
             value={chequebookAddress?.chequebookAddress || ''}

src/pages/account/wallet/AccountWallet.tsx

@@ -1,4 +1,4 @@
-import { BeeModes } from '@ethersphere/bee-js'
+import { BeeModes, Utils } from '@ethersphere/bee-js'
 import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
 import { useNavigate } from 'react-router'
@@ -26,7 +26,7 @@ export function AccountWallet(): ReactElement {
   const navigate = useNavigate()
 
   function onCheckTransactions() {
-    window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
+    window.open(`https://gnosisscan.io/address/${nodeAddresses?.ethereum}`, '_blank')
   }
 
   function onInvite() {
@@ -56,7 +56,11 @@ export function AccountWallet(): ReactElement {
       {balance && nodeAddresses ? (
         <>
           <Box mb={0.25}>
-            <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
+            <ExpandableListItemKey
+              label="Node wallet address"
+              value={Utils.capitalizeAddressERC55(nodeAddresses.ethereum)}
+              expanded
+            />
           </Box>
           <Box mb={0.25}>
             <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
@@ -72,7 +76,7 @@ export function AccountWallet(): ReactElement {
       )}
       <ExpandableListItemActions>
         <SwarmButton onClick={onCheckTransactions} iconType={Link}>
-          Check transactions on Blockscout
+          Check transactions
         </SwarmButton>
         {isDesktop && (
           <SwarmButton onClick={onInvite} iconType={Gift}>

src/pages/info/ChequebookInfoCard.tsx

@@ -17,12 +17,12 @@ export function ChequebookInfoCard() {
       <Card
         buttonProps={{
           iconType: ExchangeFunds,
-          children: 'View chequebook',
+          children: 'Manage chequebook',
           onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
         }}
         icon={<ExchangeFunds />}
         title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
-        subtitle="Current chequebook balance."
+        subtitle="Network transfer balance."
         status="ok"
       />
     )
@@ -32,7 +32,7 @@ export function ChequebookInfoCard() {
     <Card
       buttonProps={{
         iconType: ExchangeFunds,
-        children: 'View chequebook',
+        children: 'Manage chequebook',
         onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
       }}
       icon={<ExchangeFunds />}

src/pages/info/index.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
+import { ChainSync } from '../../components/ChainSync'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import Map from '../../components/Map'
 import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../constants'
@@ -19,11 +20,17 @@ export default function Status(): ReactElement {
 
   return (
     <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', alignContent: 'stretch' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'stretch',
+          alignContent: 'stretch',
+          gap: '8px',
+        }}
+      >
         <NodeInfoCard />
-        <div style={{ width: '8px' }}></div>
         <WalletInfoCard />
-        <div style={{ width: '8px' }}></div>
         <ChequebookInfoCard />
       </div>
       <div style={{ height: '16px' }} />
@@ -31,6 +38,9 @@ export default function Status(): ReactElement {
       <div style={{ height: '2px' }} />
       <ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
       <ExpandableListItem label="Population" value={topology?.population ?? '-'} />
+      <ExpandableListItem label="Depth" value={topology?.depth ?? '-'} />
+      <ChainSync />
+
       <div style={{ height: '16px' }} />
       {isDesktop && (
         <ExpandableListItem

src/pages/stamps/PostageStampAdvancedCreation.tsx

@@ -72,7 +72,7 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
 
     return `${secondsToTimeString(
       convertAmountToSeconds(amount, pricePerBlock),
-    )} (with price of ${pricePerBlock.toFixed(0)} per block)`
+    )} (with price of ${pricePerBlock.toFixed(0)} PLUR per block)`
   }
 
   function getPrice(depth: number, amount: bigint): string {

src/pages/stamps/PostageStampStandardCreation.tsx

@@ -67,7 +67,7 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
 
     return `${secondsToTimeString(
       convertAmountToSeconds(parseInt(amount, 10), pricePerBlock),
-    )} (with price of ${pricePerBlock.toFixed(0)} per block)`
+    )} (with price of ${pricePerBlock.toFixed(0)} PLUR per block)`
   }
 
   function getPrice(depth: number, amount: bigint): string {
@@ -196,7 +196,7 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
         </Box>
         <Box display="flex" justifyContent={'right'} mt={0.5}>
           <Typography style={{ fontSize: '10px', color: 'rgba(0, 0, 0, 0.26)' }}>
-            Current price of 24000 per block
+            Current price of 24000 PLUR per block
           </Typography>
         </Box>
       </Box>