replace hooks with smart-invoice

apps/frontend/.env.example

@@ -12,11 +12,10 @@ NEXTAUTH_URL=http://localhost:4200
 # Secret hash used for encoding JWTs
 NEXTAUTH_SECRET=doremifasolatidodoremifasolatidodoremifasolatidodoremifasolatido
 
-NEXT_PUBLIC_ALCHEMY_KEY=
+NEXT_PUBLIC_ALCHEMY_ID=
 NEXT_PUBLIC_INFURA_ID=
 NEXT_PUBLIC_NETWORK_ID=
-NEXT_PUBLIC_WC_PROJECT_ID=
-
+NEXT_PUBLIC_WALLETCONNECT_ID=
 # Used for GitHub's GraphQL API. Read-only permissions until DM needs mutations on our GitHub repo
 # https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
 GITHUB_API_TOKEN=

apps/frontend/components/Escrow/DepositFunds.tsx

@@ -14,10 +14,10 @@ import {
   Stack,
   Text,
   Tooltip,
+  useToast,
   VStack,
 } from '@raidguild/design-system';
 import { commify, getTxLink } from '@raidguild/dm-utils';
-import { useDeposit } from '@raidguild/escrow-hooks';
 import {
   checkedAtIndex,
   depositedMilestones,
@@ -27,6 +27,7 @@ import {
   parseTokenAddress,
   PAYMENT_TYPES,
 } from '@raidguild/escrow-utils';
+import { useDeposit } from '@smartinvoicexyz/hooks';
 import _ from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -47,6 +48,7 @@ const DepositFunds = ({
   const { token, amounts, currentMilestone } = invoice;
   const chainId = useChainId();
   const { address } = useAccount();
+  const toast = useToast();
 
   const TOKEN_DATA = useMemo(
     () => ({
@@ -83,12 +85,21 @@ const DepositFunds = ({
     paymentType?.value === PAYMENT_TYPES.NATIVE ? 18 : tokenBalance?.decimals;
   const hasAmount = balance >= parseUnits(amount, decimals);
 
-  const { handleDeposit, isLoading, isReady } = useDeposit({
-    invoice,
-    amount,
-    decimals,
+  const { handleDeposit, isLoading } = useDeposit({
+    invoice: {
+      tokenMetadata: {
+        address: invoice.token, // only address is needed
+        name: '',
+        symbol: '',
+        decimals,
+        totalSupply: BigInt(0),
+      },
+      address: invoice.address,
+    },
+    amount: amount && parseUnits(amount, decimals),
     hasAmount, // (+ gas)
     paymentType: paymentType?.value,
+    toast,
   });
 
   const depositHandler = async () => {
@@ -280,7 +291,7 @@ const DepositFunds = ({
 
       <Button
         onClick={depositHandler}
-        isDisabled={amount <= 0 || !isReady || !hasAmount}
+        isDisabled={amount <= 0 || isLoading || !hasAmount}
         isLoading={isLoading}
         textTransform='uppercase'
         variant='solid'

apps/frontend/components/Escrow/EscrowConfirmation.tsx

@@ -9,9 +9,11 @@ import {
 } from '@raidguild/design-system';
 import { IRaid } from '@raidguild/dm-types';
 import { chainsMap, commify } from '@raidguild/dm-utils';
-import { useEscrowZap, useRegister } from '@raidguild/escrow-hooks';
+import { useRegister } from '@raidguild/escrow-hooks';
 import { GANGGANG_MULTISIG, NETWORK_CONFIG } from '@raidguild/escrow-utils';
+import { useEscrowZap } from '@smartinvoicexyz/hooks';
 import { WriteContractReturnType } from '@wagmi/core';
+import useDetailsPin from 'libs/escrow-hooks/src/useDetailsPin';
 import _ from 'lodash';
 import { Dispatch, SetStateAction, useMemo } from 'react';
 import { UseFormReturn } from 'react-hook-form';
@@ -88,6 +90,10 @@ const EscrowConfirmation = ({
     enabled: canRegisterDirectly,
   });
 
+  const { data: details, isLoading: detailsLoading } = useDetailsPin({
+    ...detailsData,
+  });
+
   const { writeAsync: writeEscrowZap, isLoading: zapLoading } = useEscrowZap({
     ownersAndAllocations,
     threshold,
@@ -96,9 +102,10 @@ const EscrowConfirmation = ({
     provider: provider || zeroAddress,
     client,
     safetyValveDate,
-    detailsData,
+    details,
     projectTeamSplit: raidPartySplit,
     daoSplit,
+    networkConfig: NETWORK_CONFIG,
     enabled: !canRegisterDirectly,
     onSuccess: (tx: WriteContractReturnType) => setTxHash(tx),
   });
@@ -232,7 +239,7 @@ const EscrowConfirmation = ({
             variant='outline'
             minW='25%'
             mr='.5rem'
-            isDisabled={zapLoading || registerLoading}
+            isDisabled={zapLoading || registerLoading || detailsLoading}
             onClick={backStep}
           >
             Back
@@ -241,7 +248,10 @@ const EscrowConfirmation = ({
             variant='solid'
             w='100%'
             isDisabled={
-              registerLoading || zapLoading || !(writeAsync || writeEscrowZap)
+              registerLoading ||
+              zapLoading ||
+              detailsLoading ||
+              !(writeAsync || writeEscrowZap)
             }
             isLoading={registerLoading || zapLoading}
             onClick={createInvoice}

apps/frontend/components/Escrow/ReleaseFunds.tsx

@@ -8,9 +8,10 @@ import {
   VStack,
 } from '@raidguild/design-system';
 import { getInvoice } from '@raidguild/escrow-gql';
-// import { getTxLink } from '@raidguild/dm-utils';
-import { usePollSubgraph, useRelease } from '@raidguild/escrow-hooks';
+import { usePollSubgraph } from '@raidguild/escrow-hooks';
 import { Invoice, parseTokenAddress } from '@raidguild/escrow-utils';
+// import { getTxLink } from '@raidguild/dm-utils';
+import { useRelease } from '@smartinvoicexyz/hooks';
 import { formatUnits } from 'viem';
 import { useChainId } from 'wagmi';
 
@@ -48,8 +49,9 @@ const ReleaseFunds = ({ invoice, balance }: ReleaseFundsProp) => {
   };
 
   const { writeAsync: releaseFunds, isLoading } = useRelease({
-    invoice,
-    onSuccess,
+    invoice: { address: invoice.address },
+    onTxSuccess: onSuccess,
+    toast,
   });
 
   // const pollSubgraph = async () => {

apps/frontend/components/Escrow/WithdrawFunds.tsx

@@ -4,11 +4,12 @@ import {
   // Link,
   Spinner,
   Text,
+  useToast,
   VStack,
 } from '@raidguild/design-system';
 // import { getTxLink } from '@raidguild/dm-utils';
-import { useWithdraw } from '@raidguild/escrow-hooks';
 import { Invoice, parseTokenAddress } from '@raidguild/escrow-utils';
+import { useWithdraw } from '@smartinvoicexyz/hooks';
 import { formatUnits } from 'viem';
 import { useChainId } from 'wagmi';
 
@@ -20,13 +21,19 @@ const WithdrawFunds = ({
   balance: bigint;
 }) => {
   const chainId = useChainId();
+  const toast = useToast();
 
-  // const onSuccess = () => {
-  //   // toast
-  //   // close modal
-  // };
-
-  const { writeAsync: withdrawFunds, isLoading } = useWithdraw({ invoice });
+  const { writeAsync: withdrawFunds, isLoading } = useWithdraw({
+    invoice: { address: invoice.address },
+    onTxSuccess: () => {
+      toast({
+        title: 'Withdrawal Successful',
+        description: 'Funds have been successfully withdrawn from escrow',
+        status: 'success',
+      });
+    },
+    toast,
+  });
 
   return (
     <VStack w='100%' spacing='1rem'>

apps/frontend/components/Escrow/shared/AccountLink.tsx

@@ -4,7 +4,7 @@ import { NETWORK_CONFIG, safeUrl, splitsLink } from '@raidguild/escrow-utils';
 import blockies from 'blockies-ts';
 import _ from 'lodash';
 import { Hex } from 'viem';
-import { useChainId, useContractRead, useEnsName } from 'wagmi';
+import { useChainId, useReadContract, useEnsName } from 'wagmi';
 
 type AccountLinkProps = {
   name?: string;
@@ -32,7 +32,7 @@ const AccountLink = ({
 
   const imageUrl = blockies.create({ seed: address }).toDataURL();
 
-  const { data: isSafe } = useContractRead({
+  const { data: isSafe } = useReadContract({
     address,
     abi: [
       {

apps/frontend/next.config.js

@@ -13,6 +13,7 @@ const nextConfig = {
     '@raidguild/dm-utils',
     '@raidguild/escrow-utils',
     '@raidguild/escrow-gql',
+    '@smartinvoicexyz/hooks',
   ],
 };
 

libs/dm-utils/src/chains.ts

@@ -10,17 +10,17 @@ import {
   sepolia,
 } from 'viem/chains';
 
-const chains: Chain[] = [
+const chains: readonly Chain[] = [
   mainnet,
   gnosis,
   polygon,
   arbitrum,
   optimism,
   sepolia,
   goerli,
-];
+] as const;
 
-export const chainsList: { [key: number]: Chain } = {
+export const chainsList: Record<number, Chain> = {
   100: gnosis,
   137: polygon,
   42151: arbitrum,
@@ -35,28 +35,32 @@ export type SupportedChainId = (typeof SUPPORTED_CHAIN_IDS)[number];
 export type SupportedChain = (typeof chains)[number];
 export const SUPPORTED_CHAINS = chains as [SupportedChain, ...SupportedChain[]];
 
-export const infuraNetworkName: Partial<Record<SupportedChainId, string>> = {
+export const infuraNetworkName: Record<SupportedChainId, string | undefined> = {
   [mainnet.id]: 'mainnet',
   [polygon.id]: 'polygon-mainnet',
   [arbitrum.id]: 'arbitrum-mainnet',
   [optimism.id]: 'optimism-mainnet',
   [sepolia.id]: 'sepolia',
 };
 
-export const alchemyNetworkName: Partial<Record<SupportedChainId, string>> = {
-  [mainnet.id]: 'eth-mainnet',
-  [polygon.id]: 'polygon-mainnet',
-  [arbitrum.id]: 'arb-mainnet',
-  [optimism.id]: 'opt-mainnet',
-  [sepolia.id]: 'eth-sepolia',
-  [gnosis.id]: 'gnosis-mainnet',
-};
+export const alchemyNetworkName: Record<SupportedChainId, string | undefined> =
+  {
+    [mainnet.id]: 'eth-mainnet',
+    [polygon.id]: 'polygon-mainnet',
+    [arbitrum.id]: 'arb-mainnet',
+    [optimism.id]: 'opt-mainnet',
+    [sepolia.id]: 'eth-sepolia',
+    [gnosis.id]: 'gnosis-mainnet',
+  };
 
 if (process.env.NODE_ENV === 'development') {
-  chains.push(hardhat);
+  (chains as Chain[]).push(hardhat);
 }
-export const chainsMap = (chainId: number) => chainsList[chainId];
-export const chainIdToIconMap = (chainId: number) => {
+
+export const chainsMap = (chainId: number): Chain | undefined =>
+  chainsList[chainId];
+
+export const chainIdToIconMap = (chainId: number): string => {
   switch (chainId) {
     case optimism.id:
       return '/icons/optimism.png';
@@ -66,7 +70,8 @@ export const chainIdToIconMap = (chainId: number) => {
       return '';
   }
 };
-export const networkToIdMap = (network: string) => {
+
+export const networkToIdMap = (network: string): number => {
   switch (network) {
     case 'optimism':
       return optimism.id;

libs/dm-utils/src/web3.ts

@@ -22,7 +22,7 @@ import {
   SupportedChainId,
 } from './chains';
 
-const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID || '';
+const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_ID || '';
 
 type _transports = Record<SupportedChainId, Transport>;
 
@@ -43,7 +43,7 @@ const transports: _transports = SUPPORTED_CHAINS.reduce(
     const alchemyUrl =
       alchemyNetwork && process.env.NEXT_PUBLIC_RPC_KEY
         ? `https://${alchemyNetwork}.g.alchemy.com/v2/${
-            process.env.NEXT_PUBLIC_ALCHEMY_KEY as string
+            process.env.NEXT_PUBLIC_ALCHEMY_ID as string
           }`
         : undefined;
     if (alchemyUrl) list.push(http(alchemyUrl));

libs/escrow-hooks/src/index.ts

@@ -1,14 +1,10 @@
 export { default as useDebounce } from './useDebounce';
-export { default as useDeposit } from './useDeposit';
-export { default as useEscrowZap } from './useEscrowZap';
+export { default as useEscrowEvents } from './useEscrowEvents';
 export { default as useInvoiceDetails } from './useInvoiceDetails';
 export { default as useLock } from './useLock';
 export { default as usePollSubgraph } from './usePollSubgraph';
 export { default as useRegister } from './useRegister';
-export { default as useRelease } from './useRelease';
 export { default as useResolve } from './useResolve';
 export { default as useSplitEarnings } from './useSplitEarnings';
 export { default as useSplitsMetadata } from './useSplitsMetadata';
 export { default as useTokenBalance } from './useTokenBalance';
-export { default as useWithdraw } from './useWithdraw';
-export { default as useEscrowEvents } from './useEscrowEvents';