@tuwaio/nova-transactions 0.0.1 → 0.0.3

package/README.md

@@ -13,21 +13,21 @@ This package provides the **View Layer** for TUWA's transaction tracking ecosyst
 -   **`@tuwaio/pulsar-core`**: The core state management engine.
 -   **`@tuwaio/nova-transactions` (this package)**: The React components that consume state from `pulsar-core` and render the UI.
 
-You must use both packages together to achieve the full functionality.
+You must set up both the Pulsar engine and this UI package to achieve the full functionality.
 
 ## Core Features
 
 -   **🧩 UI Components:** A suite of pre-built, accessible components including `TransactionModal`, `TransactionToasts`, and `TransactionHistory`.
--   **🔌 Simple Integration:** Just wrap your app in our providers, and the UI will automatically react to transactions tracked by `pulsar-core`.
+-   **🔌 Simple Integration:** The UI automatically reacts to transactions tracked by `pulsar-core`.
 -   **🌐 Internationalization (i18n):** Built-in support for multiple languages and easy overrides for all text content.
 -   **🎨 Highly Customizable:** Styled with `@tuwaio/nova-core` to be easily themed using Tailwind CSS.
 
 ## Installation
 
-1.  Install the required TUWA packages:
+1.  Install all the required TUWA packages:
 
     ```bash
-    pnpm add @tuwaio/nova-transactions @tuwaio/nova-core @tuwaio/pulsar-core
+    pnpm add @tuwaio/nova-transactions @tuwaio/nova-core @tuwaio/pulsar-core @tuwaio/pulsar-evm @tuwaio/pulsar-react
     ```
 
 2.  This package relies on several peer dependencies. Install them if you haven't already:
@@ -38,38 +38,46 @@ You must use both packages together to achieve the full functionality.
 
 ## Getting Started
 
-To get started, you need to set up the providers from both `pulsar-core` and `nova-transactions`.
+To use this library, you need to set up the `NovaProvider` from this package alongside the Pulsar initialization logic.
+
+Here is a complete example of a `providers.tsx` file that configures both systems:
 
 ```tsx
 // app/providers.tsx or similar
 'use client';
 
 import { WagmiProvider } from 'wagmi';
-import { PulsarProvider } from '@tuwaio/pulsar-core';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { NovaProvider, TransactionToasts } from '@tuwaio/nova-transactions';
 import { ToastContainer } from 'react-toastify';
 
+// Import the TransactionInitializer component you created (see pulsar-react docs)
+import { TransactionInitializer } from '../components/TransactionInitializer';
 // Import required CSS
-import 'react-toastify/dist/ReactToastify.css';
 import '@tuwaio/nova-core/dist/index.css';
+import '@tuwaio/nova-transactions/dist/index.css';
 
 // Your Wagmi Config
 import { wagmiConfig } from './wagmi';
 
+const queryClient = new QueryClient();
+
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <WagmiProvider config={wagmiConfig}>
-      {/* State management from Pulsar */}
-      <PulsarProvider>
-        {/* UI layer from Nova */}
+      <QueryClientProvider client={queryClient}>
+        {/* NovaProvider is the parent for all UI-related context and components */}
         <NovaProvider>
+          {/* TransactionInitializer handles the logic of rehydrating the Pulsar store */}
+          <TransactionInitializer />
+          
           {children}
 
-          {/* Global UI components */}
+          {/* Global UI components from this package */}
           <TransactionToasts />
           <ToastContainer />
         </NovaProvider>
-      </PulsarProvider>
+      </QueryClientProvider>
     </WagmiProvider>
   );
 }
@@ -77,56 +85,66 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
 ## Usage Example
 
-Once the providers are set up, you use hooks from `@tuwaio/pulsar-core` to initiate and track transactions. The components from this library (`nova-transactions`) will automatically appear and update.
+Once the providers are set up, you use your custom `usePulsarStore` hook to track transactions. The components from this library will automatically appear and update.
 
 ```tsx
-// components/MintNFTButton.tsx
+// components/IncrementButton.tsx
 'use client';
 
-// Logic and state management hooks are imported from pulsar-core
-import { usePulsar } from '@tuwaio/pulsar-core'; 
-import { useWriteContract } from 'wagmi';
+import { getAccount } from '@wagmi/core';
+
+// Import your custom hook, created as shown in the pulsar-react docs
+import { usePulsarStore } from '../hooks/usePulsarStore';
+import { config } from '../configs/wagmiConfig';
 import { abi } from './my-nft-abi';
 
