add network check and switch

minor ux improvements

src/app/admin/creditalent/underWriterDepositWidget.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Address, formatUnits, parseEther } from 'viem'
 import { useAccount, useReadContract, useWriteContract } from 'wagmi'
-import { useBalanceOf } from '../../../hooks/useBalanceOf'
+import { useBalanceOf } from '@/hooks/useBalanceOf'
 import { ERC20ABI } from '@/components/onchain/abis/erc20'
 import CreditTalentCenterABI from '@/components/onchain/abis/CreditTalentCenter'
 
@@ -24,17 +24,24 @@ export default function UnderWriterDepositWidget() {
   const xocBalance = useBalanceOf({
     tokenAddress: xocContract,
     walletAddress: accountAddress as Address,
+    chainId: 8453,
   })
 
   const formatBalance = (balance: string) => {
     const parsedBalance = parseFloat(balance)
     return isNaN(parsedBalance) ? '0.00' : parsedBalance
   }
 
-  const formattedXocBalance = xocBalance ? formatBalance(xocBalance.balance) : '0.00'
+  const formattedXocBalance = xocBalance
+    ? formatBalance(xocBalance.balance)
+    : '0.00'
 
   // Hook to read the XOC contract allowance
-  const { data: xocAllowance, isError, isLoading } = useReadContract({
+  const {
+    data: xocAllowance,
+    isError,
+    isLoading,
+  } = useReadContract({
     address: xocContract,
     abi: ERC20ABI,
     functionName: 'allowance',
@@ -163,7 +170,9 @@ export default function UnderWriterDepositWidget() {
       {/* Input field */}
       <div className="mb-6">
         <label className="block text-gray-700">
-          {action === 'Deposit' ? 'Indica la cantidad a depositar:' : 'Indica la cantidad a retirar:'}
+          {action === 'Deposit'
+            ? 'Indica la cantidad a depositar:'
+            : 'Indica la cantidad a retirar:'}
         </label>
         <input
           type="number"
@@ -175,13 +184,17 @@ export default function UnderWriterDepositWidget() {
         <div className="flex flex-col items-start justify-between">
           <div className="mb-2">
             <span className="mr-1 text-gray-500">{`Balance: ${formattedXocBalance || 0}`}</span>
-            <span className="cursor-pointer font-bold text-primary hover:underline" onClick={handleXOCMaxClick}>
+            <span
+              className="cursor-pointer font-bold text-primary hover:underline"
+              onClick={handleXOCMaxClick}
+            >
               MAX
             </span>
           </div>
           <div className="text-gray-500">{`Allowance: ${xocAllowanceState}`}</div>
         </div>
-        {xocError && <p className="mt-2 text-red-500">{xocError}</p>} {/* Display error */}
+        {xocError && <p className="mt-2 text-red-500">{xocError}</p>}{' '}
+        {/* Display error */}
       </div>
 
       {/* Submit button */}
@@ -197,7 +210,12 @@ export default function UnderWriterDepositWidget() {
           }
         }}
       >
-        {requiresApproval ? 'Aprobar' : action === 'Deposit' ? 'Depositar' : 'Retirar'} {/* Dynamic button label */}
+        {requiresApproval
+          ? 'Aprobar'
+          : action === 'Deposit'
+            ? 'Depositar'
+            : 'Retirar'}{' '}
+        {/* Dynamic button label */}
       </button>
     </div>
   )

src/app/cartera/page.tsx

@@ -4,7 +4,10 @@ import Link from 'next/link'
 
 import PageWithAppbar from '@/components/layout/pageWithAppbar'
 import { Button } from '@/components/ui/button'
-import { useDynamicContext } from '@dynamic-labs/sdk-react-core'
+import {
+  useDynamicContext,
+  useSwitchNetwork,
+} from '@dynamic-labs/sdk-react-core'
 import {
   Card,
   CardContent,
@@ -13,7 +16,7 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { ArrowLeftRight, LoaderCircle, PiggyBank } from 'lucide-react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import CarteraWidget from '@/components/onchain/carteraWidget'
 import { useBalanceOf } from '@/hooks/useBalanceOf'
 import { useAccount } from 'wagmi'
@@ -23,16 +26,31 @@ import AhorraModalButton from '@/components/ux/ahorraModalButton'
 
 export default function Cartera() {
   const [basename, setBasename] = useState('')
-  const { user } = useDynamicContext()
+  const [isSwitchingNetwork, setIsSwitchingNetwork] = useState(false)
+  const { user, primaryWallet } = useDynamicContext()
+  const switchNetwork = useSwitchNetwork()
 
-  const { address: walletAddress } = useAccount()
+  const { address: walletAddress, chainId } = useAccount()
   const tokenAddress = '0xa411c9Aa00E020e4f88Bc19996d29c5B7ADB4ACf' // $XOC address
 
   const { balance, balanceStatus } = useBalanceOf({
     tokenAddress,
     walletAddress: walletAddress as Address,
   })
 
+  useEffect(() => {
+    async function handleSwitchNetwork() {
+      if (primaryWallet) {
+        setIsSwitchingNetwork(true)
+        await switchNetwork({ wallet: primaryWallet, network: 8453 })
+      }
+    }
+
+    if (primaryWallet && chainId !== 8453 && !isSwitchingNetwork) {
+      handleSwitchNetwork()
+    }
+  }, [chainId, isSwitchingNetwork, primaryWallet, switchNetwork])
+
   return (
     <PageWithAppbar>
       <div className="page gap-y-8 text-center md:max-w-screen-sm">

src/app/creditalent/solicitudes/page.tsx

@@ -18,14 +18,38 @@ import { LoanApplicationExtended } from '@/types/api'
 import { DenyModalButton } from '@/components/onchain/denyModalButton'
 import { ApproveModalButton } from '@/components/onchain/approveModalButton'
 import UnderwriterModal from '@/components/onchain/underwriterModal'
+import { useEffect, useState } from 'react'
+import {
+  useDynamicContext,
+  useSwitchNetwork,
+} from '@dynamic-labs/sdk-react-core'
+import { useAccount } from 'wagmi'
 
 export default function Solicitudes() {
+  const [isSwitchingNetwork, setIsSwitchingNetwork] = useState(false)
+  const { primaryWallet } = useDynamicContext()
+  const switchNetwork = useSwitchNetwork()
+  const { chainId } = useAccount()
+
   const { data: loanApplicationsData, status: loanApplicationsQueryStatus } =
     useQuery({
       queryKey: ['loanApplicationsKey'],
       queryFn: () => fetchLoanApplications(),
     })
 
+  useEffect(() => {
+    async function handleSwitchNetwork() {
+      if (primaryWallet) {
+        setIsSwitchingNetwork(true)
+        await switchNetwork({ wallet: primaryWallet, network: 84532 })
+      }
+    }
+
+    if (primaryWallet && chainId !== 84532 && !isSwitchingNetwork) {
+      handleSwitchNetwork()
+    }
+  }, [chainId, isSwitchingNetwork, primaryWallet, switchNetwork])
+
   return (
     <PageWithAppbar>
       <div className="page gap-y-8 px-8 text-center">

src/components/onchain/underwriterModal.tsx

@@ -1,6 +1,11 @@
 import { useEffect, useState } from 'react'
 import { Address, formatUnits, parseEther } from 'viem'
-import { useAccount, useReadContract, useWriteContract } from 'wagmi'
+import {
+  useAccount,
+  useReadContract,
+  useWaitForTransactionReceipt,
+  useWriteContract,
+} from 'wagmi'
 import { useBalanceOf } from '@/hooks/useBalanceOf'
 import { ERC20ABI } from '@/components/onchain/abis/erc20'
 import CreditTalentCenterABI from '@/components/onchain/abis/CreditTalentCenter'
@@ -26,10 +31,16 @@ export default function UnderwriterModal() {
   const [xocError, setXocError] = useState<string | null>(null)
   const [requiresApproval, setRequiresApproval] = useState(false) // Track approval need
 
-  const { writeContract: deposit } = useWriteContract()
-  const { writeContract: approveERC20 } = useWriteContract()
-  const { writeContract: withdraw } = useWriteContract()
+  const { writeContractAsync: deposit } = useWriteContract()
+  const { writeContractAsync: approveERC20, data: approveHash } =
+    useWriteContract()
+  const { writeContractAsync: withdraw } = useWriteContract()
 
+  const { isSuccess: isSuccessApproveTxReceipt } = useWaitForTransactionReceipt(
+    {
+      hash: approveHash,
+    },
+  )
   const xocBalance = useBalanceOf({
     tokenAddress: xocContract,
     walletAddress: accountAddress as Address,
@@ -217,7 +228,7 @@ export default function UnderwriterModal() {
           onClick={() => {
             if (requiresApproval) {
               handleApproval() // Call handleApproval when approval is needed
-            } else if (action === 'Deposit' && !xocError) {
+            } else if (action === 'Deposit' && isSuccessApproveTxReceipt) {
               handleDeposit() // Call handleDeposit if deposit is selected
             } else if (action === 'Withdraw' && !xocError) {
               handleWithdrawal() // Call handleWithdrawal if withdraw is selected

src/controllers/loanApplication/index.ts

@@ -1,4 +1,5 @@
 import prisma from '@/utils/prisma'
+import { Loan } from '@prisma/client'
 
 // Create a new LoanApplication
 export const createLoanApplication = async (data: {
@@ -90,14 +91,34 @@ export const updateLoanApplicationById = async (
     applicantId: number
   }>,
 ) => {
+  let loan: Loan | null = null
   try {
     const updatedLoanApplication = await prisma.loanApplication.update({
       where: { id },
       data: {
         ...data,
       },
     })
-    return updatedLoanApplication
+    if (
+      data.status === 'PENDING' &&
+      updatedLoanApplication.status === 'APPROVED'
+    ) {
+      const futureDate = new Date()
+      futureDate.setDate(futureDate.getDate() + 30)
+
+      loan = await prisma.loan.create({
+        data: {
+          amount: updatedLoanApplication.amount,
+          pendingBalance: updatedLoanApplication.amount,
+          dueDate: futureDate,
+          walletId: updatedLoanApplication.walletId,
+          borrowerId: updatedLoanApplication.applicantId,
+          creditLineId: updatedLoanApplication.creditLineId,
+          loanApplicationId: updatedLoanApplication.id,
+        },
+      })
+    }
+    return { updatedLoanApplication, loan }
   } catch (error) {
     if (error instanceof Error) {
       throw new Error(`Error updating LoanApplication: ${error.message}`)

src/hooks/useBalanceOf.tsx

@@ -28,6 +28,7 @@ const ERC20ABI = [
 interface TokenBalanceProps {
   tokenAddress: Address
   walletAddress: Address
+  chainId?: number
 }
 
 /**
@@ -39,6 +40,7 @@ interface TokenBalanceProps {
 export function useBalanceOf({
   tokenAddress,
   walletAddress,
+  chainId = 8453,
 }: TokenBalanceProps) {
   const [balance, setBalance] = useState<string>('0') // State to store the balance
   const [decimals, setDecimals] = useState<number>(18) // Default to 18 decimals
@@ -54,6 +56,7 @@ export function useBalanceOf({
     abi: ERC20ABI,
     functionName: 'balanceOf',
     args: [walletAddress],
+    chainId,
   })
 
   // Hook to read the decimals from the contract
@@ -65,6 +68,7 @@ export function useBalanceOf({
     address: tokenAddress,
     abi: ERC20ABI,
     functionName: 'decimals',
+    chainId,
   })
 
   // Effect to handle updates to data, error, and loading state

src/providers/onchainProvider.tsx

@@ -10,16 +10,20 @@ import { EthereumWalletConnectors } from '@dynamic-labs/ethereum'
 import { DynamicWagmiConnector } from '@dynamic-labs/wagmi-connector'
 import { createConfig, WagmiProvider } from 'wagmi'
 import { http } from 'viem'
-import { baseSepolia } from 'viem/chains'
+import { base, baseSepolia, mainnet } from 'viem/chains'
 import { useRouter } from 'next/navigation'
 
-// const alchemyApiKey = process.env.NEXT_PUBLIC_ALCHEMY_API ?? undefined
+const alchemyApiKey = process.env.NEXT_PUBLIC_ALCHEMY_API ?? undefined
 
 const config = createConfig({
-  chains: [baseSepolia],
+  chains: [base, baseSepolia, mainnet],
   multiInjectedProviderDiscovery: false,
   transports: {
-    [baseSepolia.id]: http('https://sepolia.base.org'),
+    [base.id]: http(`https://base-mainnet.g.alchemy.com/v2/${alchemyApiKey}`),
+    [baseSepolia.id]: http(
+      `https://base-sepolia.g.alchemy.com/v2/${alchemyApiKey}`,
+    ),
+    [mainnet.id]: http(`https://eth-mainnet.g.alchemy.com/v2/${alchemyApiKey}`),
   },
 })