@tuwaio/nova-transactions 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -64
- package/dist/{chunk-MXMNJ5AI.js → chunk-JJFLQRNB.js} +2 -2
- package/dist/chunk-JJFLQRNB.js.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +3 -0
- package/dist/index.js +1 -1
- package/dist/providers/index.cjs +1 -1
- package/dist/providers/index.cjs.map +1 -1
- package/dist/providers/index.d.cts +8 -8
- package/dist/providers/index.d.ts +8 -8
- package/dist/providers/index.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-MXMNJ5AI.js.map +0 -1
package/README.md
CHANGED
|
@@ -8,26 +8,23 @@ The official React UI component library for the Pulsar transaction engine. Provi
|
|
|
8
8
|
|
|
9
9
|
## Architecture
|
|
10
10
|
|
|
11
|
-
This package provides the **View Layer** for TUWA's transaction tracking ecosystem. It works
|
|
11
|
+
This package provides the **View Layer** for TUWA's transaction tracking ecosystem. It works by consuming the state from your headless Pulsar store and rendering the appropriate UI.
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
- **`@tuwaio/nova-transactions` (this package)**: The React components that consume state from `pulsar-core` and render the UI.
|
|
15
|
-
|
|
16
|
-
You must use both packages together to achieve the full functionality.
|
|
13
|
+
You must connect your Pulsar store's state and actions to the `<NovaProvider />` component via props.
|
|
17
14
|
|
|
18
15
|
## Core Features
|
|
19
16
|
|
|
20
|
-
- **🧩 UI Components:** A suite of pre-built, accessible components including `TransactionModal`, `
|
|
21
|
-
- **🔌 Simple Integration:**
|
|
17
|
+
- **🧩 UI Components:** A suite of pre-built, accessible components including `TransactionModal`, `ToastContainer`, and `WalletInfoModal`, all managed internally.
|
|
18
|
+
- **🔌 Simple Integration:** Once connected to your Pulsar store, the UI automatically reacts to transaction state changes.
|
|
22
19
|
- **🌐 Internationalization (i18n):** Built-in support for multiple languages and easy overrides for all text content.
|
|
23
20
|
- **🎨 Highly Customizable:** Styled with `@tuwaio/nova-core` to be easily themed using Tailwind CSS.
|
|
24
21
|
|
|
25
22
|
## Installation
|
|
26
23
|
|
|
27
|
-
1. Install the required TUWA packages:
|
|
24
|
+
1. Install all the required TUWA packages:
|
|
28
25
|
|
|
29
26
|
```bash
|
|
30
|
-
pnpm add @tuwaio/nova-transactions @tuwaio/nova-core @tuwaio/pulsar-core
|
|
27
|
+
pnpm add @tuwaio/nova-transactions @tuwaio/nova-core @tuwaio/pulsar-core @tuwaio/pulsar-evm @tuwaio/pulsar-react
|
|
31
28
|
```
|
|
32
29
|
|
|
33
30
|
2. This package relies on several peer dependencies. Install them if you haven't already:
|
|
@@ -38,38 +35,66 @@ You must use both packages together to achieve the full functionality.
|
|
|
38
35
|
|
|
39
36
|
## Getting Started
|
|
40
37
|
|
|
41
|
-
To
|
|
38
|
+
To use this library, you must render the `<NovaProvider />` component at the top level of your application and pass the state and actions from your Pulsar store to it as props.
|
|
39
|
+
|
|
40
|
+
Here is a complete example of a `providers.tsx` file that configures both systems:
|
|
42
41
|
|
|
43
42
|
```tsx
|
|
44
43
|
// app/providers.tsx or similar
|
|
45
44
|
'use client';
|
|
46
45
|
|
|
47
|
-
import { WagmiProvider } from 'wagmi';
|
|
48
|
-
import {
|
|
49
|
-
import { NovaProvider
|
|
50
|
-
|
|
46
|
+
import { WagmiProvider, useAccount } from 'wagmi';
|
|
47
|
+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
48
|
+
import { NovaProvider } from '@tuwaio/nova-transactions';
|
|
49
|
+
|
|
50
|
+
// Import your custom Pulsar hook and the TransactionInitializer component
|
|
51
|
+
import { usePulsarStore } from '../hooks/usePulsarStore';
|
|
52
|
+
import { TransactionInitializer } from '../components/TransactionInitializer';
|
|
51
53
|
|
|
52
54
|
// Import required CSS
|
|
53
|
-
import 'react-toastify/dist/ReactToastify.css';
|
|
54
55
|
import '@tuwaio/nova-core/dist/index.css';
|
|
56
|
+
import '@tuwaio/nova-transactions/dist/index.css';
|
|
57
|
+
import 'react-toastify/dist/ReactToastify.css';
|
|
55
58
|
|
|
56
59
|
// Your Wagmi Config
|
|
57
|
-
import { wagmiConfig } from './wagmi';
|
|
60
|
+
import { wagmiConfig, appChains } from './wagmi';
|
|
61
|
+
|
|
62
|
+
const queryClient = new QueryClient();
|
|
58
63
|
|
|
59
64
|
export function Providers({ children }: { children: React.ReactNode }) {
|
|
65
|
+
// 1. Get state and actions from your Pulsar store hook
|
|
66
|
+
const { transactionsPool, initialTx, handleTransaction, closeTxTrackedModal } = usePulsarStore();
|
|
67
|
+
|
|
68
|
+
// 2. Get live wallet data from wagmi
|
|
69
|
+
const { address, chain } = useAccount();
|
|
70
|
+
|
|
60
71
|
return (
|
|
61
72
|
<WagmiProvider config={wagmiConfig}>
|
|
62
|
-
{
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
<QueryClientProvider client={queryClient}>
|
|
74
|
+
{/* TransactionInitializer handles rehydrating the Pulsar store */}
|
|
75
|
+
<TransactionInitializer />
|
|
76
|
+
|
|
77
|
+
{/* Your application's pages */}
|
|
78
|
+
{children}
|
|
79
|
+
|
|
80
|
+
{/* 3. Render NovaProvider as a self-contained UI manager */}
|
|
81
|
+
<NovaProvider
|
|
82
|
+
// Pass all required state and actions from Pulsar as props
|
|
83
|
+
transactionsPool={transactionsPool}
|
|
84
|
+
initialTx={initialTx}
|
|
85
|
+
handleTransaction={handleTransaction}
|
|
86
|
+
closeTxTrackedModal={closeTxTrackedModal}
|
|
87
|
+
|
|
88
|
+
// Pass live wallet and chain data
|
|
89
|
+
walletAddress={address}
|
|
90
|
+
chain={chain}
|
|
91
|
+
|
|
92
|
+
// Pass static configuration
|
|
93
|
+
appChains={appChains}
|
|
94
|
+
config={wagmiConfig}
|
|
95
|
+
// actions={...} // Pass retry actions if you have them
|
|
96
|
+
/>
|
|
97
|
+
</QueryClientProvider>
|
|
73
98
|
</WagmiProvider>
|
|
74
99
|
);
|
|
75
100
|
}
|
|
@@ -77,62 +102,49 @@ export function Providers({ children }: { children: React.ReactNode }) {
|
|
|
77
102
|
|
|
78
103
|
## Usage Example
|
|
79
104
|
|
|
80
|
-
Once the
|
|
105
|
+
Once the `NovaProvider` is set up correctly, you can use your custom `usePulsarStore` hook anywhere to track transactions. The UI components rendered by `NovaProvider` will automatically appear and update.
|
|
81
106
|
|
|
82
107
|
```tsx
|
|
83
|
-
// components/
|
|
108
|
+
// components/IncrementButton.tsx
|
|
84
109
|
'use client';
|
|
85
110
|
|
|
86
|
-
//
|
|
87
|
-
import {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
const
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
// Nova's UI components listen to these state changes and appear automatically.
|
|
100
|
-
track({
|
|
101
|
-
write: () => writeContract({
|
|
102
|
-
address: NFT_CONTRACT_ADDRESS,
|
|
103
|
-
abi,
|
|
104
|
-
functionName: 'safeMint',
|
|
105
|
-
args: [1],
|
|
106
|
-
}),
|
|
107
|
-
metadata: {
|
|
108
|
-
title: 'Mint Your Awesome NFT',
|
|
109
|
-
description: 'This is a transaction to mint a new NFT.',
|
|
110
|
-
},
|
|
111
|
+
// Import your custom hook, created as shown in the pulsar-react docs
|
|
112
|
+
import { usePulsarStore } from '../hooks/usePulsarStore';
|
|
113
|
+
// ... other imports
|
|
114
|
+
|
|
115
|
+
export function IncrementButton() {
|
|
116
|
+
const { handleTransaction } = usePulsarStore();
|
|
117
|
+
|
|
118
|
+
const handleIncrement = async () => {
|
|
119
|
+
// Calling handleTransaction updates the Pulsar store's state.
|
|
120
|
+
// NovaProvider receives this new state via props and renders the appropriate UI.
|
|
121
|
+
await handleTransaction({
|
|
122
|
+
actionFunction: () => { /* ... your contract write call ... */ },
|
|
123
|
+
params: { /* ... your transaction metadata ... */ }
|
|
111
124
|
});
|
|
112
125
|
};
|
|
113
126
|
|
|
114
|
-
return <button onClick={
|
|
127
|
+
return <button onClick={handleIncrement}>Increment</button>;
|
|
115
128
|
}
|
|
116
129
|
```
|
|
117
130
|
|
|
118
131
|
## Internationalization (i18n)
|
|
119
132
|
|
|
120
|
-
You can easily override the default English text by passing a `
|
|
133
|
+
You can easily override the default English text by passing a `labels` prop to the `NovaProvider`. Here is an example with German translations:
|
|
121
134
|
|
|
122
135
|
```tsx
|
|
123
136
|
<NovaProvider
|
|
124
|
-
|
|
137
|
+
labels={{
|
|
125
138
|
transaction: {
|
|
126
|
-
title: '
|
|
127
|
-
pending: '
|
|
128
|
-
success: '
|
|
129
|
-
failed: '
|
|
139
|
+
title: 'Transaktion',
|
|
140
|
+
pending: 'Ausstehend...',
|
|
141
|
+
success: 'Erfolgreich!',
|
|
142
|
+
failed: 'Fehlgeschlagen!',
|
|
130
143
|
},
|
|
131
144
|
// ... other keys
|
|
132
145
|
}}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
</NovaProvider>
|
|
146
|
+
// ... other required props
|
|
147
|
+
/>
|
|
136
148
|
```
|
|
137
149
|
|
|
138
150
|
## Contributing
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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 R 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 Rt({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 He({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(He,{...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 Lt({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(R.Root,{open:vt,onOpenChange:E=>!E&&t(i?.txKey),children:jsx(R.Portal,{children:jsx(AnimatePresence,{children:vt&&jsxs(Fragment,{children:[jsx(R.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(R.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(R.Title,{className:"text-lg font-bold text-[var(--tuwa-text-primary)]",children:p.trackingModal.title}),jsx(R.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(Lt,{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(R.Root,{open:t,onOpenChange:c=>!c&&d(),children:jsx(R.Portal,{children:jsx(AnimatePresence,{children:t&&jsxs(Fragment,{children:[jsx(R.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(R.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(R.Title,{className:"text-lg font-bold text-[var(--tuwa-text-primary)]",children:s.walletModal.title}),jsx(R.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]),jsxs(gt,{labels:O,children:[b.toasts&&jsx(ToastContainer,{position:"bottom-right",stacked:true,autoClose:false,hideProgressBar:true,closeOnClick:false,icon:false,closeButton:Rt,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,Rt as g,J as h,Y as i,Mt as j,Et as k,Bt as l,Lt 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-MXMNJ5AI.js.map
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
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
|
|
2
|
+
//# sourceMappingURL=chunk-JJFLQRNB.js.map
|