style updates

tauri-wallet/src/components/CopyToClipboard.tsx

@@ -20,11 +20,11 @@ export const handleCopy = async ({
   text: string
   cb: (success: boolean) => void
 }) => {
-  cb(false)
   const res = await copy(text)
-  console.log(res)
   if (res.success) {
-    cb(true)
+    setTimeout(() => {
+      cb(true)
+    }, 750)
   } else {
     console.log(res.value)
   }

tauri-wallet/src/components/NavigationCards.tsx

@@ -1,13 +1,14 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import {
   CardContent,
   CircularProgress,
   IconButton,
+  Tooltip,
   Typography,
   useTheme,
 } from '@material-ui/core'
 import { ClientContext } from '../context/main'
-import { FileCopy, Refresh } from '@material-ui/icons'
+import { CheckCircleOutline, FileCopy, Refresh } from '@material-ui/icons'
 import { NymCard } from './NymCard'
 import { Alert } from '@material-ui/lab'
 import { handleCopy } from './CopyToClipboard'
@@ -28,15 +29,17 @@ export const BalanceCard = () => {
         subheader="Current wallet balance"
         noPadding
         Action={
-          <IconButton onClick={getBalance}>
-            <Refresh />
-          </IconButton>
+          <Tooltip title="Refresh balance">
+            <IconButton onClick={getBalance}>
+              <Refresh />
+            </IconButton>
+          </Tooltip>
         }
       >
         <CardContent>
           <div style={{ display: 'flex', justifyContent: 'center' }}>
             {balanceLoading ? (
-              <CircularProgress size={28} />
+              <CircularProgress size={24} />
             ) : balanceError ? (
               <Alert severity="error" style={{ width: '100%' }}>
                 {balanceError}
@@ -50,10 +53,18 @@ export const BalanceCard = () => {
     </div>
   )
 }
+enum EnumCopyState {
+  copying,
+  copySuccess,
+}
 
 export const AddressCard = () => {
-  const theme = useTheme()
   const { clientDetails } = useContext(ClientContext)
+
+  const [copyState, setCopyState] = useState<EnumCopyState>()
+
+  const theme = useTheme()
+
   return (
     <div style={{ margin: theme.spacing(3) }}>
       <NymCard
@@ -61,16 +72,35 @@ export const AddressCard = () => {
         subheader="Wallet payments address"
         noPadding
         Action={
-          <IconButton
-            onClick={() =>
-              handleCopy({
-                text: clientDetails?.client_address || '',
-                cb: () => {},
-              })
-            }
-          >
-            <FileCopy />
-          </IconButton>
+          <Tooltip title={!copyState ? 'Copy address' : 'Copied'}>
+            <IconButton
+              disabled={!!copyState}
+              onClick={async () => {
+                setCopyState(EnumCopyState.copying)
+                await handleCopy({
+                  text: clientDetails?.client_address || '',
+                  cb: (isCopied) => {
+                    if (isCopied) {
+                      setCopyState(EnumCopyState.copySuccess)
+                      setTimeout(() => {
+                        setCopyState(undefined)
+                      }, 2500)
+                    }
+                  },
+                })
+              }}
+            >
+              {copyState === EnumCopyState.copying ? (
+                <CircularProgress size={24} />
+              ) : copyState === EnumCopyState.copySuccess ? (
+                <CheckCircleOutline
+                  style={{ color: theme.palette.success.main }}
+                />
+              ) : (
+                <FileCopy />
+              )}
+            </IconButton>
+          </Tooltip>
         }
       >
         <CardContent>{clientDetails?.client_address}</CardContent>

tauri-wallet/src/context/main.tsx

@@ -35,7 +35,9 @@ export const ClientContextProvider = ({
         setBalance(balance as TBalance)
       })
       .catch((e) => setBalanceError(e))
-    setBalanceLoading(false)
+    setTimeout(() => {
+      setBalanceLoading(false)
+    }, 1000)
   }
 
   const logIn = (clientDetails: TClientDetails) =>

tauri-wallet/src/theme.tsx

@@ -7,6 +7,9 @@ const nymPalette = {
   secondary: {
     main: '#009FA8',
   },
+  background: {
+    main: '#121726',
+  },
 }
 
 export const theme = createTheme({
@@ -36,5 +39,13 @@ export const theme = createTheme({
         fill: '#fff',
       },
     },
+
+    MuiTooltip: {
+      tooltipPlacementBottom: {
+        background: nymPalette.background.main,
+        padding: '8px 12px',
+        fontSize: 12,
+      },
+    },
   },
 })