@b3dotfun/sdk 0.0.40-alpha.0 → 0.0.40-alpha.10
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/dist/cjs/anyspend/react/components/AnySpend.js +1 -1
- package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +1 -1
- package/dist/cjs/anyspend/react/components/common/CryptoReceiveSection.js +38 -36
- package/dist/cjs/anyspend/react/components/common/OrderDetails.js +1 -4
- package/dist/cjs/anyspend/react/components/common/PanelOnramp.d.ts +3 -1
- package/dist/cjs/anyspend/react/components/common/PanelOnramp.js +7 -6
- package/dist/cjs/anyspend/react/contexts/FeatureFlagsContext.d.ts +11 -0
- package/dist/cjs/anyspend/react/contexts/FeatureFlagsContext.js +21 -0
- package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts +2 -0
- package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js +12 -5
- package/dist/cjs/anyspend/react/providers/AnyspendProvider.d.ts +5 -2
- package/dist/cjs/anyspend/react/providers/AnyspendProvider.js +5 -3
- package/dist/cjs/anyspend/react/providers/index.d.ts +1 -0
- package/dist/cjs/anyspend/react/providers/index.js +3 -0
- package/dist/cjs/anyspend/types/api.d.ts +10 -0
- package/dist/cjs/anyspend/utils/chain.js +1 -1
- package/dist/cjs/bondkit/bondkitToken.d.ts +37 -2
- package/dist/cjs/bondkit/bondkitToken.js +268 -2
- package/dist/cjs/bondkit/bondkitTokenFactory.d.ts +1 -1
- package/dist/cjs/bondkit/bondkitTokenFactory.js +2 -2
- package/dist/cjs/bondkit/config.d.ts +1 -1
- package/dist/cjs/bondkit/config.js +5 -2
- package/dist/cjs/bondkit/constants.d.ts +4 -0
- package/dist/cjs/bondkit/constants.js +6 -1
- package/dist/cjs/bondkit/index.d.ts +1 -0
- package/dist/cjs/bondkit/index.js +4 -1
- package/dist/cjs/bondkit/swapService.d.ts +43 -0
- package/dist/cjs/bondkit/swapService.js +373 -0
- package/dist/cjs/bondkit/types.d.ts +10 -4
- package/dist/cjs/bondkit/types.js +4 -5
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.d.ts +4 -3
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.js +35 -9
- package/dist/cjs/global-account/react/components/LinkAccount/LinkAccount.js +63 -3
- package/dist/cjs/global-account/react/components/ManageAccount/ManageAccount.js +35 -2
- package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js +4 -3
- package/dist/cjs/global-account/react/hooks/useAuthentication.js +1 -2
- package/dist/cjs/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +5 -2
- package/dist/esm/anyspend/react/components/AnySpend.js +1 -1
- package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +1 -1
- package/dist/esm/anyspend/react/components/common/CryptoReceiveSection.js +38 -36
- package/dist/esm/anyspend/react/components/common/OrderDetails.js +1 -4
- package/dist/esm/anyspend/react/components/common/PanelOnramp.d.ts +3 -1
- package/dist/esm/anyspend/react/components/common/PanelOnramp.js +7 -6
- package/dist/esm/anyspend/react/contexts/FeatureFlagsContext.d.ts +11 -0
- package/dist/esm/anyspend/react/contexts/FeatureFlagsContext.js +17 -0
- package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts +2 -0
- package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js +12 -5
- package/dist/esm/anyspend/react/providers/AnyspendProvider.d.ts +5 -2
- package/dist/esm/anyspend/react/providers/AnyspendProvider.js +5 -3
- package/dist/esm/anyspend/react/providers/index.d.ts +1 -0
- package/dist/esm/anyspend/react/providers/index.js +1 -0
- package/dist/esm/anyspend/types/api.d.ts +10 -0
- package/dist/esm/anyspend/utils/chain.js +1 -1
- package/dist/esm/bondkit/bondkitToken.d.ts +37 -2
- package/dist/esm/bondkit/bondkitToken.js +268 -2
- package/dist/esm/bondkit/bondkitTokenFactory.d.ts +1 -1
- package/dist/esm/bondkit/bondkitTokenFactory.js +2 -2
- package/dist/esm/bondkit/config.d.ts +1 -1
- package/dist/esm/bondkit/config.js +5 -2
- package/dist/esm/bondkit/constants.d.ts +4 -0
- package/dist/esm/bondkit/constants.js +5 -0
- package/dist/esm/bondkit/index.d.ts +1 -0
- package/dist/esm/bondkit/index.js +2 -0
- package/dist/esm/bondkit/swapService.d.ts +43 -0
- package/dist/esm/bondkit/swapService.js +369 -0
- package/dist/esm/bondkit/types.d.ts +10 -4
- package/dist/esm/bondkit/types.js +4 -5
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.d.ts +4 -3
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.js +36 -9
- package/dist/esm/global-account/react/components/LinkAccount/LinkAccount.js +65 -5
- package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js +35 -2
- package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js +3 -2
- package/dist/esm/global-account/react/hooks/useAuthentication.js +1 -2
- package/dist/esm/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +5 -2
- package/dist/styles/index.css +1 -1
- package/dist/types/anyspend/react/components/common/PanelOnramp.d.ts +3 -1
- package/dist/types/anyspend/react/contexts/FeatureFlagsContext.d.ts +11 -0
- package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts +2 -0
- package/dist/types/anyspend/react/providers/AnyspendProvider.d.ts +5 -2
- package/dist/types/anyspend/react/providers/index.d.ts +1 -0
- package/dist/types/anyspend/types/api.d.ts +10 -0
- package/dist/types/bondkit/bondkitToken.d.ts +37 -2
- package/dist/types/bondkit/bondkitTokenFactory.d.ts +1 -1
- package/dist/types/bondkit/config.d.ts +1 -1
- package/dist/types/bondkit/constants.d.ts +4 -0
- package/dist/types/bondkit/index.d.ts +1 -0
- package/dist/types/bondkit/swapService.d.ts +43 -0
- package/dist/types/bondkit/types.d.ts +10 -4
- package/dist/types/global-account/react/components/B3Provider/B3Provider.d.ts +4 -3
- package/package.json +6 -5
- package/src/anyspend/react/components/AnySpend.tsx +1 -0
- package/src/anyspend/react/components/AnyspendDepositHype.tsx +1 -0
- package/src/anyspend/react/components/common/CryptoReceiveSection.tsx +55 -45
- package/src/anyspend/react/components/common/OrderDetails.tsx +2 -5
- package/src/anyspend/react/components/common/PanelOnramp.tsx +21 -15
- package/src/anyspend/react/contexts/FeatureFlagsContext.tsx +34 -0
- package/src/anyspend/react/hooks/useAnyspendFlow.ts +12 -5
- package/src/anyspend/react/providers/AnyspendProvider.tsx +11 -6
- package/src/anyspend/react/providers/index.ts +1 -0
- package/src/anyspend/types/api.ts +10 -0
- package/src/anyspend/types/api_req_res.ts +6 -10
- package/src/anyspend/utils/chain.ts +1 -1
- package/src/bondkit/bondkitToken.ts +323 -3
- package/src/bondkit/bondkitTokenFactory.ts +2 -2
- package/src/bondkit/config.ts +5 -2
- package/src/bondkit/constants.ts +7 -0
- package/src/bondkit/index.ts +3 -0
- package/src/bondkit/swapService.ts +461 -0
- package/src/bondkit/types.ts +12 -5
- package/src/global-account/react/components/B3Provider/B3Provider.tsx +51 -15
- package/src/global-account/react/components/LinkAccount/LinkAccount.tsx +106 -32
- package/src/global-account/react/components/ManageAccount/ManageAccount.tsx +60 -5
- package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx +4 -2
- package/src/global-account/react/hooks/useAuthentication.ts +1 -2
- package/src/global-account/react/hooks/useUnifiedChainSwitchAndExecute.ts +5 -2
|
@@ -10,6 +10,7 @@ const react_1 = require("../../../../global-account/react");
|
|
|
10
10
|
const SignOutIcon_1 = require("../../../../global-account/react/components/icons/SignOutIcon");
|
|
11
11
|
const formatNumber_1 = require("../../../../shared/utils/formatNumber");
|
|
12
12
|
const thirdweb_1 = require("../../../../shared/utils/thirdweb");
|
|
13
|
+
const truncateAddress_1 = require("../../../../shared/utils/truncateAddress");
|
|
13
14
|
const lucide_react_1 = require("lucide-react");
|
|
14
15
|
const react_2 = require("react");
|
|
15
16
|
const sonner_1 = require("sonner");
|
|
@@ -18,6 +19,21 @@ const viem_1 = require("viem");
|
|
|
18
19
|
const profileDisplay_1 = require("../../utils/profileDisplay");
|
|
19
20
|
const AccountAssets_1 = require("../AccountAssets/AccountAssets");
|
|
20
21
|
const ContentTokens_1 = require("./ContentTokens");
|
|
22
|
+
// Helper function to check if a string is a wallet address and format it
|
|
23
|
+
const formatProfileTitle = (title) => {
|
|
24
|
+
// Check if title looks like an Ethereum address (0x followed by 40 hex characters)
|
|
25
|
+
const isEthereumAddress = /^0x[a-fA-F0-9]{40}$/.test(title);
|
|
26
|
+
if (isEthereumAddress) {
|
|
27
|
+
return {
|
|
28
|
+
displayTitle: (0, truncateAddress_1.truncateAddress)(title),
|
|
29
|
+
isAddress: true,
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
return {
|
|
33
|
+
displayTitle: title,
|
|
34
|
+
isAddress: false,
|
|
35
|
+
};
|
|
36
|
+
};
|
|
21
37
|
const BalanceContent_1 = require("./BalanceContent");
|
|
22
38
|
function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, showSwap, showDeposit, }) {
|
|
23
39
|
const [revokingSignerId, setRevokingSignerId] = (0, react_2.useState)(null);
|
|
@@ -117,7 +133,7 @@ function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain
|
|
|
117
133
|
}
|
|
118
134
|
};
|
|
119
135
|
const profiles = profilesRaw
|
|
120
|
-
.filter((profile) => !["custom_auth_endpoint"
|
|
136
|
+
.filter((profile) => !["custom_auth_endpoint"].includes(profile.type))
|
|
121
137
|
.map((profile) => ({
|
|
122
138
|
...(0, profileDisplay_1.getProfileDisplayInfo)(profile),
|
|
123
139
|
originalProfile: profile,
|
|
@@ -152,7 +168,24 @@ function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain
|
|
|
152
168
|
},
|
|
153
169
|
});
|
|
154
170
|
};
|
|
155
|
-
|
|
171
|
+
console.log("@@profiles", profiles);
|
|
172
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "linked-accounts-settings space-y-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-accounts-section space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-accounts-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold linked-accounts-settings-title text-xl", children: "Linked Accounts" }), (0, jsx_runtime_1.jsxs)(react_1.Button, { className: "linked-accounts-settings-button linked-accounts-link-button bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2", onClick: handleOpenLinkModal, disabled: isLinking, children: [isLinking ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "linked-accounts-link-loading text-b3-primary-blue animate-spin", size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.LinkIcon, { size: 16, className: "linked-accounts-link-icon text-b3-primary-blue" })), (0, jsx_runtime_1.jsx)("span", { className: "linked-accounts-link-text text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-loading flex justify-center py-8", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-list space-y-4", children: profiles.map(profile => ((0, jsx_runtime_1.jsxs)("div", { className: "linked-account-item bg-b3-line group flex items-center justify-between rounded-xl p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-account-info flex items-center gap-3", children: [profile.imageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: profile.imageUrl, alt: profile.title, className: "linked-account-avatar linked-account-avatar-image size-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "linked-account-avatar linked-account-avatar-placeholder bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: "linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), (0, jsx_runtime_1.jsxs)("div", { className: "linked-account-details", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-account-title-row flex items-center gap-2", children: [(() => {
|
|
173
|
+
const { displayTitle, isAddress } = formatProfileTitle(profile.title);
|
|
174
|
+
const handleCopyAddress = async (e) => {
|
|
175
|
+
e.stopPropagation();
|
|
176
|
+
try {
|
|
177
|
+
await navigator.clipboard.writeText(profile.title);
|
|
178
|
+
sonner_1.toast.success("Address copied to clipboard!");
|
|
179
|
+
}
|
|
180
|
+
catch (error) {
|
|
181
|
+
sonner_1.toast.error("Failed to copy address");
|
|
182
|
+
}
|
|
183
|
+
};
|
|
184
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: `linked-account-title text-b3-grey font-neue-montreal-semibold ${isAddress
|
|
185
|
+
? "font-mono text-sm" // Use monospace font for addresses
|
|
186
|
+
: "break-words" // Use break-words for emails/names (better than break-all)
|
|
187
|
+
}`, title: isAddress ? profile.title : undefined, children: displayTitle }), isAddress && ((0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "linked-account-copy-button ml-1 rounded p-1 opacity-0 transition-opacity hover:bg-gray-100 group-hover:opacity-100", title: "Copy full address", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 12, className: "text-gray-500 hover:text-gray-700" }) }))] }));
|
|
188
|
+
})(), (0, jsx_runtime_1.jsx)("span", { className: "linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), (0, jsx_runtime_1.jsx)("div", { className: "linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", size: "icon", className: "linked-account-unlink-button text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "linked-account-unlink-loading animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.UnlinkIcon, { size: 16, className: "linked-account-unlink-icon" })) })] }, profile.title))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-empty text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), showReferralInfo && (
|
|
156
189
|
/* Referral Section */
|
|
157
190
|
(0, jsx_runtime_1.jsxs)("div", { className: "referrals-section space-y-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "referrals-title text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), (0, jsx_runtime_1.jsxs)("div", { className: "referral-code-container bg-b3-line rounded-xl p-4", children: [isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-header-editing", children: [(0, jsx_runtime_1.jsx)("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "referral-code-content flex items-center justify-between", children: [!isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-actions flex items-center gap-2", children: isEditingCode ? ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-edit-form flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "referral-code-input rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", placeholder: "Enter new code", ref: referallCodeRef }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", className: "referral-code-save-button", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "referral-code-save-loading h-4 w-4 animate-spin" })) : ("Save") }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "ghost", className: "referral-code-cancel-button", onClick: () => {
|
|
158
191
|
setIsEditingCode(false);
|
|
@@ -8,6 +8,7 @@ const thirdweb_1 = require("../../../../../shared/utils/thirdweb");
|
|
|
8
8
|
const react_2 = require("react");
|
|
9
9
|
const react_3 = require("thirdweb/react");
|
|
10
10
|
const wallets_1 = require("thirdweb/wallets");
|
|
11
|
+
const debug = (0, debug_1.debugB3React)("LoginStepCustom");
|
|
11
12
|
function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategies, maxInitialWallets = 2, automaticallySetFirstEoa, }) {
|
|
12
13
|
const [isLoading, setIsLoading] = (0, react_2.useState)(false);
|
|
13
14
|
const [showAllWallets, setShowAllWallets] = (0, react_2.useState)(false);
|
|
@@ -24,7 +25,7 @@ function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategies, max
|
|
|
24
25
|
const handleConnect = async (strategy) => {
|
|
25
26
|
try {
|
|
26
27
|
setIsLoading(true);
|
|
27
|
-
|
|
28
|
+
debug("setIsAuthenticating:true:3");
|
|
28
29
|
setIsAuthenticating(true);
|
|
29
30
|
const options = (0, react_1.getConnectOptionsFromStrategy)(strategy);
|
|
30
31
|
let connectResult;
|
|
@@ -45,7 +46,7 @@ function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategies, max
|
|
|
45
46
|
connectResult = await connect(options);
|
|
46
47
|
}
|
|
47
48
|
const account = connectResult?.getAccount();
|
|
48
|
-
|
|
49
|
+
debug("@@connectResult", { connectResult, account, options });
|
|
49
50
|
if (!account)
|
|
50
51
|
throw new Error("Failed to connect");
|
|
51
52
|
await onSuccess(account);
|
|
@@ -58,7 +59,7 @@ function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategies, max
|
|
|
58
59
|
}
|
|
59
60
|
finally {
|
|
60
61
|
setIsLoading(false);
|
|
61
|
-
|
|
62
|
+
debug("setIsAuthenticating:false:3");
|
|
62
63
|
setIsAuthenticating(false);
|
|
63
64
|
}
|
|
64
65
|
};
|
|
@@ -122,8 +122,7 @@ function useAuthentication(partnerId, loginWithSiwe) {
|
|
|
122
122
|
if (activeWallet) {
|
|
123
123
|
debug("@@logout:activeWallet", activeWallet);
|
|
124
124
|
disconnect(activeWallet);
|
|
125
|
-
debug("@@logout:
|
|
126
|
-
console.log("@@gio:logout:activeWallet", activeWallet);
|
|
125
|
+
debug("@@logout:activeWallet", activeWallet);
|
|
127
126
|
}
|
|
128
127
|
// Log out of each wallet
|
|
129
128
|
wallets.forEach(wallet => {
|
|
@@ -130,18 +130,21 @@ function useUnifiedChainSwitchAndExecute() {
|
|
|
130
130
|
});
|
|
131
131
|
}
|
|
132
132
|
catch (err) {
|
|
133
|
-
console.error(err);
|
|
133
|
+
console.error("Create global-accounts-intents error", err);
|
|
134
134
|
}
|
|
135
135
|
sonner_1.toast.info("Sending transaction…");
|
|
136
|
+
const start = performance.now();
|
|
136
137
|
const sendTxResponse = await (0, thirdweb_2.sendTransaction)({
|
|
137
138
|
account: aaAccount,
|
|
138
139
|
transaction,
|
|
139
140
|
});
|
|
141
|
+
const end = performance.now();
|
|
142
|
+
console.log("Time taken to send transaction", end - start);
|
|
140
143
|
sonner_1.toast.success("Transaction sent successfully");
|
|
141
144
|
return sendTxResponse.transactionHash;
|
|
142
145
|
}
|
|
143
146
|
catch (err) {
|
|
144
|
-
console.error(err);
|
|
147
|
+
console.error("Send transaction error", err);
|
|
145
148
|
sonner_1.toast.error(err?.message ?? "Transaction failed");
|
|
146
149
|
return undefined;
|
|
147
150
|
}
|
|
@@ -656,7 +656,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
656
656
|
setActivePanel(PanelView.MAIN);
|
|
657
657
|
setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
|
|
658
658
|
} })) }) }));
|
|
659
|
-
const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
|
|
659
|
+
const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
|
|
660
660
|
if (activeTab === "fiat" || isBuyMode) {
|
|
661
661
|
return;
|
|
662
662
|
}
|
|
@@ -111,7 +111,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
111
111
|
await handleFiatOrder();
|
|
112
112
|
}
|
|
113
113
|
};
|
|
114
|
-
const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
|
|
114
|
+
const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
|
|
115
115
|
setIsSrcInputDirty(false);
|
|
116
116
|
setSrcAmount(value);
|
|
117
117
|
}, anyspendQuote: anyspendQuote }))] }) }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) }), mainFooter ? mainFooter : null] }));
|
|
@@ -5,46 +5,48 @@ import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
|
|
|
5
5
|
import { formatDisplayNumber } from "../../../../shared/utils/number.js";
|
|
6
6
|
import { ChevronRight } from "lucide-react";
|
|
7
7
|
import { motion } from "motion/react";
|
|
8
|
+
import { useFeatureFlags } from "../../contexts/FeatureFlagsContext.js";
|
|
8
9
|
import { OrderTokenAmount } from "./OrderTokenAmount.js";
|
|
9
10
|
export function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, }) {
|
|
11
|
+
const featureFlags = useFeatureFlags();
|
|
10
12
|
return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "receive-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: isDepositMode ? "Deposit" : "Receive" }), selectedRecipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: onSelectRecipient, children: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? formatUsername(recipientName) : shortenAddress(selectedRecipientAddress || "") }), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
|
|
11
13
|
// Fixed destination token display for buy mode and deposit mode
|
|
12
14
|
_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [(dstTokenLogoURI || dstToken.metadata?.logoURI) && (_jsx("img", { src: dstTokenLogoURI || dstToken.metadata?.logoURI, alt: dstTokenSymbol || dstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: dstTokenSymbol || dstToken.symbol })] })] })) : (
|
|
13
15
|
// Token selection for regular swap mode
|
|
14
|
-
_jsx(OrderTokenAmount, { address: selectedRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), _jsxs("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: [formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
16
|
+
_jsx(OrderTokenAmount, { address: selectedRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), _jsxs("div", { className: "text-as-primary/50 flex h-5 items-center justify-between text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
|
|
17
|
+
style: "currency",
|
|
18
|
+
fallback: "",
|
|
19
|
+
}), anyspendQuote?.data?.currencyIn?.amountUsd &&
|
|
20
|
+
anyspendQuote?.data?.currencyOut?.amountUsd &&
|
|
21
|
+
(() => {
|
|
22
|
+
const calculatePriceImpact = (inputUsd, outputUsd) => {
|
|
23
|
+
if (!inputUsd || !outputUsd) {
|
|
24
|
+
return { percentage: "0.00", isNegative: false };
|
|
25
|
+
}
|
|
26
|
+
const input = Number(inputUsd);
|
|
27
|
+
const output = Number(outputUsd);
|
|
28
|
+
// Handle edge cases
|
|
29
|
+
if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
|
|
30
|
+
return { percentage: "0.00", isNegative: false };
|
|
31
|
+
}
|
|
32
|
+
const percentageValue = ((output - input) / input) * 100;
|
|
33
|
+
// Handle the -0.00% case
|
|
34
|
+
if (percentageValue > -0.005 && percentageValue < 0) {
|
|
35
|
+
return { percentage: "0.00", isNegative: false };
|
|
36
|
+
}
|
|
37
|
+
return {
|
|
38
|
+
percentage: Math.abs(percentageValue).toFixed(2),
|
|
39
|
+
isNegative: percentageValue < 0,
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
const { percentage, isNegative } = calculatePriceImpact(anyspendQuote.data.currencyIn.amountUsd, anyspendQuote.data.currencyOut.amountUsd);
|
|
43
|
+
// Parse the percentage as a number for comparison
|
|
44
|
+
const percentageNum = parseFloat(percentage);
|
|
45
|
+
// Don't show if less than 1%
|
|
46
|
+
if (percentageNum < 1) {
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
49
|
+
// Using inline style to ensure color displays
|
|
50
|
+
return (_jsxs("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
|
|
51
|
+
})()] }), featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0 && (_jsx("div", { className: "flex items-center gap-1", children: _jsxs("span", { className: "text-as-brand font-medium", children: ["+", anyspendQuote.data.pointsAmount.toLocaleString(), " pts"] }) }, `points-${anyspendQuote.data.pointsAmount}`))] })] }));
|
|
50
52
|
}
|
|
@@ -49,9 +49,6 @@ function getOrderSuccessText({ order, tournament, formattedActualDstAmount, form
|
|
|
49
49
|
case "custom":
|
|
50
50
|
actionText = order.metadata.action || `executed contract`;
|
|
51
51
|
return `Successfully ${actionText}`;
|
|
52
|
-
case "hype_duel":
|
|
53
|
-
actionText = `deposited ${formattedActualDstAmount || "--"} HYPE`;
|
|
54
|
-
return `Successfully ${actionText} to ${recipient}`;
|
|
55
52
|
default:
|
|
56
53
|
throw new Error("Invalid order type");
|
|
57
54
|
}
|
|
@@ -428,7 +425,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
|
|
|
428
425
|
: null] }) })] }) }), order.errorDetails && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: getErrorDisplay(order.errorDetails) }) })), _jsx("button", { className: "order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
|
|
429
426
|
}
|
|
430
427
|
if (executeTx) {
|
|
431
|
-
return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: orderStatusPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "execute-details", className: "order-details-execute-item", children: [_jsx(AccordionTrigger, { className: "
|
|
428
|
+
return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: orderStatusPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "execute-details", className: "order-details-execute-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
|
|
432
429
|
? depositTxs.map(dTxs => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
|
|
433
430
|
? `Received payment`
|
|
434
431
|
: `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { components } from "../../../../anyspend/types/api";
|
|
2
|
+
import { GetQuoteResponse } from "../../../../anyspend/types/api_req_res";
|
|
2
3
|
import { FiatPaymentMethod } from "./FiatPaymentMethod";
|
|
3
|
-
export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, }: {
|
|
4
|
+
export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, anyspendQuote, }: {
|
|
4
5
|
srcAmountOnRamp: string;
|
|
5
6
|
setSrcAmountOnRamp: (amount: string) => void;
|
|
6
7
|
selectedPaymentMethod?: FiatPaymentMethod;
|
|
@@ -15,4 +16,5 @@ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selec
|
|
|
15
16
|
recipientSelectionPanelIndex: number;
|
|
16
17
|
dstTokenSymbol?: string;
|
|
17
18
|
hideDstToken?: boolean;
|
|
19
|
+
anyspendQuote?: GetQuoteResponse;
|
|
18
20
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -7,9 +7,11 @@ import { formatAddress } from "../../../../shared/utils/formatAddress.js";
|
|
|
7
7
|
import { ChevronRight, Wallet } from "lucide-react";
|
|
8
8
|
import { useRef } from "react";
|
|
9
9
|
import { toast } from "sonner";
|
|
10
|
+
import { useFeatureFlags } from "../../contexts/FeatureFlagsContext.js";
|
|
10
11
|
import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
|
|
11
12
|
import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat.js";
|
|
12
|
-
export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, }) {
|
|
13
|
+
export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, anyspendQuote, }) {
|
|
14
|
+
const featureFlags = useFeatureFlags();
|
|
13
15
|
// Get geo-based onramp options to access fee information
|
|
14
16
|
const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
|
|
15
17
|
// Helper function to get fees from API data
|
|
@@ -70,9 +72,8 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
|
|
|
70
72
|
width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
|
|
71
73
|
} })] }) }), _jsx("div", { className: cn("mx-auto mb-6 inline-grid grid-cols-4 gap-2", hideDstToken && "mb-0"), children: ["5", "10", "20", "25"].map(value => (_jsxs("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
|
|
72
74
|
? "border-as-border-secondary bg-as-surface-secondary"
|
|
73
|
-
: "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [_jsx("span", { className: "text-sm", children: recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress) }), _jsx(ChevronRight, { size: 16 })] })) : (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), _jsxs("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children:
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
})() }) })] })] }));
|
|
75
|
+
: "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [_jsx("span", { className: "text-sm", children: recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress) }), _jsx(ChevronRight, { size: 16 })] })) : (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), _jsxs("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: (() => {
|
|
76
|
+
const fee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod.NONE);
|
|
77
|
+
return fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total";
|
|
78
|
+
})() }), featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0 && (_jsxs("span", { className: "text-as-brand text-sm font-medium", children: ["+", anyspendQuote.data.pointsAmount.toLocaleString(), " pts"] }, `points-${anyspendQuote.data.pointsAmount}`))] }), _jsxs("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod.NONE).toFixed(2)] })] }) })] })] }));
|
|
78
79
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
export interface FeatureFlags {
|
|
3
|
+
showPoints?: boolean;
|
|
4
|
+
}
|
|
5
|
+
interface FeatureFlagsProviderProps {
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
featureFlags?: FeatureFlags;
|
|
8
|
+
}
|
|
9
|
+
export declare function FeatureFlagsProvider({ children, featureFlags }: FeatureFlagsProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function useFeatureFlags(): FeatureFlags;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { createContext, useContext } from "react";
|
|
4
|
+
const FeatureFlagsContext = createContext(undefined);
|
|
5
|
+
const defaultFeatureFlags = {
|
|
6
|
+
showPoints: false,
|
|
7
|
+
};
|
|
8
|
+
export function FeatureFlagsProvider({ children, featureFlags = defaultFeatureFlags }) {
|
|
9
|
+
return _jsx(FeatureFlagsContext.Provider, { value: { featureFlags }, children: children });
|
|
10
|
+
}
|
|
11
|
+
export function useFeatureFlags() {
|
|
12
|
+
const context = useContext(FeatureFlagsContext);
|
|
13
|
+
if (!context) {
|
|
14
|
+
return defaultFeatureFlags;
|
|
15
|
+
}
|
|
16
|
+
return context.featureFlags;
|
|
17
|
+
}
|
|
@@ -185,12 +185,19 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
|
|
|
185
185
|
// Handle order completion
|
|
186
186
|
useEffect(() => {
|
|
187
187
|
if (oat?.data?.order.status === "executed") {
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
const
|
|
191
|
-
|
|
188
|
+
// get the actualDstAmount if available from custompayload
|
|
189
|
+
const amount = oat.data.order.payload?.actualDstAmount;
|
|
190
|
+
const formattedActualDstAmount = amount
|
|
191
|
+
? formatTokenAmount(BigInt(amount), oat.data.order.metadata.dstToken.decimals)
|
|
192
|
+
: undefined;
|
|
193
|
+
onTransactionSuccess?.(formattedActualDstAmount);
|
|
192
194
|
}
|
|
193
|
-
}, [
|
|
195
|
+
}, [
|
|
196
|
+
oat?.data?.order.status,
|
|
197
|
+
oat?.data?.order.payload,
|
|
198
|
+
onTransactionSuccess,
|
|
199
|
+
oat?.data?.order.metadata.dstToken.decimals,
|
|
200
|
+
]);
|
|
194
201
|
return {
|
|
195
202
|
// State
|
|
196
203
|
activePanel,
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
|
+
import { FeatureFlags } from "../contexts/FeatureFlagsContext";
|
|
2
3
|
interface AnyspendProviderProps {
|
|
3
4
|
children: ReactNode;
|
|
5
|
+
featureFlags?: FeatureFlags;
|
|
4
6
|
}
|
|
5
7
|
/**
|
|
6
8
|
* AnyspendProvider is a top-level provider that wraps your application to provide
|
|
@@ -12,17 +14,18 @@ interface AnyspendProviderProps {
|
|
|
12
14
|
* - Safe to use at the application root
|
|
13
15
|
* - Configures sensible defaults for query caching
|
|
14
16
|
* - Handles Stripe payment redirects and modal state
|
|
17
|
+
* - Provides feature flags configuration
|
|
15
18
|
*
|
|
16
19
|
* @example
|
|
17
20
|
* ```tsx
|
|
18
21
|
* function App() {
|
|
19
22
|
* return (
|
|
20
|
-
* <AnyspendProvider>
|
|
23
|
+
* <AnyspendProvider featureFlags={{ showPoints: true }}>
|
|
21
24
|
* <YourApp />
|
|
22
25
|
* </AnyspendProvider>
|
|
23
26
|
* );
|
|
24
27
|
* }
|
|
25
28
|
* ```
|
|
26
29
|
*/
|
|
27
|
-
export declare const AnyspendProvider: ({ children }: AnyspendProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare const AnyspendProvider: ({ children, featureFlags }: AnyspendProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
28
31
|
export {};
|
|
@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { TooltipProvider } from "../../../global-account/react/index.js";
|
|
4
4
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
5
5
|
import { useState } from "react";
|
|
6
|
+
import { FeatureFlagsProvider } from "../contexts/FeatureFlagsContext.js";
|
|
6
7
|
import { StripeRedirectHandler } from "./StripeRedirectHandler.js";
|
|
7
8
|
const defaultQueryClientConfig = {
|
|
8
9
|
defaultOptions: {
|
|
@@ -23,19 +24,20 @@ const defaultQueryClientConfig = {
|
|
|
23
24
|
* - Safe to use at the application root
|
|
24
25
|
* - Configures sensible defaults for query caching
|
|
25
26
|
* - Handles Stripe payment redirects and modal state
|
|
27
|
+
* - Provides feature flags configuration
|
|
26
28
|
*
|
|
27
29
|
* @example
|
|
28
30
|
* ```tsx
|
|
29
31
|
* function App() {
|
|
30
32
|
* return (
|
|
31
|
-
* <AnyspendProvider>
|
|
33
|
+
* <AnyspendProvider featureFlags={{ showPoints: true }}>
|
|
32
34
|
* <YourApp />
|
|
33
35
|
* </AnyspendProvider>
|
|
34
36
|
* );
|
|
35
37
|
* }
|
|
36
38
|
* ```
|
|
37
39
|
*/
|
|
38
|
-
export const AnyspendProvider = function AnyspendProvider({ children }) {
|
|
40
|
+
export const AnyspendProvider = function AnyspendProvider({ children, featureFlags }) {
|
|
39
41
|
const [queryClient] = useState(() => new QueryClient(defaultQueryClientConfig));
|
|
40
|
-
return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(TooltipProvider, { children: [_jsx(StripeRedirectHandler, {}), children] }) }));
|
|
42
|
+
return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(FeatureFlagsProvider, { featureFlags: featureFlags, children: _jsxs(TooltipProvider, { children: [_jsx(StripeRedirectHandler, {}), children] }) }) }));
|
|
41
43
|
};
|
|
@@ -798,6 +798,16 @@ export interface paths {
|
|
|
798
798
|
* @example 0
|
|
799
799
|
*/
|
|
800
800
|
userBalance?: string;
|
|
801
|
+
/**
|
|
802
|
+
* @description Anyspend points that will be awarded for the order
|
|
803
|
+
* @example 100
|
|
804
|
+
*/
|
|
805
|
+
pointsAmount?: number;
|
|
806
|
+
/**
|
|
807
|
+
* @description Multiplier applied to points that will be awarded for the order
|
|
808
|
+
* @example 1.5
|
|
809
|
+
*/
|
|
810
|
+
pointsMultiplier?: number;
|
|
801
811
|
};
|
|
802
812
|
/** @example 200 */
|
|
803
813
|
statusCode: number;
|
|
@@ -104,7 +104,7 @@ export const EVM_MAINNET = {
|
|
|
104
104
|
name: bsc.name,
|
|
105
105
|
logoUrl: "https://avatars.githubusercontent.com/u/45615063?s=280&v=4",
|
|
106
106
|
type: ChainType.EVM,
|
|
107
|
-
nativeRequired: parseEther("0.
|
|
107
|
+
nativeRequired: parseEther("0.0001"),
|
|
108
108
|
canDepositNative: true,
|
|
109
109
|
defaultToken: getBnbToken(),
|
|
110
110
|
nativeToken: getBnbToken(),
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Address, EIP1193Provider, GetContractReturnType, Hex, PublicClient, WalletClient } from "viem";
|
|
2
2
|
import { BondkitTokenABI } from "./abis";
|
|
3
|
-
import type { BondkitTokenInitializationConfig, GetTransactionHistoryOptions,
|
|
3
|
+
import type { BondkitTokenInitializationConfig, GetTransactionHistoryOptions, SwapQuote, TokenDetails, TransactionResponse } from "./types";
|
|
4
|
+
import { TokenStatus } from "./types";
|
|
4
5
|
type ExecuteWriteOptions = {
|
|
5
6
|
value?: bigint;
|
|
6
7
|
gas?: bigint;
|
|
@@ -18,7 +19,8 @@ export declare class BondkitToken {
|
|
|
18
19
|
private walletClientInstance;
|
|
19
20
|
private connectedProvider?;
|
|
20
21
|
private tradingToken?;
|
|
21
|
-
|
|
22
|
+
private swapService?;
|
|
23
|
+
constructor(contractAddress: string, walletKey?: string, rpcUrl?: string);
|
|
22
24
|
connect(provider?: EIP1193Provider): boolean;
|
|
23
25
|
/**
|
|
24
26
|
* Connects using an EIP-1193 provider and requests accounts, selecting the first one.
|
|
@@ -69,5 +71,38 @@ export declare class BondkitToken {
|
|
|
69
71
|
migrateToDex(options?: ExecuteWriteOptions): Promise<Hex | undefined>;
|
|
70
72
|
transferTokenOwnership(newOwner: Address, options?: ExecuteWriteOptions): Promise<Hex | undefined>;
|
|
71
73
|
renounceTokenOwnership(options?: ExecuteWriteOptions): Promise<Hex | undefined>;
|
|
74
|
+
/**
|
|
75
|
+
* Get the swap service instance (lazy initialization)
|
|
76
|
+
*/
|
|
77
|
+
private getSwapService;
|
|
78
|
+
/**
|
|
79
|
+
* Check if DEX swapping is available (token must be in Dex phase)
|
|
80
|
+
*/
|
|
81
|
+
isSwapAvailable(): Promise<boolean | undefined>;
|
|
82
|
+
/**
|
|
83
|
+
* Get swap quote for trading token → bondkit token
|
|
84
|
+
*/
|
|
85
|
+
getSwapQuoteForBondkitToken(amountTradingTokenIn: string, slippageTolerance?: number): Promise<SwapQuote | undefined>;
|
|
86
|
+
/**
|
|
87
|
+
* Get swap quote for bondkit token → trading token
|
|
88
|
+
*/
|
|
89
|
+
getSwapQuoteForTradingToken(amountBondkitTokenIn: string, slippageTolerance?: number): Promise<SwapQuote | undefined>;
|
|
90
|
+
/**
|
|
91
|
+
* Swap trading token for bondkit token
|
|
92
|
+
*/
|
|
93
|
+
swapTradingTokenForBondkitToken(amountTradingTokenIn: string, slippageTolerance?: number, options?: ExecuteWriteOptions): Promise<Hex | undefined>;
|
|
94
|
+
/**
|
|
95
|
+
* Swap bondkit token for trading token
|
|
96
|
+
*/
|
|
97
|
+
swapBondkitTokenForTradingToken(amountBondkitTokenIn: string, slippageTolerance?: number, options?: ExecuteWriteOptions): Promise<Hex | undefined>;
|
|
98
|
+
/**
|
|
99
|
+
* Helper method to get trading token decimals
|
|
100
|
+
*/
|
|
101
|
+
private getTradingTokenDecimals;
|
|
102
|
+
/**
|
|
103
|
+
* Get trading token symbol
|
|
104
|
+
* @param tradingTokenAddress Optional trading token address to avoid fetching it again
|
|
105
|
+
*/
|
|
106
|
+
getTradingTokenSymbol(tradingTokenAddress?: Address): Promise<string | undefined>;
|
|
72
107
|
}
|
|
73
108
|
export {};
|