Feature/vesting UI

nym-wallet/config.ts

@@ -1,3 +1,4 @@
 export const config = {
  ADMIN_ADDRESS: process.env.ADMIN_ADDRESS,
+ IS_DEV_MODE: process.env.NODE_ENV === 'development',
 }

nym-wallet/package.json

@@ -22,6 +22,7 @@
  "@types/react-dom": "^17.0.9",
  "bs58": "^4.0.1",
  "clsx": "^1.1.1",
+ "notistack": "^2.0.3",
  "qrcode.react": "^1.0.1",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
@@ -58,4 +59,4 @@
  "webpack-dev-server": "^4.5.0",
  "webpack-merge": "^5.8.0"
  }
-}
+}

nym-wallet/src-tauri/src/main.rs

@@ -65,6 +65,7 @@ fn main() {
  vesting::bond::vesting_bond_mixnode,
  vesting::bond::vesting_unbond_gateway,
  vesting::bond::vesting_unbond_mixnode,
+ vesting::bond::withdraw_vested_coins,
  vesting::delegate::vesting_delegate_to_mixnode,
  vesting::delegate::vesting_undelegate_from_mixnode,
  vesting::queries::delegated_free,

nym-wallet/src-tauri/src/operations/vesting/bond.rs

@@ -3,6 +3,7 @@ use crate::error::BackendError;
 use crate::nymd_client;
 use crate::state::State;
 use crate::{Gateway, MixNode};
+
 use std::convert::TryInto;
 use std::sync::Arc;
 use tokio::sync::RwLock;
@@ -49,3 +50,14 @@ pub async fn vesting_bond_mixnode(
  .await?;
  Ok(())
 }
+
+#[tauri::command]
+pub async fn withdraw_vested_coins(
+ amount: Coin,
+ state: tauri::State<'_, Arc<RwLock<State>>>,
+) -> Result<(), BackendError> {
+ nymd_client!(state)
+ .withdraw_vested_coins(amount.try_into()?)
+ .await?;
+ Ok(())
+}

nym-wallet/src/components/AppBar.tsx

@@ -1,40 +1,21 @@
 import React, { useContext } from 'react'
-import { AppBar as MuiAppBar, Divider, Grid, IconButton, Toolbar, Typography, useMediaQuery } from '@mui/material'
-import { Box } from '@mui/system'
+import { AppBar as MuiAppBar, Grid, IconButton, Toolbar, Typography } from '@mui/material'
 import { Logout } from '@mui/icons-material'
 import { ClientContext } from '../context/main'
-import { CopyToClipboard, NetworkSelector } from '.'
+import { NetworkSelector } from '.'
 import { Node as NodeIcon } from '../svg-icons/node'
 
 export const AppBar = () => {
- const { userBalance, clientDetails, showSettings, logOut, handleShowSettings } = useContext(ClientContext)
- const matches = useMediaQuery('(min-width: 900px)')
+ const { showSettings, logOut, handleShowSettings } = useContext(ClientContext)
 
  return (
- <MuiAppBar position="sticky" sx={{ boxShadow: 'none', bgcolor: 'nym.background.light' }}>
- <Toolbar>
+ <MuiAppBar position="sticky" sx={{ boxShadow: 'none', bgcolor: 'transparent' }}>
+ <Toolbar disableGutters>
  <Grid container justifyContent="space-between" alignItems="center" flexWrap="nowrap">
- <Grid container item alignItems="center">
- <Grid item>
- <AppBarItem primaryText="Balance" secondaryText={userBalance.balance?.printable_balance} />
- </Grid>
- {matches && (
- <>
- <Divider orientation="vertical" variant="middle" flexItem sx={{ mr: 1 }} />
- <Grid item>
- <AppBarItem
- primaryText="Address"
- secondaryText={clientDetails?.client_address}
- Action={<CopyToClipboard text={clientDetails?.client_address} iconButton />}
- />
- </Grid>
- </>
- )}
+ <Grid item>
+ <NetworkSelector />
  </Grid>
  <Grid item container justifyContent="flex-end" md={12} lg={5} spacing={2}>
- <Grid item>
- <NetworkSelector />
- </Grid>
  <Grid item>
  <IconButton
  onClick={handleShowSettings}
@@ -56,20 +37,20 @@ export const AppBar = () => {
  )
 }
 
-const AppBarItem: React.FC<{
- primaryText: string
- secondaryText?: string
- Action?: React.ReactNode
-}> = ({ primaryText, secondaryText = '', Action }) => {
- return (
- <Box sx={{ p: 1, mr: 1 }}>
- <Typography variant="body2" component="span" sx={{ color: 'grey.600' }}>
- {primaryText}:
- </Typography>{' '}
- <Typography variant="body2" component="span" color="nym.background.dark" sx={{ mr: 1 }}>
- {secondaryText}
- </Typography>
- {Action}
- </Box>
- )
-}
+// const AppBarItem: React.FC<{
+//  primaryText: string
+//  secondaryText?: string
+//  Action?: React.ReactNode
+// }> = ({ primaryText, secondaryText = '', Action }) => {
+//  return (
+//  <Box sx={{ p: 1, mr: 1 }}>
+//  <Typography variant="body2" component="span" sx={{ color: 'grey.600' }}>
+//  {primaryText}:
+//  </Typography>{' '}
+//  <Typography variant="body2" component="span" color="nym.background.dark" sx={{ mr: 1 }}>
+//  {secondaryText}
+//  </Typography>
+//  {Action}
+//  </Box>
+//  )
+// }

nym-wallet/src/components/ClientAddress.tsx

@@ -0,0 +1,21 @@
+import React, { useContext } from 'react'
+import { Typography } from '@mui/material'
+import { Box } from '@mui/system'
+import { ClientContext } from '../context/main'
+import { CopyToClipboard } from '../components'
+import { splice } from '../utils'
+
+export const ClientAddress = ({ withCopy }: { withCopy?: boolean }) => {
+ const { clientDetails } = useContext(ClientContext)
+ return (
+ <Box>
+ <Typography variant="body2" component="span" sx={{ color: 'grey.600' }}>
+ Address:
+ </Typography>{' '}
+ <Typography variant="body2" component="span" color="nym.background.dark" sx={{ mr: 1 }}>
+ {splice(4, 35, clientDetails?.client_address)}
+ </Typography>
+ {withCopy && <CopyToClipboard text={clientDetails?.client_address} iconButton />}
+ </Box>
+ )
+}

nym-wallet/src/components/InfoToolTip.tsx

@@ -1,15 +1,19 @@
+import React from 'react'
 import { InfoOutlined } from '@mui/icons-material'
 import { Tooltip, TooltipProps } from '@mui/material'
-import React from 'react'
 
 export const InfoTooltip = ({
  title,
- placement = 'bottom',
+ tooltipPlacement = 'bottom',
+ light,
+ size = 'small',
 }: {
  title: string
- placement?: TooltipProps['placement']
+ tooltipPlacement?: TooltipProps['placement']
+ light?: boolean
+ size?: 'small' | 'medium' | 'large'
 }) => (
- <Tooltip title={title} arrow placement={placement}>
- <InfoOutlined fontSize="small" />
+ <Tooltip title={title} arrow placement={tooltipPlacement}>
+ <InfoOutlined fontSize={size} sx={{ color: light ? 'grey.500' : undefined }} />
  </Tooltip>
 )

nym-wallet/src/components/NetworkSelector.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useContext } from 'react'
 import { Button, List, ListItem, ListItemIcon, ListItemText, ListSubheader, Popover } from '@mui/material'
-import { CheckSharp, KeyboardArrowDown } from '@mui/icons-material'
-import { ClientContext } from '../context/main'
+import { ArrowDropDown, CheckSharp } from '@mui/icons-material'
+import { ClientContext, IS_DEV_MODE } from '../context/main'
 import { Network } from 'src/types'
 
 const networks: { networkName: Network; name: string }[] = [
  { networkName: 'MAINNET', name: 'Nym Mainnet' },
  { networkName: 'SANDBOX', name: 'Testnet Sandbox' },
+ { networkName: 'QA', name: 'QA' },
 ]
 
 export const NetworkSelector = () => {
@@ -25,20 +26,12 @@ export const NetworkSelector = () => {
  return (
  <>
  <Button
- variant={network === 'MAINNET' ? 'contained' : 'outlined'}
+ variant="text"
  color="primary"
- sx={
- network !== 'MAINNET'
- ? {
- color: (theme) => `${theme.palette.nym.background.dark}`,
- border: (theme) => `1px solid ${theme.palette.nym.background.dark}`,
- '&:hover': { border: (theme) => `1px solid ${theme.palette.nym.background.dark}` },
- }
- : {}
- }
+ sx={{ color: (theme) => `${theme.palette.nym.background.dark}` }}
  onClick={handleClick}
  disableElevation
- endIcon={<KeyboardArrowDown sx={{ color: (theme) => `1px solid ${theme.palette.nym.background.dark}` }} />}
+ endIcon={<ArrowDropDown sx={{ color: (theme) => `1px solid ${theme.palette.nym.background.dark}` }} />}
  >
  {networks.find((n) => n.networkName === network)?.name}
  </Button>
@@ -53,17 +46,19 @@ export const NetworkSelector = () => {
  >
  <List>
  <ListSubheader>Network selection</ListSubheader>
- {networks.map(({ name, networkName }) => (
- <NetworkItem
- key={networkName}
- title={name}
- isSelected={networkName === network}
- onSelect={() => {
- handleClose()
- switchNetwork(networkName)
- }}
- />
- ))}
+ {networks
+ .filter((network) => !(!IS_DEV_MODE && network.networkName === 'QA'))
+ .map(({ name, networkName }) => (
+ <NetworkItem
+ key={networkName}
+ title={name}
+ isSelected={networkName === network}
+ onSelect={() => {
+ handleClose()
+ switchNetwork(networkName)
+ }}
+ />
+ ))}
  </List>
  </Popover>
  </>

nym-wallet/src/components/NymCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Box, Card, CardContent, CardHeader } from '@mui/material'
 import { styled } from '@mui/material/styles'
+import { Title } from './Title'
 
 export const NymCard: React.FC<{
  title: string | React.ReactElement
@@ -13,18 +14,17 @@ export const NymCard: React.FC<{
  <Card variant="outlined" sx={{ overflow: 'auto' }}>
  <CardHeader
  sx={{ p: 3, color: 'nym.background.dark' }}
- title={
- <Box display="flex" alignItems="center">
- {Icon && <Icon sx={{ mr: 1 }} />} {title}
- </Box>
- }
+ title={<Title title={title} Icon={Icon} />}
  subheader={subheader}
  data-testid={title}
- titleTypographyProps={{ variant: 'h5' }}
  subheaderTypographyProps={{ variant: 'subtitle1' }}
  action={<Box sx={{ mt: 1, mr: 1 }}>{Action}</Box>}
  />
- {noPadding ? <CardContentNoPadding>{children}</CardContentNoPadding> : <CardContent>{children}</CardContent>}
+ {noPadding ? (
+ <CardContentNoPadding>{children}</CardContentNoPadding>
+ ) : (
+ <CardContent sx={{ p: 3 }}>{children}</CardContent>
+ )}
  </Card>
  )
 }

nym-wallet/src/components/Title.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Box, Typography } from '@mui/material'
+
+export const Title: React.FC<{ title: string | React.ReactNode; Icon: any }> = ({ title, Icon }) => (
+ <Box display="flex" alignItems="center">
+ {Icon && <Icon sx={{ mr: 1 }} />}{' '}
+ <Typography variant="h6" sx={{ fontWeight: 600 }}>
+ {title}
+ </Typography>
+ </Box>
+)

nym-wallet/src/components/index.ts

@@ -11,3 +11,7 @@ export * from './NymLogo'
 export * from './Fee'
 export * from './AppBar'
 export * from './NetworkSelector'
+export * from './ClientAddress'
+export * from './InfoToolTip'
+export * from './Nav'
+export * from './Title'

nym-wallet/src/context/main.tsx

@@ -2,13 +2,13 @@ import React, { createContext, useEffect, useState } from 'react'
 import { Account, Network, TCurrency, TMixnodeBondDetails } from '../types'
 import { TUseuserBalance, useGetBalance } from '../hooks/useGetBalance'
 import { config } from '../../config'
-import { getMixnodeBondDetails, selectNetwork, signOut } from '../requests'
+import { getMixnodeBondDetails, selectNetwork, signInWithMnemonic, signOut } from '../requests'
 import { currencyMap } from '../utils'
 import { useHistory } from 'react-router-dom'
 
-export const { ADMIN_ADDRESS } = config
+export const { ADMIN_ADDRESS, IS_DEV_MODE } = config
 
-export const urls = (network: Network) =>
+export const urls = (network?: Network) =>
  network === 'MAINNET'
  ? {
  blockExplorer: 'https://blocks.nymtech.net',
@@ -28,11 +28,13 @@ type TClientContext = {
  showSettings: boolean
  network?: Network
  currency?: TCurrency
+ isLoading: boolean
+ error?: string
  switchNetwork: (network: Network) => void
  getBondDetails: () => Promise<void>
  handleShowSettings: () => void
  handleShowAdmin: () => void
- logIn: (network: Network) => void
+ logIn: (mnemonic: string) => void
  logOut: () => void
 }
 
@@ -46,16 +48,12 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
  const [showAdmin, setShowAdmin] = useState(false)
  const [showSettings, setShowSettings] = useState(false)
  const [mode, setMode] = useState<'light' | 'dark'>('light')
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState<string>()
 
- const userBalance = useGetBalance()
+ const userBalance = useGetBalance(clientDetails?.client_address)
  const history = useHistory()
 
- useEffect(() => {
- if (clientDetails) {
- userBalance.fetchBalance()
- }
- }, [clientDetails, userBalance.fetchBalance])
-
  useEffect(() => {
  const refreshAccount = async () => {
  if (network) {
@@ -67,12 +65,16 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
  refreshAccount()
  }, [network])
 
- const logIn = async (network: Network) => {
+ const logIn = async (mnemonic: string) => {
  try {
- setNetwork(network)
+ setIsLoading(true)
+ await signInWithMnemonic(mnemonic || '')
+ await getBondDetails()
+ setNetwork('MAINNET')
  history.push('/balance')
  } catch (e) {
- console.log({ e })
+ setIsLoading(false)
+ setError(e as string)
  }
  }
 
@@ -89,6 +91,9 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
  const logOut = async () => {
  setClientDetails(undefined)
  setNetwork(undefined)
+ setError(undefined)
+ setIsLoading(false)
+ userBalance.clearAll()
  await signOut()
  }
 
@@ -111,6 +116,8 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
  <ClientContext.Provider
  value={{
  mode,
+ isLoading,
+ error,
  clientDetails,
  mixnodeDetails,
  userBalance,