@n1xyz/wallet-widget 0.0.28 → 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/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/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 +2 -2
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
interface UseTestnetFaucetParams {
|
|
2
|
+
enabled: boolean;
|
|
3
|
+
balance: number;
|
|
4
|
+
minDeposit: number;
|
|
5
|
+
}
|
|
6
|
+
interface UseTestnetFaucetResult {
|
|
7
|
+
isFaucetLoading: boolean;
|
|
8
|
+
faucetError: string | null;
|
|
9
|
+
showFaucetSuccess: boolean;
|
|
10
|
+
showFaucetOverlay: boolean;
|
|
11
|
+
requestTestnetTokens: () => Promise<void>;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Centralizes the faucet orchestration logic so it can be toggled from the widget entry point.
|
|
15
|
+
*/
|
|
16
|
+
export declare function useTestnetFaucet({ enabled, balance, minDeposit, }: UseTestnetFaucetParams): UseTestnetFaucetResult;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
11
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
|
12
|
+
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
13
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
14
|
+
function step(op) {
|
|
15
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
16
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
17
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
18
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
19
|
+
switch (op[0]) {
|
|
20
|
+
case 0: case 1: t = op; break;
|
|
21
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
22
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
23
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
24
|
+
default:
|
|
25
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
26
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
27
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
28
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
29
|
+
if (t[2]) _.ops.pop();
|
|
30
|
+
_.trys.pop(); continue;
|
|
31
|
+
}
|
|
32
|
+
op = body.call(thisArg, _);
|
|
33
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
34
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
38
|
+
import { useN1WalletContext, useN1WalletInternalContext, } from '../../../Provider/hooks';
|
|
39
|
+
import { useFlowStateContext } from '../context/FlowContext';
|
|
40
|
+
/**
|
|
41
|
+
* Centralizes the faucet orchestration logic so it can be toggled from the widget entry point.
|
|
42
|
+
*/
|
|
43
|
+
export function useTestnetFaucet(_a) {
|
|
44
|
+
var _this = this;
|
|
45
|
+
var enabled = _a.enabled, balance = _a.balance, minDeposit = _a.minDeposit;
|
|
46
|
+
var address = useN1WalletContext().address;
|
|
47
|
+
var faucetUrl = useN1WalletInternalContext().faucetUrl;
|
|
48
|
+
var context = useFlowStateContext().context;
|
|
49
|
+
var faucetFiredRef = useRef(false);
|
|
50
|
+
var prevBalanceRef = useRef(balance);
|
|
51
|
+
var _b = useState(false), isFaucetLoading = _b[0], setIsFaucetLoading = _b[1];
|
|
52
|
+
var _c = useState(null), faucetError = _c[0], setFaucetError = _c[1];
|
|
53
|
+
var _d = useState(false), tokensObtained = _d[0], setTokensObtained = _d[1];
|
|
54
|
+
var _e = useState(false), showFaucetSuccess = _e[0], setShowFaucetSuccess = _e[1];
|
|
55
|
+
var refreshBalance = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
56
|
+
return __generator(this, function (_a) {
|
|
57
|
+
return [2 /*return*/];
|
|
58
|
+
});
|
|
59
|
+
}); }, []);
|
|
60
|
+
var shouldShowFaucet = useMemo(function () {
|
|
61
|
+
return enabled && Boolean(faucetUrl) && !tokensObtained;
|
|
62
|
+
}, [enabled, faucetUrl, tokensObtained]);
|
|
63
|
+
var showFaucetOverlay = useMemo(function () {
|
|
64
|
+
if (!shouldShowFaucet) {
|
|
65
|
+
return false;
|
|
66
|
+
}
|
|
67
|
+
return ((isFaucetLoading || faucetError !== null) ||
|
|
68
|
+
showFaucetSuccess);
|
|
69
|
+
}, [shouldShowFaucet, isFaucetLoading, faucetError, showFaucetSuccess]);
|
|
70
|
+
var requestTestnetTokens = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
71
|
+
var response, errorData, error_1;
|
|
72
|
+
return __generator(this, function (_a) {
|
|
73
|
+
switch (_a.label) {
|
|
74
|
+
case 0:
|
|
75
|
+
if (!shouldShowFaucet || !address || !faucetUrl)
|
|
76
|
+
return [2 /*return*/];
|
|
77
|
+
if (faucetFiredRef.current)
|
|
78
|
+
return [2 /*return*/];
|
|
79
|
+
faucetFiredRef.current = true;
|
|
80
|
+
_a.label = 1;
|
|
81
|
+
case 1:
|
|
82
|
+
_a.trys.push([1, 7, 8, 9]);
|
|
83
|
+
setIsFaucetLoading(true);
|
|
84
|
+
setFaucetError(null);
|
|
85
|
+
setShowFaucetSuccess(false);
|
|
86
|
+
return [4 /*yield*/, fetch(faucetUrl, {
|
|
87
|
+
method: 'POST',
|
|
88
|
+
headers: {
|
|
89
|
+
'Content-Type': 'application/json',
|
|
90
|
+
},
|
|
91
|
+
body: JSON.stringify({ address: address }),
|
|
92
|
+
})];
|
|
93
|
+
case 2:
|
|
94
|
+
response = _a.sent();
|
|
95
|
+
if (!!response.ok) return [3 /*break*/, 4];
|
|
96
|
+
return [4 /*yield*/, response
|
|
97
|
+
.json()
|
|
98
|
+
.catch(function () { return ({ error: 'Failed to request tokens' }); })];
|
|
99
|
+
case 3:
|
|
100
|
+
errorData = _a.sent();
|
|
101
|
+
throw new Error(errorData.error || 'Failed to request tokens');
|
|
102
|
+
case 4: return [4 /*yield*/, response.json().catch(function () { return ({}); })];
|
|
103
|
+
case 5:
|
|
104
|
+
_a.sent();
|
|
105
|
+
setTokensObtained(true);
|
|
106
|
+
setShowFaucetSuccess(true);
|
|
107
|
+
return [4 /*yield*/, refreshBalance()];
|
|
108
|
+
case 6:
|
|
109
|
+
_a.sent();
|
|
110
|
+
setShowFaucetSuccess(false);
|
|
111
|
+
return [3 /*break*/, 9];
|
|
112
|
+
case 7:
|
|
113
|
+
error_1 = _a.sent();
|
|
114
|
+
console.error('Faucet error:', error_1);
|
|
115
|
+
setFaucetError(error_1 instanceof Error ? error_1.message : 'Failed to request tokens');
|
|
116
|
+
faucetFiredRef.current = false;
|
|
117
|
+
return [3 /*break*/, 9];
|
|
118
|
+
case 8:
|
|
119
|
+
setIsFaucetLoading(false);
|
|
120
|
+
return [7 /*endfinally*/];
|
|
121
|
+
case 9: return [2 /*return*/];
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
}); }, [shouldShowFaucet, address, faucetUrl, refreshBalance]);
|
|
125
|
+
useEffect(function () {
|
|
126
|
+
if (!shouldShowFaucet ||
|
|
127
|
+
isFaucetLoading ||
|
|
128
|
+
faucetError ||
|
|
129
|
+
showFaucetSuccess ||
|
|
130
|
+
context.depositError != null ||
|
|
131
|
+
faucetFiredRef.current) {
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
requestTestnetTokens();
|
|
135
|
+
}, [
|
|
136
|
+
shouldShowFaucet,
|
|
137
|
+
isFaucetLoading,
|
|
138
|
+
faucetError,
|
|
139
|
+
showFaucetSuccess,
|
|
140
|
+
context.depositError,
|
|
141
|
+
requestTestnetTokens,
|
|
142
|
+
]);
|
|
143
|
+
useEffect(function () {
|
|
144
|
+
if (balance > prevBalanceRef.current && balance >= minDeposit) {
|
|
145
|
+
setTokensObtained(false);
|
|
146
|
+
setShowFaucetSuccess(false);
|
|
147
|
+
}
|
|
148
|
+
else if (balance < minDeposit / 2) {
|
|
149
|
+
faucetFiredRef.current = false;
|
|
150
|
+
setTokensObtained(false);
|
|
151
|
+
}
|
|
152
|
+
prevBalanceRef.current = balance;
|
|
153
|
+
}, [balance, minDeposit]);
|
|
154
|
+
return {
|
|
155
|
+
isFaucetLoading: isFaucetLoading,
|
|
156
|
+
faucetError: faucetError,
|
|
157
|
+
showFaucetSuccess: showFaucetSuccess,
|
|
158
|
+
showFaucetOverlay: showFaucetOverlay,
|
|
159
|
+
requestTestnetTokens: requestTestnetTokens,
|
|
160
|
+
};
|
|
161
|
+
}
|
|
162
|
+
//# sourceMappingURL=useTestnetFaucet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTestnetFaucet.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/hooks/useTestnetFaucet.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n useN1WalletContext,\n useN1WalletInternalContext,\n} from '../../../Provider/hooks';\nimport { useFlowStateContext } from '../context/FlowContext';\n\ninterface UseTestnetFaucetParams {\n enabled: boolean;\n balance: number;\n minDeposit: number;\n}\n\ninterface UseTestnetFaucetResult {\n isFaucetLoading: boolean;\n faucetError: string | null;\n showFaucetSuccess: boolean;\n showFaucetOverlay: boolean;\n requestTestnetTokens: () => Promise<void>;\n}\n\n/**\n * Centralizes the faucet orchestration logic so it can be toggled from the widget entry point.\n */\nexport function useTestnetFaucet({\n enabled,\n balance,\n minDeposit,\n}: UseTestnetFaucetParams): UseTestnetFaucetResult {\n const { address } = useN1WalletContext();\n const { faucetUrl } = useN1WalletInternalContext();\n const { context } = useFlowStateContext();\n\n const faucetFiredRef = useRef(false);\n const prevBalanceRef = useRef(balance);\n\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\n const refreshBalance = useCallback(async () => {\n // TODO: implement when balance fetching is wired up\n }, []);\n\n const shouldShowFaucet = useMemo(() => {\n return enabled && Boolean(faucetUrl) && !tokensObtained;\n }, [enabled, faucetUrl, tokensObtained]);\n\n const showFaucetOverlay = useMemo(() => {\n if (!shouldShowFaucet) {\n return false;\n }\n\n return (\n (isFaucetLoading || faucetError !== null) ||\n showFaucetSuccess\n );\n }, [shouldShowFaucet, isFaucetLoading, faucetError, showFaucetSuccess]);\n\n const requestTestnetTokens = useCallback(async () => {\n if (!shouldShowFaucet || !address || !faucetUrl) return;\n if (faucetFiredRef.current) return;\n\n faucetFiredRef.current = true;\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().catch(() => ({}));\n setTokensObtained(true);\n setShowFaucetSuccess(true);\n\n await refreshBalance();\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 faucetFiredRef.current = false;\n } finally {\n setIsFaucetLoading(false);\n }\n }, [shouldShowFaucet, address, faucetUrl, refreshBalance]);\n\n useEffect(() => {\n if (\n !shouldShowFaucet ||\n isFaucetLoading ||\n faucetError ||\n showFaucetSuccess ||\n context.depositError != null ||\n faucetFiredRef.current\n ) {\n return;\n }\n\n requestTestnetTokens();\n }, [\n shouldShowFaucet,\n isFaucetLoading,\n faucetError,\n showFaucetSuccess,\n context.depositError,\n requestTestnetTokens,\n ]);\n\n useEffect(() => {\n if (balance > prevBalanceRef.current && balance >= minDeposit) {\n setTokensObtained(false);\n setShowFaucetSuccess(false);\n } else if (balance < minDeposit / 2) {\n faucetFiredRef.current = false;\n setTokensObtained(false);\n }\n\n prevBalanceRef.current = balance;\n }, [balance, minDeposit]);\n\n return {\n isFaucetLoading,\n faucetError,\n showFaucetSuccess,\n showFaucetOverlay,\n requestTestnetTokens,\n };\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function ChainSelectionScreen(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import Logo from '../../../components/Logo';
|
|
4
|
+
import { SolanaLogo } from '../../../components/logos';
|
|
5
|
+
import { SolanaNetwork } from '../../../config/solana';
|
|
6
|
+
import { logger } from '../../../utils/logger';
|
|
7
|
+
import { ChainButton } from '../components/ChainButton';
|
|
8
|
+
import { EVMChainsButton } from '../components/EVMChainsButton';
|
|
9
|
+
import { MoreButton } from '../components/MoreButton';
|
|
10
|
+
import { useFlowStateContext } from '../context/FlowContext';
|
|
11
|
+
import { FlowState } from '../types';
|
|
12
|
+
// Custom N1Logo wrapper that responds to the group hover state
|
|
13
|
+
var N1Logo = function (_a) {
|
|
14
|
+
var _b = _a.size, size = _b === void 0 ? 38 : _b;
|
|
15
|
+
return (_jsx("div", { className: "text-white group-hover:text-red-500 transition-colors duration-200", children: _jsx(Logo, { size: size }) }));
|
|
16
|
+
};
|
|
17
|
+
export function ChainSelectionScreen() {
|
|
18
|
+
var transition = useFlowStateContext().transition;
|
|
19
|
+
var _a = useState(false), isLoading = _a[0], setIsLoading = _a[1];
|
|
20
|
+
// Only allow devnet, gray out other chains
|
|
21
|
+
var handleChainSelect = function (chainId) {
|
|
22
|
+
logger.debug('Chain selected in ChainSelectionScreen:', chainId);
|
|
23
|
+
// Only allow devnet to be selected
|
|
24
|
+
if (chainId === 'devnet') {
|
|
25
|
+
setIsLoading(true);
|
|
26
|
+
transition(FlowState.AMOUNT_INPUT, { selectedChain: chainId });
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
logger.debug('Chain not allowed:', chainId);
|
|
30
|
+
// Could show a toast or message here
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
// Define the 4 options as requested
|
|
34
|
+
var chainsWithNetworkInfo = [
|
|
35
|
+
{
|
|
36
|
+
id: 'devnet',
|
|
37
|
+
name: 'Devnet',
|
|
38
|
+
logo: (_jsx("div", { className: "flex items-center justify-center", style: { width: 48, height: 48 }, children: _jsx(N1Logo, {}) })),
|
|
39
|
+
network: SolanaNetwork.DEVNET,
|
|
40
|
+
disabled: false, // Only devnet is clickable
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
id: 'solana',
|
|
44
|
+
name: 'Solana',
|
|
45
|
+
logo: (_jsx("div", { className: "flex items-center justify-center", style: { width: 48, height: 48 }, children: _jsx(SolanaLogo, { width: 36, height: 36 }) })),
|
|
46
|
+
network: SolanaNetwork.MAINNET,
|
|
47
|
+
disabled: true,
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
id: 'evm-chains',
|
|
51
|
+
name: 'EVM Chains',
|
|
52
|
+
logo: '', // Not needed as we're using EVMChainsButton
|
|
53
|
+
network: '', // Empty string instead of null
|
|
54
|
+
disabled: true,
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
id: 'more',
|
|
58
|
+
name: 'More',
|
|
59
|
+
logo: '', // Not needed as we're using MoreButton
|
|
60
|
+
network: '', // Empty string instead of null
|
|
61
|
+
disabled: true,
|
|
62
|
+
},
|
|
63
|
+
];
|
|
64
|
+
return (_jsx("div", { className: "overflow-hidden relative", children: isLoading ? (_jsx("div", { className: "flex justify-center items-center py-8", children: _jsx("div", { className: "n1-ww-animate-spin rounded-full h-8 w-8 border-b-2 border-n1-ww-border" }) })) : (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(ChainButton, { chain: chainsWithNetworkInfo[0], onClick: function () { return handleChainSelect(chainsWithNetworkInfo[0].id); }, disabled: chainsWithNetworkInfo[0].disabled }, chainsWithNetworkInfo[0].id), _jsx(ChainButton, { chain: chainsWithNetworkInfo[1], onClick: function () { return handleChainSelect(chainsWithNetworkInfo[1].id); }, disabled: chainsWithNetworkInfo[1].disabled }, chainsWithNetworkInfo[1].id)] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(EVMChainsButton, { chain: chainsWithNetworkInfo[2], onClick: function () { return handleChainSelect(chainsWithNetworkInfo[2].id); }, disabled: chainsWithNetworkInfo[2].disabled }, chainsWithNetworkInfo[2].id), _jsx(MoreButton, { chain: chainsWithNetworkInfo[3], onClick: function () { return handleChainSelect(chainsWithNetworkInfo[3].id); }, disabled: chainsWithNetworkInfo[3].disabled }, chainsWithNetworkInfo[3].id)] })] })) }));
|
|
65
|
+
}
|
|
66
|
+
//# sourceMappingURL=02-ChainSelectionScreen.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"02-ChainSelectionScreen.js","sourceRoot":"","sources":["../../../../src/Modal/NordFlow/screens/02-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-white 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\n {isLoading ? (\n <div className=\"flex justify-center items-center py-8\">\n <div className=\"n1-ww-animate-spin rounded-full h-8 w-8 border-b-2 border-n1-ww-border\"></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"]}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
import { useN1WalletContext } from '../../../Provider/hooks';
|
|
4
|
+
import { ImageWithFallback } from '../components';
|
|
5
|
+
import { ANIMATION_EASE } from '../constants';
|
|
6
|
+
import { formatAmount, isNordConfigured } from '../utils/nordUtils';
|
|
7
|
+
import { useDepositContext } from '../context/DepositContext';
|
|
8
|
+
import { useFlowStateContext } from '../context/FlowContext';
|
|
9
|
+
import { useTestnetFaucet } from '../hooks/useTestnetFaucet';
|
|
10
|
+
import { WaitingMessage } from '../components/WaitingMessage';
|
|
11
|
+
export function AmountInputScreen(_a) {
|
|
12
|
+
var _b = _a.isTestnet, isTestnet = _b === void 0 ? false : _b;
|
|
13
|
+
var context = useFlowStateContext().context;
|
|
14
|
+
var _c = useDepositContext(), updateAmount = _c.updateAmount, startDeposit = _c.startDeposit;
|
|
15
|
+
var nord = useN1WalletContext().nord;
|
|
16
|
+
// Hard code amount to 100
|
|
17
|
+
var amount = '100';
|
|
18
|
+
// Hard code balance to 0 to allow faucet to trigger
|
|
19
|
+
var balance = 100;
|
|
20
|
+
// Force the amount to be 100 on component mount only, not on every render
|
|
21
|
+
useEffect(function () {
|
|
22
|
+
updateAmount('100');
|
|
23
|
+
// Empty dependency array ensures this only runs once on mount
|
|
24
|
+
}, [updateAmount]);
|
|
25
|
+
var _d = useState(false), isHovered = _d[0], setIsHovered = _d[1];
|
|
26
|
+
// Get token information from Nord if available
|
|
27
|
+
var _e = useState('USDC'), tokenSymbol = _e[0], setTokenSymbol = _e[1];
|
|
28
|
+
var _f = useState('https://res.cloudinary.com/dl3ia3pko/image/upload/v1745874373/usdc_ma4igc.svg'), tokenLogo = _f[0], setTokenLogo = _f[1];
|
|
29
|
+
var _g = useState(6), tokenDecimals = _g[0], setTokenDecimals = _g[1];
|
|
30
|
+
// Try to get token information from Nord
|
|
31
|
+
useEffect(function () {
|
|
32
|
+
if (nord && isNordConfigured(nord)) {
|
|
33
|
+
try {
|
|
34
|
+
// Find the USDC token or the first token
|
|
35
|
+
var usdcToken = nord.tokens.find(function (t) { return t.symbol === 'USDC'; }) || nord.tokens[0];
|
|
36
|
+
if (usdcToken) {
|
|
37
|
+
setTokenSymbol(usdcToken.symbol);
|
|
38
|
+
// Use a default logo if not available
|
|
39
|
+
// setTokenLogo(`/images/tokens/${usdcToken.symbol.toLowerCase()}.svg`);
|
|
40
|
+
setTokenLogo('https://res.cloudinary.com/dl3ia3pko/image/upload/v1745874373/usdc_ma4igc.svg');
|
|
41
|
+
setTokenDecimals(usdcToken.decimals);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
catch (error) {
|
|
45
|
+
console.warn('Error getting token information from Nord:', error);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}, [nord]);
|
|
49
|
+
// Removed handleAmountChange since we don't want user to edit the amount
|
|
50
|
+
// todo:fix
|
|
51
|
+
var isValidAmount = true;
|
|
52
|
+
var hardcodedMinDeposit = 100;
|
|
53
|
+
var _h = useTestnetFaucet({
|
|
54
|
+
enabled: isTestnet,
|
|
55
|
+
balance: balance,
|
|
56
|
+
minDeposit: hardcodedMinDeposit,
|
|
57
|
+
}), showFaucetOverlay = _h.showFaucetOverlay, isFaucetLoading = _h.isFaucetLoading, faucetError = _h.faucetError, showFaucetSuccess = _h.showFaucetSuccess, requestTestnetTokens = _h.requestTestnetTokens;
|
|
58
|
+
// Format the balance with the appropriate number of decimal places
|
|
59
|
+
var formattedBalance = formatAmount(balance, tokenDecimals);
|
|
60
|
+
return (_jsxs("div", { className: "overflow-hidden relative", children: [isTestnet && showFaucetOverlay && (_jsx("div", { className: "absolute inset-0 z-10 bg-neutral-900/80 backdrop-blur-md flex flex-col items-center justify-center p-6", children: isFaucetLoading ? (_jsx(WaitingMessage, { loaderSize: 52, message: {
|
|
61
|
+
visible: true,
|
|
62
|
+
title: 'Obtaining Testnet Tokens',
|
|
63
|
+
subtitle: 'Please wait while we request testnet tokens for your wallet...',
|
|
64
|
+
isTyping: false,
|
|
65
|
+
} })) : showFaucetSuccess ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-green-500 text-5xl mb-4 n1-ww-animate-fade-up", children: "\u2713" }), _jsxs("div", { className: "space-y-2 text-center", children: [_jsx("h3", { className: "text-xl text-white font-semibold", children: "Tokens Obtained Successfully" }), _jsx("p", { className: "text-sm text-green-400", children: "Your wallet has been funded with testnet tokens." }), _jsx("p", { className: "text-sm 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-ww-animate-fade-up", children: "\u26A0\uFE0F" }), _jsxs("div", { className: "space-y-2 text-center", children: [_jsx("h3", { className: "text-xl text-white font-semibold", children: "Failed to Get Tokens" }), _jsx("p", { className: "text-sm text-red-400", children: faucetError }), _jsx("button", { onClick: requestTestnetTokens, className: "mt-4 px-4 py-2 bg-n1-ww-main text-white rounded-sm hover:bg-n1-ww-main/90 transition-colors", children: "Try Again" })] })] })) : null })), _jsx("h2", { className: "text-xl 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-ww-border bg-n1-ww-gray-900 rounded-sm p-0 overflow-hidden n1-ww-animate-fade-up", style: { animationDelay: '0.1s' }, children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b border-n1-ww-border 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-n1-ww-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-900", fallbackTextColor: "text-blue-300" }) }), _jsx("span", { className: "text-white font-medium", children: tokenSymbol })] }), _jsx("div", { className: "text-xs rounded-sm bg-n1-ww-gray-800 px-2 py-1 text-n1-ww-gray-300", children: "Fixed Amount" })] }), isTestnet && (_jsx("div", { className: "mb-4 w-full flex items-center justify-center", children: _jsxs("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", children: [_jsx("span", { className: "font-semibold", children: "Testnet Only:" }), " Please make sure your wallet is set to ", _jsx("span", { className: "font-semibold", children: "testnet mode" }), " before proceeding. ", _jsx("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", children: "Learn how to switch to testnet" }), "."] }) })), _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-white mr-1 n1-ww-animate-fade-up", style: { animationDelay: '0.2s' }, children: amount }), _jsx("span", { className: "text-xl text-neutral-400 ml-1 n1-ww-animate-fade-up", style: { animationDelay: '0.3s' }, children: tokenSymbol })] }), _jsx("div", { className: "w-16 h-1 bg-n1-ww-gray-800 rounded-full mt-4 mb-2" }), _jsx("div", { className: "flex justify-center items-center text-sm mt-2 w-full n1-ww-animate-fade-up", style: { animationDelay: '0.4s' }, children: _jsxs("span", { className: "text-neutral-400", children: ["Balance: ", formattedBalance, " ", tokenSymbol] }) })] })] }), context.depositError && (_jsx("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' }, 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-neutral-950 py-4 text-center\n transition-all duration-300 ".concat(ANIMATION_EASE, " n1-ww-animate-fade-up\n ").concat(isValidAmount
|
|
66
|
+
? 'cursor-pointer border-n1-ww-border hover:border-n1-ww-border'
|
|
67
|
+
: 'cursor-not-allowed border-n1-ww-border opacity-50', "\n "), style: {
|
|
68
|
+
transform: isHovered && isValidAmount ? 'scale(0.99)' : 'scale(1)',
|
|
69
|
+
animationDelay: '0.6s'
|
|
70
|
+
}, children: _jsx("span", { className: "\n text-base font-medium tracking-wide transition-colors duration-300 ".concat(ANIMATION_EASE, "\n ").concat(isValidAmount
|
|
71
|
+
? 'text-n1-ww-gray-300 group-hover:text-white'
|
|
72
|
+
: 'text-n1-ww-gray-600', "\n "), children: "Continue" }) })] })] }));
|
|
73
|
+
}
|
|
74
|
+
//# sourceMappingURL=03-AmountInputScreen.js.map
|
|
@@ -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
|