Merge pull request #282 from SmartInvoiceXYZ/fix/UX_audit_dApp_pt1

UX Audit dapp fix
SmartInvoiceXYZ · Dec 30, 2024 · 0194194 · 0194194
2 parents bda8c17 + 643773c
commit 0194194
Show file tree

Hide file tree

Showing 65 changed files with 1,270 additions and 525 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "async-prompt": "^1.0.1",
     "conventional-changelog-cli": "^5.0.0",
     "dotenv": "^16.3.1",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",

diff --git a/packages/constants/CHANGELOG.md b/packages/constants/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @smartinvoicexyz/constants
 
+## 0.1.18
+
+### Patch Changes
+
+- ux audit fixes
+
 ## 0.1.17
 
 ### Patch Changes

diff --git a/packages/constants/package.json b/packages/constants/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@smartinvoicexyz/constants",
   "description": "Unified source for configs and constants used across the Smart Invoice protocol.",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "author": "",
   "dependencies": {
     "lodash": "^4.17.21",

diff --git a/packages/constants/src/content/toasts.ts b/packages/constants/src/content/toasts.ts
@@ -6,130 +6,165 @@ export const TOASTS = {
     waitingForTx: {
       title: 'Creating invoice',
       description: 'Waiting for transaction confirmation',
-      duration: 5000,
+      duration: null,
+      isClosable: false,
     },
     waitingForIndex: {
       title: 'Invoice has been created',
       description: 'Waiting for invoice to be indexed by the subgraph',
-      duration: 8000,
+      duration: null,
+      isClosable: false,
     },
     success: {
       title: 'Invoice created',
       description: 'Your invoice has been created!',
+      duration: 5000,
+      isClosable: true,
     },
   },
   useDeposit: {
     waitingForTx: {
       title: 'Depositing',
       description: 'Waiting for transaction confirmation',
-      duration: 5000,
+      duration: null,
+      isClosable: false,
     },
     waitingForIndex: {
       title: 'Deposit has been made onchain',
       description: 'Waiting for deposit to be indexed by the subgraph',
-      duration: 8000,
+      duration: null,
+      isClosable: false,
     },
     success: {
       title: 'Deposit successful',
-      description: 'Your deposit has been made. Refreshing balances...',
+      description:
+        'Your payment has been deposited into the invoice. Refreshing balances...',
+      duration: 5000,
+      isClosable: true,
     },
   },
   useRelease: {
     waitingForTx: {
       title: 'Releasing',
       description: 'Waiting for transaction confirmation',
-      duration: 5000,
+      duration: null,
+      isClosable: false,
     },
     waitingForIndex: {
       title: 'Release has been made onchain',
       description: 'Waiting for release to be indexed by the subgraph',
-      duration: 8000,
+      duration: null,
+      isClosable: false,
     },
     success: {
       title: 'Release successful',
-      description: 'Your release has been made. Refreshing balances...',
+      description:
+        'Your payment has been released to the provider. Refreshing balances...',
+      duration: 5000,
+      isClosable: true,
     },
   },
   useLock: {
     waitingForTx: {
       title: 'Locking',
       description: 'Waiting for transaction confirmation',
-      duration: 5000,
+      duration: null,
+      isClosable: false,
     },
     waitingForIndex: {
       title: 'Lock has been made onchain',
       description: 'Waiting for lock to be indexed by the subgraph',
-      duration: 8000,
+      duration: null,
+      isClosable: false,
     },
     success: {
       title: 'Lock successful',
-      description: 'Your lock has been made. Refreshing balances...',
+      description:
+        'Your invoice has been locked for dispute. Refreshing balances...',
+      duration: 5000,
+      isClosable: true,
     },
   },
   useWithdraw: {
     waitingForTx: {
       title: 'Withdrawing',
       description: 'Waiting for transaction confirmation',
-      duration: 5000,
+      duration: null,
+      isClosable: false,
     },
     waitingForIndex: {
       title: 'Withdrawal has been made onchain',
       description: 'Waiting for withdrawal to be indexed by the subgraph',
-      duration: 8000,
+      duration: null,
+      isClosable: false,
     },
     success: {
       title: 'Withdrawal successful',
       description: 'Your withdrawal has been made. Refreshing balances...',
+      duration: 5000,
+      isClosable: true,
     },
   },
   useResolve: {
     waitingForTx: {
       title: 'Resolving',
       description: 'Waiting for transaction confirmation',
-      duration: 5000,
+      duration: null,
+      isClosable: false,
     },
     waitingForIndex: {
       title: 'Resolution has been made onchain',
       description: 'Waiting for resolution to be indexed by the subgraph',
-      duration: 8000,
+      duration: null,
+      isClosable: false,
     },
     success: {
       title: 'Resolution successful',
       description: 'Your resolution has been made. Refreshing balances...',
+      duration: 5000,
+      isClosable: true,
     },
   },
 
   useAddMilestone: {
     waitingForTx: {
       title: 'Adding milestone(s)',
       description: 'Waiting for transaction confirmation',
-      duration: 5000,
+      duration: null,
+      isClosable: false,
     },
     waitingForIndex: {
       title: 'Milestone(s) added onchain',
       description: 'Waiting for milestone(s) to be indexed by the subgraph',
-      duration: 8000,
+      duration: null,
+      isClosable: false,
     },
     success: {
       title: 'Milestone(s) Updated successfully',
       description: 'Your milestones have been updated. Refreshing Invoice...',
+      duration: 5000,
+      isClosable: true,
     },
   },
 
   useVerify: {
     waitingForTx: {
       title: 'Enabling Non-Client Deposits ',
       description: 'Waiting for transaction confirmation',
-      duration: 5000,
+      duration: null,
+      isClosable: false,
     },
     waitingForIndex: {
       title: 'Non-Client Deposits have been enabled onchain',
       description: 'Waiting for update to be indexed by the subgraph',
-      duration: 8000,
+      duration: null,
+      isClosable: false,
     },
     success: {
       title: 'Non-Client Deposits enabled successfully',
       description: 'Your settings have been updated. Refreshing Invoice...',
+      duration: 5000,
+      isClosable: true,
     },
   },
 };
