Feature/wallet settings area

common/network-defaults/src/lib.rs

@@ -49,13 +49,10 @@ impl ValidatorDetails {
 
 #[cfg(network = "milhon")]
 pub fn default_validators() -> Vec<ValidatorDetails> {
-    vec![
-        ValidatorDetails::new(
-            "https://testnet-milhon-validator1.nymtech.net",
-            Some("https://testnet-milhon-validator1.nymtech.net/api"),
-        ),
-        ValidatorDetails::new("https://testnet-milhon-validator2.nymtech.net", None),
-    ]
+    vec![ValidatorDetails::new(
+        "https://sandbox-validator.nymtech.net",
+        Some("https://sandbox-validator.nymtech.net/api"),
+    )]
 }
 
 #[cfg(network = "sandbox")]
@@ -80,6 +77,10 @@ pub fn default_api_endpoints() -> Vec<Url> {
         .collect()
 }
 
+pub const DEFAULT_MIXNET_CONTRACT_ADDRESS: &str = "nymt14hj2tavq8fpesdwxxcu44rty3hh90vhuysqrsr";
+pub const DEFAULT_VESTING_CONTRACT_ADDRESS: &str = "nymt1nc5tatafv6eyq7llkr2gv50ff9e22mnfp9pc5s";
+pub const REWARDING_VALIDATOR_ADDRESS: &str = "nymt17zujduc46wvkwvp6f062mm5xhr7jc3fewvqu9e";
+
 // Ethereum constants used for token bridge
 /// How much bandwidth (in bytes) one token can buy
 const BYTES_PER_TOKEN: u64 = 1024 * 1024 * 1024;
@@ -89,9 +90,16 @@ pub const TOKENS_TO_BURN: u64 = 10;
 pub const BANDWIDTH_VALUE: u64 = TOKENS_TO_BURN * BYTES_PER_TOKEN;
 
 pub const ETH_MIN_BLOCK_DEPTH: usize = 7;
+pub const COSMOS_CONTRACT_ADDRESS: &str = "nymt17p9rzwnnfxcjp32un9ug7yhhzgtkhvl9f8xzkv";
+// Name of the event triggered by the eth contract. If the event name is changed,
+// this would also need to be changed; It is currently tested against the json abi
+pub const ETH_EVENT_NAME: &str = "Burned";
+pub const ETH_BURN_FUNCTION_NAME: &str = "burnTokenForAccessCode";
 
 /// Defaults Cosmos Hub/ATOM path
 pub const COSMOS_DERIVATION_PATH: &str = "m/44'/118'/0'/0/0";
+pub const BECH32_PREFIX: &str = "nymt";
+pub const DENOM: &str = "unymt";
 // as set by validators in their configs
 // (note that the 'amount' postfix is relevant here as the full gas price also includes denom)
 pub const GAS_PRICE_AMOUNT: f64 = 0.025;

nym-wallet/src/components/AppBar.tsx

@@ -1,69 +1,51 @@
 import React, { useContext, useEffect } from 'react'
-import {
-  AppBar as MuiAppBar,
-  Divider,
-  Grid,
-  IconButton,
-  Toolbar,
-  Typography,
-  useMediaQuery,
-} from '@mui/material'
+import { AppBar as MuiAppBar, Divider, Grid, IconButton, Toolbar, Typography, useMediaQuery } from '@mui/material'
 import { Box } from '@mui/system'
-import { Logout } from '@mui/icons-material'
+import { Logout, SettingsOutlined } from '@mui/icons-material'
 import { ClientContext } from '../context/main'
 import { CopyToClipboard } from '.'
 
 export const AppBar = () => {
-  const { userBalance, logOut, clientDetails } = useContext(ClientContext)
+  const { userBalance, clientDetails, showSettings, logOut, handleShowSettings } = useContext(ClientContext)
   const matches = useMediaQuery('(min-width: 769px)')
 
   return (
-    <MuiAppBar
-      position="sticky"
-      sx={{ boxShadow: 'none', bgcolor: 'nym.background.light' }}
-    >
+    <MuiAppBar position="sticky" sx={{ boxShadow: 'none', bgcolor: 'nym.background.light' }}>
       <Toolbar>
-        <Grid
-          container
-          justifyContent="space-between"
-          alignItems="center"
-          flexWrap="nowrap"
-        >
+        <Grid container justifyContent="space-between" alignItems="center" flexWrap="nowrap">
           <Grid container item alignItems="center">
             <Grid item>
-              <AppBarItem
-                primaryText="Balance"
-                secondaryText={userBalance.balance?.printable_balance}
-              />
+              <AppBarItem primaryText="Balance" secondaryText={userBalance.balance?.printable_balance} />
             </Grid>
             {matches && (
               <>
-                <Divider
-                  orientation="vertical"
-                  variant="middle"
-                  flexItem
-                  sx={{ mr: 1 }}
-                />
+                <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
-                      />
-                    }
+                    Action={<CopyToClipboard text={clientDetails?.client_address} iconButton />}
                   />
                 </Grid>
               </>
             )}
           </Grid>
-          <Grid item>
-            <IconButton onClick={logOut} sx={{ color: 'nym.background.dark' }}>
-              <Logout />
-            </IconButton>
+          <Grid item container justifyContent="flex-end" xs={3} spacing={2}>
+            <Grid item>
+              <IconButton
+                onClick={handleShowSettings}
+                sx={{ color: showSettings ? 'primary.main' : 'nym.background.dark' }}
+                size="small"
+              >
+                <SettingsOutlined fontSize="small" />
+              </IconButton>
+            </Grid>
+            <Grid item>
+              <IconButton size="small" onClick={logOut} sx={{ color: 'nym.background.dark' }}>
+                <Logout fontSize="small" />
+              </IconButton>
+            </Grid>
           </Grid>
         </Grid>
       </Toolbar>
@@ -81,12 +63,7 @@ const AppBarItem: React.FC<{
       <Typography variant="body2" component="span" sx={{ color: 'grey.600' }}>
         {primaryText}:
       </Typography>{' '}
-      <Typography
-        variant="body2"
-        component="span"
-        color="nym.background.dark"
-        sx={{ mr: 1 }}
-      >
+      <Typography variant="body2" component="span" color="nym.background.dark" sx={{ mr: 1 }}>
         {secondaryText}
       </Typography>
       {Action}

nym-wallet/src/components/InfoToolTip.tsx

@@ -0,0 +1,15 @@
+import { InfoOutlined } from '@mui/icons-material'
+import { Tooltip, TooltipProps } from '@mui/material'
+import React from 'react'
+
+export const InfoTooltip = ({
+  title,
+  placement = 'bottom',
+}: {
+  title: string
+  placement?: TooltipProps['placement']
+}) => (
+  <Tooltip title={title} arrow placement={placement}>
+    <InfoOutlined fontSize="small" />
+  </Tooltip>
+)

nym-wallet/src/components/NymCard.tsx

@@ -3,13 +3,13 @@ import { Card, CardContent, CardHeader } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
 export const NymCard: React.FC<{
-  title: string
+  title: string | React.ReactElement
   subheader?: string
   Action?: React.ReactNode
   noPadding?: boolean
 }> = ({ title, subheader, Action, noPadding, children }) => {
   return (
-    <Card variant="outlined">
+    <Card variant="outlined" sx={{ overflow: 'auto' }}>
       <CardHeader
         title={title}
         subheader={subheader}

nym-wallet/src/components/TransactionDetails.tsx

@@ -8,7 +8,7 @@ export const TransactionDetails: React.FC<{ details: TTransactionDetails }> = ({
     <Card variant="outlined" sx={{ width: '100%', p: 2 }}>
       {details.map(({ primary, secondary }, i) => {
         return (
-          <Grid container sx={{ mt: i !== 0 ? 1 : 0 }}>
+          <Grid container sx={{ mt: i !== 0 ? 1 : 0 }} key={i}>
             <Grid item sm={4} md={3} lg={2}>
               <Typography sx={{ color: (theme) => theme.palette.grey[600] }}>{primary}</Typography>
             </Grid>

nym-wallet/src/components/index.ts

@@ -1,4 +1,3 @@
-export * from './AdminForm'
 export * from './Error'
 export * from './CopyToClipboard'
 export * from './NymCard'

nym-wallet/src/context/main.tsx

@@ -8,13 +8,16 @@ export const { MAJOR_CURRENCY, MINOR_CURRENCY, ADMIN_ADDRESS, NETWORK_NAME } = c
 
 export const urls = {
   blockExplorer: `https://${NETWORK_NAME}-blocks.nymtech.net`,
+  networkExplorer: `https://${NETWORK_NAME}-explorer.nymtech.net`,
 }
 
 type TClientContext = {
+  mode: 'light' | 'dark'
   clientDetails?: TClientDetails
   userBalance: TUseuserBalance
   showAdmin: boolean
-  mode: 'light' | 'dark'
+  showSettings: boolean
+  handleShowSettings: () => void
   handleShowAdmin: () => void
   logIn: (clientDetails: TSignInWithMnemonic) => void
   logOut: () => void
@@ -25,6 +28,7 @@ export const ClientContext = createContext({} as TClientContext)
 export const ClientContextProvider = ({ children }: { children: React.ReactNode }) => {
   const [clientDetails, setClientDetails] = useState<TClientDetails>()
   const [showAdmin, setShowAdmin] = useState(false)
+  const [showSettings, setShowSettings] = useState(false)
   const [mode, setMode] = useState<'light' | 'dark'>('light')
 
   const history = useHistory()
@@ -47,14 +51,17 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
   }
 
   const handleShowAdmin = () => setShowAdmin((show) => !show)
+  const handleShowSettings = () => setShowSettings((show) => !show)
 
   return (
     <ClientContext.Provider
       value={{
+        mode,
         clientDetails,
         userBalance,
         showAdmin,
-        mode,
+        showSettings,
+        handleShowSettings,
         handleShowAdmin,
         logIn,
         logOut,

nym-wallet/src/hooks/useGetBalance.tsx

@@ -15,7 +15,7 @@ export const useGetBalance = (): TUseuserBalance => {
   const [error, setError] = useState<string>()
   const [isLoading, setIsLoading] = useState(false)
 
-  const fetchBalance = useCallback(() => {
+  const fetchBalance = useCallback(async () => {
     setIsLoading(true)
     setError(undefined)
     invoke('get_balance')

nym-wallet/src/index.tsx

@@ -5,9 +5,10 @@ import { BrowserRouter as Router } from 'react-router-dom'
 import { Routes } from './routes'
 import { ClientContext, ClientContextProvider } from './context/main'
 import { ApplicationLayout } from './layouts'
-import { SignIn } from './routes/sign-in/'
-import { Admin, ErrorFallback } from './components'
+import { Admin, SignIn } from './pages'
+import { ErrorFallback } from './components'
 import { NymWalletTheme } from './theme'
+import { Settings } from './pages'
 
 const App = () => {
   const { clientDetails } = useContext(ClientContext)
@@ -17,6 +18,7 @@ const App = () => {
         <SignIn />
       ) : (
         <ApplicationLayout>
+          <Settings />
           <Admin />
           <Routes />
         </ApplicationLayout>

nym-wallet/src/components/AdminForm.tsx → nym-wallet/src/pages/Admin/index.tsx

@@ -1,26 +1,16 @@
 import React, { useContext, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import {
-  Backdrop,
-  Box,
-  Button,
-  CircularProgress,
-  FormControl,
-  Grid,
-  Paper,
-  Slide,
-  TextField,
-} from '@mui/material'
+import { Backdrop, Box, Button, CircularProgress, FormControl, Grid, Paper, Slide, TextField } from '@mui/material'
 
-import { ClientContext } from '../context/main'
-import { NymCard } from '.'
-import { getContractParams, setContractParams } from '../requests'
-import { TauriStateParams } from '../types'
+import { ClientContext } from '../../context/main'
+import { NymCard } from '../../components'
+import { getContractParams, setContractParams } from '../../requests'
+import { TauriContractStateParams } from '../../types'
 
 export const Admin: React.FC = () => {
   const { showAdmin, handleShowAdmin } = useContext(ClientContext)
   const [isLoading, setIsLoading] = useState(false)
-  const [params, setParams] = useState<TauriStateParams>()
+  const [params, setParams] = useState<TauriContractStateParams>()
 
   const onCancel = () => {
     setParams(undefined)
@@ -50,9 +40,7 @@ export const Admin: React.FC = () => {
                 <CircularProgress size={48} />
               </Box>
             )}
-            {!isLoading && params && (
-              <AdminForm onCancel={onCancel} params={params} />
-            )}
+            {!isLoading && params && <AdminForm onCancel={onCancel} params={params} />}
           </NymCard>
         </Paper>
       </Slide>
@@ -61,7 +49,7 @@ export const Admin: React.FC = () => {
 }
 
 const AdminForm: React.FC<{
-  params: TauriStateParams
+  params: TauriContractStateParams
   onCancel: () => void
 }> = ({ params, onCancel }) => {
   const {
@@ -70,7 +58,7 @@ const AdminForm: React.FC<{
     formState: { errors, isSubmitting },
   } = useForm({ defaultValues: { ...params } })
 
-  const onSubmit = async (data: TauriStateParams) => {
+  const onSubmit = async (data: TauriContractStateParams) => {
     await setContractParams(data)
     console.log(data)
     onCancel()

nym-wallet/src/routes/balance.tsx → nym-wallet/src/pages/balance/index.tsx

@@ -1,10 +1,10 @@
 import React, { useContext, useEffect } from 'react'
 import { Alert, Button, Grid, Link, Typography } from '@mui/material'
 import { OpenInNew } from '@mui/icons-material'
-import { NymCard } from '../components'
-import { Layout } from '../layouts'
+import { NymCard } from '../../components'
+import { Layout } from '../../layouts'
 
-import { ClientContext, urls } from '../context/main'
+import { ClientContext, urls } from '../../context/main'
 
 export const Balance = () => {
   const { userBalance, clientDetails } = useContext(ClientContext)