@n1xyz/wallet-widget 0.0.27 → 0.0.29
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/Modal/NTSFlow/views/CreateSessionView.js +1 -2
- package/dist/Modal/NTSFlow/views/CreateSessionView.js.map +1 -1
- package/dist/Modal/NordFlow/context/DepositContext.js +1 -2
- package/dist/Modal/NordFlow/context/DepositContext.js.map +1 -1
- package/dist/Modal/NordFlow/hooks/useTestnetFaucet.d.ts +17 -0
- package/dist/Modal/NordFlow/hooks/useTestnetFaucet.js +162 -0
- package/dist/Modal/NordFlow/hooks/useTestnetFaucet.js.map +1 -0
- package/dist/Modal/NordFlow/screens/02-ChainSelectionScreen.d.ts +1 -0
- package/dist/Modal/NordFlow/screens/02-ChainSelectionScreen.js +66 -0
- package/dist/Modal/NordFlow/screens/02-ChainSelectionScreen.js.map +1 -0
- package/dist/Modal/NordFlow/screens/03-AmountInputScreen.d.ts +5 -0
- package/dist/Modal/NordFlow/screens/03-AmountInputScreen.js +74 -0
- package/dist/Modal/NordFlow/screens/03-AmountInputScreen.js.map +1 -0
- package/dist/Modal/NordFlow/screens/04-DepositProgressScreen.d.ts +1 -0
- package/dist/Modal/NordFlow/screens/04-DepositProgressScreen.js +29 -0
- package/dist/Modal/NordFlow/screens/04-DepositProgressScreen.js.map +1 -0
- package/dist/Modal/NordFlow/screens/05-DepositSuccessScreen.d.ts +1 -0
- package/dist/Modal/NordFlow/screens/05-DepositSuccessScreen.js +144 -0
- package/dist/Modal/NordFlow/screens/05-DepositSuccessScreen.js.map +1 -0
- package/dist/Modal/NordFlow/screens/06-AuthLoadingScreen.d.ts +1 -0
- package/dist/Modal/NordFlow/screens/06-AuthLoadingScreen.js +35 -0
- package/dist/Modal/NordFlow/screens/06-AuthLoadingScreen.js.map +1 -0
- package/dist/Modal/NordFlow/screens/07-FinalSuccessScreen.d.ts +5 -0
- package/dist/Modal/NordFlow/screens/07-FinalSuccessScreen.js +39 -0
- package/dist/Modal/NordFlow/screens/07-FinalSuccessScreen.js.map +1 -0
- package/dist/Modal/NordFlow/screens/08-ErrorScreen.d.ts +1 -0
- package/dist/Modal/NordFlow/screens/08-ErrorScreen.js +68 -0
- package/dist/Modal/NordFlow/screens/08-ErrorScreen.js.map +1 -0
- package/dist/Provider/hooks/useNordUserInitialization.js +18 -56
- package/dist/Provider/hooks/useNordUserInitialization.js.map +1 -1
- package/dist/Provider/types.d.ts +0 -2
- package/dist/Provider/types.js.map +1 -1
- package/dist/animations/N1Loader.d.ts +11 -0
- package/dist/animations/N1Loader.js +42 -0
- package/dist/animations/N1Loader.js.map +1 -0
- package/dist/animations/N1Loader.json +1 -0
- package/dist/animations/Processing.d.ts +11 -0
- package/dist/animations/Processing.js +42 -0
- package/dist/animations/Processing.js.map +1 -0
- package/dist/animations/Processing.json +1 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Bold-Italic-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Bold-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Extra-Bold-Italic-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Extra-Bold-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Light-Italic-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Light-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Medium-Italic-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Medium-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Regular-Italic-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Regular-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Semi-Bold-Italic-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Semi-Bold-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Thin-Italic-Trial.otf +0 -0
- package/dist/fonts/apk-galeria/APK-Galeria-Thin-Trial.otf +0 -0
- package/dist/utils/dynamicNord.d.ts +2 -0
- package/dist/utils/dynamicNord.js +59 -0
- package/dist/utils/dynamicNord.js.map +1 -0
- package/dist/utils/ed25519.d.ts +8 -0
- package/dist/utils/ed25519.js +87 -0
- package/dist/utils/ed25519.js.map +1 -0
- package/package.json +12 -12
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"03-AmountInputScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/03-AmountInputScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { useN1WalletContext } from '../../../Provider/hooks';\nimport { ImageWithFallback } from '../components';\nimport { ANIMATION_EASE } from '../constants';\nimport { formatAmount, isNordConfigured } from '../utils/nordUtils';\nimport { useDepositContext } from '../context/DepositContext';\nimport { useFlowStateContext } from '../context/FlowContext';\nimport { useTestnetFaucet } from '../hooks/useTestnetFaucet';\nimport { WaitingMessage } from '../components/WaitingMessage';\n\ninterface AmountInputScreenProps {\n isTestnet?: boolean;\n}\n\nexport function AmountInputScreen({ isTestnet = false }: AmountInputScreenProps) {\n const { context } = useFlowStateContext();\n const { updateAmount, startDeposit } = useDepositContext();\n const { nord } = useN1WalletContext();\n\n // Hard code amount to 100\n const amount = '100';\n // Hard code balance to 0 to allow faucet to trigger\n const balance = 100;\n\n // Force the amount to be 100 on component mount only, not on every render\n useEffect(() => {\n updateAmount('100');\n // Empty dependency array ensures this only runs once on mount\n }, [updateAmount]);\n\n const [isHovered, setIsHovered] = useState(false);\n\n // Get token information from Nord if available\n const [tokenSymbol, setTokenSymbol] = useState('USDC');\n const [tokenLogo, setTokenLogo] = useState('https://res.cloudinary.com/dl3ia3pko/image/upload/v1745874373/usdc_ma4igc.svg');\n const [tokenDecimals, setTokenDecimals] = useState(6);\n\n // Try to get token information from Nord\n useEffect(() => {\n if (nord && isNordConfigured(nord)) {\n try {\n // Find the USDC token or the first token\n const usdcToken =\n nord.tokens.find((t: any) => t.symbol === 'USDC') || nord.tokens[0];\n if (usdcToken) {\n setTokenSymbol(usdcToken.symbol);\n // Use a default logo if not available\n // setTokenLogo(`/images/tokens/${usdcToken.symbol.toLowerCase()}.svg`);\n setTokenLogo('https://res.cloudinary.com/dl3ia3pko/image/upload/v1745874373/usdc_ma4igc.svg');\n setTokenDecimals(usdcToken.decimals);\n }\n } catch (error) {\n console.warn('Error getting token information from Nord:', error);\n }\n }\n }, [nord]);\n\n // Removed handleAmountChange since we don't want user to edit the amount\n\n // todo:fix\n const isValidAmount = true;\n\n const hardcodedMinDeposit = 100;\n\n const {\n showFaucetOverlay,\n isFaucetLoading,\n faucetError,\n showFaucetSuccess,\n requestTestnetTokens,\n } = useTestnetFaucet({\n enabled: isTestnet,\n balance,\n minDeposit: hardcodedMinDeposit,\n });\n\n // Format the balance with the appropriate number of decimal places\n const formattedBalance = formatAmount(balance, tokenDecimals);\n\n return (\n <div className=\"overflow-hidden relative\">\n {/* Faucet Overlay */}\n {isTestnet && showFaucetOverlay && (\n <div className=\"absolute inset-0 z-10 bg-neutral-900/80 backdrop-blur-md flex flex-col items-center justify-center p-6\">\n {isFaucetLoading ? (\n <WaitingMessage\n loaderSize={52}\n message={{\n visible: true,\n title: 'Obtaining Testnet Tokens',\n subtitle:\n 'Please wait while we request testnet tokens for your wallet...',\n isTyping: false,\n }}\n />\n ) : showFaucetSuccess ? (\n <>\n <div className=\"text-green-500 text-5xl mb-4 n1-ww-animate-fade-up\">✓</div>\n <div className=\"space-y-2 text-center\">\n <h3 className=\"text-xl text-white font-semibold\">\n Tokens Obtained Successfully\n </h3>\n <p className=\"text-sm text-green-400\">\n Your wallet has been funded with testnet tokens.\n </p>\n <p className=\"text-sm text-neutral-400 mt-2\">\n Please wait while your balance updates...\n </p>\n </div>\n </>\n ) : faucetError ? (\n <>\n <div className=\"text-red-500 text-5xl mb-4 n1-ww-animate-fade-up\">⚠️</div>\n <div className=\"space-y-2 text-center\">\n <h3 className=\"text-xl text-white font-semibold\">\n Failed to Get Tokens\n </h3>\n <p className=\"text-sm text-red-400\">\n {faucetError}\n </p>\n <button\n onClick={requestTestnetTokens}\n className=\"mt-4 px-4 py-2 bg-n1-ww-main text-white rounded-sm hover:bg-n1-ww-main/90 transition-colors\"\n >\n Try Again\n </button>\n </div>\n </>\n ) : null}\n </div>\n )}\n\n <h2 className=\"text-xl text-white font-semibold mb-6 text-center\">\n Enter Amount\n </h2>\n\n {/* Amount Input */}\n <div className=\"space-y-6\">\n {/* Token Selection and Amount Input */}\n <div className=\"relative border-2 border-n1-ww-border bg-n1-ww-gray-900 rounded-sm p-0 overflow-hidden n1-ww-animate-fade-up\" style={{ animationDelay: '0.1s' }}>\n {/* Token Selection Header */}\n <div className=\"flex items-center justify-between p-4 border-b border-n1-ww-border bg-black/10\">\n <div className=\"flex items-center space-x-3\">\n <div className=\"w-8 h-8 rounded-full overflow-hidden bg-n1-ww-gray-800 flex items-center justify-center shadow-sm\">\n <ImageWithFallback\n src={tokenLogo}\n alt={tokenSymbol}\n width={24}\n height={24}\n fallbackText={tokenSymbol.charAt(0)}\n fallbackClassName=\"w-6 h-6 rounded-full flex items-center justify-center\"\n fallbackBgColor=\"bg-blue-900\"\n fallbackTextColor=\"text-blue-300\"\n />\n </div>\n <span className=\"text-white font-medium\">\n {tokenSymbol}\n </span>\n </div>\n <div className=\"text-xs rounded-sm bg-n1-ww-gray-800 px-2 py-1 text-n1-ww-gray-300\">\n Fixed Amount\n </div>\n </div>\n\n {isTestnet && (\n <div className=\"mb-4 w-full flex items-center justify-center\">\n <div className=\"bg-yellow-900/40 border border-n1-ww-border text-yellow-200 rounded px-3 py-2 text-sm text-center max-w-xl mx-auto shadow-sm\">\n <span className=\"font-semibold\">Testnet Only:</span> Please make sure your wallet is set to <span className=\"font-semibold\">testnet mode</span> before proceeding. <a href=\"https://docs.phantom.com/developer-powertools/testnet-mode\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"underline text-yellow-200 hover:text-yellow-100 transition-colors\">Learn how to switch to testnet</a>.\n </div>\n </div>\n )}\n\n {/* Amount Input - Hardcoded to 100 */}\n <div className=\"relative p-6 flex flex-col items-center\">\n <div className=\"relative flex items-baseline justify-center w-full\">\n <span className=\"text-4xl font-bold text-white mr-1 n1-ww-animate-fade-up\" style={{ animationDelay: '0.2s' }}>\n {amount}\n </span>\n <span className=\"text-xl text-neutral-400 ml-1 n1-ww-animate-fade-up\" style={{ animationDelay: '0.3s' }}>\n {tokenSymbol}\n </span>\n </div>\n\n {/* Decorative element */}\n <div className=\"w-16 h-1 bg-n1-ww-gray-800 rounded-full mt-4 mb-2\"></div>\n\n {/* Balance Display */}\n <div className=\"flex justify-center items-center text-sm mt-2 w-full n1-ww-animate-fade-up\" style={{ animationDelay: '0.4s' }}>\n <span className=\"text-neutral-400\">\n Balance: {formattedBalance} {tokenSymbol}\n </span>\n </div>\n </div>\n </div>\n\n {/* Error Message */}\n {context.depositError && (\n <div className=\"bg-red-900/30 text-red-400 p-3 rounded-sm text-sm border border-n1-ww-border n1-ww-animate-fade-up\" style={{ animationDelay: '0.5s' }}>\n {context.depositError}\n </div>\n )}\n\n {/* Continue Button */}\n <button\n onClick={startDeposit}\n disabled={!isValidAmount}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n className={`\n group relative w-full overflow-hidden rounded-sm border-2 bg-neutral-950 py-4 text-center\n transition-all duration-300 ${ANIMATION_EASE} n1-ww-animate-fade-up\n ${isValidAmount\n ? 'cursor-pointer border-n1-ww-border hover:border-n1-ww-border'\n : 'cursor-not-allowed border-n1-ww-border opacity-50'\n }\n `}\n style={{\n transform: isHovered && isValidAmount ? 'scale(0.99)' : 'scale(1)',\n animationDelay: '0.6s'\n }}\n >\n <span\n className={`\n text-base font-medium tracking-wide transition-colors duration-300 ${ANIMATION_EASE}\n ${isValidAmount\n ? 'text-n1-ww-gray-300 group-hover:text-white'\n : 'text-n1-ww-gray-600'\n }\n `}\n >\n Continue\n </span>\n </button>\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function DepositProgressScreen(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { WaitingMessage } from '../components/WaitingMessage';
|
|
3
|
+
import { useState, useEffect } from 'react';
|
|
4
|
+
export function DepositProgressScreen() {
|
|
5
|
+
var _a = useState(0), _elapsedTime = _a[0], setElapsedTime = _a[1];
|
|
6
|
+
var maxTime = 300; // Maximum time in seconds
|
|
7
|
+
var message = {
|
|
8
|
+
visible: true,
|
|
9
|
+
title: 'Processing Deposit',
|
|
10
|
+
subtitle: 'Please wait while we process your deposit',
|
|
11
|
+
isTyping: false,
|
|
12
|
+
};
|
|
13
|
+
// Start timer when component mounts
|
|
14
|
+
useEffect(function () {
|
|
15
|
+
var timer = setInterval(function () {
|
|
16
|
+
setElapsedTime(function (prevTime) {
|
|
17
|
+
if (prevTime >= maxTime) {
|
|
18
|
+
clearInterval(timer);
|
|
19
|
+
return maxTime;
|
|
20
|
+
}
|
|
21
|
+
return prevTime + 1;
|
|
22
|
+
});
|
|
23
|
+
}, 1000);
|
|
24
|
+
// Clean up timer on unmount
|
|
25
|
+
return function () { return clearInterval(timer); };
|
|
26
|
+
}, []);
|
|
27
|
+
return (_jsx("div", { className: "overflow-hidden relative", children: _jsx(WaitingMessage, { message: message, loaderSize: 52 }) }));
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=04-DepositProgressScreen.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"04-DepositProgressScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/04-DepositProgressScreen.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,UAAU,qBAAqB;IAC7B,IAAA,KAAiC,QAAQ,CAAC,CAAC,CAAC,EAA3C,YAAY,QAAA,EAAE,cAAc,QAAe,CAAC;IACnD,IAAM,OAAO,GAAG,GAAG,CAAC,CAAC,0BAA0B;IAE/C,IAAM,OAAO,GAAG;QACd,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,oBAAoB;QAC3B,QAAQ,EAAE,2CAA2C;QACrD,QAAQ,EAAE,KAAK;KAChB,CAAC;IAEF,oCAAoC;IACpC,SAAS,CAAC;QACR,IAAM,KAAK,GAAG,WAAW,CAAC;YACxB,cAAc,CAAC,UAAC,QAAQ;gBACtB,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;oBACxB,aAAa,CAAC,KAAK,CAAC,CAAC;oBACrB,OAAO,OAAO,CAAC;gBACjB,CAAC;gBACD,OAAO,QAAQ,GAAG,CAAC,CAAC;YACtB,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,4BAA4B;QAC5B,OAAO,cAAM,OAAA,aAAa,CAAC,KAAK,CAAC,EAApB,CAAoB,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,cAAK,SAAS,EAAC,0BAA0B,YACvC,KAAC,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,EAAE,GACd,GACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { WaitingMessage } from '../components/WaitingMessage';\nimport { useState, useEffect } from 'react';\n\nexport function DepositProgressScreen() {\n const [_elapsedTime, setElapsedTime] = useState(0);\n const maxTime = 300; // Maximum time in seconds\n\n const message = {\n visible: true,\n title: 'Processing Deposit',\n subtitle: 'Please wait while we process your deposit',\n isTyping: false,\n };\n\n // Start timer when component mounts\n useEffect(() => {\n const timer = setInterval(() => {\n setElapsedTime((prevTime) => {\n if (prevTime >= maxTime) {\n clearInterval(timer);\n return maxTime;\n }\n return prevTime + 1;\n });\n }, 1000);\n\n // Clean up timer on unmount\n return () => clearInterval(timer);\n }, []);\n\n return (\n <div className=\"overflow-hidden relative\">\n <WaitingMessage\n message={message}\n loaderSize={52}\n />\n </div>\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function DepositSuccessScreen(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { useEffect, useState } from 'react';
|
|
14
|
+
import { TransactionTable } from '../components/TransactionTable';
|
|
15
|
+
import { ANIMATION_EASE, TYPING_INTERVAL } from '../constants';
|
|
16
|
+
import { useN1WalletContext } from '../../../Provider/hooks';
|
|
17
|
+
import { isNordConfigured } from '../utils/nordUtils';
|
|
18
|
+
import { useDepositContext } from '../context/DepositContext';
|
|
19
|
+
import { getExplorerUrl } from '../../../Logic/transactionManager';
|
|
20
|
+
export function DepositSuccessScreen() {
|
|
21
|
+
var _a = useDepositContext(), amount = _a.amount, completeDeposit = _a.completeDeposit, transactionResult = _a.transactionResult, transactionId = _a.transactionId;
|
|
22
|
+
var nord = useN1WalletContext().nord;
|
|
23
|
+
var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
|
|
24
|
+
var _c = useState(false), showDetails = _c[0], setShowDetails = _c[1];
|
|
25
|
+
var _d = useState({
|
|
26
|
+
amount: { text: '', visible: false, typing: false },
|
|
27
|
+
tx: { text: '', visible: false, typing: false },
|
|
28
|
+
from: { text: '', visible: false, typing: false },
|
|
29
|
+
to: { text: '', visible: false, typing: false },
|
|
30
|
+
network: { text: '', visible: false, typing: false },
|
|
31
|
+
status: { text: '', visible: false, typing: false },
|
|
32
|
+
}), animatedTableValues = _d[0], setAnimatedTableValues = _d[1];
|
|
33
|
+
// Add state to track if the button should be enabled
|
|
34
|
+
var _e = useState(false), isContinueEnabled = _e[0], setIsContinueEnabled = _e[1];
|
|
35
|
+
// Add state to show a message about waiting
|
|
36
|
+
var _f = useState(true), showWaitingMessage = _f[0], setShowWaitingMessage = _f[1];
|
|
37
|
+
var fallbackTransaction = transactionResult !== null && transactionResult !== void 0 ? transactionResult : {
|
|
38
|
+
success: true,
|
|
39
|
+
transactionId: transactionId !== null && transactionId !== void 0 ? transactionId : 'pending-transaction',
|
|
40
|
+
amount: amount || '0',
|
|
41
|
+
tokenSymbol: 'USDC',
|
|
42
|
+
fromAddress: 'Debug Wallet',
|
|
43
|
+
toAddress: 'Nord Account',
|
|
44
|
+
networkName: 'Solana',
|
|
45
|
+
status: 'Processing',
|
|
46
|
+
explorerUrl: transactionId ? getExplorerUrl(transactionId) : '',
|
|
47
|
+
};
|
|
48
|
+
// Create table values from transaction details
|
|
49
|
+
var tableValues = {
|
|
50
|
+
amount: { text: fallbackTransaction.amount, visible: true, typing: false },
|
|
51
|
+
tx: { text: fallbackTransaction.transactionId, visible: true, typing: false },
|
|
52
|
+
from: { text: fallbackTransaction.fromAddress, visible: true, typing: false },
|
|
53
|
+
to: { text: fallbackTransaction.toAddress, visible: true, typing: false },
|
|
54
|
+
network: { text: fallbackTransaction.networkName, visible: true, typing: false },
|
|
55
|
+
status: { text: fallbackTransaction.status, visible: true, typing: false },
|
|
56
|
+
};
|
|
57
|
+
// Get token information from Nord if available
|
|
58
|
+
var _g = useState('USDC'), tokenSymbol = _g[0], setTokenSymbol = _g[1];
|
|
59
|
+
// Try to get token information from Nord
|
|
60
|
+
useEffect(function () {
|
|
61
|
+
if (nord && isNordConfigured(nord)) {
|
|
62
|
+
try {
|
|
63
|
+
// Find the USDC token or the first token
|
|
64
|
+
var usdcToken = nord.tokens.find(function (t) { return t.symbol === 'USDC'; }) || nord.tokens[0];
|
|
65
|
+
if (usdcToken) {
|
|
66
|
+
setTokenSymbol(usdcToken.symbol);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
catch (error) {
|
|
70
|
+
console.warn('Error getting token information from Nord:', error);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}, [nord]);
|
|
74
|
+
// Add animation to table values
|
|
75
|
+
useEffect(function () {
|
|
76
|
+
if (!showDetails)
|
|
77
|
+
return;
|
|
78
|
+
// Extract the text values from the tableValues
|
|
79
|
+
var values = {
|
|
80
|
+
amount: "".concat(Number(amount).toLocaleString(), " ").concat(tokenSymbol),
|
|
81
|
+
tx: tableValues.tx.text,
|
|
82
|
+
from: tableValues.from.text,
|
|
83
|
+
to: tableValues.to.text,
|
|
84
|
+
network: tableValues.network.text,
|
|
85
|
+
status: tableValues.status.text,
|
|
86
|
+
};
|
|
87
|
+
// Animate each field with typing effect
|
|
88
|
+
Object.entries(values).forEach(function (_a, index) {
|
|
89
|
+
var key = _a[0], value = _a[1];
|
|
90
|
+
setTimeout(function () {
|
|
91
|
+
// Make the field visible first
|
|
92
|
+
setAnimatedTableValues(function (prev) {
|
|
93
|
+
var _a;
|
|
94
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { visible: true, typing: true }), _a)));
|
|
95
|
+
});
|
|
96
|
+
var textIndex = 0;
|
|
97
|
+
// Type out each character with the typing animation
|
|
98
|
+
var interval = setInterval(function () {
|
|
99
|
+
if (textIndex <= value.length) {
|
|
100
|
+
setAnimatedTableValues(function (prev) {
|
|
101
|
+
var _a;
|
|
102
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[key] = {
|
|
103
|
+
text: value.slice(0, textIndex),
|
|
104
|
+
visible: true,
|
|
105
|
+
typing: textIndex < value.length,
|
|
106
|
+
}, _a)));
|
|
107
|
+
});
|
|
108
|
+
textIndex++;
|
|
109
|
+
}
|
|
110
|
+
else {
|
|
111
|
+
clearInterval(interval);
|
|
112
|
+
setAnimatedTableValues(function (prev) {
|
|
113
|
+
var _a;
|
|
114
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[key] = {
|
|
115
|
+
text: value,
|
|
116
|
+
visible: true,
|
|
117
|
+
typing: false,
|
|
118
|
+
}, _a)));
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
}, TYPING_INTERVAL);
|
|
122
|
+
}, index * 300); // Slightly faster staggering for better UX
|
|
123
|
+
});
|
|
124
|
+
}, [showDetails]);
|
|
125
|
+
// Enable the continue button after a minimum viewing time
|
|
126
|
+
useEffect(function () {
|
|
127
|
+
var enableTimer = setTimeout(function () {
|
|
128
|
+
setIsContinueEnabled(true);
|
|
129
|
+
setShowWaitingMessage(false);
|
|
130
|
+
}, 4000);
|
|
131
|
+
return function () { return clearTimeout(enableTimer); };
|
|
132
|
+
}, []);
|
|
133
|
+
var toggleDetails = function () {
|
|
134
|
+
setShowDetails(function (prev) { return !prev; });
|
|
135
|
+
};
|
|
136
|
+
return (_jsx("div", { className: "relative w-full px-4", children: _jsx("div", { className: "flex flex-col space-y-6", children: _jsxs("div", { className: "w-full", children: [_jsx("div", { className: "relative w-full px-3 py-3 flex items-center justify-center transition-all duration-300 ".concat(ANIMATION_EASE, " ").concat(showDetails ? 'opacity-0 max-h-0' : 'opacity-100 max-h-[200px]'), children: _jsxs("div", { className: "relative w-full px-5 py-8 transition-all duration-300 ".concat(ANIMATION_EASE, " ").concat(showDetails ? 'max-h-0 overflow-hidden' : 'max-h-[200px]'), children: [_jsx("div", { className: "w-2 h-2 bg-emerald-800 absolute -top-2 -left-2 rounded-sm" }), _jsx("div", { className: "w-2 h-2 bg-emerald-800 absolute -top-2 -right-2 rounded-sm" }), _jsx("div", { className: "w-2 h-2 bg-emerald-800 absolute -bottom-2 -left-2 rounded-sm" }), _jsx("div", { className: "w-2 h-2 bg-emerald-800 absolute -bottom-2 -right-2 rounded-sm" }), _jsxs("p", { className: "text-5xl md:text-7xl tracking-tight text-emerald-500/80 font-medium pt-4 underline text-center n1-ww-animate-fade-up", style: { animationDelay: '0.3s' }, children: ["+", Number(amount).toLocaleString(), _jsx("span", { className: "text-xl md:text-2xl text-emerald-500/50 ml-2", children: tokenSymbol })] }), _jsx("div", { className: "absolute bottom-0 left-0 right-0 flex justify-center -mb-3", children: _jsxs("button", { onClick: toggleDetails, className: "\n group flex items-center space-x-1 px-3 py-1 text-xs font-medium \n transition-colors duration-200 focus:outline-none\n ".concat(showDetails
|
|
137
|
+
? 'text-emerald-400 hover:text-emerald-300'
|
|
138
|
+
: 'text-n1-ww-gray-400 hover:text-emerald-400', "\n "), children: [_jsx("span", { children: "View details" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 transition-transform duration-200", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }) })] }) }), _jsx("div", { className: "transition-all duration-300 ease-in-out overflow-hidden ".concat(showDetails
|
|
139
|
+
? 'max-h-[500px] opacity-100 -mt-4'
|
|
140
|
+
: 'max-h-0 opacity-0'), children: _jsx(TransactionTable, { tableValues: animatedTableValues, onClose: toggleDetails }) }), _jsxs("div", { className: "mt-6", children: [showWaitingMessage && (_jsx("p", { className: "text-sm text-neutral-400 text-center mb-2 n1-ww-animate-pulse", children: "Please wait a moment..." })), _jsx("button", { onClick: isContinueEnabled ? completeDeposit : undefined, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "\n group relative w-full overflow-hidden rounded-md border-2 bg-neutral-950 py-4 text-center\n transition-all duration-300 ".concat(ANIMATION_EASE, "\n cursor-pointer border-n1-ww-border hover:border-n1-ww-border\n ").concat(!isContinueEnabled ? 'opacity-50 cursor-not-allowed' : '', "\n "), style: {
|
|
141
|
+
transform: isHovered && isContinueEnabled ? 'scale(0.99)' : 'scale(1)',
|
|
142
|
+
}, disabled: !isContinueEnabled, children: _jsx("span", { className: "\n text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n text-n1-ww-gray-300 group-hover:text-white\n "), children: "Continue" }) })] })] }) }) }));
|
|
143
|
+
}
|
|
144
|
+
//# sourceMappingURL=05-DepositSuccessScreen.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"05-DepositSuccessScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/05-DepositSuccessScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { TransactionTable } from '../components/TransactionTable';\nimport { ANIMATION_EASE, TYPING_INTERVAL } from '../constants';\nimport { TableValues } from '../types';\nimport { useN1WalletContext } from '../../../Provider/hooks';\nimport { isNordConfigured } from '../utils/nordUtils';\nimport { useDepositContext } from '../context/DepositContext';\nimport { getExplorerUrl } from '../../../Logic/transactionManager';\n\nexport function DepositSuccessScreen() {\n const { amount, completeDeposit, transactionResult, transactionId } = useDepositContext();\n const { nord } = useN1WalletContext();\n const [isHovered, setIsHovered] = useState(false);\n const [showDetails, setShowDetails] = useState(false);\n const [animatedTableValues, setAnimatedTableValues] = useState<TableValues>({\n amount: { text: '', visible: false, typing: false },\n tx: { text: '', visible: false, typing: false },\n from: { text: '', visible: false, typing: false },\n to: { text: '', visible: false, typing: false },\n network: { text: '', visible: false, typing: false },\n status: { text: '', visible: false, typing: false },\n });\n // Add state to track if the button should be enabled\n const [isContinueEnabled, setIsContinueEnabled] = useState(false);\n // Add state to show a message about waiting\n const [showWaitingMessage, setShowWaitingMessage] = useState(true);\n\n const fallbackTransaction = transactionResult ?? {\n success: true,\n transactionId: transactionId ?? 'pending-transaction',\n amount: amount || '0',\n tokenSymbol: 'USDC',\n fromAddress: 'Debug Wallet',\n toAddress: 'Nord Account',\n networkName: 'Solana',\n status: 'Processing',\n explorerUrl: transactionId ? getExplorerUrl(transactionId) : '',\n };\n\n // Create table values from transaction details\n const tableValues = {\n amount: { text: fallbackTransaction.amount, visible: true, typing: false },\n tx: { text: fallbackTransaction.transactionId, visible: true, typing: false },\n from: { text: fallbackTransaction.fromAddress, visible: true, typing: false },\n to: { text: fallbackTransaction.toAddress, visible: true, typing: false },\n network: { text: fallbackTransaction.networkName, visible: true, typing: false },\n status: { text: fallbackTransaction.status, visible: true, typing: false },\n };\n\n // Get token information from Nord if available\n const [tokenSymbol, setTokenSymbol] = useState('USDC');\n\n // Try to get token information from Nord\n useEffect(() => {\n if (nord && isNordConfigured(nord)) {\n try {\n // Find the USDC token or the first token\n const usdcToken =\n nord.tokens.find((t) => t.symbol === 'USDC') || nord.tokens[0];\n if (usdcToken) {\n setTokenSymbol(usdcToken.symbol);\n }\n } catch (error) {\n console.warn('Error getting token information from Nord:', error);\n }\n }\n }, [nord]);\n\n // Add animation to table values\n useEffect(() => {\n if (!showDetails) return;\n\n // Extract the text values from the tableValues\n const values = {\n amount: `${Number(amount).toLocaleString()} ${tokenSymbol}`,\n tx: tableValues.tx.text,\n from: tableValues.from.text,\n to: tableValues.to.text,\n network: tableValues.network.text,\n status: tableValues.status.text,\n };\n\n // Animate each field with typing effect\n Object.entries(values).forEach(([key, value], index) => {\n setTimeout(() => {\n // Make the field visible first\n setAnimatedTableValues((prev) => ({\n ...prev,\n [key]: {\n ...prev[key as keyof typeof prev],\n visible: true,\n typing: true,\n },\n }));\n\n let textIndex = 0;\n // Type out each character with the typing animation\n const interval = setInterval(() => {\n if (textIndex <= value.length) {\n setAnimatedTableValues((prev) => ({\n ...prev,\n [key]: {\n text: value.slice(0, textIndex),\n visible: true,\n typing: textIndex < value.length,\n },\n }));\n textIndex++;\n } else {\n clearInterval(interval);\n setAnimatedTableValues((prev) => ({\n ...prev,\n [key]: {\n text: value,\n visible: true,\n typing: false,\n },\n }));\n }\n }, TYPING_INTERVAL);\n }, index * 300); // Slightly faster staggering for better UX\n });\n }, [showDetails]);\n\n // Enable the continue button after a minimum viewing time\n useEffect(() => {\n const enableTimer = setTimeout(() => {\n setIsContinueEnabled(true);\n setShowWaitingMessage(false);\n }, 4000);\n\n return () => clearTimeout(enableTimer);\n }, []);\n\n const toggleDetails = () => {\n setShowDetails((prev) => !prev);\n };\n\n return (\n <div className=\"relative w-full px-4\">\n <div className=\"flex flex-col space-y-6\">\n {/* Amount display */}\n <div className=\"w-full\">\n <div\n className={`relative w-full px-3 py-3 flex items-center justify-center transition-all duration-300 ${ANIMATION_EASE} ${showDetails ? 'opacity-0 max-h-0' : 'opacity-100 max-h-[200px]'}`}\n >\n <div\n className={`relative w-full px-5 py-8 transition-all duration-300 ${ANIMATION_EASE} ${\n showDetails ? 'max-h-0 overflow-hidden' : 'max-h-[200px]'\n }`}\n >\n <div className=\"w-2 h-2 bg-emerald-800 absolute -top-2 -left-2 rounded-sm\"></div>\n <div className=\"w-2 h-2 bg-emerald-800 absolute -top-2 -right-2 rounded-sm\"></div>\n <div className=\"w-2 h-2 bg-emerald-800 absolute -bottom-2 -left-2 rounded-sm\"></div>\n <div className=\"w-2 h-2 bg-emerald-800 absolute -bottom-2 -right-2 rounded-sm\"></div>\n <p\n className=\"text-5xl md:text-7xl tracking-tight text-emerald-500/80 font-medium pt-4 underline text-center n1-ww-animate-fade-up\"\n style={{ animationDelay: '0.3s' }}\n >\n +{Number(amount).toLocaleString()}\n <span className=\"text-xl md:text-2xl text-emerald-500/50 ml-2\">\n {tokenSymbol}\n </span>\n </p>\n\n {/* Subtle transaction details toggle positioned at the bottom of amount display */}\n <div className=\"absolute bottom-0 left-0 right-0 flex justify-center -mb-3\">\n <button\n onClick={toggleDetails}\n className={`\n group flex items-center space-x-1 px-3 py-1 text-xs font-medium \n transition-colors duration-200 focus:outline-none\n ${showDetails\n ? 'text-emerald-400 hover:text-emerald-300'\n : 'text-n1-ww-gray-400 hover:text-emerald-400'}\n `}\n >\n <span>View details</span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"h-3 w-3 transition-transform duration-200\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M19 9l-7 7-7-7\"\n />\n </svg>\n </button>\n </div>\n </div>\n </div>\n <div\n className={`transition-all duration-300 ease-in-out overflow-hidden ${\n showDetails\n ? 'max-h-[500px] opacity-100 -mt-4'\n : 'max-h-0 opacity-0'\n }`}\n >\n <TransactionTable\n tableValues={animatedTableValues}\n onClose={toggleDetails}\n />\n </div>\n\n {/* Continue button */}\n <div className=\"mt-6\">\n {showWaitingMessage && (\n <p className=\"text-sm text-neutral-400 text-center mb-2 n1-ww-animate-pulse\">\n Please wait a moment...\n </p>\n )}\n <button\n onClick={isContinueEnabled ? completeDeposit : undefined}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n className={`\n group relative w-full overflow-hidden rounded-md border-2 bg-neutral-950 py-4 text-center\n transition-all duration-300 ${ANIMATION_EASE}\n cursor-pointer border-n1-ww-border hover:border-n1-ww-border\n ${!isContinueEnabled ? 'opacity-50 cursor-not-allowed' : ''}\n `}\n style={{\n transform:\n isHovered && isContinueEnabled ? 'scale(0.99)' : 'scale(1)',\n }}\n disabled={!isContinueEnabled}\n >\n <span\n className={`\n text-base font-medium tracking-wide transition-colors duration-300 ${ANIMATION_EASE}\n text-n1-ww-gray-300 group-hover:text-white\n `}\n >\n Continue\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function AuthLoadingScreen(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { ANIMATION_EASE } from '../constants';
|
|
4
|
+
import { useDepositContext } from '../context/DepositContext';
|
|
5
|
+
import { WaitingMessage } from '../components/WaitingMessage';
|
|
6
|
+
export function AuthLoadingScreen() {
|
|
7
|
+
var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
|
|
8
|
+
var authInitiatedRef = useRef(false);
|
|
9
|
+
// Get auth-related state and functions from DepositContext
|
|
10
|
+
var _b = useDepositContext(), performAuth = _b.performAuth, authStatus = _b.authStatus, authErrorMessage = _b.authErrorMessage, authStatusMessage = _b.authStatusMessage;
|
|
11
|
+
useEffect(function () {
|
|
12
|
+
if (!authInitiatedRef.current) {
|
|
13
|
+
authInitiatedRef.current = true;
|
|
14
|
+
performAuth();
|
|
15
|
+
}
|
|
16
|
+
}, [performAuth]);
|
|
17
|
+
var handleRetry = function () {
|
|
18
|
+
// Reset and retry authentication
|
|
19
|
+
authInitiatedRef.current = false;
|
|
20
|
+
performAuth();
|
|
21
|
+
};
|
|
22
|
+
var loadingMessage = {
|
|
23
|
+
visible: true,
|
|
24
|
+
title: 'Authenticating',
|
|
25
|
+
subtitle: authStatusMessage || 'Please wait while we create your Nord account',
|
|
26
|
+
isTyping: false,
|
|
27
|
+
};
|
|
28
|
+
return (_jsx("div", { className: "flex flex-col items-center justify-center", children: authStatus === 'loading' ? (_jsx(WaitingMessage, { loaderSize: 52, message: loadingMessage })) : (_jsxs(_Fragment, { children: [authStatus === 'success' && (_jsx("div", { className: "text-green-500 text-4xl mb-4", children: "\u2713" })), authStatus === 'error' && (_jsx("div", { className: "text-red-500 text-4xl mb-4", children: "\u26A0\uFE0F" })), _jsxs("div", { className: "space-y-2 text-center w-[300px]", children: [_jsxs("h3", { className: "text-xl text-white font-semibold", children: [authStatus === 'success' && 'Authentication Successful', authStatus === 'error' && 'Authentication Failed'] }), _jsxs("p", { className: "text-sm text-neutral-400", children: [authStatus === 'success' &&
|
|
29
|
+
'You have been logged in successfully', authStatus === 'error' &&
|
|
30
|
+
(authErrorMessage ||
|
|
31
|
+
'There was an error during authentication. Please try again.')] }), authStatus === 'error' && (_jsx("div", { className: "mt-6 space-y-3", children: _jsx("button", { onClick: handleRetry, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "\n group relative w-full overflow-hidden rounded-md border-2 bg-neutral-950 py-4 text-center\n transition-all duration-300 ".concat(ANIMATION_EASE, "\n cursor-pointer border-n1-ww-border hover:border-n1-ww-border\n "), style: {
|
|
32
|
+
transform: isHovered ? 'scale(0.99)' : 'scale(1)',
|
|
33
|
+
}, children: _jsx("span", { className: "\n text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n text-n1-ww-gray-300 group-hover:text-white\n "), children: "Try Again" }) }) }))] })] })) }));
|
|
34
|
+
}
|
|
35
|
+
//# sourceMappingURL=06-AuthLoadingScreen.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"06-AuthLoadingScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/06-AuthLoadingScreen.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,UAAU,iBAAiB;IACzB,IAAA,KAA4B,QAAQ,CAAU,KAAK,CAAC,EAAnD,SAAS,QAAA,EAAE,YAAY,QAA4B,CAAC;IAC3D,IAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEvC,2DAA2D;IACrD,IAAA,KAKF,iBAAiB,EAAE,EAJrB,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,gBAAgB,sBAAA,EAChB,iBAAiB,uBACI,CAAC;IAExB,SAAS,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;YAC9B,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;YAChC,WAAW,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,IAAM,WAAW,GAAG;QAClB,iCAAiC;QACjC,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAC;QACjC,WAAW,EAAE,CAAC;IAChB,CAAC,CAAC;IAEF,IAAM,cAAc,GAAG;QACrB,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EACN,iBAAiB,IAAI,+CAA+C;QACtE,QAAQ,EAAE,KAAK;KAChB,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,2CAA2C,YACvD,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,CAC1B,KAAC,cAAc,IAAC,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,cAAc,GAAI,CAC5D,CAAC,CAAC,CAAC,CACF,8BACG,UAAU,KAAK,SAAS,IAAI,CAC3B,cAAK,SAAS,EAAC,8BAA8B,uBAAQ,CACtD,EACA,UAAU,KAAK,OAAO,IAAI,CACzB,cAAK,SAAS,EAAC,4BAA4B,6BAAS,CACrD,EAED,eAAK,SAAS,EAAC,iCAAiC,aAC9C,cAAI,SAAS,EAAC,kCAAkC,aAC7C,UAAU,KAAK,SAAS,IAAI,2BAA2B,EACvD,UAAU,KAAK,OAAO,IAAI,uBAAuB,IAC/C,EACL,aAAG,SAAS,EAAC,0BAA0B,aACpC,UAAU,KAAK,SAAS;oCACvB,sCAAsC,EACvC,UAAU,KAAK,OAAO;oCACrB,CAAC,gBAAgB;wCACf,6DAA6D,CAAC,IAChE,EAEH,UAAU,KAAK,OAAO,IAAI,CACzB,cAAK,SAAS,EAAC,gBAAgB,YAC7B,iBACE,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,cAAM,OAAA,YAAY,CAAC,IAAI,CAAC,EAAlB,CAAkB,EACtC,YAAY,EAAE,cAAM,OAAA,YAAY,CAAC,KAAK,CAAC,EAAnB,CAAmB,EACvC,SAAS,EAAE,2KAEqB,cAAc,2GAE7C,EACD,KAAK,EAAE;oCACL,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU;iCAClD,YAED,eACE,SAAS,EAAE,mGAC0D,cAAc,yFAEpF,0BAGM,GACA,GACL,CACP,IACG,IACL,CACJ,GACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { ANIMATION_EASE } from '../constants';\nimport { useDepositContext } from '../context/DepositContext';\nimport { WaitingMessage } from '../components/WaitingMessage';\n\nexport function AuthLoadingScreen() {\n const [isHovered, setIsHovered] = useState<boolean>(false);\n const authInitiatedRef = useRef(false);\n \n // Get auth-related state and functions from DepositContext\n const { \n performAuth,\n authStatus, \n authErrorMessage, \n authStatusMessage\n } = useDepositContext();\n\n useEffect(() => {\n if (!authInitiatedRef.current) {\n authInitiatedRef.current = true;\n performAuth();\n }\n }, [performAuth]);\n\n const handleRetry = () => {\n // Reset and retry authentication\n authInitiatedRef.current = false;\n performAuth();\n };\n\n const loadingMessage = {\n visible: true,\n title: 'Authenticating',\n subtitle:\n authStatusMessage || 'Please wait while we create your Nord account',\n isTyping: false,\n };\n\n return (\n <div className=\"flex flex-col items-center justify-center\">\n {authStatus === 'loading' ? (\n <WaitingMessage loaderSize={52} message={loadingMessage} />\n ) : (\n <>\n {authStatus === 'success' && (\n <div className=\"text-green-500 text-4xl mb-4\">✓</div>\n )}\n {authStatus === 'error' && (\n <div className=\"text-red-500 text-4xl mb-4\">⚠️</div>\n )}\n\n <div className=\"space-y-2 text-center w-[300px]\">\n <h3 className=\"text-xl text-white font-semibold\">\n {authStatus === 'success' && 'Authentication Successful'}\n {authStatus === 'error' && 'Authentication Failed'}\n </h3>\n <p className=\"text-sm text-neutral-400\">\n {authStatus === 'success' &&\n 'You have been logged in successfully'}\n {authStatus === 'error' &&\n (authErrorMessage ||\n 'There was an error during authentication. Please try again.')}\n </p>\n\n {authStatus === 'error' && (\n <div className=\"mt-6 space-y-3\">\n <button\n onClick={handleRetry}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n className={`\n group relative w-full overflow-hidden rounded-md border-2 bg-neutral-950 py-4 text-center\n transition-all duration-300 ${ANIMATION_EASE}\n cursor-pointer border-n1-ww-border hover:border-n1-ww-border\n `}\n style={{\n transform: isHovered ? 'scale(0.99)' : 'scale(1)',\n }}\n >\n <span\n className={`\n text-base font-medium tracking-wide transition-colors duration-300 ${ANIMATION_EASE}\n text-n1-ww-gray-300 group-hover:text-white\n `}\n >\n Try Again\n </span>\n </button>\n </div>\n )}\n </div>\n </>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { useN1WalletContext, useN1WalletInternalContext, } from '../../../Provider/hooks';
|
|
4
|
+
import { ANIMATION_EASE } from '../constants';
|
|
5
|
+
export function FinalSuccessScreen(_a) {
|
|
6
|
+
var onDone = _a.onDone;
|
|
7
|
+
var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
|
|
8
|
+
var address = useN1WalletContext().address;
|
|
9
|
+
var _c = useN1WalletInternalContext(), setIsConnected = _c.setIsConnected, skipFinalScreen = _c.skipFinalScreen;
|
|
10
|
+
var hasCalledOnDone = useRef(false);
|
|
11
|
+
useEffect(function () {
|
|
12
|
+
setIsConnected(true);
|
|
13
|
+
}, [setIsConnected]);
|
|
14
|
+
useEffect(function () {
|
|
15
|
+
if (skipFinalScreen && onDone && !hasCalledOnDone.current) {
|
|
16
|
+
hasCalledOnDone.current = true;
|
|
17
|
+
onDone();
|
|
18
|
+
}
|
|
19
|
+
}, [skipFinalScreen, onDone]);
|
|
20
|
+
if (skipFinalScreen) {
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
var handleDone = function () {
|
|
24
|
+
if (onDone) {
|
|
25
|
+
onDone();
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
var getTitle = function () {
|
|
29
|
+
return 'Authentication Successful!';
|
|
30
|
+
};
|
|
31
|
+
var getMessageTop = function () { return 'Thanks for testing 01!'; };
|
|
32
|
+
var getMessageBottom = function () {
|
|
33
|
+
return 'For any issues or feedback during this private testnet, message us on X @01_exchange';
|
|
34
|
+
};
|
|
35
|
+
return (_jsx("div", { className: "overflow-hidden relative", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "flex flex-col items-center justify-center pt-4", children: [_jsx("div", { className: "mb-6", children: _jsx("div", { className: "w-20 h-20 rounded-full bg-green-900/30 flex items-center justify-center", children: _jsx("svg", { className: "w-10 h-10 text-green-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }) }) }) }), _jsx("h2", { className: "text-2xl text-white font-semibold mb-2 text-center", children: getTitle() }), _jsx("p", { className: "text-sm text-neutral-300 text-center", children: getMessageTop() }), _jsx("p", { className: "text-sm text-neutral-300 text-center", children: getMessageBottom() }), address && (_jsxs("p", { className: "text-sm text-neutral-400 text-center mt-2", children: ["Wallet: ", address.substring(0, 6), "...", address.substring(address.length - 4)] }))] }), _jsx("button", { onClick: handleDone, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "\n group relative w-full overflow-hidden rounded-md border-2 bg-neutral-950 py-4 text-center\n transition-all duration-300 ".concat(ANIMATION_EASE, "\n cursor-pointer border-n1-ww-border hover:border-n1-ww-border\n "), style: {
|
|
36
|
+
transform: isHovered ? 'scale(0.99)' : 'scale(1)',
|
|
37
|
+
}, children: _jsx("span", { className: "\n text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n text-n1-ww-gray-300 group-hover:text-white\n "), children: "Open App" }) })] }) }));
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=07-FinalSuccessScreen.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"07-FinalSuccessScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/07-FinalSuccessScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport {\n useN1WalletContext,\n useN1WalletInternalContext,\n} from '../../../Provider/hooks';\nimport { ANIMATION_EASE } from '../constants';\n\ninterface FinalSuccessScreenProps {\n onDone?: () => void;\n}\n\nexport function FinalSuccessScreen({ onDone }: FinalSuccessScreenProps) {\n const [isHovered, setIsHovered] = useState(false);\n const { address } = useN1WalletContext();\n const { setIsConnected, skipFinalScreen } = useN1WalletInternalContext();\n const hasCalledOnDone = useRef(false);\n\n useEffect(() => {\n setIsConnected(true);\n }, [setIsConnected]);\n\n useEffect(() => {\n if (skipFinalScreen && onDone && !hasCalledOnDone.current) {\n hasCalledOnDone.current = true;\n onDone();\n }\n }, [skipFinalScreen, onDone]);\n\n if (skipFinalScreen) {\n return null;\n }\n\n const handleDone = () => {\n if (onDone) {\n onDone();\n }\n };\n\n const getTitle = () => {\n return 'Authentication Successful!';\n };\n\n const getMessageTop = () => 'Thanks for testing 01!';\n\n const getMessageBottom = () =>\n 'For any issues or feedback during this private testnet, message us on X @01_exchange';\n\n return (\n <div className=\"overflow-hidden relative\">\n <div className=\"space-y-8\">\n <div className=\"flex flex-col items-center justify-center pt-4\">\n <div className=\"mb-6\">\n {/* Success icon/animation */}\n <div className=\"w-20 h-20 rounded-full bg-green-900/30 flex items-center justify-center\">\n <svg\n className=\"w-10 h-10 text-green-400\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n />\n </svg>\n </div>\n </div>\n\n <h2 className=\"text-2xl text-white font-semibold mb-2 text-center\">\n {getTitle()}\n </h2>\n\n <p className=\"text-sm text-neutral-300 text-center\">\n {getMessageTop()}\n </p>\n\n <p className=\"text-sm text-neutral-300 text-center\">\n {getMessageBottom()}\n </p>\n\n {/* Display wallet address if available */}\n {address && (\n <p className=\"text-sm text-neutral-400 text-center mt-2\">\n Wallet: {address.substring(0, 6)}...\n {address.substring(address.length - 4)}\n </p>\n )}\n </div>\n\n <button\n onClick={handleDone}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n className={`\n group relative w-full overflow-hidden rounded-md border-2 bg-neutral-950 py-4 text-center\n transition-all duration-300 ${ANIMATION_EASE}\n cursor-pointer border-n1-ww-border hover:border-n1-ww-border\n `}\n style={{\n transform: isHovered ? 'scale(0.99)' : 'scale(1)',\n }}\n >\n <span\n className={`\n text-base font-medium tracking-wide transition-colors duration-300 ${ANIMATION_EASE}\n text-n1-ww-gray-300 group-hover:text-white\n `}\n >\n Open App\n </span>\n </button>\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function ErrorScreen(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
import { useN1WalletContext } from '../../../Provider/hooks';
|
|
4
|
+
import { ANIMATION_EASE } from '../constants';
|
|
5
|
+
import { useFlowStateContext } from '../context/FlowContext';
|
|
6
|
+
import { isNordConfigured } from '../utils/nordUtils';
|
|
7
|
+
export function ErrorScreen() {
|
|
8
|
+
var _a = useFlowStateContext(), context = _a.context, transition = _a.transition;
|
|
9
|
+
var _b = useState(null), isHovered = _b[0], setIsHovered = _b[1];
|
|
10
|
+
var nord = useN1WalletContext().nord;
|
|
11
|
+
var _c = useState(false), isNordError = _c[0], setIsNordError = _c[1];
|
|
12
|
+
var error = context.error;
|
|
13
|
+
// Check if the error is related to Nord
|
|
14
|
+
useEffect(function () {
|
|
15
|
+
if (error &&
|
|
16
|
+
error.message &&
|
|
17
|
+
(error.message.includes('Nord') ||
|
|
18
|
+
error.message.includes('nord') ||
|
|
19
|
+
(error.name && error.name.includes('Nord')))) {
|
|
20
|
+
setIsNordError(true);
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
setIsNordError(false);
|
|
24
|
+
}
|
|
25
|
+
}, [error]);
|
|
26
|
+
// Get a user-friendly error message
|
|
27
|
+
var getErrorMessage = function () {
|
|
28
|
+
if (!error)
|
|
29
|
+
return 'An unexpected error occurred';
|
|
30
|
+
// Check for specific Nord-related errors
|
|
31
|
+
if (isNordError) {
|
|
32
|
+
if (error.message.includes('connection') ||
|
|
33
|
+
error.message.includes('network')) {
|
|
34
|
+
return 'Failed to connect to Nord. Please check your network connection and try again.';
|
|
35
|
+
}
|
|
36
|
+
if (error.message.includes('authentication') ||
|
|
37
|
+
error.message.includes('auth')) {
|
|
38
|
+
return 'Authentication with Nord failed. Please try again.';
|
|
39
|
+
}
|
|
40
|
+
if (error.message.includes('deposit') ||
|
|
41
|
+
error.message.includes('transaction')) {
|
|
42
|
+
return 'Failed to process your deposit. Please try again.';
|
|
43
|
+
}
|
|
44
|
+
return "Nord error: ".concat(error.message);
|
|
45
|
+
}
|
|
46
|
+
// Generic wallet errors
|
|
47
|
+
if (error.message.includes('wallet') || error.message.includes('Wallet')) {
|
|
48
|
+
return 'There was an issue with your wallet connection. Please try again.';
|
|
49
|
+
}
|
|
50
|
+
// Default error message
|
|
51
|
+
return error.message;
|
|
52
|
+
};
|
|
53
|
+
var errorMessage = getErrorMessage();
|
|
54
|
+
// Get a suggestion based on the error
|
|
55
|
+
var getSuggestion = function () {
|
|
56
|
+
if (isNordError && nord && !isNordConfigured(nord)) {
|
|
57
|
+
return 'Nord is not properly configured. Please check your settings.';
|
|
58
|
+
}
|
|
59
|
+
if (isNordError) {
|
|
60
|
+
return 'You can try again or contact support if the issue persists.';
|
|
61
|
+
}
|
|
62
|
+
return 'Please try again or try a different wallet.';
|
|
63
|
+
};
|
|
64
|
+
return (_jsx("div", { className: "overflow-hidden relative", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex flex-col items-center justify-center py-4", children: [_jsx("div", { className: "mb-6", children: _jsx("div", { className: "w-20 h-20 rounded-full bg-red-900/30 flex items-center justify-center", children: _jsx("svg", { className: "w-10 h-10 text-red-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }) }), _jsx("h2", { className: "text-xl text-white font-semibold mb-2 text-center", children: isNordError ? 'Nord Error' : 'Something went wrong' }), _jsx("p", { className: "text-sm text-neutral-400 text-center mb-2 max-w-xs", children: errorMessage }), _jsx("p", { className: "text-xs text-neutral-500 text-center mb-6 max-w-xs", children: getSuggestion() })] }), _jsx("div", { className: "space-y-3", children: _jsx("button", { onClick: function () { }, onMouseEnter: function () { return setIsHovered('cancel'); }, onMouseLeave: function () { return setIsHovered(null); }, className: "\n group relative w-full overflow-hidden rounded-md border-2 border-n1-ww-border bg-neutral-900 py-4 text-center\n transition-all duration-300 ".concat(ANIMATION_EASE, "\n cursor-pointer hover:bg-neutral-950\n "), style: {
|
|
65
|
+
transform: isHovered === 'cancel' ? 'scale(0.99)' : 'scale(1)',
|
|
66
|
+
}, children: _jsx("span", { className: "\n text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n text-n1-ww-gray-400 group-hover:text-n1-ww-gray-300\n "), children: "Cancel" }) }) })] }) }));
|
|
67
|
+
}
|
|
68
|
+
//# sourceMappingURL=08-ErrorScreen.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"08-ErrorScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/08-ErrorScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { useN1WalletContext } from '../../../Provider/hooks';\nimport { ANIMATION_EASE } from '../constants';\nimport { useFlowStateContext } from '../context/FlowContext';\nimport { isNordConfigured } from '../utils/nordUtils';\n\nexport function ErrorScreen() {\n const { context, transition } = useFlowStateContext();\n const [isHovered, setIsHovered] = useState<'retry' | 'cancel' | null>(null);\n const { nord } = useN1WalletContext();\n const [isNordError, setIsNordError] = useState(false);\n const error = context.error;\n\n // Check if the error is related to Nord\n useEffect(() => {\n if (\n error &&\n error.message &&\n (error.message.includes('Nord') ||\n error.message.includes('nord') ||\n (error.name && error.name.includes('Nord')))\n ) {\n setIsNordError(true);\n } else {\n setIsNordError(false);\n }\n }, [error]);\n\n // Get a user-friendly error message\n const getErrorMessage = () => {\n if (!error) return 'An unexpected error occurred';\n\n // Check for specific Nord-related errors\n if (isNordError) {\n if (\n error.message.includes('connection') ||\n error.message.includes('network')\n ) {\n return 'Failed to connect to Nord. Please check your network connection and try again.';\n }\n\n if (\n error.message.includes('authentication') ||\n error.message.includes('auth')\n ) {\n return 'Authentication with Nord failed. Please try again.';\n }\n\n if (\n error.message.includes('deposit') ||\n error.message.includes('transaction')\n ) {\n return 'Failed to process your deposit. Please try again.';\n }\n\n return `Nord error: ${error.message}`;\n }\n\n // Generic wallet errors\n if (error.message.includes('wallet') || error.message.includes('Wallet')) {\n return 'There was an issue with your wallet connection. Please try again.';\n }\n\n // Default error message\n return error.message;\n };\n\n const errorMessage = getErrorMessage();\n\n // Get a suggestion based on the error\n const getSuggestion = () => {\n if (isNordError && nord && !isNordConfigured(nord)) {\n return 'Nord is not properly configured. Please check your settings.';\n }\n\n if (isNordError) {\n return 'You can try again or contact support if the issue persists.';\n }\n\n return 'Please try again or try a different wallet.';\n };\n\n\n return (\n <div className=\"overflow-hidden relative\">\n <div className=\"space-y-6\">\n <div className=\"flex flex-col items-center justify-center py-4\">\n <div className=\"mb-6\">\n {/* Error icon */}\n <div className=\"w-20 h-20 rounded-full bg-red-900/30 flex items-center justify-center\">\n <svg\n className=\"w-10 h-10 text-red-400\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n />\n </svg>\n </div>\n </div>\n\n <h2 className=\"text-xl text-white font-semibold mb-2 text-center\">\n {isNordError ? 'Nord Error' : 'Something went wrong'}\n </h2>\n\n <p className=\"text-sm text-neutral-400 text-center mb-2 max-w-xs\">\n {errorMessage}\n </p>\n\n <p className=\"text-xs text-neutral-500 text-center mb-6 max-w-xs\">\n {getSuggestion()}\n </p>\n </div>\n\n <div className=\"space-y-3\">\n {/* <button\n onClick={handleRetry}\n onMouseEnter={() => setIsHovered('retry')}\n onMouseLeave={() => setIsHovered(null)}\n className={`\n group relative w-full overflow-hidden rounded-md border-2 bg-neutral-950 py-4 text-center\n transition-all duration-300 ${ANIMATION_EASE}\n cursor-pointer border-n1-ww-border hover:border-n1-ww-border\n `}\n style={{\n transform: isHovered === 'retry' ? 'scale(0.99)' : 'scale(1)',\n }}\n >\n <span\n className={`\n text-base font-medium tracking-wide transition-colors duration-300 ${ANIMATION_EASE}\n text-n1-ww-gray-300 group-hover:text-white\n `}\n >\n Try Again\n </span>\n </button> */}\n\n <button\n onClick={() => { }}\n onMouseEnter={() => setIsHovered('cancel')}\n onMouseLeave={() => setIsHovered(null)}\n className={`\n group relative w-full overflow-hidden rounded-md border-2 border-n1-ww-border bg-neutral-900 py-4 text-center\n transition-all duration-300 ${ANIMATION_EASE}\n cursor-pointer hover:bg-neutral-950\n `}\n style={{\n transform: isHovered === 'cancel' ? 'scale(0.99)' : 'scale(1)',\n }}\n >\n <span\n className={`\n text-base font-medium tracking-wide transition-colors duration-300 ${ANIMATION_EASE}\n text-n1-ww-gray-400 group-hover:text-n1-ww-gray-300\n `}\n >\n Cancel\n </span>\n </button>\n </div>\n </div>\n </div>\n );\n}\n"]}
|