diff --git a/packages/contracts/CHANGELOG.md b/packages/contracts/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @smartinvoicexyz/contracts
 
+## 0.1.18
+
+### Patch Changes
+
+- ux audit fixes
+
 ## 0.1.17
 
 ### Patch Changes

diff --git a/packages/contracts/package.json b/packages/contracts/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@smartinvoicexyz/contracts",
   "description": "Solidity smart contracts of the Smart Invoice protocol.",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "dependencies": {
     "@nomicfoundation/hardhat-toolbox-viem": "^3.0.0",
     "@nomicfoundation/hardhat-viem": "^2.0.3",
-    "@openzeppelin/contracts": "5.0.2",
+    "@openzeppelin/contracts": "^5.1.0",
     "@openzeppelin/contracts-upgradeable": "^5.1.0",
     "@types/chai": "4.3.16",
     "@types/chai-as-promised": "7.1.8",

diff --git a/packages/dapp/CHANGELOG.md b/packages/dapp/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @smartinvoicexyz/dapp
 
+## 0.1.18
+
+### Patch Changes
+
+- ux audit fixes
+- Updated dependencies
+  - @smartinvoicexyz/constants@0.1.18
+  - @smartinvoicexyz/graphql@0.1.18
+  - @smartinvoicexyz/forms@0.1.18
+  - @smartinvoicexyz/hooks@0.1.18
+  - @smartinvoicexyz/types@0.1.18
+  - @smartinvoicexyz/utils@0.1.18
+  - @smartinvoicexyz/ui@0.1.18
+
 ## 0.1.17
 
 ### Patch Changes

diff --git a/packages/dapp/contexts/OverlayContext.tsx b/packages/dapp/contexts/OverlayContext.tsx
@@ -15,6 +15,7 @@ const defaults: Modals = {
   resolve: false,
   withdraw: false,
   addMilestones: false,
+  depositTip: false,
 };
 
 export const OverlayContext = createContext({} as OverlayContextType);

diff --git a/packages/dapp/package.json b/packages/dapp/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@smartinvoicexyz/dapp",
   "description": "A Next.js application that provides a interface for web3 freelancers to manage cryptocurrency invoicing, escrow services, and arbitration.",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "browserslist": [
     "chrome >= 67",
     "edge >= 79",

diff --git a/packages/dapp/pages/create/index.tsx b/packages/dapp/pages/create/index.tsx
@@ -11,31 +11,40 @@ import {
   ProjectDetailsForm,
   RegisterSuccess,
 } from '@smartinvoicexyz/forms';
-import { useInvoiceCreate } from '@smartinvoicexyz/hooks';
+import {
+  QUERY_KEY_INVOICE_DETAILS,
+  useInvoiceCreate,
+} from '@smartinvoicexyz/hooks';
 import {
   Container,
-  NetworkChangeAlertModal,
   StepInfo,
   useMediaStyles,
   useToast,
 } from '@smartinvoicexyz/ui';
 import { useQueryClient } from '@tanstack/react-query';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Address, Hex } from 'viem';
-
-import { useOverlay } from '../../contexts/OverlayContext';
+import { useChainId } from 'wagmi';
 
 export function CreateInvoiceEscrow() {
   const invoiceForm = useForm();
   const toast = useToast();
   const queryClient = useQueryClient();
-  const overlay = useOverlay();
   const [currentStep, setCurrentStep] = useState<number>(1);
   const [txHash, setTxHash] = useState<Hex>();
 
   const [invoiceId, setInvoiceId] = useState<Address>();
   const { headingSize, columnWidth } = useMediaStyles();
+  const chainId = useChainId();
+  const [currentChainId, setCurrentChainId] = useState(chainId);
+
+  useEffect(() => {
+    if (chainId !== currentChainId) {
+      setCurrentChainId(chainId);
+      setCurrentStep(1);
+    }
+  }, [chainId, currentChainId]);
 
   const nextStepHandler = () => {
     setCurrentStep(currentStep + 1);
@@ -48,7 +57,7 @@ export function CreateInvoiceEscrow() {
   const onTxSuccess = (result: Address) => {
     toast.success(TOASTS.useInvoiceCreate.success);
     // invalidate cache
-    queryClient.invalidateQueries({ queryKey: ['invoiceDetails'] });
+    queryClient.invalidateQueries({ queryKey: [QUERY_KEY_INVOICE_DETAILS] });
     queryClient.invalidateQueries({ queryKey: ['invoiceList'] });
 
     setInvoiceId(result as Address);
@@ -80,8 +89,6 @@ export function CreateInvoiceEscrow() {
         my="2rem"
         maxW="45rem"
       >
-        <NetworkChangeAlertModal {...overlay} />
-
         <Stack
           spacing={{ base: '1.5rem', lg: '1rem' }}
           w={{ base: '100%', md: 'auto' }}
@@ -113,7 +120,7 @@ export function CreateInvoiceEscrow() {
             <StepInfo
               stepNum={currentStep}
               stepsDetails={ESCROW_STEPS}
-              goBack={goBackHandler}
+              goBack={isLoading ? undefined : goBackHandler}
             />
             {currentStep === 1 && (
               <ProjectDetailsForm

diff --git a/packages/forms/CHANGELOG.md b/packages/forms/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @smartinvoicexyz/forms
 
+## 0.1.18
+
+### Patch Changes
+
+- ux audit fixes
+- Updated dependencies
+  - @smartinvoicexyz/constants@0.1.18
+  - @smartinvoicexyz/graphql@0.1.18
+  - @smartinvoicexyz/hooks@0.1.18
+  - @smartinvoicexyz/types@0.1.18
+  - @smartinvoicexyz/utils@0.1.18
+  - @smartinvoicexyz/ui@0.1.18
+
 ## 0.1.17
 
 ### Patch Changes

diff --git a/packages/forms/package.json b/packages/forms/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@smartinvoicexyz/forms",
   "description": "Unified source for form components and utilities used across the Smart Invoice protocol.",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "author": "",
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",