@n1xyz/wallet-widget 0.0.10 → 0.0.12
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/Logic/transactionManager.d.ts +1 -1
- package/dist/Logic/transactionManager.js +1 -1
- package/dist/Logic/transactionManager.js.map +1 -1
- package/dist/Modal/NordFlow/NordFlow.js +22 -228
- package/dist/Modal/NordFlow/NordFlow.js.map +1 -1
- package/dist/Modal/NordFlow/components/Header.d.ts +10 -0
- package/dist/Modal/NordFlow/components/Header.js +11 -0
- package/dist/Modal/NordFlow/components/Header.js.map +1 -0
- package/dist/Modal/NordFlow/components/TransactionTable.js +4 -7
- package/dist/Modal/NordFlow/components/TransactionTable.js.map +1 -1
- package/dist/Modal/NordFlow/components/index.d.ts +1 -0
- package/dist/Modal/NordFlow/components/index.js +1 -0
- package/dist/Modal/NordFlow/components/index.js.map +1 -1
- package/dist/Modal/NordFlow/constants.js +116 -95
- package/dist/Modal/NordFlow/constants.js.map +1 -1
- package/dist/Modal/NordFlow/context/DepositContext.d.ts +27 -0
- package/dist/Modal/NordFlow/context/DepositContext.js +308 -0
- package/dist/Modal/NordFlow/context/DepositContext.js.map +1 -0
- package/dist/Modal/NordFlow/context/FlowContext.d.ts +23 -0
- package/dist/Modal/NordFlow/context/FlowContext.js +125 -0
- package/dist/Modal/NordFlow/context/FlowContext.js.map +1 -0
- package/dist/Modal/NordFlow/context/NordProvider.d.ts +10 -0
- package/dist/Modal/NordFlow/context/NordProvider.js +14 -0
- package/dist/Modal/NordFlow/context/NordProvider.js.map +1 -0
- package/dist/Modal/NordFlow/context/WalletConnectContext.d.ts +20 -0
- package/dist/Modal/NordFlow/context/WalletConnectContext.js +214 -0
- package/dist/Modal/NordFlow/context/WalletConnectContext.js.map +1 -0
- package/dist/Modal/NordFlow/context/deposit/types.d.ts +26 -0
- package/dist/Modal/NordFlow/context/deposit/types.js +2 -0
- package/dist/Modal/NordFlow/context/deposit/types.js.map +1 -0
- package/dist/Modal/NordFlow/context/deposit/useDepositAuth.d.ts +7 -0
- package/dist/Modal/NordFlow/context/deposit/useDepositAuth.js +113 -0
- package/dist/Modal/NordFlow/context/deposit/useDepositAuth.js.map +1 -0
- package/dist/Modal/NordFlow/context/deposit/useDepositTransaction.d.ts +20 -0
- package/dist/Modal/NordFlow/context/deposit/useDepositTransaction.js +235 -0
- package/dist/Modal/NordFlow/context/deposit/useDepositTransaction.js.map +1 -0
- package/dist/Modal/NordFlow/context/index.d.ts +5 -0
- package/dist/Modal/NordFlow/context/index.js +8 -0
- package/dist/Modal/NordFlow/context/index.js.map +1 -0
- package/dist/Modal/NordFlow/hooks/index.d.ts +3 -5
- package/dist/Modal/NordFlow/hooks/index.js +3 -5
- package/dist/Modal/NordFlow/hooks/index.js.map +1 -1
- package/dist/Modal/NordFlow/hooks/useDepositFlow.js +2 -4
- package/dist/Modal/NordFlow/hooks/useDepositFlow.js.map +1 -1
- package/dist/Modal/NordFlow/hooks/useNordInstance.d.ts +0 -6
- package/dist/Modal/NordFlow/hooks/useNordInstance.js +2 -358
- package/dist/Modal/NordFlow/hooks/useNordInstance.js.map +1 -1
- package/dist/Modal/NordFlow/hooks/useNordWalletConnect.d.ts +0 -1
- package/dist/Modal/NordFlow/hooks/useNordWalletConnect.js +0 -1
- package/dist/Modal/NordFlow/hooks/useNordWalletConnect.js.map +1 -1
- package/dist/Modal/NordFlow/screens/00-IdleScreen.d.ts +6 -0
- package/dist/Modal/NordFlow/screens/00-IdleScreen.js +9 -0
- package/dist/Modal/NordFlow/screens/00-IdleScreen.js.map +1 -0
- package/dist/Modal/NordFlow/screens/01-ConnectWalletScreen.d.ts +1 -6
- package/dist/Modal/NordFlow/screens/01-ConnectWalletScreen.js +10 -4
- package/dist/Modal/NordFlow/screens/01-ConnectWalletScreen.js.map +1 -1
- package/dist/Modal/NordFlow/screens/02-EvmWalletAuthScreen.d.ts +1 -5
- package/dist/Modal/NordFlow/screens/02-EvmWalletAuthScreen.js +9 -12
- package/dist/Modal/NordFlow/screens/02-EvmWalletAuthScreen.js.map +1 -1
- package/dist/Modal/NordFlow/screens/03-ChainSelectionScreen.d.ts +1 -7
- package/dist/Modal/NordFlow/screens/03-ChainSelectionScreen.js +9 -7
- package/dist/Modal/NordFlow/screens/03-ChainSelectionScreen.js.map +1 -1
- package/dist/Modal/NordFlow/screens/04-AmountInputScreen.d.ts +1 -13
- package/dist/Modal/NordFlow/screens/04-AmountInputScreen.js +59 -31
- package/dist/Modal/NordFlow/screens/04-AmountInputScreen.js.map +1 -1
- package/dist/Modal/NordFlow/screens/05-DepositProgressScreen.d.ts +1 -6
- package/dist/Modal/NordFlow/screens/05-DepositProgressScreen.js +8 -3
- package/dist/Modal/NordFlow/screens/05-DepositProgressScreen.js.map +1 -1
- package/dist/Modal/NordFlow/screens/06-DepositSuccessScreen.d.ts +1 -8
- package/dist/Modal/NordFlow/screens/06-DepositSuccessScreen.js +15 -4
- package/dist/Modal/NordFlow/screens/06-DepositSuccessScreen.js.map +1 -1
- package/dist/Modal/NordFlow/screens/07-AuthLoadingScreen.d.ts +1 -6
- package/dist/Modal/NordFlow/screens/07-AuthLoadingScreen.js +14 -120
- package/dist/Modal/NordFlow/screens/07-AuthLoadingScreen.js.map +1 -1
- package/dist/Modal/NordFlow/screens/08-FinalSuccessScreen.d.ts +1 -1
- package/dist/Modal/NordFlow/screens/08-FinalSuccessScreen.js +9 -4
- package/dist/Modal/NordFlow/screens/08-FinalSuccessScreen.js.map +1 -1
- package/dist/Modal/NordFlow/screens/09-ErrorScreen.d.ts +1 -7
- package/dist/Modal/NordFlow/screens/09-ErrorScreen.js +9 -9
- package/dist/Modal/NordFlow/screens/09-ErrorScreen.js.map +1 -1
- package/dist/Modal/NordFlow/screens/index.d.ts +1 -0
- package/dist/Modal/NordFlow/screens/index.js +1 -0
- package/dist/Modal/NordFlow/screens/index.js.map +1 -1
- package/dist/Modal/NordFlow/types.d.ts +0 -5
- package/dist/Modal/NordFlow/types.js +0 -1
- package/dist/Modal/NordFlow/types.js.map +1 -1
- package/dist/Modal/NordFlow/utils/index.d.ts +0 -1
- package/dist/Modal/NordFlow/utils/index.js +0 -1
- package/dist/Modal/NordFlow/utils/index.js.map +1 -1
- package/dist/Provider/LazyWalletProvider.js +2 -0
- package/dist/Provider/LazyWalletProvider.js.map +1 -1
- package/dist/Provider/N1WalletProvider.js +48 -63
- package/dist/Provider/N1WalletProvider.js.map +1 -1
- package/dist/Provider/WalletErrorBoundary.d.ts +10 -0
- package/dist/Provider/WalletErrorBoundary.js +39 -0
- package/dist/Provider/WalletErrorBoundary.js.map +1 -0
- package/dist/Provider/hooks/useNordUserInitialization.d.ts +20 -0
- package/dist/Provider/hooks/useNordUserInitialization.js +293 -0
- package/dist/Provider/hooks/useNordUserInitialization.js.map +1 -0
- package/dist/Provider/useN1WalletProvider.d.ts +37 -0
- package/dist/Provider/useN1WalletProvider.js +398 -0
- package/dist/Provider/useN1WalletProvider.js.map +1 -0
- package/dist/main.css +1 -1
- package/package.json +1 -1
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// todo: implement
|
|
2
3
|
import { useEffect, useState } from 'react';
|
|
3
4
|
import { LoadingSquares } from '../components/LoadingSquares';
|
|
4
5
|
import { ANIMATION_EASE } from '../constants';
|
|
6
|
+
import { useFlowStateContext } from '../context/FlowContext';
|
|
5
7
|
var AuthState;
|
|
6
8
|
(function (AuthState) {
|
|
7
9
|
AuthState["INITIAL"] = "initial";
|
|
8
10
|
AuthState["WAITING_FOR_SIGNATURE"] = "waiting_for_signature";
|
|
9
11
|
AuthState["SUCCESS"] = "success";
|
|
10
12
|
})(AuthState || (AuthState = {}));
|
|
11
|
-
export function EvmWalletAuthScreen(
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
13
|
+
export function EvmWalletAuthScreen() {
|
|
14
|
+
var transition = useFlowStateContext().transition;
|
|
15
|
+
var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
|
|
16
|
+
var _b = useState(AuthState.INITIAL), authState = _b[0], setAuthState = _b[1];
|
|
15
17
|
// Handle signature request
|
|
16
18
|
var handleSignatureRequest = function () {
|
|
17
19
|
setAuthState(AuthState.WAITING_FOR_SIGNATURE);
|
|
@@ -21,15 +23,10 @@ export function EvmWalletAuthScreen(_a) {
|
|
|
21
23
|
setAuthState(AuthState.SUCCESS);
|
|
22
24
|
}, 2000);
|
|
23
25
|
};
|
|
24
|
-
// When signature is successful, trigger
|
|
26
|
+
// When signature is successful, trigger transition after a brief success message
|
|
25
27
|
useEffect(function () {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
onAuth();
|
|
29
|
-
}, 1000);
|
|
30
|
-
return function () { return clearTimeout(timer_1); };
|
|
31
|
-
}
|
|
32
|
-
}, [authState, onAuth]);
|
|
28
|
+
// todo: implement
|
|
29
|
+
}, [authState, transition]);
|
|
33
30
|
// Render waiting for signature screen
|
|
34
31
|
if (authState === AuthState.WAITING_FOR_SIGNATURE) {
|
|
35
32
|
return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 space-y-6", children: [_jsx(LoadingSquares, {}), _jsxs("div", { className: "space-y-2 text-center w-[300px]", children: [_jsx("h3", { className: "text-xl text-n1-gray-800 dark:text-white font-semibold", children: "Waiting for Signature" }), _jsx("p", { className: "text-sm text-n1-gray-600 dark:text-neutral-400", children: "Please sign the message in your Ethereum wallet to authenticate with Solana" })] })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"02-EvmWalletAuthScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/02-EvmWalletAuthScreen.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"02-EvmWalletAuthScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/02-EvmWalletAuthScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["// todo: implement\nimport { useEffect, useState } from 'react';\nimport { LoadingSquares } from '../components/LoadingSquares';\nimport { ANIMATION_EASE } from '../constants';\nimport { useFlowStateContext } from '../context/FlowContext';\n\nenum AuthState {\n INITIAL = 'initial',\n WAITING_FOR_SIGNATURE = 'waiting_for_signature',\n SUCCESS = 'success',\n}\n\nexport function EvmWalletAuthScreen() {\n const { transition } = useFlowStateContext();\n const [isHovered, setIsHovered] = useState(false);\n const [authState, setAuthState] = useState<AuthState>(AuthState.INITIAL);\n\n // Handle signature request\n const handleSignatureRequest = () => {\n setAuthState(AuthState.WAITING_FOR_SIGNATURE);\n\n // Simulate signature process - in a real implementation,\n // this would be replaced with actual wallet signature logic\n setTimeout(() => {\n setAuthState(AuthState.SUCCESS);\n }, 2000);\n };\n\n // When signature is successful, trigger transition after a brief success message\n useEffect(() => {\n // todo: implement\n }, [authState, transition]);\n\n // Render waiting for signature screen\n if (authState === AuthState.WAITING_FOR_SIGNATURE) {\n return (\n <div className=\"flex flex-col items-center justify-center py-12 space-y-6\">\n <LoadingSquares />\n <div className=\"space-y-2 text-center w-[300px]\">\n <h3 className=\"text-xl text-n1-gray-800 dark:text-white font-semibold\">\n Waiting for Signature\n </h3>\n <p className=\"text-sm text-n1-gray-600 dark:text-neutral-400\">\n Please sign the message in your Ethereum wallet to authenticate with\n Solana\n </p>\n </div>\n </div>\n );\n }\n\n // Render success screen\n if (authState === AuthState.SUCCESS) {\n return (\n <div className=\"flex flex-col items-center justify-center py-12 space-y-6\">\n <div className=\"w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"h-8 w-8 text-green-600 dark:text-green-400\"\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=\"M5 13l4 4L19 7\"\n />\n </svg>\n </div>\n <div className=\"space-y-2 text-center w-[300px]\">\n <h3 className=\"text-xl text-n1-gray-800 dark:text-white font-semibold\">\n Signature Verified\n </h3>\n <p className=\"text-sm text-n1-gray-600 dark:text-neutral-400\">\n Your Ethereum wallet has been authenticated successfully\n </p>\n </div>\n </div>\n );\n }\n\n // Render initial screen\n return (\n <div className=\"overflow-hidden relative\">\n <div className=\"space-y-6\">\n <h2 className=\"text-xl text-n1-gray-800 dark:text-white font-semibold mb-2 text-center\">\n EVM Wallet Authentication\n </h2>\n <p className=\"text-sm text-n1-gray-600 dark:text-neutral-400 text-center mb-4\">\n You need to sign a message to authenticate your Ethereum wallet with\n Solana\n </p>\n\n <button\n onClick={handleSignatureRequest}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n className={`\n group relative w-full overflow-hidden rounded-md border-2 bg-n1-gray-100 dark:bg-neutral-950 py-4 text-center\n transition-all duration-300 ${ANIMATION_EASE}\n cursor-pointer border-n1-gray-200 dark:border-n1-gray-800 hover:border-n1-gray-400 dark:hover:border-white/60\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-gray-700 dark:text-n1-gray-300 group-hover:text-n1-gray-900 dark:group-hover:text-white\n `}\n >\n Sign Authentication Message\n </span>\n </button>\n </div>\n </div>\n );\n}\n\n// For backward compatibility\nexport { EvmWalletAuthScreen as EthToSolAuthScreen };\n"]}
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
|
|
2
|
-
interface ChainSelectionScreenProps {
|
|
3
|
-
chains: Chain[];
|
|
4
|
-
onChainSelect: (chainId: string) => void;
|
|
5
|
-
}
|
|
6
|
-
export declare function ChainSelectionScreen({ onChainSelect, }: ChainSelectionScreenProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
|
1
|
+
export declare function ChainSelectionScreen(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,27 +1,29 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
+
import Logo from '../../../components/Logo';
|
|
4
|
+
import { SolanaLogo } from '../../../components/logos';
|
|
3
5
|
import { SolanaNetwork } from '../../../config/solana';
|
|
6
|
+
import { logger } from '../../../utils/logger';
|
|
4
7
|
import { ChainButton } from '../components/ChainButton';
|
|
5
8
|
import { EVMChainsButton } from '../components/EVMChainsButton';
|
|
6
9
|
import { MoreButton } from '../components/MoreButton';
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
9
|
-
import { logger } from '../../../utils/logger';
|
|
10
|
+
import { useFlowStateContext } from '../context/FlowContext';
|
|
11
|
+
import { FlowState } from '../types';
|
|
10
12
|
// Custom N1Logo wrapper that responds to the group hover state
|
|
11
13
|
var N1Logo = function (_a) {
|
|
12
14
|
var _b = _a.size, size = _b === void 0 ? 38 : _b;
|
|
13
15
|
return (_jsx("div", { className: "text-n1-gray-800 dark:text-white group-hover:text-red-500 dark:group-hover:text-red-500 transition-colors duration-200", children: _jsx(Logo, { size: size }) }));
|
|
14
16
|
};
|
|
15
|
-
export function ChainSelectionScreen(
|
|
16
|
-
var
|
|
17
|
-
var
|
|
17
|
+
export function ChainSelectionScreen() {
|
|
18
|
+
var transition = useFlowStateContext().transition;
|
|
19
|
+
var _a = useState(false), isLoading = _a[0], setIsLoading = _a[1];
|
|
18
20
|
// Only allow devnet, gray out other chains
|
|
19
21
|
var handleChainSelect = function (chainId) {
|
|
20
22
|
logger.debug('Chain selected in ChainSelectionScreen:', chainId);
|
|
21
23
|
// Only allow devnet to be selected
|
|
22
24
|
if (chainId === 'devnet') {
|
|
23
25
|
setIsLoading(true);
|
|
24
|
-
|
|
26
|
+
transition(FlowState.AMOUNT_INPUT, { selectedChain: chainId });
|
|
25
27
|
}
|
|
26
28
|
else {
|
|
27
29
|
logger.debug('Chain not allowed:', chainId);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"03-ChainSelectionScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/03-ChainSelectionScreen.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"03-ChainSelectionScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/03-ChainSelectionScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport Logo from '../../../components/Logo';\nimport { SolanaLogo } from '../../../components/logos';\nimport { SolanaNetwork } from '../../../config/solana';\nimport { logger } from '../../../utils/logger';\nimport { ChainButton } from '../components/ChainButton';\nimport { EVMChainsButton } from '../components/EVMChainsButton';\nimport { MoreButton } from '../components/MoreButton';\nimport { useFlowStateContext } from '../context/FlowContext';\nimport { FlowState } from '../types';\n\n// Custom N1Logo wrapper that responds to the group hover state\nconst N1Logo = ({ size = 38 }) => (\n <div className=\"text-n1-gray-800 dark:text-white group-hover:text-red-500 dark:group-hover:text-red-500 transition-colors duration-200\">\n <Logo size={size} />\n </div>\n);\n\nexport function ChainSelectionScreen() {\n const { transition } = useFlowStateContext();\n const [isLoading, setIsLoading] = useState(false);\n\n // Only allow devnet, gray out other chains\n const handleChainSelect = (chainId: string) => {\n logger.debug('Chain selected in ChainSelectionScreen:', chainId);\n\n // Only allow devnet to be selected\n if (chainId === 'devnet') {\n setIsLoading(true);\n transition(FlowState.AMOUNT_INPUT, { selectedChain: chainId });\n } else {\n logger.debug('Chain not allowed:', chainId);\n // Could show a toast or message here\n }\n };\n\n // Define the 4 options as requested\n const chainsWithNetworkInfo = [\n {\n id: 'devnet',\n name: 'Devnet',\n logo: (\n <div\n className=\"flex items-center justify-center\"\n style={{ width: 48, height: 48 }}\n >\n <N1Logo />\n </div>\n ),\n network: SolanaNetwork.DEVNET,\n disabled: false, // Only devnet is clickable\n },\n {\n id: 'solana',\n name: 'Solana',\n logo: (\n <div\n className=\"flex items-center justify-center\"\n style={{ width: 48, height: 48 }}\n >\n <SolanaLogo width={36} height={36} />\n </div>\n ),\n network: SolanaNetwork.MAINNET,\n disabled: true,\n },\n {\n id: 'evm-chains',\n name: 'EVM Chains',\n logo: '', // Not needed as we're using EVMChainsButton\n network: '', // Empty string instead of null\n disabled: true,\n },\n {\n id: 'more',\n name: 'More',\n logo: '', // Not needed as we're using MoreButton\n network: '', // Empty string instead of null\n disabled: true,\n },\n ];\n\n return (\n <div className=\"overflow-hidden relative\">\n <h2 className=\"text-xl text-n1-gray-800 dark:text-white font-semibold mb-6 text-center\">\n Select Origin Network\n </h2>\n\n {isLoading ? (\n <div className=\"flex justify-center items-center py-8\">\n <div className=\"n1-animate-spin rounded-full h-8 w-8 border-b-2 border-n1-main\"></div>\n </div>\n ) : (\n <div className=\"space-y-8\">\n {/* First row: Devnet, Solana */}\n <div className=\"grid grid-cols-2 gap-4\">\n <ChainButton\n key={chainsWithNetworkInfo[0].id}\n chain={chainsWithNetworkInfo[0]}\n onClick={() => handleChainSelect(chainsWithNetworkInfo[0].id)}\n disabled={chainsWithNetworkInfo[0].disabled}\n />\n <ChainButton\n key={chainsWithNetworkInfo[1].id}\n chain={chainsWithNetworkInfo[1]}\n onClick={() => handleChainSelect(chainsWithNetworkInfo[1].id)}\n disabled={chainsWithNetworkInfo[1].disabled}\n />\n </div>\n\n {/* Second row: EVM Chains, More */}\n <div className=\"grid grid-cols-2 gap-4\">\n <EVMChainsButton\n key={chainsWithNetworkInfo[2].id}\n chain={chainsWithNetworkInfo[2]}\n onClick={() => handleChainSelect(chainsWithNetworkInfo[2].id)}\n disabled={chainsWithNetworkInfo[2].disabled}\n />\n <MoreButton\n key={chainsWithNetworkInfo[3].id}\n chain={chainsWithNetworkInfo[3]}\n onClick={() => handleChainSelect(chainsWithNetworkInfo[3].id)}\n disabled={chainsWithNetworkInfo[3].disabled}\n />\n </div>\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -1,13 +1 @@
|
|
|
1
|
-
|
|
2
|
-
amount: string;
|
|
3
|
-
onAmountChange: (amount: string) => void;
|
|
4
|
-
onContinue: () => void;
|
|
5
|
-
balance: number;
|
|
6
|
-
faucetUrl?: string;
|
|
7
|
-
refreshBalance?: () => Promise<void>;
|
|
8
|
-
depositError?: string;
|
|
9
|
-
}
|
|
10
|
-
export declare function AmountInputScreen({ amount: _amount, // Renamed to _amount since we're not using the prop
|
|
11
|
-
onAmountChange, onContinue, balance: _balance, // Renamed to _balance since we're overriding it
|
|
12
|
-
faucetUrl: propFaucetUrl, refreshBalance, depositError, }: AmountInputScreenProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
export {};
|
|
1
|
+
export declare function AmountInputScreen(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -40,29 +40,31 @@ import { useN1WalletContext, useN1WalletInternalContext, } from '../../../Provid
|
|
|
40
40
|
import { ImageWithFallback } from '../components';
|
|
41
41
|
import { ANIMATION_EASE } from '../constants';
|
|
42
42
|
import { formatAmount, isNordConfigured } from '../utils/nordUtils';
|
|
43
|
-
|
|
43
|
+
import { useDepositContext } from '../context/DepositContext';
|
|
44
|
+
import { useFlowStateContext } from '../context/FlowContext';
|
|
45
|
+
import { LoadingSquares } from '../components/LoadingSquares';
|
|
46
|
+
export function AmountInputScreen() {
|
|
44
47
|
var _this = this;
|
|
45
|
-
var
|
|
46
|
-
|
|
47
|
-
|
|
48
|
+
var context = useFlowStateContext().context;
|
|
49
|
+
var _a = useDepositContext(), updateAmount = _a.updateAmount, startDeposit = _a.startDeposit;
|
|
50
|
+
var _b = useN1WalletContext(), address = _b.address, nord = _b.nord;
|
|
51
|
+
var contextFaucetUrl = useN1WalletInternalContext().faucetUrl;
|
|
48
52
|
// Hard code amount to 100
|
|
49
53
|
var amount = '100';
|
|
50
54
|
// Hard code balance to 0 to allow faucet to trigger
|
|
51
|
-
var balance =
|
|
55
|
+
var balance = 100;
|
|
52
56
|
// Force the amount to be 100 on component mount only, not on every render
|
|
53
57
|
useEffect(function () {
|
|
54
|
-
|
|
58
|
+
updateAmount('100');
|
|
55
59
|
// Empty dependency array ensures this only runs once on mount
|
|
56
|
-
}, []);
|
|
57
|
-
var
|
|
58
|
-
var
|
|
59
|
-
var
|
|
60
|
-
var
|
|
61
|
-
var
|
|
62
|
-
var _g = useN1WalletContext(), address = _g.address, nord = _g.nord;
|
|
63
|
-
var contextFaucetUrl = useN1WalletInternalContext().faucetUrl;
|
|
60
|
+
}, [updateAmount]);
|
|
61
|
+
var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
|
|
62
|
+
var _d = useState(false), isFaucetLoading = _d[0], setIsFaucetLoading = _d[1];
|
|
63
|
+
var _e = useState(null), faucetError = _e[0], setFaucetError = _e[1];
|
|
64
|
+
var _f = useState(false), tokensObtained = _f[0], setTokensObtained = _f[1];
|
|
65
|
+
var _g = useState(false), showFaucetSuccess = _g[0], setShowFaucetSuccess = _g[1];
|
|
64
66
|
var prevBalanceRef = useRef(balance);
|
|
65
|
-
var faucetUrl =
|
|
67
|
+
var faucetUrl = contextFaucetUrl;
|
|
66
68
|
// Get token information from Nord if available
|
|
67
69
|
var _h = useState('USDC'), tokenSymbol = _h[0], setTokenSymbol = _h[1];
|
|
68
70
|
var _j = useState('/images/tokens/usdc.svg'), tokenLogo = _j[0], setTokenLogo = _j[1];
|
|
@@ -88,25 +90,46 @@ export function AmountInputScreen(_a) {
|
|
|
88
90
|
// Removed handleAmountChange since we don't want user to edit the amount
|
|
89
91
|
// todo:fix
|
|
90
92
|
var isValidAmount = true;
|
|
91
|
-
// Hard code MIN_DEPOSIT to 100
|
|
92
93
|
var hardcodedMinDeposit = 100;
|
|
93
|
-
// Hard code MAX_DEPOSIT to 100
|
|
94
|
-
var hardcodedMaxDeposit = 100;
|
|
95
94
|
// Check if faucet is enabled and balance is low
|
|
96
|
-
var shouldShowFaucet = faucetUrl &&
|
|
95
|
+
var shouldShowFaucet = faucetUrl && !tokensObtained;
|
|
97
96
|
// Determine if we should show the faucet overlay
|
|
98
97
|
var showFaucetOverlay = (shouldShowFaucet && (isFaucetLoading || faucetError)) || showFaucetSuccess;
|
|
98
|
+
// Function to refresh balances
|
|
99
|
+
var refreshBalance = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
100
|
+
return __generator(this, function (_a) {
|
|
101
|
+
try {
|
|
102
|
+
console.log('Refreshing balance...');
|
|
103
|
+
// Implementation would depend on your actual data structure
|
|
104
|
+
// If we have a nordUser, try to refresh balances using Nord-TS
|
|
105
|
+
if (nord && isNordConfigured(nord)) {
|
|
106
|
+
try {
|
|
107
|
+
// This is a placeholder - in a real implementation, you would use the correct method
|
|
108
|
+
console.log('Refreshing balances using Nord-TS');
|
|
109
|
+
}
|
|
110
|
+
catch (error) {
|
|
111
|
+
console.warn('Error refreshing balances using Nord-TS, falling back to default method:', error);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
catch (error) {
|
|
116
|
+
console.error('Error refreshing balance:', error);
|
|
117
|
+
}
|
|
118
|
+
return [2 /*return*/];
|
|
119
|
+
});
|
|
120
|
+
}); }, [nord]);
|
|
99
121
|
// Function to request tokens from faucet
|
|
100
122
|
var requestTestnetTokens = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
101
123
|
var response, errorData, error_1;
|
|
102
124
|
return __generator(this, function (_a) {
|
|
103
125
|
switch (_a.label) {
|
|
104
126
|
case 0:
|
|
127
|
+
console.log('requestTestnetTokens', faucetUrl, address);
|
|
105
128
|
if (!faucetUrl || !address)
|
|
106
129
|
return [2 /*return*/];
|
|
107
130
|
_a.label = 1;
|
|
108
131
|
case 1:
|
|
109
|
-
_a.trys.push([1, 8, 9
|
|
132
|
+
_a.trys.push([1, 7, 8, 9]);
|
|
110
133
|
setIsFaucetLoading(true);
|
|
111
134
|
setFaucetError(null);
|
|
112
135
|
setShowFaucetSuccess(false);
|
|
@@ -133,23 +156,22 @@ export function AmountInputScreen(_a) {
|
|
|
133
156
|
setTokensObtained(true);
|
|
134
157
|
// Show success message
|
|
135
158
|
setShowFaucetSuccess(true);
|
|
136
|
-
|
|
159
|
+
// Refresh balance
|
|
137
160
|
return [4 /*yield*/, refreshBalance()];
|
|
138
161
|
case 6:
|
|
162
|
+
// Refresh balance
|
|
139
163
|
_a.sent();
|
|
140
|
-
_a.label = 7;
|
|
141
|
-
case 7:
|
|
142
164
|
setShowFaucetSuccess(false);
|
|
143
|
-
return [3 /*break*/,
|
|
144
|
-
case
|
|
165
|
+
return [3 /*break*/, 9];
|
|
166
|
+
case 7:
|
|
145
167
|
error_1 = _a.sent();
|
|
146
168
|
console.error('Faucet error:', error_1);
|
|
147
169
|
setFaucetError(error_1 instanceof Error ? error_1.message : 'Failed to request tokens');
|
|
148
|
-
return [3 /*break*/,
|
|
149
|
-
case
|
|
170
|
+
return [3 /*break*/, 9];
|
|
171
|
+
case 8:
|
|
150
172
|
setIsFaucetLoading(false);
|
|
151
173
|
return [7 /*endfinally*/];
|
|
152
|
-
case
|
|
174
|
+
case 9: return [2 /*return*/];
|
|
153
175
|
}
|
|
154
176
|
});
|
|
155
177
|
}); }, [faucetUrl, address, refreshBalance]);
|
|
@@ -159,7 +181,7 @@ export function AmountInputScreen(_a) {
|
|
|
159
181
|
!isFaucetLoading &&
|
|
160
182
|
!faucetError &&
|
|
161
183
|
!showFaucetSuccess &&
|
|
162
|
-
depositError == null) {
|
|
184
|
+
context.depositError == null) {
|
|
163
185
|
requestTestnetTokens();
|
|
164
186
|
}
|
|
165
187
|
}, [
|
|
@@ -168,6 +190,7 @@ export function AmountInputScreen(_a) {
|
|
|
168
190
|
faucetError,
|
|
169
191
|
showFaucetSuccess,
|
|
170
192
|
requestTestnetTokens,
|
|
193
|
+
context.depositError
|
|
171
194
|
]);
|
|
172
195
|
// Reset tokensObtained state if balance changes to a higher value
|
|
173
196
|
useEffect(function () {
|
|
@@ -181,8 +204,13 @@ export function AmountInputScreen(_a) {
|
|
|
181
204
|
}, [balance, hardcodedMinDeposit]);
|
|
182
205
|
// Format the balance with the appropriate number of decimal places
|
|
183
206
|
var formattedBalance = formatAmount(balance, tokenDecimals);
|
|
184
|
-
return (_jsxs("div", { className: "overflow-hidden relative", children: [showFaucetOverlay && (_jsx("div", { className: "absolute inset-0 z-10 bg-white/70 dark:bg-neutral-900/80 backdrop-blur-md flex flex-col items-center justify-center p-6", children: isFaucetLoading ? (_jsxs(_Fragment, { children: [_jsx(
|
|
207
|
+
return (_jsxs("div", { className: "overflow-hidden relative", children: [showFaucetOverlay && (_jsx("div", { className: "absolute inset-0 z-10 bg-white/70 dark:bg-neutral-900/80 backdrop-blur-md flex flex-col items-center justify-center p-6", children: isFaucetLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingSquares, {}), _jsxs("div", { className: "space-y-2 text-center mt-4", children: [_jsx("h3", { className: "text-xl text-n1-gray-800 dark:text-white font-semibold", children: "Obtaining Testnet Tokens" }), _jsx("p", { className: "text-sm text-n1-gray-500 dark:text-neutral-400", children: "Please wait while we request testnet tokens for your wallet..." })] })] })) : showFaucetSuccess ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-green-500 text-5xl mb-4 n1-animate-fade-up", children: "\u2713" }), _jsxs("div", { className: "space-y-2 text-center", children: [_jsx("h3", { className: "text-xl text-n1-gray-800 dark:text-white font-semibold", children: "Tokens Obtained Successfully" }), _jsx("p", { className: "text-sm text-green-500 dark:text-green-400", children: "Your wallet has been funded with testnet tokens." }), _jsx("p", { className: "text-sm text-n1-gray-500 dark:text-neutral-400 mt-2", children: "Please wait while your balance updates..." })] })] })) : faucetError ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-red-500 text-5xl mb-4 n1-animate-fade-up", children: "\u26A0\uFE0F" }), _jsxs("div", { className: "space-y-2 text-center", children: [_jsx("h3", { className: "text-xl text-n1-gray-800 dark:text-white font-semibold", children: "Failed to Get Tokens" }), _jsx("p", { className: "text-sm text-red-500 dark:text-red-400", children: faucetError }), _jsx("button", { onClick: requestTestnetTokens, className: "mt-4 px-4 py-2 bg-n1-main text-white rounded-sm hover:bg-n1-main/90 transition-colors", children: "Try Again" })] })] })) : null })), _jsx("h2", { className: "text-xl text-n1-gray-800 dark:text-white font-semibold mb-6 text-center", children: "Enter Amount" }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "relative border-2 border-n1-gray-200 dark:border-n1-gray-800 bg-n1-gray-100 dark:bg-n1-gray-900 rounded-sm p-0 overflow-hidden n1-animate-fade-up", style: { animationDelay: '0.1s' }, children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b border-n1-gray-200 dark:border-n1-gray-800 bg-white/30 dark:bg-black/10", children: [_jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("div", { className: "w-8 h-8 rounded-full overflow-hidden bg-white dark:bg-n1-gray-800 flex items-center justify-center shadow-sm", children: _jsx(ImageWithFallback, { src: tokenLogo, alt: tokenSymbol, width: 24, height: 24, fallbackText: tokenSymbol.charAt(0), fallbackClassName: "w-6 h-6 rounded-full flex items-center justify-center", fallbackBgColor: "bg-blue-100 dark:bg-blue-900", fallbackTextColor: "text-blue-500 dark:text-blue-300" }) }), _jsx("span", { className: "text-n1-gray-800 dark:text-white font-medium", children: tokenSymbol })] }), _jsx("div", { className: "text-xs rounded-sm bg-n1-gray-200 dark:bg-n1-gray-800 px-2 py-1 text-n1-gray-600 dark:text-n1-gray-300", children: "Fixed Amount" })] }), _jsxs("div", { className: "relative p-6 flex flex-col items-center", children: [_jsxs("div", { className: "relative flex items-baseline justify-center w-full", children: [_jsx("span", { className: "text-4xl font-bold text-n1-gray-800 dark:text-white mr-1 n1-animate-fade-up", style: { animationDelay: '0.2s' }, children: amount }), _jsx("span", { className: "text-xl text-n1-gray-500 dark:text-neutral-400 ml-1 n1-animate-fade-up", style: { animationDelay: '0.3s' }, children: tokenSymbol })] }), _jsx("div", { className: "w-16 h-1 bg-n1-gray-200 dark:bg-n1-gray-800 rounded-full mt-4 mb-2" }), _jsx("div", { className: "flex justify-center items-center text-sm mt-2 w-full n1-animate-fade-up", style: { animationDelay: '0.4s' }, children: _jsxs("span", { className: "text-n1-gray-500 dark:text-neutral-400", children: ["Balance: ", formattedBalance, " ", tokenSymbol] }) })] })] }), context.depositError && (_jsx("div", { className: "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 p-3 rounded-sm text-sm border border-red-200 dark:border-red-800 n1-animate-fade-up", style: { animationDelay: '0.5s' }, children: context.depositError })), _jsx("button", { onClick: startDeposit, disabled: !isValidAmount, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "\n group relative w-full overflow-hidden rounded-sm border-2 bg-n1-gray-100 dark:bg-neutral-950 py-4 text-center\n transition-all duration-300 ".concat(ANIMATION_EASE, " n1-animate-fade-up\n ").concat(isValidAmount
|
|
208
|
+
? 'cursor-pointer border-n1-gray-200 dark:border-n1-gray-800 hover:border-n1-gray-400 dark:hover:border-white/60'
|
|
209
|
+
: 'cursor-not-allowed border-n1-gray-200 dark:border-n1-gray-800 opacity-50', "\n "), style: {
|
|
185
210
|
transform: isHovered && isValidAmount ? 'scale(0.99)' : 'scale(1)',
|
|
186
|
-
|
|
211
|
+
animationDelay: '0.6s'
|
|
212
|
+
}, children: _jsx("span", { className: "\n text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n ").concat(isValidAmount
|
|
213
|
+
? 'text-n1-gray-700 dark:text-n1-gray-300 group-hover:text-n1-gray-900 dark:group-hover:text-white'
|
|
214
|
+
: 'text-n1-gray-400 dark:text-n1-gray-600', "\n "), children: "Continue" }) })] })] }));
|
|
187
215
|
}
|
|
188
216
|
//# sourceMappingURL=04-AmountInputScreen.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"04-AmountInputScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/04-AmountInputScreen.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EACL,kBAAkB,EAClB,0BAA0B,GAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAYpE,MAAM,UAAU,iBAAiB,CAAC,EAQT;IARzB,iBAkUC;QAjUS,OAAO,YAAA,EAAE,oDAAoD;IACrE,cAAc,oBAAA,EACd,UAAU,gBAAA,EACD,QAAQ,aAAA,EAAE,gDAAgD;IACxD,aAAa,eAAA,EACxB,cAAc,oBAAA,EACd,YAAY,kBAAA;IAEZ,0BAA0B;IAC1B,IAAM,MAAM,GAAG,KAAK,CAAC;IACrB,oDAAoD;IACpD,IAAM,OAAO,GAAG,CAAC,CAAC;IAElB,0EAA0E;IAC1E,SAAS,CAAC;QACR,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,8DAA8D;IAChE,CAAC,EAAE,EAAE,CAAC,CAAC;IAED,IAAA,KAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAC;IAC5C,IAAA,KAAwC,QAAQ,CAAC,KAAK,CAAC,EAAtD,eAAe,QAAA,EAAE,kBAAkB,QAAmB,CAAC;IACxD,IAAA,KAAgC,QAAQ,CAAgB,IAAI,CAAC,EAA5D,WAAW,QAAA,EAAE,cAAc,QAAiC,CAAC;IAC9D,IAAA,KAAsC,QAAQ,CAAC,KAAK,CAAC,EAApD,cAAc,QAAA,EAAE,iBAAiB,QAAmB,CAAC;IACtD,IAAA,KAA4C,QAAQ,CAAC,KAAK,CAAC,EAA1D,iBAAiB,QAAA,EAAE,oBAAoB,QAAmB,CAAC;IAC5D,IAAA,KAAoB,kBAAkB,EAAE,EAAtC,OAAO,aAAA,EAAE,IAAI,UAAyB,CAAC;IACvC,IAAW,gBAAgB,GAAK,0BAA0B,EAAE,UAAjC,CAAkC;IACrE,IAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAEvC,IAAM,SAAS,GAAG,aAAa,IAAI,gBAAgB,CAAC;IAEpD,+CAA+C;IACzC,IAAA,KAAgC,QAAQ,CAAC,MAAM,CAAC,EAA/C,WAAW,QAAA,EAAE,cAAc,QAAoB,CAAC;IACjD,IAAA,KAA4B,QAAQ,CAAC,yBAAyB,CAAC,EAA9D,SAAS,QAAA,EAAE,YAAY,QAAuC,CAAC;IAChE,IAAA,KAAoC,QAAQ,CAAC,CAAC,CAAC,EAA9C,aAAa,QAAA,EAAE,gBAAgB,QAAe,CAAC;IAEtD,yCAAyC;IACzC,SAAS,CAAC;QACR,IAAI,IAAI,IAAI,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC;gBACH,yCAAyC;gBACzC,IAAM,SAAS,GACb,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,MAAM,KAAK,MAAM,EAAnB,CAAmB,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBACtE,IAAI,SAAS,EAAE,CAAC;oBACd,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;oBACjC,sCAAsC;oBACtC,YAAY,CAAC,yBAAkB,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,SAAM,CAAC,CAAC;oBACrE,gBAAgB,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;gBACvC,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,IAAI,CAAC,4CAA4C,EAAE,KAAK,CAAC,CAAC;YACpE,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,yEAAyE;IAEzE,WAAW;IACX,IAAM,aAAa,GAAG,IAAI,CAAC;IAE3B,+BAA+B;IAC/B,IAAM,mBAAmB,GAAG,GAAG,CAAC;IAChC,+BAA+B;IAC/B,IAAM,mBAAmB,GAAG,GAAG,CAAC;IAEhC,gDAAgD;IAChD,IAAM,gBAAgB,GACpB,SAAS,IAAI,OAAO,GAAG,mBAAmB,IAAI,CAAC,cAAc,CAAC;IAEhE,iDAAiD;IACjD,IAAM,iBAAiB,GACrB,CAAC,gBAAgB,IAAI,CAAC,eAAe,IAAI,WAAW,CAAC,CAAC,IAAI,iBAAiB,CAAC;IAE9E,yCAAyC;IACzC,IAAM,oBAAoB,GAAG,WAAW,CAAC;;;;;oBACvC,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO;wBAAE,sBAAO;;;;oBAGjC,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBACzB,cAAc,CAAC,IAAI,CAAC,CAAC;oBACrB,oBAAoB,CAAC,KAAK,CAAC,CAAC;oBAEX,qBAAM,KAAK,CAAC,SAAS,EAAE;4BACtC,MAAM,EAAE,MAAM;4BACd,OAAO,EAAE;gCACP,cAAc,EAAE,kBAAkB;6BACnC;4BACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,SAAA,EAAE,CAAC;yBAClC,CAAC,EAAA;;oBANI,QAAQ,GAAG,SAMf;yBAEE,CAAC,QAAQ,CAAC,EAAE,EAAZ,wBAAY;oBACI,qBAAM,QAAQ;6BAC7B,IAAI,EAAE;6BACN,KAAK,CAAC,cAAM,OAAA,CAAC,EAAE,KAAK,EAAE,0BAA0B,EAAE,CAAC,EAAvC,CAAuC,CAAC,EAAA;;oBAFjD,SAAS,GAAG,SAEqC;oBACvD,MAAM,IAAI,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI,0BAA0B,CAAC,CAAC;wBAGjE,qBAAM,QAAQ,CAAC,IAAI,EAAE,EAAA;;oBAArB,SAAqB,CAAC;oBAEtB,sDAAsD;oBACtD,iBAAiB,CAAC,IAAI,CAAC,CAAC;oBAExB,uBAAuB;oBACvB,oBAAoB,CAAC,IAAI,CAAC,CAAC;yBAGvB,cAAc,EAAd,wBAAc;oBAChB,qBAAM,cAAc,EAAE,EAAA;;oBAAtB,SAAsB,CAAC;;;oBAGzB,oBAAoB,CAAC,KAAK,CAAC,CAAC;;;;oBAE5B,OAAO,CAAC,KAAK,CAAC,eAAe,EAAE,OAAK,CAAC,CAAC;oBACtC,cAAc,CACZ,OAAK,YAAY,KAAK,CAAC,CAAC,CAAC,OAAK,CAAC,OAAO,CAAC,CAAC,CAAC,0BAA0B,CACpE,CAAC;;;oBAEF,kBAAkB,CAAC,KAAK,CAAC,CAAC;;;;;SAE7B,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;IAEzC,yEAAyE;IACzE,SAAS,CAAC;QACR,IACE,gBAAgB;YAChB,CAAC,eAAe;YAChB,CAAC,WAAW;YACZ,CAAC,iBAAiB;YAClB,YAAY,IAAI,IAAI,EACpB,CAAC;YACD,oBAAoB,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,EAAE;QACD,gBAAgB;QAChB,eAAe;QACf,WAAW;QACX,iBAAiB;QACjB,oBAAoB;KACrB,CAAC,CAAC;IAEH,kEAAkE;IAClE,SAAS,CAAC;QACR,gFAAgF;QAChF,IAAI,OAAO,GAAG,cAAc,CAAC,OAAO,IAAI,OAAO,IAAI,mBAAmB,EAAE,CAAC;YACvE,iBAAiB,CAAC,KAAK,CAAC,CAAC;YACzB,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;QAED,wCAAwC;QACxC,cAAc,CAAC,OAAO,GAAG,OAAO,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEnC,mEAAmE;IACnE,IAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IAE9D,OAAO,CACL,eAAK,SAAS,EAAC,0BAA0B,aAEtC,iBAAiB,IAAI,CACpB,cAAK,SAAS,EAAC,yHAAyH,YACrI,eAAe,CAAC,CAAC,CAAC,CACjB,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,eAAK,SAAS,EAAC,yCAAyC,aACtD,cAAK,SAAS,EAAC,oHAAoH,YACjI,cAAK,SAAS,EAAC,8FAA8F,GAAO,GAChH,EACN,cAAK,SAAS,EAAC,oHAAoH,YACjI,cACE,SAAS,EAAC,8FAA8F,EACxG,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE,GAC5B,GACH,EACN,cAAK,SAAS,EAAC,oHAAoH,YACjI,cACE,SAAS,EAAC,8FAA8F,EACxG,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE,GAC5B,GACH,EACN,cAAK,SAAS,EAAC,oHAAoH,YACjI,cACE,SAAS,EAAC,8FAA8F,EACxG,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE,GAC5B,GACH,IACF,GACF,EACN,aAAI,SAAS,EAAC,2DAA2D,yCAEpE,EACL,YAAG,SAAS,EAAC,4DAA4D,+EAErE,IACH,CACJ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACtB,8BACE,cAAK,SAAS,EAAC,8BAA8B,uBAAQ,EACrD,aAAI,SAAS,EAAC,2DAA2D,6CAEpE,EACL,YAAG,SAAS,EAAC,6DAA6D,iEAEtE,EACJ,YAAG,SAAS,EAAC,4DAA4D,0DAErE,IACH,CACJ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,8BACE,cAAK,SAAS,EAAC,4BAA4B,6BAAS,EACpD,aAAI,SAAS,EAAC,2DAA2D,qCAEpE,EACL,YAAG,SAAS,EAAC,yDAAyD,YACnE,WAAW,GACV,EACJ,iBACE,OAAO,EAAE,oBAAoB,EAC7B,SAAS,EAAC,kFAAkF,0BAGrF,IACR,CACJ,CAAC,CAAC,CAAC,IAAI,GACJ,CACP,EAED,aAAI,SAAS,EAAC,yEAAyE,6BAElF,EAEL,eAAK,SAAS,EAAC,WAAW,aACxB,eAAK,SAAS,EAAC,WAAW,aACxB,eAAK,SAAS,EAAC,mCAAmC,aAChD,eAAM,SAAS,EAAC,gDAAgD,uBAEzD,EACP,gBAAM,SAAS,EAAC,gDAAgD,0BACpD,gBAAgB,OAAG,WAAW,IACnC,IACH,EACN,eAAK,SAAS,EAAC,UAAU,aACvB,gBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,MAAM,EACb,QAAQ,QACR,SAAS,EAAC,qUAAqU,GAC/U,EACF,eAAK,SAAS,EAAC,mEAAmE,aAChF,KAAC,iBAAiB,IAChB,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAE,WAAW,EAChB,iBAAiB,EAAC,yEAAyE,EAC3F,eAAe,EAAC,8BAA8B,EAC9C,iBAAiB,EAAC,kCAAkC,EACpD,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,GACnC,EACF,eAAM,SAAS,EAAC,wCAAwC,YACrD,WAAW,GACP,IACH,IACF,EACN,eAAK,SAAS,EAAC,mCAAmC,aAChD,gBAAM,SAAS,EAAC,gDAAgD,sBACxD,mBAAmB,OAAG,WAAW,IAClC,EACP,gBAAM,SAAS,EAAC,gDAAgD,sBACxD,mBAAmB,OAAG,WAAW,IAClC,IACH,EAGL,YAAY,IAAI,CACf,cAAK,SAAS,EAAC,4FAA4F,YACzG,eAAK,SAAS,EAAC,kBAAkB,aAC/B,cAAK,SAAS,EAAC,4BAA4B,YACzC,cAAK,SAAS,EAAC,SAAS,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,YAC9D,eAAM,QAAQ,EAAC,SAAS,EAAC,CAAC,EAAC,yNAAyN,EAAC,QAAQ,EAAC,SAAS,GAAG,GACtQ,GACF,EACN,eAAK,SAAS,EAAC,MAAM,aACnB,aAAI,SAAS,EAAC,oDAAoD,+BAE7D,EACL,cAAK,SAAS,EAAC,6CAA6C,kCAEtD,IACF,IACF,GACF,CACP,IACG,EAEN,iBACE,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,CAAC,aAAa,EACxB,YAAY,EAAE,cAAM,OAAA,YAAY,CAAC,IAAI,CAAC,EAAlB,CAAkB,EACtC,YAAY,EAAE,cAAM,OAAA,YAAY,CAAC,KAAK,CAAC,EAAnB,CAAmB,EACvC,SAAS,EAAE,+KAEqB,cAAc,sJAE1C,CAAC,aAAa,CAAC,CAAC,CAAC,sFAAsF,CAAC,CAAC,CAAC,EAAE,iBAC/G,EACD,KAAK,EAAE;4BACL,SAAS,EAAE,SAAS,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU;yBACnE,YAED,eACE,SAAS,EAAE,2FAC0D,cAAc,8HAEpF,yBAGM,GACA,IACL,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n useN1WalletContext,\n useN1WalletInternalContext,\n} from '../../../Provider/hooks';\nimport { ImageWithFallback } from '../components';\nimport { ANIMATION_EASE } from '../constants';\nimport { formatAmount, isNordConfigured } from '../utils/nordUtils';\n\ninterface AmountInputScreenProps {\n amount: string;\n onAmountChange: (amount: string) => void;\n onContinue: () => void;\n balance: number;\n faucetUrl?: string;\n refreshBalance?: () => Promise<void>;\n depositError?: string;\n}\n\nexport function AmountInputScreen({\n amount: _amount, // Renamed to _amount since we're not using the prop\n onAmountChange,\n onContinue,\n balance: _balance, // Renamed to _balance since we're overriding it\n faucetUrl: propFaucetUrl,\n refreshBalance,\n depositError,\n}: AmountInputScreenProps) {\n // Hard code amount to 100\n const amount = '100';\n // Hard code balance to 0 to allow faucet to trigger\n const balance = 0;\n\n // Force the amount to be 100 on component mount only, not on every render\n useEffect(() => {\n onAmountChange('100');\n // Empty dependency array ensures this only runs once on mount\n }, []);\n\n const [isHovered, setIsHovered] = useState(false);\n const [isFaucetLoading, setIsFaucetLoading] = useState(false);\n const [faucetError, setFaucetError] = useState<string | null>(null);\n const [tokensObtained, setTokensObtained] = useState(false);\n const [showFaucetSuccess, setShowFaucetSuccess] = useState(false);\n const { address, nord } = useN1WalletContext();\n const { faucetUrl: contextFaucetUrl } = useN1WalletInternalContext();\n const prevBalanceRef = useRef(balance);\n\n const faucetUrl = propFaucetUrl || contextFaucetUrl;\n\n // Get token information from Nord if available\n const [tokenSymbol, setTokenSymbol] = useState('USDC');\n const [tokenLogo, setTokenLogo] = useState('/images/tokens/usdc.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 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 // Hard code MIN_DEPOSIT to 100\n const hardcodedMinDeposit = 100;\n // Hard code MAX_DEPOSIT to 100\n const hardcodedMaxDeposit = 100;\n\n // Check if faucet is enabled and balance is low\n const shouldShowFaucet =\n faucetUrl && balance < hardcodedMinDeposit && !tokensObtained;\n\n // Determine if we should show the faucet overlay\n const showFaucetOverlay =\n (shouldShowFaucet && (isFaucetLoading || faucetError)) || showFaucetSuccess;\n\n // Function to request tokens from faucet\n const requestTestnetTokens = useCallback(async () => {\n if (!faucetUrl || !address) return;\n\n try {\n setIsFaucetLoading(true);\n setFaucetError(null);\n setShowFaucetSuccess(false);\n\n const response = await fetch(faucetUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ address }),\n });\n\n if (!response.ok) {\n const errorData = await response\n .json()\n .catch(() => ({ error: 'Failed to request tokens' }));\n throw new Error(errorData.error || 'Failed to request tokens');\n }\n\n await response.json();\n\n // Mark tokens as obtained to prevent further requests\n setTokensObtained(true);\n\n // Show success message\n setShowFaucetSuccess(true);\n\n // Refresh balance if the function is provided\n if (refreshBalance) {\n await refreshBalance();\n }\n\n setShowFaucetSuccess(false);\n } catch (error) {\n console.error('Faucet error:', error);\n setFaucetError(\n error instanceof Error ? error.message : 'Failed to request tokens'\n );\n } finally {\n setIsFaucetLoading(false);\n }\n }, [faucetUrl, address, refreshBalance]);\n\n // Request tokens automatically when faucet is enabled and balance is low\n useEffect(() => {\n if (\n shouldShowFaucet &&\n !isFaucetLoading &&\n !faucetError &&\n !showFaucetSuccess &&\n depositError == null\n ) {\n requestTestnetTokens();\n }\n }, [\n shouldShowFaucet,\n isFaucetLoading,\n faucetError,\n showFaucetSuccess,\n requestTestnetTokens,\n ]);\n\n // Reset tokensObtained state if balance changes to a higher value\n useEffect(() => {\n // If balance has increased and is now sufficient, reset the tokensObtained flag\n if (balance > prevBalanceRef.current && balance >= hardcodedMinDeposit) {\n setTokensObtained(false);\n setShowFaucetSuccess(false);\n }\n\n // Update the previous balance reference\n prevBalanceRef.current = balance;\n }, [balance, hardcodedMinDeposit]);\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 {showFaucetOverlay && (\n <div className=\"absolute inset-0 z-10 bg-white/70 dark:bg-neutral-900/80 backdrop-blur-md flex flex-col items-center justify-center p-6\">\n {isFaucetLoading ? (\n <>\n <div className=\"relative w-16 h-16 mb-4\">\n <div className=\"absolute inset-0 grid grid-cols-2 gap-1\">\n <div className=\"relative bg-white dark:bg-neutral-800 border border-n1-gray-100 dark:border-neutral-700 overflow-hidden rounded-sm\">\n <div className=\"absolute inset-x-0 bottom-0 h-full bg-n1-main/40 dark:bg-n1-main/30 n1-animate-square-loader\"></div>\n </div>\n <div className=\"relative bg-white dark:bg-neutral-800 border border-n1-gray-100 dark:border-neutral-700 overflow-hidden rounded-sm\">\n <div\n className=\"absolute inset-x-0 bottom-0 h-full bg-n1-main/40 dark:bg-n1-main/30 n1-animate-square-loader\"\n style={{ animationDelay: '0.2s' }}\n ></div>\n </div>\n <div className=\"relative bg-white dark:bg-neutral-800 border border-n1-gray-100 dark:border-neutral-700 overflow-hidden rounded-sm\">\n <div\n className=\"absolute inset-x-0 bottom-0 h-full bg-n1-main/40 dark:bg-n1-main/30 n1-animate-square-loader\"\n style={{ animationDelay: '0.4s' }}\n ></div>\n </div>\n <div className=\"relative bg-white dark:bg-neutral-800 border border-n1-gray-100 dark:border-neutral-700 overflow-hidden rounded-sm\">\n <div\n className=\"absolute inset-x-0 bottom-0 h-full bg-n1-main/40 dark:bg-n1-main/30 n1-animate-square-loader\"\n style={{ animationDelay: '0.6s' }}\n ></div>\n </div>\n </div>\n </div>\n <h3 className=\"text-lg font-medium text-n1-gray-800 dark:text-white mb-2\">\n Obtaining Testnet Tokens\n </h3>\n <p className=\"text-sm text-n1-gray-500 dark:text-neutral-400 text-center\">\n Please wait while we request testnet tokens for your wallet...\n </p>\n </>\n ) : showFaucetSuccess ? (\n <>\n <div className=\"text-green-500 text-4xl mb-4\">✓</div>\n <h3 className=\"text-lg font-medium text-n1-gray-800 dark:text-white mb-2\">\n Tokens Obtained Successfully\n </h3>\n <p className=\"text-sm text-green-500 dark:text-green-400 text-center mb-4\">\n Your wallet has been funded with testnet tokens.\n </p>\n <p className=\"text-sm text-n1-gray-500 dark:text-neutral-400 text-center\">\n Please wait while your balance updates...\n </p>\n </>\n ) : faucetError ? (\n <>\n <div className=\"text-red-500 text-4xl mb-4\">⚠️</div>\n <h3 className=\"text-lg font-medium text-n1-gray-800 dark:text-white mb-2\">\n Failed to Get Tokens\n </h3>\n <p className=\"text-sm text-red-500 dark:text-red-400 text-center mb-4\">\n {faucetError}\n </p>\n <button\n onClick={requestTestnetTokens}\n className=\"px-4 py-2 bg-n1-main text-white rounded-md hover:bg-n1-main/90 transition-colors\"\n >\n Try Again\n </button>\n </>\n ) : null}\n </div>\n )}\n\n <h2 className=\"text-xl text-n1-gray-800 dark:text-white font-semibold mb-6 text-center\">\n Enter Amount\n </h2>\n\n <div className=\"space-y-8\">\n <div className=\"space-y-4\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm text-n1-gray-500 dark:text-neutral-400\">\n Amount\n </span>\n <span className=\"text-sm text-n1-gray-500 dark:text-neutral-400\">\n Balance: {formattedBalance} {tokenSymbol}\n </span>\n </div>\n <div className=\"relative\">\n <input\n type=\"text\"\n value={amount}\n readOnly\n className=\"w-full bg-white dark:bg-neutral-950 border-2 border-n1-gray-100 dark:border-neutral-800 rounded-md px-4 py-3 text-n1-gray-900 dark:text-white placeholder-n1-gray-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-0 focus:border-n1-main dark:focus:border-n1-main transition-colors duration-200 cursor-not-allowed\"\n />\n <div className=\"absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2\">\n <ImageWithFallback\n src={tokenLogo}\n width={20}\n height={20}\n alt={tokenSymbol}\n fallbackClassName=\"w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center\"\n fallbackBgColor=\"bg-blue-100 dark:bg-blue-900\"\n fallbackTextColor=\"text-blue-500 dark:text-blue-300\"\n fallbackText={tokenSymbol.charAt(0)}\n />\n <span className=\"text-n1-gray-400 dark:text-neutral-500\">\n {tokenSymbol}\n </span>\n </div>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-xs text-n1-gray-400 dark:text-neutral-500\">\n Min: {hardcodedMinDeposit} {tokenSymbol}\n </span>\n <span className=\"text-xs text-n1-gray-400 dark:text-neutral-500\">\n Max: {hardcodedMaxDeposit} {tokenSymbol}\n </span>\n </div>\n \n {/* Display deposit error if present */}\n {depositError && (\n <div className=\"mt-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md\">\n <div className=\"flex items-start\">\n <div className=\"flex-shrink-0 text-red-500\">\n <svg className=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fillRule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clipRule=\"evenodd\" />\n </svg>\n </div>\n <div className=\"ml-3\">\n <h3 className=\"text-sm font-medium text-red-800 dark:text-red-300\">\n Deposit Failed\n </h3>\n <div className=\"mt-2 text-xs text-red-600 dark:text-red-400\">\n Please try again.\n </div>\n </div>\n </div>\n </div>\n )}\n </div>\n\n <button\n onClick={onContinue}\n disabled={!isValidAmount}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n className={`\n group relative w-full overflow-hidden rounded-md border-2 bg-n1-gray-100 dark:bg-neutral-950 py-4 text-center\n transition-all duration-300 ${ANIMATION_EASE}\n cursor-pointer border-n1-gray-200 dark:border-n1-gray-800 hover:border-n1-gray-400 dark:hover:border-white/60\n ${!isValidAmount ? 'opacity-50 cursor-not-allowed hover:border-n1-gray-200 dark:hover:border-n1-gray-800' : ''}\n `}\n style={{\n transform: isHovered && isValidAmount ? '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-gray-700 dark:text-n1-gray-300 group-hover:text-n1-gray-900 dark:group-hover:text-white\n `}\n >\n Continue\n </span>\n </button>\n </div>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"04-AmountInputScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/04-AmountInputScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n useN1WalletContext,\n useN1WalletInternalContext,\n} 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 { LoadingSquares } from '../components/LoadingSquares';\n\nexport function AmountInputScreen() {\n const { context } = useFlowStateContext();\n const { updateAmount, startDeposit } = useDepositContext();\n const { address, nord } = useN1WalletContext();\n const { faucetUrl: contextFaucetUrl } = useN1WalletInternalContext();\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 const [isFaucetLoading, setIsFaucetLoading] = useState(false);\n const [faucetError, setFaucetError] = useState<string | null>(null);\n const [tokensObtained, setTokensObtained] = useState(false);\n const [showFaucetSuccess, setShowFaucetSuccess] = useState(false);\n const prevBalanceRef = useRef(balance);\n\n const faucetUrl = contextFaucetUrl;\n\n // Get token information from Nord if available\n const [tokenSymbol, setTokenSymbol] = useState('USDC');\n const [tokenLogo, setTokenLogo] = useState('/images/tokens/usdc.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 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 // Check if faucet is enabled and balance is low\n const shouldShowFaucet = faucetUrl && !tokensObtained;\n\n // Determine if we should show the faucet overlay\n const showFaucetOverlay =\n (shouldShowFaucet && (isFaucetLoading || faucetError)) || showFaucetSuccess;\n\n // Function to refresh balances\n const refreshBalance = useCallback(async () => {\n try {\n console.log('Refreshing balance...');\n // Implementation would depend on your actual data structure\n // If we have a nordUser, try to refresh balances using Nord-TS\n if (nord && isNordConfigured(nord)) {\n try {\n // This is a placeholder - in a real implementation, you would use the correct method\n console.log('Refreshing balances using Nord-TS');\n } catch (error) {\n console.warn(\n 'Error refreshing balances using Nord-TS, falling back to default method:',\n error\n );\n }\n }\n } catch (error) {\n console.error('Error refreshing balance:', error);\n }\n }, [nord]);\n\n // Function to request tokens from faucet\n const requestTestnetTokens = useCallback(async () => {\n console.log('requestTestnetTokens', faucetUrl, address);\n if (!faucetUrl || !address) return;\n\n try {\n setIsFaucetLoading(true);\n setFaucetError(null);\n setShowFaucetSuccess(false);\n\n const response = await fetch(faucetUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ address }),\n });\n\n if (!response.ok) {\n const errorData = await response\n .json()\n .catch(() => ({ error: 'Failed to request tokens' }));\n throw new Error(errorData.error || 'Failed to request tokens');\n }\n\n await response.json();\n\n // Mark tokens as obtained to prevent further requests\n setTokensObtained(true);\n\n // Show success message\n setShowFaucetSuccess(true);\n\n // Refresh balance\n await refreshBalance();\n\n setShowFaucetSuccess(false);\n } catch (error) {\n console.error('Faucet error:', error);\n setFaucetError(\n error instanceof Error ? error.message : 'Failed to request tokens'\n );\n } finally {\n setIsFaucetLoading(false);\n }\n }, [faucetUrl, address, refreshBalance]);\n\n // Request tokens automatically when faucet is enabled and balance is low\n useEffect(() => {\n if (\n shouldShowFaucet &&\n !isFaucetLoading &&\n !faucetError &&\n !showFaucetSuccess &&\n context.depositError == null\n ) {\n requestTestnetTokens();\n }\n }, [\n shouldShowFaucet,\n isFaucetLoading,\n faucetError,\n showFaucetSuccess,\n requestTestnetTokens,\n context.depositError\n ]);\n\n // Reset tokensObtained state if balance changes to a higher value\n useEffect(() => {\n // If balance has increased and is now sufficient, reset the tokensObtained flag\n if (balance > prevBalanceRef.current && balance >= hardcodedMinDeposit) {\n setTokensObtained(false);\n setShowFaucetSuccess(false);\n }\n\n // Update the previous balance reference\n prevBalanceRef.current = balance;\n }, [balance, hardcodedMinDeposit]);\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 {showFaucetOverlay && (\n <div className=\"absolute inset-0 z-10 bg-white/70 dark:bg-neutral-900/80 backdrop-blur-md flex flex-col items-center justify-center p-6\">\n {isFaucetLoading ? (\n <>\n <LoadingSquares />\n <div className=\"space-y-2 text-center mt-4\">\n <h3 className=\"text-xl text-n1-gray-800 dark:text-white font-semibold\">\n Obtaining Testnet Tokens\n </h3>\n <p className=\"text-sm text-n1-gray-500 dark:text-neutral-400\">\n Please wait while we request testnet tokens for your wallet...\n </p>\n </div>\n </>\n ) : showFaucetSuccess ? (\n <>\n <div className=\"text-green-500 text-5xl mb-4 n1-animate-fade-up\">✓</div>\n <div className=\"space-y-2 text-center\">\n <h3 className=\"text-xl text-n1-gray-800 dark:text-white font-semibold\">\n Tokens Obtained Successfully\n </h3>\n <p className=\"text-sm text-green-500 dark:text-green-400\">\n Your wallet has been funded with testnet tokens.\n </p>\n <p className=\"text-sm text-n1-gray-500 dark: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-animate-fade-up\">⚠️</div>\n <div className=\"space-y-2 text-center\">\n <h3 className=\"text-xl text-n1-gray-800 dark:text-white font-semibold\">\n Failed to Get Tokens\n </h3>\n <p className=\"text-sm text-red-500 dark:text-red-400\">\n {faucetError}\n </p>\n <button\n onClick={requestTestnetTokens}\n className=\"mt-4 px-4 py-2 bg-n1-main text-white rounded-sm hover:bg-n1-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-n1-gray-800 dark: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-gray-200 dark:border-n1-gray-800 bg-n1-gray-100 dark:bg-n1-gray-900 rounded-sm p-0 overflow-hidden n1-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-gray-200 dark:border-n1-gray-800 bg-white/30 dark:bg-black/10\">\n <div className=\"flex items-center space-x-3\">\n <div className=\"w-8 h-8 rounded-full overflow-hidden bg-white dark:bg-n1-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-100 dark:bg-blue-900\"\n fallbackTextColor=\"text-blue-500 dark:text-blue-300\"\n />\n </div>\n <span className=\"text-n1-gray-800 dark:text-white font-medium\">\n {tokenSymbol}\n </span>\n </div>\n <div className=\"text-xs rounded-sm bg-n1-gray-200 dark:bg-n1-gray-800 px-2 py-1 text-n1-gray-600 dark:text-n1-gray-300\">\n Fixed Amount\n </div>\n </div>\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-n1-gray-800 dark:text-white mr-1 n1-animate-fade-up\" style={{ animationDelay: '0.2s' }}>\n {amount}\n </span>\n <span className=\"text-xl text-n1-gray-500 dark:text-neutral-400 ml-1 n1-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-gray-200 dark:bg-n1-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-animate-fade-up\" style={{ animationDelay: '0.4s' }}>\n <span className=\"text-n1-gray-500 dark: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-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 p-3 rounded-sm text-sm border border-red-200 dark:border-red-800 n1-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-n1-gray-100 dark:bg-neutral-950 py-4 text-center\n transition-all duration-300 ${ANIMATION_EASE} n1-animate-fade-up\n ${isValidAmount\n ? 'cursor-pointer border-n1-gray-200 dark:border-n1-gray-800 hover:border-n1-gray-400 dark:hover:border-white/60'\n : 'cursor-not-allowed border-n1-gray-200 dark:border-n1-gray-800 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-gray-700 dark:text-n1-gray-300 group-hover:text-n1-gray-900 dark:group-hover:text-white'\n : 'text-n1-gray-400 dark:text-n1-gray-600'\n }\n `}\n >\n Continue\n </span>\n </button>\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -1,6 +1 @@
|
|
|
1
|
-
|
|
2
|
-
interface DepositProgressScreenProps {
|
|
3
|
-
message: WaitingMessageState;
|
|
4
|
-
}
|
|
5
|
-
export declare function DepositProgressScreen({ message }: DepositProgressScreenProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
-
export {};
|
|
1
|
+
export declare function DepositProgressScreen(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -14,11 +14,16 @@ import { WaitingMessage } from '../components/WaitingMessage';
|
|
|
14
14
|
import { useN1WalletInternalContext } from '../../../Provider/hooks';
|
|
15
15
|
import { N1SessionMode } from '../../../Provider/types';
|
|
16
16
|
import { useState, useEffect } from 'react';
|
|
17
|
-
export function DepositProgressScreen(
|
|
18
|
-
var message = _a.message;
|
|
17
|
+
export function DepositProgressScreen() {
|
|
19
18
|
var sessionMode = useN1WalletInternalContext().sessionMode;
|
|
20
|
-
var
|
|
19
|
+
var _a = useState(0), elapsedTime = _a[0], setElapsedTime = _a[1];
|
|
21
20
|
var maxTime = 300; // Maximum time in seconds
|
|
21
|
+
var message = {
|
|
22
|
+
visible: true,
|
|
23
|
+
title: 'Processing Deposit',
|
|
24
|
+
subtitle: 'Please wait while we process your deposit',
|
|
25
|
+
isTyping: false,
|
|
26
|
+
};
|
|
22
27
|
// Start timer when component mounts
|
|
23
28
|
useEffect(function () {
|
|
24
29
|
var timer = setInterval(function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"05-DepositProgressScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/05-DepositProgressScreen.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"05-DepositProgressScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/05-DepositProgressScreen.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,UAAU,qBAAqB;IAC3B,IAAA,WAAW,GAAK,0BAA0B,EAAE,YAAjC,CAAkC;IAC/C,IAAA,KAAgC,QAAQ,CAAC,CAAC,CAAC,EAA1C,WAAW,QAAA,EAAE,cAAc,QAAe,CAAC;IAClD,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,CAAA;IAED,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,0DAA0D;IAC1D,IAAM,yBAAyB,GAAG;QAChC,IAAM,kBAAkB,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,aAAa,CAAC,GAAG,CAAC;QAC5D,IAAM,WAAW,GACf,kBAAkB,KAAK,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;QAE7D,6BACK,OAAO,KACV,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,qBAAc,WAAW,aAAU,EAC3D,QAAQ,EACN,OAAO,CAAC,QAAQ;gBAChB,4CAAqC,WAAW,aAAU,IAC5D;IACJ,CAAC,CAAC;IAEF,IAAM,cAAc,GAAG,yBAAyB,EAAE,CAAC;IAEnD,OAAO,CACL,eAAK,SAAS,EAAC,0BAA0B,aACvC,KAAC,cAAc,IAAC,OAAO,EAAE,cAAc,GAAI,EAC3C,eAAK,SAAS,EAAC,2CAA2C,+BACzC,WAAW,UAAM,OAAO,SACnC,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { WaitingMessage } from '../components/WaitingMessage';\nimport { WaitingMessageState } from '../types';\nimport { useN1WalletInternalContext } from '../../../Provider/hooks';\nimport { N1SessionMode } from '../../../Provider/types';\nimport { useState, useEffect } from 'react';\n\n\nexport function DepositProgressScreen() {\n const { sessionMode } = useN1WalletInternalContext();\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 // Determine the appropriate message based on session mode\n const getSessionSpecificMessage = () => {\n const currentSessionMode = sessionMode ?? N1SessionMode.NTS;\n const accountType =\n currentSessionMode === N1SessionMode.Nord ? 'Nord' : 'NTS';\n\n return {\n ...message,\n title: message.title || `Processing ${accountType} Deposit`,\n subtitle:\n message.subtitle ||\n `Please wait while we process your ${accountType} deposit`,\n };\n };\n\n const sessionMessage = getSessionSpecificMessage();\n\n return (\n <div className=\"overflow-hidden relative\">\n <WaitingMessage message={sessionMessage} />\n <div className=\"text-center mt-4 text-sm text-n1-gray-500\">\n Time elapsed: {elapsedTime}s / {maxTime}s\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -1,8 +1 @@
|
|
|
1
|
-
|
|
2
|
-
interface DepositSuccessScreenProps {
|
|
3
|
-
amount: string;
|
|
4
|
-
tableValues: TableValues;
|
|
5
|
-
onContinue: () => void;
|
|
6
|
-
}
|
|
7
|
-
export declare function DepositSuccessScreen({ amount, tableValues, onContinue, }: DepositSuccessScreenProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export {};
|
|
1
|
+
export declare function DepositSuccessScreen(): import("react/jsx-runtime").JSX.Element;
|