onerror onsuccess added to bond form

tauri-wallet/src/components/NavigationCards.tsx

@@ -12,6 +12,7 @@ import { CheckCircleOutline, FileCopy, Refresh } from '@material-ui/icons'
 import { NymCard } from './NymCard'
 import { Alert } from '@material-ui/lab'
 import { handleCopy } from './CopyToClipboard'
+import { truncate } from '../utils'
 
 export const BalanceCard = () => {
   const theme = useTheme()
@@ -41,7 +42,7 @@ export const BalanceCard = () => {
                 {balanceError}
               </Alert>
             ) : (
-              <Typography>{balance?.printable_balance}</Typography>
+              <Typography variant="h6">{balance?.printable_balance}</Typography>
             )}
           </div>
         </CardContent>
@@ -101,7 +102,13 @@ export const AddressCard = () => {
           </Tooltip>
         }
       >
-        <CardContent>{clientDetails?.client_address}</CardContent>
+        <CardContent>
+          <Typography
+            style={{ fontWeight: theme.typography.fontWeightRegular }}
+          >
+            {truncate(clientDetails?.client_address!, 35)}
+          </Typography>
+        </CardContent>
       </NymCard>
     </div>
   )

tauri-wallet/src/components/RequestStatus.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { CircularProgress, Theme } from '@material-ui/core'
+import { useTheme } from '@material-ui/styles'
+
+export enum EnumRequestStatus {
+  initial,
+  error,
+  loading,
+  success,
+}
+
+export const RequestStatus = ({
+  status,
+  onSuccess,
+  onError,
+}: {
+  status: EnumRequestStatus
+  onSuccess: () => void
+  onError: () => void
+}) => {
+  const theme: Theme = useTheme()
+  return (
+    <div style={{ padding: theme.spacing(3, 5) }}>
+      {status === EnumRequestStatus.loading && (
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <CircularProgress size={48} />
+        </div>
+      )}
+      {status === EnumRequestStatus.success && onSuccess()}
+      {status === EnumRequestStatus.error && onError()}
+    </div>
+  )
+}

tauri-wallet/src/context/main.tsx