-const NFT_CONTRACT_ADDRESS = '0x...';
-
-export function MintNFTButton() {
-  const { writeContract } = useWriteContract();
-  const { track } = usePulsar(); // The main tracking function from the engine
-
-  const handleMint = () => {
-    // track() comes from pulsar-core and handles all the state logic.
-    // Nova's UI components listen to these state changes and appear automatically.
-    track({
-      write: () => writeContract({
-        address: NFT_CONTRACT_ADDRESS,
-        abi,
-        functionName: 'safeMint',
-        args: [1],
-      }),
-      metadata: {
-        title: 'Mint Your Awesome NFT',
-        description: 'This is a transaction to mint a new NFT.',
+const CONTRACT_ADDRESS = '0x...';
+
+export function IncrementButton() {
+  const activeWallet = getAccount(config);
+  const { handleTransaction } = usePulsarStore();
+
+  const handleIncrement = async () => {
+    await handleTransaction({
+      actionFunction: txActions.increment,
+      params: {
+        type: TxType.increment,
+        adapter: TransactionAdapter.EVM,
+        from: activeWallet.address ?? zeroAddress,
+        walletType: activeWallet.connector?.type ?? '',
+        desiredChainID: sepolia.id,
+        actionKey: TxAction.increment,
+        title: ['Incrementing', 'Incremented', 'Error when increment', 'Increment tx replaced'],
+        description: [
+          `Value after incrementing ${currentCount + 1}`,
+          `Success. Current value is ${currentCount + 1}`,
+          'Something went wrong when increment.',
+          'Transaction replaced. Please take a look details in your wallet.',
+        ],
+        payload: {
+          value: currentCount,
+        },
+        withTrackedModal: true,
       },
     });
-  };
+  }
 
-  return <button onClick={handleMint}>Mint NFT</button>;
+  return <button onClick={handleIncrement}>Increment</button>;
 }
 ```
 
 ## Internationalization (i18n)
 
-You can easily override the default English text by passing a `locale` object to the `NovaProvider`.
+You can easily override the default English text by passing a `locale` object to the `NovaProvider`. Here is an example with German translations:
 
 ```tsx
 <NovaProvider
   locale={{
     transaction: {
-      title: 'Транзакція',
-      pending: 'Очікування...',
-      success: 'Успішно!',
-      failed: 'Помилка!',
+      title: 'Transaktion',
+      pending: 'Ausstehend...',
+      success: 'Erfolgreich!',
+      failed: 'Fehlgeschlagen!',
     },
     // ... other keys
   }}

package/dist/chunk-JJFLQRNB.js

@@ -0,0 +1,2 @@
+import {createContext,useContext,useState,useEffect,useRef,useMemo}from'react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useCopyToClipboard,cn,textCenterEllipsis,deepMerge}from'@tuwaio/nova-core';import {TransactionStatus,TransactionAdapter,selectAllTransactionsByActiveWallet}from'@tuwaio/pulsar-core';import {ToastContainer,toast}from'react-toastify';import {ArrowTopRightOnSquareIcon,CheckIcon,DocumentDuplicateIcon,XMarkIcon,ArrowPathIcon,XCircleIcon,CheckCircleIcon,ExclamationTriangleIcon,ExclamationCircleIcon,ClockIcon}from'@heroicons/react/24/solid';import {Web3Icon}from'@bgd-labs/react-web3-icons';import {getChainName}from'@bgd-labs/react-web3-icons/dist/utils';import {TransactionTracker,selectEvmTxExplorerLink,getName,getAvatar,speedUpTxAction,cancelTxAction}from'@tuwaio/pulsar-evm';import*as P from'@radix-ui/react-dialog';import {getAccount}from'@wagmi/core';import {AnimatePresence,motion}from'framer-motion';import {zeroAddress,isHex}from'viem';import zt from'dayjs';import aa from'dayjs/plugin/relativeTime';import qt from'ethereum-blockies-base64';var $={walletModal:{title:"Wallet & Transactions",header:{notConnected:"Wallet not connected",avatarAlt:"Avatar for"},history:{title:"Transactions History",connectWalletTitle:"Connect Wallet",connectWalletMessage:"Please connect your wallet to see your past activity.",noTransactionsTitle:"No Transactions Yet",noTransactionsMessage:"Once you interact with the app, your transaction history will appear here."}},toast:{openWalletInfo:"Open wallet info"},statuses:{pending:"Pending",success:"Success",failed:"Failed",reverted:"Reverted",replaced:"Replaced",unknown:"Unknown"},hashLabels:{gelato:"Gelato Task ID",safe:"Safe Tx Hash",original:"Original Tx Hash",replaced:"Replaced Tx Hash",default:"Tx Hash"},txInfo:{started:"Started",network:"Network"},txError:{title:"Error",copied:"Copied!"},trackingModal:{title:"Transaction Overview",processing:"Processing...",close:"Close",walletInfo:"Wallet Info",retry:"Retry",progressIndicator:{created:"Created",processing:"Processing",succeed:"Succeed"}},trackedTxButton:{loading:"Processing...",succeed:"Success",failed:"Failed",replaced:"Replaced"},actions:{copy:"Copy address",viewOnExplorer:"View on explorer",close:"Close",cancel:"Cancel",speedUp:"Speed up"}};var yt=createContext($),gt=({labels:t,children:e})=>jsx(yt.Provider,{value:t,children:e}),u=()=>useContext(yt);function ht({label:t,hash:e,explorerUrl:o,variant:a="default",className:s}){let{isCopied:r,copy:l}=useCopyToClipboard(),d=u(),c=cn("flex items-center justify-between",a==="default"&&"text-sm",a==="compact"&&"text-xs",s),n=cn("pr-1",a==="default"&&"font-bold text-[var(--tuwa-text-primary)]",a==="compact"&&"font-medium text-[var(--tuwa-text-secondary)]"),p=jsx("span",{className:"font-mono",children:textCenterEllipsis(e,5,5)});return jsxs("div",{className:c,children:[t&&jsxs("span",{className:n,children:[t,":"]}),jsxs("div",{className:"flex items-center gap-x-2",children:[o?jsxs("a",{href:o,target:"_blank",rel:"noopener noreferrer",className:"flex items-center gap-x-1 text-[var(--tuwa-text-accent)] hover:underline",title:d.actions.viewOnExplorer,"aria-label":d.actions.viewOnExplorer,children:[p,jsx(ArrowTopRightOnSquareIcon,{className:"h-4 w-4"})]}):p,jsx("button",{type:"button",onClick:()=>l(e),className:"cursor-pointer text-[var(--tuwa-text-tertiary)] transition-colors hover:text-[var(--tuwa-text-secondary)]",title:r?d.txError.copied:d.actions.copy,"aria-label":r?d.txError.copied:d.actions.copy,children:r?jsx(CheckIcon,{className:"h-4 w-4 text-[var(--tuwa-success-icon)]"}):jsx(DocumentDuplicateIcon,{className:"h-4 w-4"})})]})]})}var wt={[TransactionStatus.Success]:{index:1,colorClass:"text-[var(--tuwa-success-text)]"},[TransactionStatus.Failed]:{index:2,colorClass:"text-[var(--tuwa-error-text)]"},[TransactionStatus.Replaced]:{index:3,colorClass:"text-[var(--tuwa-text-secondary)]"},default:{index:0,colorClass:"text-[var(--tuwa-text-primary)]"}};function I({txStatus:t,source:e,fallback:o,variant:a,className:s,applyColor:r=false}){let l=a==="title"?"text-sm font-semibold text-[var(--tuwa-text-primary)]":"mt-1 text-xs text-[var(--tuwa-text-secondary)]";if(typeof e=="string")return jsx("div",{className:cn(l,s),children:e});if(Array.isArray(e)){let c=wt[t||"default"]||wt.default,n=e[c.index],p=r?c.colorClass:"";return jsx("div",{className:cn(l,p,s),children:n})}return o?jsx("div",{className:cn(l,s),children:o}):null}function Pt({closeToast:t}){let e=u();return jsx("button",{type:"button",onClick:t,"aria-label":e.actions.close,title:e.actions.close,className:"absolute top-2 right-2 cursor-pointer rounded-full p-1 text-[var(--tuwa-text-tertiary)] transition-colors hover:bg-[var(--tuwa-bg-muted)] hover:text-[var(--tuwa-text-primary)]",children:jsx(XMarkIcon,{className:"h-5 w-5"})})}function J({tx:t,appChains:e,transactionsPool:o,variant:a="toast",className:s,renderHashLink:r}){let l=u();if(t?.adapter!==TransactionAdapter.EVM)return null;let d=!!t.replacedTxHash,c=a==="toast"?"mt-2 flex w-full flex-col gap-y-2 border-t border-[var(--tuwa-border-primary)] pt-2":"flex w-full flex-col gap-y-2",n=p=>r?r(p):jsx(ht,{...p});return jsxs("div",{className:cn(c,s),children:[t.tracker===TransactionTracker.Gelato&&n({label:l.hashLabels.gelato,hash:t.txKey,variant:"compact"}),t.tracker===TransactionTracker.Safe&&n({label:l.hashLabels.safe,hash:t.txKey,variant:"compact"}),d?jsxs(Fragment,{children:[t.hash&&n({label:l.hashLabels.original,hash:t.hash,variant:"compact"}),n({label:l.hashLabels.replaced,hash:t.replacedTxHash,explorerUrl:selectEvmTxExplorerLink(o,e,t.txKey,t.replacedTxHash)})]}):t.hash&&n({label:l.hashLabels.default,hash:t.hash,explorerUrl:selectEvmTxExplorerLink(o,e,t.txKey)})]})}function Y({tx:t,className:e}){let o=u(),a={Pending:{label:o.statuses.pending,Icon:ArrowPathIcon,badgeClasses:"bg-[var(--tuwa-pending-bg)] text-[var(--tuwa-pending-text)]",iconClasses:"animate-spin text-[var(--tuwa-pending-icon)]"},[TransactionStatus.Success]:{label:o.statuses.success,Icon:CheckCircleIcon,badgeClasses:"bg-[var(--tuwa-success-bg)] text-[var(--tuwa-success-text)]",iconClasses:"text-[var(--tuwa-success-icon)]"},[TransactionStatus.Failed]:{label:o.statuses.failed,Icon:XCircleIcon,badgeClasses:"bg-[var(--tuwa-error-bg)] text-[var(--tuwa-error-text)]",iconClasses:"text-[var(--tuwa-error-icon)]"},[TransactionStatus.Replaced]:{label:o.statuses.replaced,Icon:ArrowPathIcon,badgeClasses:"bg-[var(--tuwa-info-bg)] text-[var(--tuwa-info-text)]",iconClasses:"text-[var(--tuwa-info-icon)]"}},s="inline-flex items-center gap-x-1.5 rounded-full px-2 py-1 text-xs font-medium",r=t.pending?"Pending":t.status,l=r?a[r]:null;if(!l)return jsx("div",{className:cn(s,"bg-[var(--tuwa-info-bg)] text-[var(--tuwa-info-text)]",e),children:t.status??o.statuses.unknown});let{label:d,Icon:c,badgeClasses:n,iconClasses:p}=l;return jsxs("div",{className:cn(s,n,e),children:[jsx(c,{className:cn("h-4 w-4",p)}),d]})}function Mt({openWalletInfoModal:t,tx:e,transactionsPool:o,appChains:a,icon:s,className:r,customization:l,config:d}){let c=u(),n=l?.components,p=d&&e?.adapter===TransactionAdapter.EVM&&e.nonce!==void 0&&e.pending&&e.maxFeePerGas&&e.maxPriorityFeePerGas,m=async()=>{p&&await speedUpTxAction({config:d,tx:e});},i=async()=>{p&&await cancelTxAction({config:d,tx:e});};return jsxs("div",{className:cn("flex w-full flex-col gap-3 rounded-lg bg-[var(--tuwa-bg-primary)] p-4 shadow-md",r),children:[jsxs("div",{className:"flex items-start gap-3",children:[jsx("div",{className:"w-[40px] flex-shrink-0",title:getChainName(e.chainId),children:s??jsx(Web3Icon,{chainId:e.chainId})}),jsxs("div",{className:"flex-1",children:[n?.statusAwareText?n.statusAwareText({txStatus:e.status,source:e.title,fallback:e.type,variant:"title",applyColor:true}):jsx(I,{txStatus:e.status,source:e.title,fallback:e.type,variant:"title",applyColor:true}),n?.statusAwareText?n.statusAwareText({txStatus:e.status,source:e.description,variant:"description"}):jsx(I,{txStatus:e.status,source:e.description,variant:"description"})]})]}),jsxs("div",{children:[n?.transactionKey?n.transactionKey({transactionsPool:o,appChains:a,tx:e,variant:"toast"}):jsx(J,{transactionsPool:o,appChains:a,tx:e,variant:"toast"}),jsxs("div",{className:"mt-3 flex items-center justify-between",children:[n?.statusBadge?n.statusBadge({tx:e}):jsx(Y,{tx:e}),p?jsxs("div",{className:"flex items-center gap-4",children:[n?.speedUpButton?n.speedUpButton({onClick:m,children:c.actions.speedUp}):jsx("button",{onClick:m,type:"button",className:"cursor-pointer text-sm font-medium text-[var(--tuwa-text-accent)] transition-opacity hover:opacity-80",children:c.actions.speedUp}),n?.cancelButton?n.cancelButton({onClick:i,children:c.actions.cancel}):jsx("button",{onClick:i,type:"button",className:"cursor-pointer text-sm font-medium text-[var(--tuwa-text-secondary)] transition-opacity hover:opacity-80",children:c.actions.cancel})]}):t&&(n?.walletInfoButton?n.walletInfoButton({onClick:()=>t(true),children:c.toast.openWalletInfo}):jsx("button",{className:"cursor-pointer bg-gradient-to-r from-[var(--tuwa-button-gradient-from)] to-[var(--tuwa-button-gradient-to)] text-[var(--tuwa-text-on-accent)] font-bold text-xs py-1 px-3 rounded-md shadow-lg hover:shadow-xl hover:from-[var(--tuwa-button-gradient-from-hover)] hover:to-[var(--tuwa-button-gradient-to-hover)] active:scale-95 transition-all duration-200 ease-in-out",onClick:()=>t(true),type:"button",children:c.toast.openWalletInfo}))]})]})]})}function Et({error:t,className:e}){let{isCopied:o,copy:a}=useCopyToClipboard(),s=u();return t?jsxs("div",{className:cn("rounded-lg border border-[var(--tuwa-error-icon)]/30 bg-[var(--tuwa-error-bg)] p-3 text-sm",e),children:[jsxs("div",{className:"mb-2 flex items-center justify-between",children:[jsxs("div",{className:"flex items-center gap-2 font-bold text-[var(--tuwa-error-icon)]",children:[jsx(ExclamationTriangleIcon,{className:"h-5 w-5"}),jsx("span",{children:s.txError.title})]}),jsx("button",{type:"button",onClick:()=>a(t),title:s.actions.copy,"aria-label":s.actions.copy,className:"cursor-pointer text-[var(--tuwa-error-icon)]/50 transition-colors hover:text-[var(--tuwa-error-icon)]",children:jsx(DocumentDuplicateIcon,{className:"h-5 w-5"})})]}),jsx("div",{className:"max-h-24 overflow-y-auto rounded bg-[var(--tuwa-bg-primary)] p-2",children:jsx("p",{className:"font-mono text-xs text-[var(--tuwa-error-text)] break-all",children:t})}),jsx("div",{className:"mt-1 h-5 text-right",children:jsx("p",{className:cn("text-xs text-[var(--tuwa-success-icon)] transition-opacity duration-300 ease-in-out",o?"opacity-100":"opacity-0"),children:s.txError.copied})})]}):null}function We({label:t,value:e}){return jsxs("div",{className:"flex items-center justify-between text-sm",children:[jsx("span",{className:"text-[var(--tuwa-text-secondary)]",children:t}),jsx("span",{className:"font-medium text-[var(--tuwa-text-primary)]",children:e})]})}function Bt({tx:t,appChains:e,transactionsPool:o,className:a,customization:s}){let r=u(),l=d=>s?.components?.infoRow?s.components.infoRow(d):jsx(We,{...d});return jsxs("div",{className:cn("flex flex-col gap-3 rounded-lg border border-[var(--tuwa-border-primary)] bg-[var(--tuwa-bg-primary)] p-3",a),children:[l({label:r.txInfo.network,value:jsxs("div",{className:"flex items-center justify-end gap-2",children:[jsx("div",{className:"h-4 w-4",children:jsx(Web3Icon,{chainId:t.chainId??t?.desiredChainID??1})}),jsx("span",{children:getChainName(t.chainId??t?.desiredChainID??1)})]})}),t.localTimestamp&&l({label:r.txInfo.started,value:zt.unix(t.localTimestamp).format("MMM D, HH:mm:ss")}),jsx("div",{className:"border-t border-[var(--tuwa-border-primary)] pt-3",children:jsx(J,{tx:t,appChains:e,transactionsPool:o,variant:"history",renderHashLink:s?.components?.transactionKey})})]})}function Xe({status:t,label:e,isFirst:o=false}){let a={isCompleted:t==="completed",isError:t==="error",isReplaced:t==="replaced",isActive:t==="active"},s={line:cn({"bg-[var(--tuwa-success-icon)]":a.isCompleted,"bg-[var(--tuwa-error-icon)]":a.isError,"bg-[var(--tuwa-info-icon)]":a.isReplaced,"bg-[var(--tuwa-pending-icon)]":a.isActive,"bg-[var(--tuwa-border-primary)]":t==="inactive"}),border:cn({"border-[var(--tuwa-success-icon)]":a.isCompleted,"border-[var(--tuwa-error-icon)]":a.isError,"border-[var(--tuwa-info-icon)]":a.isReplaced,"border-[var(--tuwa-pending-icon)]":a.isActive,"border-[var(--tuwa-border-primary)]":t==="inactive"}),fill:cn({"bg-[var(--tuwa-success-icon)]":a.isCompleted,"bg-[var(--tuwa-error-icon)]":a.isError,"bg-[var(--tuwa-info-icon)]":a.isReplaced}),pulse:cn({"bg-[var(--tuwa-pending-icon)]":a.isActive})};return jsxs("div",{className:"relative flex flex-1 flex-col items-center min-w-[80px]",children:[!o&&jsx("div",{className:cn("absolute right-1/2 top-[10px] h-0.5 w-full",s.line)}),jsxs("div",{className:cn("relative z-10 flex h-5 w-5 items-center justify-center rounded-full border-2",s.border,s.fill),children:[a.isCompleted&&jsx(CheckIcon,{className:"h-3 w-3 text-white"}),a.isError&&jsx(ExclamationTriangleIcon,{className:"h-3 w-3 text-white"}),a.isReplaced&&jsx(ArrowPathIcon,{className:"h-3 w-3 text-white"}),a.isActive&&jsx("div",{className:cn("h-2 w-2 animate-pulse rounded-full",s.pulse)})]}),jsx("span",{className:cn("mt-2 text-center text-xs",t!=="inactive"?"font-semibold text-[var(--tuwa-text-primary)]":"text-[var(--tuwa-text-secondary)]"),children:e})]})}function Ht({isProcessing:t,isSucceed:e,isFailed:o,isReplaced:a,className:s,StepComponent:r=Xe}){let l=u(),d=p=>{if(p===1)return "completed";if(p===2){if(e||o||a)return "completed";if(t)return "active"}if(p===3){if(e)return "completed";if(o)return "error";if(a)return "replaced";if(t)return "active"}return "inactive"},c=p=>p===1?l.trackingModal.progressIndicator.created:p===2?l.trackingModal.progressIndicator.processing:o?l.statuses.failed:a?l.statuses.replaced:l.trackingModal.progressIndicator.succeed,n=[{status:d(1),label:c(1),isFirst:true},{status:d(2),label:c(2)},{status:d(3),label:c(3),isLast:true}];return jsx("div",{className:cn("flex w-full items-start px-4 pt-2 pb-1",s),children:n.map((p,m)=>jsx(r,{...p},m))})}function Kt({isProcessing:t,isSucceed:e,isFailed:o,isReplaced:a}){let s;return e?s=jsx(CheckCircleIcon,{className:"h-16 w-16 text-[var(--tuwa-success-icon)]"}):o?s=jsx(ExclamationCircleIcon,{className:"h-16 w-16 text-[var(--tuwa-error-icon)]"}):a?s=jsx(ArrowPathIcon,{className:"h-16 w-16 text-[var(--tuwa-info-icon)]"}):t?s=jsx(ArrowPathIcon,{className:"h-16 w-16 animate-spin text-[var(--tuwa-text-accent)]"}):s=jsx(ClockIcon,{className:"h-16 w-16 animate-pulse text-[var(--tuwa-pending-icon)]"}),jsx("div",{className:"flex justify-center py-4",children:s})}function Jt({onClose:t,onOpenWalletInfo:e,className:o,customization:a,appChains:s,transactionsPool:r,actions:l,handleTransaction:d,config:c,initialTx:n}){let p=u(),m=a?.components,[i,g]=useState(void 0);useEffect(()=>{let E;n?.lastTxKey?E=r[n.lastTxKey]:i&&(E=r[i.txKey]),g(E);},[r,n,i]);let f=i??n,y=i?.status,b=n?.isInitializing??false,O=i?.pending??true,h=b||O,k=i?.isError||!!n?.errorMessage,v=f?.actionKey&&l?.[f.actionKey]&&d&&c,T=c&&i?.adapter===TransactionAdapter.EVM&&i?.nonce!==void 0&&i.pending&&i.maxFeePerGas&&i.maxPriorityFeePerGas,w={initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.2,ease:"easeOut"},...a?.motionProps},X=async()=>{if(!v||!f?.actionKey)return;let E=getAccount(c),ne={adapter:TransactionAdapter.EVM,type:f.type,desiredChainID:i?.chainId||n?.desiredChainID||1,actionKey:f.actionKey,title:f.title,description:f.description,payload:f.payload,withTrackedModal:true,from:E.address??zeroAddress,walletType:E.connector?.type??""};t(i?.txKey),await d({actionFunction:()=>l[f.actionKey]({config:c,...f.payload}),params:ne,defaultTracker:TransactionTracker.Ethereum});},_=async()=>{T&&i&&await cancelTxAction({config:c,tx:i});},xt=async()=>{T&&i&&await speedUpTxAction({config:c,tx:i});},vt=(i?.isTrackedModalOpen||n?.withTrackedModal)??false;return jsx(P.Root,{open:vt,onOpenChange:E=>!E&&t(i?.txKey),children:jsx(P.Portal,{children:jsx(AnimatePresence,{children:vt&&jsxs(Fragment,{children:[jsx(P.Overlay,{asChild:true,children:jsx(motion.div,{className:"fixed inset-0 bg-black/60 z-50",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0}})}),jsx(P.Content,{className:"fixed left-1/2 top-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 outline-none z-50",onOpenAutoFocus:()=>g(void 0),...a?.modalProps,asChild:true,children:jsx(motion.div,{...w,children:jsxs("div",{className:cn("relative flex flex-col gap-3 rounded-2xl bg-[var(--tuwa-bg-primary)] p-5 pt-0 shadow-2xl max-h-[98dvh] overflow-y-auto",o),children:[m?.header?m.header({onClose:()=>t(i?.txKey)}):jsxs("header",{className:"flex items-start justify-between sticky top-0 w-full z-10 pt-5 pb-2 bg-[var(--tuwa-bg-primary)]",children:[jsx(P.Title,{className:"text-lg font-bold text-[var(--tuwa-text-primary)]",children:p.trackingModal.title}),jsx(P.Close,{asChild:true,children:jsx("button",{type:"button",onClick:()=>t(i?.txKey),"aria-label":p.actions.close,className:"cursor-pointer ml-2 -mt-1 rounded-full p-1 text-[var(--tuwa-text-tertiary)] transition-colors hover:bg-[var(--tuwa-bg-muted)] hover:text-[var(--tuwa-text-primary)]",children:jsx(XMarkIcon,{className:"h-5 w-5"})})})]}),jsxs("main",{className:"flex flex-col gap-3",children:[m?.statusVisual?m.statusVisual({isProcessing:h,isSucceed:y===TransactionStatus.Success,isFailed:k,isReplaced:y===TransactionStatus.Replaced}):jsx(Kt,{isProcessing:h,isSucceed:y===TransactionStatus.Success,isFailed:k,isReplaced:y===TransactionStatus.Replaced}),jsxs("div",{className:"flex flex-col items-center text-center -mt-2",children:[jsx(I,{txStatus:y,source:f?.title,fallback:f?.type,variant:"title",applyColor:true,className:"text-xl"}),jsx(I,{txStatus:y,source:f?.description,variant:"description",className:"mt-0"})]}),m?.progressIndicator?m.progressIndicator({isProcessing:h,isSucceed:y===TransactionStatus.Success,isFailed:k,isReplaced:y===TransactionStatus.Replaced}):jsx(Ht,{isProcessing:h,isSucceed:y===TransactionStatus.Success,isFailed:k,isReplaced:y===TransactionStatus.Replaced}),m?.infoBlock?m.infoBlock({tx:f,appChains:s,transactionsPool:r}):jsx(Bt,{tx:f,appChains:s,transactionsPool:r}),m?.errorBlock?m.errorBlock({error:i?.errorMessage||n?.errorMessage}):jsx(Et,{error:i?.errorMessage||n?.errorMessage})]}),m?.footer?m.footer({onClose:()=>t(i?.txKey),onOpenWalletInfo:e,isProcessing:h,onRetry:v?X:void 0,onSpeedUp:T?xt:void 0,onCancel:T?_:void 0}):jsxs("footer",{className:"mt-2 flex w-full items-center justify-between border-t border-[var(--tuwa-border-primary)] pt-4",children:[jsx("div",{className:"flex items-center gap-4",children:T&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:xt,className:"cursor-pointer text-sm font-medium text-[var(--tuwa-text-accent)] transition-opacity hover:opacity-80",children:p.actions.speedUp}),jsx("button",{type:"button",onClick:_,className:"cursor-pointer text-sm font-medium text-[var(--tuwa-text-secondary)] transition-opacity hover:opacity-80",children:p.actions.cancel})]})}),jsxs("div",{className:"flex items-center gap-3",children:[k&&v?jsx("button",{type:"button",onClick:X,className:"cursor-pointer rounded-md bg-[var(--tuwa-button-gradient-from)] px-4 py-2 text-sm font-semibold text-[var(--tuwa-text-on-accent)] transition-opacity hover:opacity-90",children:p.trackingModal.retry}):!T&&jsx("button",{type:"button",onClick:e,className:"cursor-pointer rounded-md bg-[var(--tuwa-bg-muted)] px-4 py-2 text-sm font-semibold text-[var(--tuwa-text-primary)] transition-colors hover:bg-[var(--tuwa-border-primary)]",children:p.trackingModal.walletInfo}),jsx("button",{type:"button",onClick:()=>t(i?.txKey),disabled:h&&!T,className:"cursor-pointer rounded-md bg-[var(--tuwa-bg-muted)] px-4 py-2 text-sm font-semibold text-[var(--tuwa-text-primary)] transition-colors hover:bg-[var(--tuwa-border-primary)] disabled:cursor-not-allowed disabled:opacity-50",children:h&&!T?p.trackingModal.processing:p.trackingModal.close})]})]})]})})})]})})})})}zt.extend(aa);function Ft({tx:t,appChains:e,transactionsPool:o,className:a,customization:s}){let r=s?.components;return jsxs("div",{className:cn("flex flex-col gap-2 border-b border-[var(--tuwa-border-secondary)] p-3 transition-colors hover:bg-[var(--tuwa-bg-secondary)]",a),children:[jsxs("div",{className:"flex items-start justify-between",children:[jsxs("div",{className:"flex items-center gap-4",children:[jsx("div",{className:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-[var(--tuwa-bg-muted)]",children:r?.icon?r.icon({chainId:t.chainId}):jsx("div",{className:"h-8 w-8 text-[var(--tuwa-text-secondary)]",children:jsx(Web3Icon,{chainId:t.chainId})})}),jsxs("div",{children:[r?.title?r.title({txStatus:t.status,source:t.title,fallback:t.type,variant:"title",applyColor:true}):jsx(I,{txStatus:t.status,source:t.title,fallback:t.type,variant:"title",applyColor:true}),r?.timestamp?r.timestamp({timestamp:t.localTimestamp}):jsx("span",{className:"mb-1 block text-xs text-[var(--tuwa-text-secondary)]",children:t.localTimestamp?zt.unix(t.localTimestamp).fromNow():"..."}),r?.description?r.description({txStatus:t.status,source:t.description,variant:"description"}):jsx(I,{txStatus:t.status,source:t.description,variant:"description"})]})]}),r?.statusBadge?r.statusBadge({tx:t}):jsx(Y,{tx:t})]}),r?.transactionKey?r.transactionKey({tx:t,appChains:e,transactionsPool:o,variant:"history"}):jsx(J,{tx:t,appChains:e,transactionsPool:o,variant:"history"})]})}function ra({title:t,message:e,className:o}){return jsxs("div",{className:cn("rounded-lg bg-[var(--tuwa-bg-muted)] p-8 text-center",o),children:[jsx("h4",{className:"font-semibold text-[var(--tuwa-text-primary)]",children:t}),jsx("p",{className:"mt-1 text-sm text-[var(--tuwa-text-secondary)]",children:e})]})}function Ut({walletAddress:t,transactionsPool:e,appChains:o,className:a,customization:s}){let r=u(),l=s?.components,c=[...t?selectAllTransactionsByActiveWallet(e,t):[]].sort((m,i)=>(i.localTimestamp??0)-(m.localTimestamp??0)),n=(m,i)=>l?.placeholder?l.placeholder({title:m,message:i}):jsx(ra,{title:m,message:i}),p=l?.HistoryItem||Ft;return jsxs("div",{className:cn("flex flex-col gap-y-3",a),children:[jsx("h3",{className:"text-lg font-bold text-[var(--tuwa-text-primary)]",children:r.walletModal.history.title}),t?c.length>0?jsx("div",{className:cn("max-h-[400px] overflow-y-auto rounded-lg border border-[var(--tuwa-border-primary)] bg-[var(--tuwa-bg-primary)]",s?.classNames?.listWrapper),children:c.map(m=>jsx(p,{tx:m,transactionsPool:e,appChains:o},m.txKey))}):n(r.walletModal.history.noTransactionsTitle,r.walletModal.history.noTransactionsMessage):n(r.walletModal.history.connectWalletTitle,r.walletModal.history.connectWalletMessage)]})}function ss({children:t,action:e,getLastTxKey:o,loadingContent:a,succeedContent:s,failedContent:r,replacedContent:l,resetTimeout:d=2500,transactionsPool:c,className:n,...p}){let m=u(),[i,g]=useState("idle"),[f,y]=useState(void 0);useEffect(()=>{if(f){let w=c[f];if(w?.status)switch(w.status){case TransactionStatus.Success:g("succeed");break;case TransactionStatus.Replaced:g("replaced");break;case TransactionStatus.Failed:g("failed");break}}},[c,f]),useEffect(()=>{if(i==="succeed"||i==="failed"||i==="replaced"){let w=setTimeout(()=>{g("idle"),y(void 0);},d);return ()=>clearTimeout(w)}},[i,d]);let b=async()=>{g("loading");try{await e(),y(o());}catch(w){console.error("Transaction initiation failed:",w),g("failed");}},O=jsxs(Fragment,{children:[jsx(ArrowPathIcon,{className:"h-4 w-4"}),jsx("span",{children:m.trackedTxButton.replaced})]}),h=jsxs(Fragment,{children:[jsx(ArrowPathIcon,{className:"h-4 w-4 animate-spin"}),jsx("span",{children:m.trackedTxButton.loading})]}),k=jsxs(Fragment,{children:[jsx(CheckCircleIcon,{className:"h-4 w-4"}),jsx("span",{children:m.trackedTxButton.succeed})]}),v=jsxs(Fragment,{children:[jsx(ExclamationCircleIcon,{className:"h-4 w-4"}),jsx("span",{children:m.trackedTxButton.failed})]}),T=()=>{switch(i){case "loading":return a??h;case "succeed":return s??k;case "failed":return r??v;case "replaced":return l??O;case "idle":default:return t}};return jsx("button",{...p,disabled:i!=="idle"||p.disabled,onClick:b,className:cn("cursor-pointer flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-70",i==="idle"&&"bg-gradient-to-r from-[var(--tuwa-button-gradient-from)] to-[var(--tuwa-button-gradient-to)] text-[var(--tuwa-text-on-accent)] hover:opacity-90",i==="loading"&&"bg-gray-400 text-white",i==="replaced"&&"bg-gray-500 text-white",i==="succeed"&&"bg-[var(--tuwa-success-bg)] text-[var(--tuwa-success-text)]",i==="failed"&&"bg-[var(--tuwa-error-bg)] text-[var(--tuwa-error-text)]",n),children:T()})}function mt({address:t,chain:e,className:o}){let{isCopied:a,copy:s}=useCopyToClipboard(),r=u(),l=e?.blockExplorers?.default.url,d=l?`${l}/address/${t}`:void 0;return jsxs("div",{className:cn("flex items-center gap-x-3 rounded-full bg-[var(--tuwa-bg-muted)] px-3 py-1 font-mono text-xs text-[var(--tuwa-text-secondary)]",o),children:[jsx("span",{children:textCenterEllipsis(t,6,6)}),jsx("button",{type:"button",title:a?r.txError.copied:r.actions.copy,"aria-label":a?r.txError.copied:r.actions.copy,onClick:()=>s(t),className:"cursor-pointer transition-colors hover:text-[var(--tuwa-text-primary)]",children:a?jsx(CheckIcon,{className:"h-4 w-4 text-[var(--tuwa-success-icon)]"}):jsx(DocumentDuplicateIcon,{className:"h-4 w-4"})}),d&&jsx("a",{href:d,target:"_blank",rel:"noopener noreferrer",className:"transition-colors hover:text-[var(--tuwa-text-accent)]",title:r.actions.viewOnExplorer,"aria-label":r.actions.viewOnExplorer,children:jsx(ArrowTopRightOnSquareIcon,{className:"h-4 w-4"})})]})}function Zt({address:t,ensAvatar:e,className:o}){let a=u(),s=`#${t.slice(2,8)}`,[r,l]=useState(void 0);return useEffect(()=>{l(e??qt(isHex(t)?t:zeroAddress));},[e,t]),jsx("div",{className:cn("h-12 w-12 flex-shrink-0 rounded-full",o),style:{backgroundColor:s},children:jsx("img",{className:"h-full w-full rounded-full object-cover",src:r,alt:`${a.walletModal.header.avatarAlt} ${t}`,onError:()=>l(qt(isHex(t)?t:zeroAddress))})})}function ae({walletAddress:t,chain:e,className:o,renderAvatar:a,renderName:s,renderAddressDisplay:r,renderNoWalletContent:l}){let d=u(),[c,n]=useState(void 0),[p,m]=useState(void 0),[i,g]=useState(true);if(useEffect(()=>{(async()=>{if(t){g(true),n(void 0),m(void 0);try{let b=await getName(t);if(b){n(b);let O=await getAvatar(b);m(O);}}finally{g(false);}}})();},[t]),!t)return l?jsx(Fragment,{children:l()}):jsx("div",{className:cn("flex h-20 items-center justify-center rounded-lg bg-[var(--tuwa-bg-muted)] text-[var(--tuwa-text-secondary)]",o),children:d.walletModal.header.notConnected});let f=c?c.length>30?textCenterEllipsis(c,12,12):c:void 0;return jsxs("div",{className:cn("flex items-center gap-4 min-h-[4rem]",o),children:[jsx("div",{children:a?a({address:t,ensAvatar:p}):jsx(Zt,{address:t,ensAvatar:p})}),jsx("div",{className:"flex flex-col justify-center min-h-[3.5rem] min-w-[200px]",children:s?s({ensName:f,isLoading:i,address:t}):jsxs("div",{className:"flex flex-col",children:[jsx("div",{className:"h-7 flex items-center mb-1.5",children:i?jsx("div",{className:"h-full w-48 animate-pulse rounded-md bg-[var(--tuwa-bg-muted)]"}):f?jsx("h2",{className:"text-xl font-bold text-[var(--tuwa-text-primary)]",children:f}):jsx(mt,{address:t,chain:e,className:"text-xl font-bold text-[var(--tuwa-text-primary)] bg-transparent px-0 py-0 rounded-none"})}),jsx("div",{className:"h-5 flex items-center",children:!i&&f&&(r?r({address:t,chain:e}):jsx(mt,{address:t,chain:e}))})]})})]})}function re({isOpen:t,setIsOpen:e,customization:o,...a}){let s=u(),l={...{initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.2,ease:"easeOut"}},...o?.motionProps},d=()=>e(false);return jsx(P.Root,{open:t,onOpenChange:c=>!c&&d(),children:jsx(P.Portal,{children:jsx(AnimatePresence,{children:t&&jsxs(Fragment,{children:[jsx(P.Overlay,{asChild:true,children:jsx(motion.div,{className:"fixed inset-0 bg-black/45 flex items-center justify-center p-2 z-50",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.15}})}),jsx(P.Content,{className:"fixed left-1/2 top-1/2 w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 outline-none z-50",...o?.modalProps,asChild:true,children:jsx(motion.div,{...l,children:jsxs("div",{className:cn("relative w-full max-w-2xl outline-none rounded-2xl bg-[var(--tuwa-bg-secondary)] shadow-xl max-h-[98dvh] overflow-y-auto",o?.classNames?.contentWrapper),children:[o?.components?.header?o.components.header({closeModal:d}):jsxs("div",{className:"flex items-center justify-between border-b border-[var(--tuwa-border-primary)] p-4 sticky top-0 left-0 w-full bg-[var(--tuwa-bg-secondary)] z-10",children:[jsx(P.Title,{className:"text-lg font-bold text-[var(--tuwa-text-primary)]",children:s.walletModal.title}),jsx(P.Close,{asChild:true,children:jsx("button",{type:"button",onClick:d,"aria-label":s.actions.close,className:"cursor-pointer rounded-full p-1 text-[var(--tuwa-text-tertiary)] transition-colors hover:bg-[var(--tuwa-bg-muted)] hover:text-[var(--tuwa-text-primary)]",children:jsx(XMarkIcon,{className:"h-6 w-6"})})})]}),jsxs("div",{className:"flex flex-col gap-4 p-4 sm:p-6 sm:gap-6",children:[o?.components?.walletInfo?o.components.walletInfo(a):jsx(ae,{walletAddress:a.walletAddress,chain:a.chain}),o?.components?.history?o.components.history(a):jsx(Ut,{...a})]})]})})})]})})})})}var Ea={[TransactionStatus.Success]:"success",[TransactionStatus.Failed]:"error",[TransactionStatus.Replaced]:"info"};function Cn({labels:t,features:e,customization:o,closeTxTrackedModal:a,actions:s,config:r,handleTransaction:l,initialTx:d,appChains:c,transactionsPool:n,walletAddress:p,chain:m,...i}){let[g,f]=useState(false),y=useRef(n),b=useMemo(()=>({toasts:e?.toasts??true,walletInfoModal:e?.walletInfoModal??true,trackingTxModal:e?.trackingTxModal??true}),[e]),O=useMemo(()=>deepMerge($,t||{}),[t]);return useEffect(()=>{if(!b.toasts)return;let h=(v,T)=>{let w=X=>jsx(Mt,{...X,tx:v,transactionsPool:n,appChains:c,openWalletInfoModal:b.walletInfoModal?()=>f(true):void 0,customization:o?.toast,config:r});toast.isActive(v.txKey)?toast.update(v.txKey,{render:w,type:T}):toast(w,{toastId:v.txKey,type:T,closeOnClick:false});},k=y.current;Object.values(n).forEach(v=>{let T=k[v.txKey],w=T&&T.status!==v.status,X=T&&T?.adapter===TransactionAdapter.EVM&&!T.hash&&v?.adapter===TransactionAdapter.EVM&&v.hash;if(!T&&v.pending&&h(v,"info"),(T&&T?.adapter===TransactionAdapter.EVM&&T.nonce)!==(v?.adapter===TransactionAdapter.EVM&&v?.nonce))h(v,"info");else if(w||X){let _=Ea[v.status]??"info";h(v,_);}}),y.current=n;},[n,c,o?.toast,b,r]),jsxs(gt,{labels:O,children:[b.toasts&&jsx(ToastContainer,{position:"bottom-right",stacked:true,autoClose:false,hideProgressBar:true,closeOnClick:false,icon:false,closeButton:Pt,toastClassName:"!p-0 !bg-transparent !shadow-none !min-h-0",...i}),b.walletInfoModal&&jsx(re,{transactionsPool:n,walletAddress:p,chain:m,isOpen:g,setIsOpen:f,appChains:c,customization:o?.walletInfoModal}),b.trackingTxModal&&jsx(Jt,{initialTx:d,onClose:a,onOpenWalletInfo:()=>f(true),appChains:c,transactionsPool:n,customization:o?.trackingTxModal,actions:s,config:r,handleTransaction:l})]})}export{$ as a,gt as b,u as c,Cn as d,ht as e,I as f,Pt as g,J as h,Y as i,Mt as j,Et as k,Bt as l,Ht as m,Kt as n,Jt as o,Ft as p,Ut as q,ss as r,mt as s,Zt as t,ae as u,re as v};//# sourceMappingURL=chunk-JJFLQRNB.js.map
+//# sourceMappingURL=chunk-JJFLQRNB.js.map