fix: display modal if pending tx

Author: karczuRF

app/page.tsx

@@ -35,6 +35,7 @@ export default function Home() {
     isProcessingTransaction,
     addPendingTransaction,
     removePendingTransaction,
+    pendingBridgeTxFromTU,
   } = useTariAccount()
   const { signer, setSigner } = useTariSigner()
   const { setTariAccount } = useTariAccount()
@@ -54,14 +55,12 @@ export default function Home() {
   useEffect(() => {
     const setAccount = async () => {
       try {
-        console.info('🛜 setting account')
         await setTariAccount()
       } catch (error) {
         console.error('Failed to set Tari Account:', error)
       }
     }
     if (!signer) {
-      console.info('🛜 signer not found set signer')
       const signerParams: TariL1SignerParameters = {
         name: 'TariL1Signer',
         onConnection: setTariAccount,
@@ -155,6 +154,7 @@ export default function Home() {
           tariWalletAddress={tariAccount?.address}
           fromNetwork={fromNetwork}
           toNetwork={toNetwork}
+          pendingBridgeTxFromTU={pendingBridgeTxFromTU}
         />
       )}
     </main>

bridge-v0.1.0.zip

@@ -8,10 +8,10 @@ import {
   WalletBalance,
 } from '../types/tapplet'
 
-export type SendOneSidedRequest = {
+export interface SendOneSidedRequest {
   amount: string
   address: string
-  message?: string
+  paymentId: string
 }
 
 export class TariL1Signer {
@@ -72,17 +72,17 @@ export class TariL1Signer {
    * @description send XTM via one-sided transaction
    * @param amount XTM amount (uT or T)
    * @param address Tari Address one-sided
-   * @param message (optional) payment-id
+   * @param paymentId (optional) payment-id
    * @returns true if tx success; otherwise false
    */
   public async sendOneSided({
     amount,
     address,
-    message,
+    paymentId,
   }: SendOneSidedRequest): Promise<boolean> {
     return this.sendRequest({
       methodName: 'sendOneSided',
-      args: [{ amount, address, message }],
+      args: [{ amount, address, paymentId }],
     })
   }
 
@@ -96,6 +96,28 @@ export class TariL1Signer {
       args: [],
     })
   }
+
+  /**
+   * @description check if there is any processing transaction
+   * @returns true or false
+   */
+  public async isPendingTappletTx(): Promise<SendOneSidedRequest | undefined> {
+    return this.sendRequest({
+      methodName: 'isPendingTappletTx',
+      args: [],
+    })
+  }
+
+  /**
+   * @description check if there is any processing transaction
+   * @returns true or false
+   */
+  public async removePendingTappletTx(paymentId: string): Promise<boolean> {
+    return this.sendRequest({
+      methodName: 'removePendingTappletTx',
+      args: [paymentId],
+    })
+  }
 }
 
 function sendSignerCall<MethodName extends SignerMethodNames>(

clients/tari-l1-signer.ts

@@ -9,10 +9,9 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ closeModal }) => {
   const { connectors, connect } = useConnect()
 
   return (
-    <div className="w-full flex flex-col mt-9">
+    <div className="w-full flex flex-col mt-9 relative">
       <button
-        className="text-black font-bold hover:cursor-pointer
-        absolute top-4 right-4 cursor-pointer flex text-xl rounded-full p-1 bg-black/10 hover:bg-black/20"
+        className="text-black font-bold hover:cursor-pointer absolute top-4 right-4 cursor-pointer flex text-xl rounded-full p-1 bg-black/10 hover:bg-black/20"
         onClick={closeModal}
       >
         <IoCloseOutline />

components/modals/connection-modal/connection-modal.tsx

@@ -23,10 +23,15 @@ export const MainModal: React.FC<MainModalProps> = ({
   ethereumAddress,
   fromNetwork,
   toNetwork,
+  pendingBridgeTxFromTU,
 }) => {
   const { isConnected } = useAccount()
   const modalRef = useRef<HTMLDivElement>(null)
-  const feesData = useBridgeToEthereumFees(amount)
+  const feesData = useBridgeToEthereumFees(
+    !isBridging && pendingBridgeTxFromTU
+      ? pendingBridgeTxFromTU?.amount
+      : amount,
+  )
 
   const closeModal = () => {
     setModalOpen(false)
@@ -75,7 +80,11 @@ export const MainModal: React.FC<MainModalProps> = ({
       return (
         <WrapModal
           closeModal={closeModal}
-          amount={amount}
+          amount={
+            !isBridging && pendingBridgeTxFromTU
+              ? pendingBridgeTxFromTU?.amount
+              : amount
+          }
           tariWalletAddress={tariWalletAddress}
           ethereumAddress={ethereumAddress}
           fromNetwork={fromNetwork}
@@ -86,9 +95,7 @@ export const MainModal: React.FC<MainModalProps> = ({
   }
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-    >
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
       <section
         ref={modalRef}
         className="w-full max-w-md mx-4 bg-white/80 shadow-[0px_4px_74px_0px_rgba(0,0,0,0.15)] backdrop-blur-[54px] rounded-3xl overflow-hidden flex flex-col justify-center items-center"

components/modals/main-modal/main-modal.tsx

@@ -1,3 +1,4 @@
+import { SendOneSidedRequest } from '@/clients/tari-l1-signer'
 import { Network } from '@/components/network-box'
 
 export type MainModalProps = {
@@ -13,4 +14,5 @@ export type MainModalProps = {
   tariWalletAddress?: string
   fromNetwork: Network
   toNetwork: Network
+  pendingBridgeTxFromTU?: SendOneSidedRequest
 }

components/modals/main-modal/main-modal.types.ts

@@ -44,9 +44,9 @@ export const useBridgeToEthereum = () => {
     console.debug('[ TAPPLET-BRIDGE ] created tx with id: ', paymentId)
 
     const isSend = await signer?.sendOneSided({
-      amount,
+      amount: tokenAmount,
       address: config.TARI_BRIDGE_COLDWALLET_ADDRESS,
-      message: paymentId,
+      paymentId: paymentId,
     })
 
     if (!isSend) {

hooks/use-bridge-to-ethereum.ts

@@ -1,12 +1,14 @@
 import { AccountData } from '@/types/tapplet'
 import { create } from 'zustand'
 import useTariSigner from './signer'
+import { SendOneSidedRequest } from '@/clients/tari-l1-signer'
 
 interface State {
   tariAccount?: AccountData
   available_balance: number
   pendingBridgeTx: string[]
   isProcessingTransaction: boolean
+  pendingBridgeTxFromTU?: SendOneSidedRequest
 }
 
 interface Actions {
@@ -26,6 +28,7 @@ const initialState: State = {
   available_balance: 0,
   pendingBridgeTx: [],
   isProcessingTransaction: false,
+  pendingBridgeTxFromTU: undefined,
 }
 
 export const useTariAccount = create<OotleWalletStoreState>()((set) => ({
@@ -40,12 +43,16 @@ export const useTariAccount = create<OotleWalletStoreState>()((set) => ({
       }
       const account = await signer.getAccount()
       const balance = await signer.getTariBalance()
+      const pendingTx = await signer.isPendingTappletTx()
+      console.info('[ TAPPLET-BRIDGE ] call TU pending tx', pendingTx)
       set({
         tariAccount: {
           account_id: account.account_id,
           address: account.address,
         },
         available_balance: balance?.available_balance ?? 0,
+        pendingBridgeTxFromTU: pendingTx,
+        isProcessingTransaction: !!pendingTx,
       })
     } catch (error) {
       console.error('Could not set the Tari account: ', error)