@@ -42,6 +42,7 @@ export const ClientContextProvider = ({
 
   useEffect(() => {
     if (clientDetails) getBalance()
+    !clientDetails ? history.push('/signin') : history.push('/bond')
   }, [clientDetails, getBalance])
 
   const logIn = (clientDetails: TClientDetails) =>
@@ -49,10 +50,6 @@ export const ClientContextProvider = ({
 
   const logOut = () => setClientDetails(undefined)
 
-  useEffect(() => {
-    !clientDetails ? history.push('/signin') : history.push('/bond')
-  }, [clientDetails])
-
   return (
     <ClientContext.Provider
       value={{

tauri-wallet/src/routes/bond/BondForm.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {
   Button,
   Checkbox,
+  CircularProgress,
   FormControl,
   FormControlLabel,
   Grid,
@@ -16,11 +17,7 @@ import { EnumNodeType } from '../../types/global'
 import { NodeTypeSelector } from '../../components/NodeTypeSelector'
 import { validationSchema } from './validationSchema'
 import { Gateway, MixNode } from '../../types'
-
-type TBondNodeFormProps = {
-  // minimumBond: Coin
-  // onSubmit: (values: BondingInformation) => void
-}
+import { invoke } from '@tauri-apps/api'
 
 type TBondFormFields = {
   withAdvancedOptions: boolean
@@ -59,28 +56,35 @@ const formatData = (data: TBondFormFields) => {
     host: data.host,
     version: data.version,
     mix_port: data.mixPort,
+    amount: data.amount,
   }
 
   if (data.nodeType === EnumNodeType.Mixnode) {
     payload.verloc_port = data.verlocPort
     payload.http_api_port = data.httpApiPort
-    return payload as MixNode
+    return payload as MixNode & { amount: number }
   }
 
   if (data.nodeType == EnumNodeType.Gateway) {
     payload.clients_port = data.clientsPort
     payload.location = data.location
-    return payload as Gateway
+    return payload as Gateway & { amount: number }
   }
 }
 
-export const BondForm = () => {
+export const BondForm = ({
+  onError,
+  onSuccess,
+}: {
+  onError: (message?: string) => void
+  onSuccess: (message?: string) => void
+}) => {
   const {
     register,
     handleSubmit,
     setValue,
     watch,
-    formState: { errors },
+    formState: { errors, isSubmitting },
   } = useForm<TBondFormFields>({
     resolver: yupResolver(validationSchema),
     defaultValues,
@@ -92,9 +96,18 @@ export const BondForm = () => {
     defaultValues.withAdvancedOptions
   )
 
-  const onSubmit = (data: TBondFormFields) => {
+  const onSubmit = async (data: TBondFormFields) => {
     const formattedData = formatData(data)
-    console.log(formattedData)
+    await invoke('bond_mixnode', {
+      mixnode: formattedData,
+      bond: { amount: formattedData?.amount, denom: 'punk' },
+    })
+      .then((res: any) => {
+        onSuccess(res)
+      })
+      .catch((e) => {
+        onError(e)
+      })
   }
 
   const theme: Theme = useTheme()
@@ -315,13 +328,14 @@ export const BondForm = () => {
         }}
       >
         <Button
-          disabled={Object.keys(errors).length > 0}
+          disabled={isSubmitting}
           variant="contained"
           color="primary"
           type="submit"
           size="large"
           disableElevation
           onClick={handleSubmit(onSubmit)}
+          endIcon={isSubmitting && <CircularProgress size={20} />}
         >
           Bond
         </Button>

tauri-wallet/src/routes/bond/index.tsx

@@ -1,13 +1,71 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { Button, Theme } from '@material-ui/core'
+import { Alert } from '@material-ui/lab'
+import { useTheme } from '@material-ui/styles'
 import { NymCard } from '../../components'
+import {
+  EnumRequestStatus,
+  RequestStatus,
+} from '../../components/RequestStatus'
 import { Layout } from '../../layouts'
 import { BondForm } from './BondForm'
 
 export const Bond = () => {
+  const [status, setStatus] = useState(EnumRequestStatus.initial)
+  const [message, setMessage] = useState<string>()
+
+  const theme: Theme = useTheme()
+
   return (
     <Layout>
       <NymCard title="Bond" subheader="Bond a node or gateway" noPadding>
-        <BondForm />
+        <>
+          {status === EnumRequestStatus.initial && (
+            <BondForm
+              onError={(e?: string) => {
+                setMessage(e)
+                setStatus(EnumRequestStatus.error)
+              }}
+              onSuccess={(message?: string) => {
+                setMessage(message)
+                setStatus(EnumRequestStatus.success)
+              }}
+            />
+          )}
+          {status !== EnumRequestStatus.initial && (
+            <>
+              <RequestStatus
+                status={status}
+                onSuccess={() => (
+                  <Alert severity="success">Successfully bonded node</Alert>
+                )}
+                onError={() => (
+                  <Alert severity="error">
+                    An error occurred with the request: {message}
+                  </Alert>
+                )}
+              />
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'flex-end',
+                  borderTop: `1px solid ${theme.palette.grey[200]}`,
+                  background: theme.palette.grey[100],
+                  padding: theme.spacing(2),
+                }}
+              >
+                <Button
+                  onClick={() => {
+                    setStatus(EnumRequestStatus.initial)
+                  }}
+                >
+                  Resend?
+                </Button>
+              </div>
+            </>
+          )}
+        </>
       </NymCard>
     </Layout>
   )

tauri-wallet/src/routes/sign-in.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import {
   TextField,
   CircularProgress,
@@ -31,15 +31,15 @@ export const SignIn = () => {
     setIsLoading(true)
     setInputError(undefined)
 
-    await invoke('connect_with_mnemonic', { mnemonic })
+    invoke('connect_with_mnemonic', { mnemonic })
       .then((res) => {
+        setIsLoading(false)
         logIn(res as TClientDetails)
       })
       .catch((e) => {
+        setIsLoading(false)
         setInputError(e)
       })
-
-    setIsLoading(false)
   }
 
   return (

tauri-wallet/src/types/rust/index.ts

@@ -1,3 +1,5 @@
 export * from './balance'
 export * from './coin'
 export * from './mixnode'
+export * from './gateway'
+export * from './mixnode'

tauri-wallet/src/utils/index.ts

@@ -87,3 +87,6 @@ export const validateLocation = (location: string): boolean => {
 
 export const validateRawPort = (rawPort: number): boolean =>
   !isNaN(rawPort) && rawPort >= 1 && rawPort <= 65535
+
+export const truncate = (text: string, trim: number) =>
+  text.substring(0, trim) + '...'