npm - @n1xyz/wallet-widget - Versions diffs - 0.0.33-alpha.1 → 0.0.33-alpha.3 - Mend

@n1xyz/wallet-widget 0.0.33-alpha.1 → 0.0.33-alpha.3

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.

Files changed (137) hide show

package/dist/features/onboarding-flow/OnboardingFlow.js CHANGED Viewed

@@ -1,44 +1,47 @@
+"use strict";
 var _a;
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { Header } from './components';
-import { useOnboardingState } from './providers';
-import { AmountInputScreen, AuthLoadingScreen, ChainSelectionScreen, ConnectWalletScreen, DepositProgressScreen, DepositSuccessScreen, ErrorScreen, } from './screens';
-import { OnboardingStep } from './types';
-import { withImageFallback } from './utils/withImageFallback';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnboardingFlow = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var components_1 = require("./components");
+var providers_1 = require("./providers");
+var screens_1 = require("./screens");
+var types_1 = require("./types");
+var withImageFallback_1 = require("./utils/withImageFallback");
 // Apply the withImageFallback HOC to all screen components
-var EnhancedConnectWalletScreen = withImageFallback(ConnectWalletScreen);
-var EnhancedChainSelectionScreen = withImageFallback(ChainSelectionScreen);
-var EnhancedAmountInputScreen = withImageFallback(AmountInputScreen);
-var EnhancedDepositProgressScreen = withImageFallback(DepositProgressScreen);
-var EnhancedDepositSuccessScreen = withImageFallback(DepositSuccessScreen);
-var EnhancedAuthLoadingScreen = withImageFallback(AuthLoadingScreen);
-var EnhancedErrorScreen = withImageFallback(ErrorScreen);
+var EnhancedConnectWalletScreen = (0, withImageFallback_1.withImageFallback)(screens_1.ConnectWalletScreen);
+var EnhancedChainSelectionScreen = (0, withImageFallback_1.withImageFallback)(screens_1.ChainSelectionScreen);
+var EnhancedAmountInputScreen = (0, withImageFallback_1.withImageFallback)(screens_1.AmountInputScreen);
+var EnhancedDepositProgressScreen = (0, withImageFallback_1.withImageFallback)(screens_1.DepositProgressScreen);
+var EnhancedDepositSuccessScreen = (0, withImageFallback_1.withImageFallback)(screens_1.DepositSuccessScreen);
+var EnhancedAuthLoadingScreen = (0, withImageFallback_1.withImageFallback)(screens_1.AuthLoadingScreen);
+var EnhancedErrorScreen = (0, withImageFallback_1.withImageFallback)(screens_1.ErrorScreen);
 var DEFAULT_HEADER_CONFIG = { title: 'Bridge' };
 var HEADER_CONFIG = (_a = {},
-    _a[OnboardingStep.CONNECTING_WALLET] = { title: 'Connect Wallet' },
-    _a[OnboardingStep.CHAIN_SELECTION] = { title: 'Select Network' },
-    _a[OnboardingStep.AMOUNT_INPUT] = {
+    _a[types_1.OnboardingStep.CONNECTING_WALLET] = { title: 'Connect Wallet' },
+    _a[types_1.OnboardingStep.CHAIN_SELECTION] = { title: 'Select Network' },
+    _a[types_1.OnboardingStep.AMOUNT_INPUT] = {
         title: 'Enter Amount',
         backTarget: {
-            state: OnboardingStep.CHAIN_SELECTION,
+            state: types_1.OnboardingStep.CHAIN_SELECTION,
             contextUpdates: { selectedChain: null, amount: '' },
         },
     },
-    _a[OnboardingStep.DEPOSIT_PROGRESS] = { title: 'Processing Deposit' },
-    _a[OnboardingStep.DEPOSIT_SUCCESS] = { title: 'Deposit Complete' },
-    _a[OnboardingStep.AUTH_LOADING] = { title: 'Authenticating' },
-    _a[OnboardingStep.FINAL_SUCCESS] = { title: 'All Set' },
-    _a[OnboardingStep.ERROR] = { title: 'Something Went Wrong' },
+    _a[types_1.OnboardingStep.DEPOSIT_PROGRESS] = { title: 'Processing Deposit' },
+    _a[types_1.OnboardingStep.DEPOSIT_SUCCESS] = { title: 'Deposit Complete' },
+    _a[types_1.OnboardingStep.AUTH_LOADING] = { title: 'Authenticating' },
+    _a[types_1.OnboardingStep.FINAL_SUCCESS] = { title: 'All Set' },
+    _a[types_1.OnboardingStep.ERROR] = { title: 'Something Went Wrong' },
     _a);
 /**
  * Main component for the Nord onboarding flow
  */
-export var OnboardingFlow = function (_a) {
+var OnboardingFlow = function (_a) {
     var onClose = _a.onClose;
-    var _b = useOnboardingState(), state = _b.state, actions = _b.actions, isClosing = _b.isClosing;
-    var shouldAutoClose = state === OnboardingStep.FINAL_SUCCESS;
-    useEffect(function () {
+    var _b = (0, providers_1.useOnboardingState)(), state = _b.state, actions = _b.actions, isClosing = _b.isClosing;
+    var shouldAutoClose = state === types_1.OnboardingStep.FINAL_SUCCESS;
+    (0, react_1.useEffect)(function () {
         if (!shouldAutoClose) {
             return;
         }
@@ -53,37 +56,38 @@ export var OnboardingFlow = function (_a) {
     var backTarget = headerConfig.backTarget;
     var handleBack = backTarget
         ? function () {
-            if (backTarget.state === OnboardingStep.CHAIN_SELECTION) {
+            if (backTarget.state === types_1.OnboardingStep.CHAIN_SELECTION) {
                 actions.goToChainSelection({ resetSelection: true });
             }
         }
         : undefined;
-    return (_jsx("div", { className: "z-50 flex items-center justify-center overflow-auto font-era", children: _jsxs("div", { className: "bg-n1-ww-gray-700 relative border border-n1-ww-border rounded-[6px] transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] m-4 origin-center will-change-[max-width,transform,opacity]", style: { width: 400 }, children: [_jsx(Header, { onClose: onClose, title: headerConfig.title, onBack: handleBack }), _jsx("div", { className: "wallet-connection-flow-content p-4 overflow-visible", children: _jsx(OnboardingFlowScreenRenderer, { state: state, isClosing: isClosing }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "z-50 flex items-center justify-center overflow-auto font-era", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-n1-ww-gray-700 relative border border-n1-ww-border rounded-[6px] transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] m-4 origin-center will-change-[max-width,transform,opacity]", style: { width: 400 }, children: [(0, jsx_runtime_1.jsx)(components_1.Header, { onClose: onClose, title: headerConfig.title, onBack: handleBack }), (0, jsx_runtime_1.jsx)("div", { className: "wallet-connection-flow-content p-4 overflow-visible", children: (0, jsx_runtime_1.jsx)(OnboardingFlowScreenRenderer, { state: state, isClosing: isClosing }) })] }) }));
 };
+exports.OnboardingFlow = OnboardingFlow;
 // Screen renderer component that renders the active flow screen
 var renderScreenForState = function (state) {
     switch (state) {
-        case OnboardingStep.CONNECTING_WALLET:
-            return _jsx(EnhancedConnectWalletScreen, {});
-        case OnboardingStep.CHAIN_SELECTION:
-            return _jsx(EnhancedChainSelectionScreen, {});
-        case OnboardingStep.AMOUNT_INPUT:
-            return _jsx(EnhancedAmountInputScreen, {});
-        case OnboardingStep.DEPOSIT_PROGRESS:
-            return _jsx(EnhancedDepositProgressScreen, {});
-        case OnboardingStep.DEPOSIT_SUCCESS:
-            return _jsx(EnhancedDepositSuccessScreen, {});
-        case OnboardingStep.AUTH_LOADING:
-            return _jsx(EnhancedAuthLoadingScreen, {});
-        case OnboardingStep.ERROR:
-            return _jsx(EnhancedErrorScreen, {});
+        case types_1.OnboardingStep.CONNECTING_WALLET:
+            return (0, jsx_runtime_1.jsx)(EnhancedConnectWalletScreen, {});
+        case types_1.OnboardingStep.CHAIN_SELECTION:
+            return (0, jsx_runtime_1.jsx)(EnhancedChainSelectionScreen, {});
+        case types_1.OnboardingStep.AMOUNT_INPUT:
+            return (0, jsx_runtime_1.jsx)(EnhancedAmountInputScreen, {});
+        case types_1.OnboardingStep.DEPOSIT_PROGRESS:
+            return (0, jsx_runtime_1.jsx)(EnhancedDepositProgressScreen, {});
+        case types_1.OnboardingStep.DEPOSIT_SUCCESS:
+            return (0, jsx_runtime_1.jsx)(EnhancedDepositSuccessScreen, {});
+        case types_1.OnboardingStep.AUTH_LOADING:
+            return (0, jsx_runtime_1.jsx)(EnhancedAuthLoadingScreen, {});
+        case types_1.OnboardingStep.ERROR:
+            return (0, jsx_runtime_1.jsx)(EnhancedErrorScreen, {});
         default:
-            return _jsx(EnhancedConnectWalletScreen, {});
+            return (0, jsx_runtime_1.jsx)(EnhancedConnectWalletScreen, {});
     }
 };
 var OnboardingFlowScreenRenderer = function (_a) {
     var state = _a.state, isClosing = _a.isClosing;
-    var cachedScreenRef = useRef({
+    var cachedScreenRef = (0, react_1.useRef)({
         state: state,
         element: renderScreenForState(state),
     });
@@ -93,6 +97,6 @@ var OnboardingFlowScreenRenderer = function (_a) {
             element: renderScreenForState(state),
         };
     }
-    return (_jsx("div", { className: isClosing ? 'n1-ww-animate-fade-out' : 'n1-ww-animate-fade-in', children: cachedScreenRef.current.element }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: isClosing ? 'n1-ww-animate-fade-out' : 'n1-ww-animate-fade-in', children: cachedScreenRef.current.element }));
 };
 //# sourceMappingURL=OnboardingFlow.js.map

package/dist/features/onboarding-flow/OnboardingFlow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OnboardingFlow.js","sourceRoot":"","sources":["../../../src/features/onboarding-flow/OnboardingFlow.tsx"],"names":[],"mappings":";;AAAA~~,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC~~;AACjD,~~OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC~~;AACtC,~~OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC~~;AACjD,~~OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,WAAW,GACZ,MAAM,WAAW,CAAC~~;AACnB,~~OAAO,EAAqB,cAAc,EAAE,MAAM,SAAS,CAAC~~;AAC5D~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC~~;AAM9D,2DAA2D;AAC3D,IAAM,2BAA2B,GAAG,~~iBAAiB~~,~~CAAC~~,~~mBAAmB~~,CAAC,CAAC;AAC3E,IAAM,4BAA4B,GAAG,~~iBAAiB~~,~~CAAC~~,~~oBAAoB~~,CAAC,CAAC;AAC7E,IAAM,yBAAyB,GAAG,~~iBAAiB~~,~~CAAC~~,~~iBAAiB~~,CAAC,CAAC;AACvE,IAAM,6BAA6B,GAAG,~~iBAAiB~~,~~CAAC~~,~~qBAAqB~~,CAAC,CAAC;AAC/E,IAAM,4BAA4B,GAAG,~~iBAAiB~~,~~CAAC~~,~~oBAAoB~~,CAAC,CAAC;AAC7E,IAAM,yBAAyB,GAAG,~~iBAAiB~~,~~CAAC~~,~~iBAAiB~~,CAAC,CAAC;AACvE,IAAM,mBAAmB,GAAG,~~iBAAiB~~,~~CAAC~~,~~WAAW~~,CAAC,CAAC;AAU3D,IAAM,qBAAqB,GAAwB,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAEvE,IAAM,aAAa;IACjB,GAAC,~~cAAc~~,CAAC,iBAAiB,IAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE;IAC/D,GAAC,~~cAAc~~,CAAC,eAAe,IAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE;IAC7D,GAAC,~~cAAc~~,CAAC,YAAY,IAAG;QAC7B,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE;YACV,KAAK,EAAE,~~cAAc~~,CAAC,eAAe;YACrC,cAAc,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;SACpD;KACF;IACD,GAAC,~~cAAc~~,CAAC,gBAAgB,IAAG,EAAE,KAAK,EAAE,oBAAoB,EAAE;IAClE,GAAC,~~cAAc~~,CAAC,eAAe,IAAG,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC/D,GAAC,~~cAAc~~,CAAC,YAAY,IAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE;IAC1D,GAAC,~~cAAc~~,CAAC,aAAa,IAAG,EAAE,KAAK,EAAE,SAAS,EAAE;IACpD,GAAC,~~cAAc~~,CAAC,KAAK,IAAG,EAAE,KAAK,EAAE,sBAAsB,EAAE;OAC1D,CAAC;AAEF;;GAEG;~~AACH~~,~~MAAM,CAAC,~~IAAM,cAAc,GAAkC,UAAC,EAAW;QAAT,OAAO,aAAA;IAC/D,IAAA,KAAgC,~~kBAAkB~~,~~EAAE~~,EAAlD,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,SAAS,eAAyB,CAAC;IAC3D,IAAM,eAAe,GAAG,KAAK,KAAK,~~cAAc~~,CAAC,aAAa,CAAC;IAE/D,~~SAAS~~,~~CAAC~~;QACR,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/B,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAM,YAAY,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,qBAAqB,CAAC;IACnE,IAAM,UAAU,GAAG,YAAY,CAAC,UAAU,CAAC;IAC3C,IAAM,UAAU,GAAG,UAAU;QAC3B,CAAC,CAAC;YACE,IAAI,UAAU,CAAC,KAAK,KAAK,~~cAAc~~,CAAC,eAAe,EAAE,CAAC;gBACxD,OAAO,CAAC,kBAAkB,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;YACvD,CAAC;QACH,CAAC;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,~~cACE~~,SAAS,EAAE,8DAA8D,YAEzE,~~eACE~~,SAAS,EAAC,8NAA8N,EACxO,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,aAGrB,~~KAAC~~,~~MAAM~~,IACL,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,MAAM,EAAE,UAAU,GAClB,EAGF,~~cAAK~~,SAAS,EAAC,qDAAqD,YAClE,~~KAAC~~,4BAA4B,IAC3B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,GACpB,GACE,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,gEAAgE;AAChE,IAAM,oBAAoB,GAAG,UAAC,KAAqB;IACjD,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,~~cAAc~~,CAAC,iBAAiB;YACnC,OAAO,~~KAAC~~,2BAA2B,KAAG,CAAC;QACzC,KAAK,~~cAAc~~,CAAC,eAAe;YACjC,OAAO,~~KAAC~~,4BAA4B,KAAG,CAAC;QAC1C,KAAK,~~cAAc~~,CAAC,YAAY;YAC9B,OAAO,~~KAAC~~,yBAAyB,KAAG,CAAC;QACvC,KAAK,~~cAAc~~,CAAC,gBAAgB;YAClC,OAAO,~~KAAC~~,6BAA6B,KAAG,CAAC;QAC3C,KAAK,~~cAAc~~,CAAC,eAAe;YACjC,OAAO,~~KAAC~~,4BAA4B,KAAG,CAAC;QAC1C,KAAK,~~cAAc~~,CAAC,YAAY;YAC9B,OAAO,~~KAAC~~,yBAAyB,KAAG,CAAC;QACvC,KAAK,~~cAAc~~,CAAC,KAAK;YACvB,OAAO,~~KAAC~~,mBAAmB,KAAG,CAAC;QACjC;YACE,OAAO,~~KAAC~~,2BAA2B,KAAG,CAAC;IAC3C,CAAC;AACH,CAAC,CAAC;AAEF,IAAM,4BAA4B,GAG7B,UAAC,EAAoB;QAAlB,KAAK,WAAA,EAAE,SAAS,eAAA;IACtB,IAAM,eAAe,GAAG,~~MAAM~~,~~CAG3B~~;QACD,KAAK,OAAA;QACL,OAAO,EAAE,oBAAoB,CAAC,KAAK,CAAC;KACrC,CAAC,CAAC;IAEH,IAAI,eAAe,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;QAC5C,eAAe,CAAC,OAAO,GAAG;YACxB,KAAK,OAAA;YACL,OAAO,EAAE,oBAAoB,CAAC,KAAK,CAAC;SACrC,CAAC;IACJ,CAAC;IAED,OAAO,CACL,~~cAAK~~,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,uBAAuB,YAC3E,eAAe,CAAC,OAAO,CAAC,OAAO,GAC5B,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Header } from './components';\nimport { useOnboardingState } from './providers';\nimport {\n AmountInputScreen,\n AuthLoadingScreen,\n ChainSelectionScreen,\n ConnectWalletScreen,\n DepositProgressScreen,\n DepositSuccessScreen,\n ErrorScreen,\n} from './screens';\nimport { OnboardingContext, OnboardingStep } from './types';\nimport { withImageFallback } from './utils/withImageFallback';\n\ninterface OnboardingFlowProps {\n onClose?: () => void;\n}\n\n// Apply the withImageFallback HOC to all screen components\nconst EnhancedConnectWalletScreen = withImageFallback(ConnectWalletScreen);\nconst EnhancedChainSelectionScreen = withImageFallback(ChainSelectionScreen);\nconst EnhancedAmountInputScreen = withImageFallback(AmountInputScreen);\nconst EnhancedDepositProgressScreen = withImageFallback(DepositProgressScreen);\nconst EnhancedDepositSuccessScreen = withImageFallback(DepositSuccessScreen);\nconst EnhancedAuthLoadingScreen = withImageFallback(AuthLoadingScreen);\nconst EnhancedErrorScreen = withImageFallback(ErrorScreen);\n\ninterface HeaderDisplayConfig {\n title: string;\n backTarget?: {\n state: OnboardingStep;\n contextUpdates?: Partial<OnboardingContext>;\n };\n}\n\nconst DEFAULT_HEADER_CONFIG: HeaderDisplayConfig = { title: 'Bridge' };\n\nconst HEADER_CONFIG: Record<OnboardingStep, HeaderDisplayConfig> = {\n [OnboardingStep.CONNECTING_WALLET]: { title: 'Connect Wallet' },\n [OnboardingStep.CHAIN_SELECTION]: { title: 'Select Network' },\n [OnboardingStep.AMOUNT_INPUT]: {\n title: 'Enter Amount',\n backTarget: {\n state: OnboardingStep.CHAIN_SELECTION,\n contextUpdates: { selectedChain: null, amount: '' },\n },\n },\n [OnboardingStep.DEPOSIT_PROGRESS]: { title: 'Processing Deposit' },\n [OnboardingStep.DEPOSIT_SUCCESS]: { title: 'Deposit Complete' },\n [OnboardingStep.AUTH_LOADING]: { title: 'Authenticating' },\n [OnboardingStep.FINAL_SUCCESS]: { title: 'All Set' },\n [OnboardingStep.ERROR]: { title: 'Something Went Wrong' },\n};\n\n/*\n Main component for the Nord onboarding flow\n /\nexport const OnboardingFlow: React.FC<OnboardingFlowProps> = ({ onClose }) => {\n const { state, actions, isClosing } = useOnboardingState();\n const shouldAutoClose = state === OnboardingStep.FINAL_SUCCESS;\n\n useEffect(() => {\n if (!shouldAutoClose) {\n return;\n }\n\n if (onClose) {\n onClose();\n }\n }, [shouldAutoClose, onClose]);\n\n if (shouldAutoClose) {\n return null;\n }\n\n const headerConfig = HEADER_CONFIG[state] \|\| DEFAULT_HEADER_CONFIG;\n const backTarget = headerConfig.backTarget;\n const handleBack = backTarget\n ? () => {\n if (backTarget.state === OnboardingStep.CHAIN_SELECTION) {\n actions.goToChainSelection({ resetSelection: true });\n }\n }\n : undefined;\n\n return (\n <div\n className={`z-50 flex items-center justify-center overflow-auto font-era`}\n >\n <div\n className=\"bg-n1-ww-gray-700 relative border border-n1-ww-border rounded-[6px] transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] m-4 origin-center will-change-[max-width,transform,opacity]\"\n style={{ width: 400 }}\n >\n {/ Header /}\n <Header\n onClose={onClose}\n title={headerConfig.title}\n onBack={handleBack}\n />\n\n {/ Content */}\n <div className=\"wallet-connection-flow-content p-4 overflow-visible\">\n <OnboardingFlowScreenRenderer\n state={state}\n isClosing={isClosing}\n />\n </div>\n </div>\n </div>\n );\n};\n\n// Screen renderer component that renders the active flow screen\nconst renderScreenForState = (state: OnboardingStep) => {\n switch (state) {\n case OnboardingStep.CONNECTING_WALLET:\n return <EnhancedConnectWalletScreen />;\n case OnboardingStep.CHAIN_SELECTION:\n return <EnhancedChainSelectionScreen />;\n case OnboardingStep.AMOUNT_INPUT:\n return <EnhancedAmountInputScreen />;\n case OnboardingStep.DEPOSIT_PROGRESS:\n return <EnhancedDepositProgressScreen />;\n case OnboardingStep.DEPOSIT_SUCCESS:\n return <EnhancedDepositSuccessScreen />;\n case OnboardingStep.AUTH_LOADING:\n return <EnhancedAuthLoadingScreen />;\n case OnboardingStep.ERROR:\n return <EnhancedErrorScreen />;\n default:\n return <EnhancedConnectWalletScreen />;\n }\n};\n\nconst OnboardingFlowScreenRenderer: React.FC<{\n state: OnboardingStep;\n isClosing: boolean;\n}> = ({ state, isClosing }) => {\n const cachedScreenRef = useRef<{\n state: OnboardingStep;\n element: React.ReactNode;\n }>({\n state,\n element: renderScreenForState(state),\n });\n\n if (cachedScreenRef.current.state !== state) {\n cachedScreenRef.current = {\n state,\n element: renderScreenForState(state),\n };\n }\n\n return (\n <div className={isClosing ? 'n1-ww-animate-fade-out' : 'n1-ww-animate-fade-in'}>\n {cachedScreenRef.current.element}\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"OnboardingFlow.js","sourceRoot":"","sources":["../../../src/features/onboarding-flow/OnboardingFlow.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Header } from './components';\nimport { useOnboardingState } from './providers';\nimport {\n AmountInputScreen,\n AuthLoadingScreen,\n ChainSelectionScreen,\n ConnectWalletScreen,\n DepositProgressScreen,\n DepositSuccessScreen,\n ErrorScreen,\n} from './screens';\nimport { OnboardingContext, OnboardingStep } from './types';\nimport { withImageFallback } from './utils/withImageFallback';\n\ninterface OnboardingFlowProps {\n onClose?: () => void;\n}\n\n// Apply the withImageFallback HOC to all screen components\nconst EnhancedConnectWalletScreen = withImageFallback(ConnectWalletScreen);\nconst EnhancedChainSelectionScreen = withImageFallback(ChainSelectionScreen);\nconst EnhancedAmountInputScreen = withImageFallback(AmountInputScreen);\nconst EnhancedDepositProgressScreen = withImageFallback(DepositProgressScreen);\nconst EnhancedDepositSuccessScreen = withImageFallback(DepositSuccessScreen);\nconst EnhancedAuthLoadingScreen = withImageFallback(AuthLoadingScreen);\nconst EnhancedErrorScreen = withImageFallback(ErrorScreen);\n\ninterface HeaderDisplayConfig {\n title: string;\n backTarget?: {\n state: OnboardingStep;\n contextUpdates?: Partial<OnboardingContext>;\n };\n}\n\nconst DEFAULT_HEADER_CONFIG: HeaderDisplayConfig = { title: 'Bridge' };\n\nconst HEADER_CONFIG: Record<OnboardingStep, HeaderDisplayConfig> = {\n [OnboardingStep.CONNECTING_WALLET]: { title: 'Connect Wallet' },\n [OnboardingStep.CHAIN_SELECTION]: { title: 'Select Network' },\n [OnboardingStep.AMOUNT_INPUT]: {\n title: 'Enter Amount',\n backTarget: {\n state: OnboardingStep.CHAIN_SELECTION,\n contextUpdates: { selectedChain: null, amount: '' },\n },\n },\n [OnboardingStep.DEPOSIT_PROGRESS]: { title: 'Processing Deposit' },\n [OnboardingStep.DEPOSIT_SUCCESS]: { title: 'Deposit Complete' },\n [OnboardingStep.AUTH_LOADING]: { title: 'Authenticating' },\n [OnboardingStep.FINAL_SUCCESS]: { title: 'All Set' },\n [OnboardingStep.ERROR]: { title: 'Something Went Wrong' },\n};\n\n/*\n Main component for the Nord onboarding flow\n /\nexport const OnboardingFlow: React.FC<OnboardingFlowProps> = ({ onClose }) => {\n const { state, actions, isClosing } = useOnboardingState();\n const shouldAutoClose = state === OnboardingStep.FINAL_SUCCESS;\n\n useEffect(() => {\n if (!shouldAutoClose) {\n return;\n }\n\n if (onClose) {\n onClose();\n }\n }, [shouldAutoClose, onClose]);\n\n if (shouldAutoClose) {\n return null;\n }\n\n const headerConfig = HEADER_CONFIG[state] \|\| DEFAULT_HEADER_CONFIG;\n const backTarget = headerConfig.backTarget;\n const handleBack = backTarget\n ? () => {\n if (backTarget.state === OnboardingStep.CHAIN_SELECTION) {\n actions.goToChainSelection({ resetSelection: true });\n }\n }\n : undefined;\n\n return (\n <div\n className={`z-50 flex items-center justify-center overflow-auto font-era`}\n >\n <div\n className=\"bg-n1-ww-gray-700 relative border border-n1-ww-border rounded-[6px] transition-[max-width,transform,opacity] duration-[3000ms] ease-[cubic-bezier(0.16,1,0.3,1)] m-4 origin-center will-change-[max-width,transform,opacity]\"\n style={{ width: 400 }}\n >\n {/ Header /}\n <Header\n onClose={onClose}\n title={headerConfig.title}\n onBack={handleBack}\n />\n\n {/ Content */}\n <div className=\"wallet-connection-flow-content p-4 overflow-visible\">\n <OnboardingFlowScreenRenderer\n state={state}\n isClosing={isClosing}\n />\n </div>\n </div>\n </div>\n );\n};\n\n// Screen renderer component that renders the active flow screen\nconst renderScreenForState = (state: OnboardingStep) => {\n switch (state) {\n case OnboardingStep.CONNECTING_WALLET:\n return <EnhancedConnectWalletScreen />;\n case OnboardingStep.CHAIN_SELECTION:\n return <EnhancedChainSelectionScreen />;\n case OnboardingStep.AMOUNT_INPUT:\n return <EnhancedAmountInputScreen />;\n case OnboardingStep.DEPOSIT_PROGRESS:\n return <EnhancedDepositProgressScreen />;\n case OnboardingStep.DEPOSIT_SUCCESS:\n return <EnhancedDepositSuccessScreen />;\n case OnboardingStep.AUTH_LOADING:\n return <EnhancedAuthLoadingScreen />;\n case OnboardingStep.ERROR:\n return <EnhancedErrorScreen />;\n default:\n return <EnhancedConnectWalletScreen />;\n }\n};\n\nconst OnboardingFlowScreenRenderer: React.FC<{\n state: OnboardingStep;\n isClosing: boolean;\n}> = ({ state, isClosing }) => {\n const cachedScreenRef = useRef<{\n state: OnboardingStep;\n element: React.ReactNode;\n }>({\n state,\n element: renderScreenForState(state),\n });\n\n if (cachedScreenRef.current.state !== state) {\n cachedScreenRef.current = {\n state,\n element: renderScreenForState(state),\n };\n }\n\n return (\n <div className={isClosing ? 'n1-ww-animate-fade-out' : 'n1-ww-animate-fade-in'}>\n {cachedScreenRef.current.element}\n </div>\n );\n};\n"]}

package/dist/features/onboarding-flow/components/ChainButton.js CHANGED Viewed

@@ -1,6 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ImageWithFallback } from "./ImageWithFallback";
-export function ChainButton(_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainButton = ChainButton;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ImageWithFallback_1 = require("./ImageWithFallback");
+function ChainButton(_a) {
     var chain = _a.chain, onClick = _a.onClick, _b = _a.selected, selected = _b === void 0 ? false : _b, _c = _a.soon, soon = _c === void 0 ? false : _c, subtitle = _a.subtitle;
     var handleClick = function () {
         if (!soon) {
@@ -16,6 +19,6 @@ export function ChainButton(_a) {
         : selected
             ? "".concat(baseButtonClasses, " border-n1-ww-border hover:border-n1-ww-main-400/50 hover:bg-n1-ww-gray-800 cursor-pointer")
             : "".concat(baseButtonClasses, " border-n1-ww-border hover:border-n1-ww-main-400/50 hover:bg-n1-ww-gray-800 cursor-pointer");
-    return (_jsxs("button", { onClick: handleClick, className: buttonClasses, disabled: soon, children: [_jsxs("div", { className: "flex items-center justify-start", children: [_jsx("div", { className: "flex items-center justify-center rounded-full bg-n1-ww-gray-650 mr-2 h-8 w-8", children: typeof chain.logo === "string" ? (_jsx(ImageWithFallback, { src: chain.logo, width: 48, height: 48, alt: chain.name, className: imageClasses, fallbackClassName: "w-12 h-12 rounded-full text-lg font-bold opacity-90 group-hover:scale-105 transition-all duration-200 brightness-150", fallbackBgColor: "bg-n1-ww-main/20", fallbackTextColor: "text-n1-ww-main" })) : (_jsx("div", { className: "grayscale brightness-150", children: chain.logo })) }), _jsxs("div", { className: "flex flex-col items-start justify-center text-left", children: [_jsx("span", { className: "text-white font-medium text-sm", children: chain.name }), subtitle ? (_jsx("span", { className: "text-n1-ww-gray-100 font-light text-xs", children: subtitle })) : (_jsx("span", { className: "text-white font-light text-xs", children: chain.name }))] })] }), _jsx("div", { className: "flex items-center justify-center", children: soon ? (_jsx("span", { className: "px-2 py-1 rounded text-xs font-medium bg-n1-ww-main-950 text-n1-ww-main-700", children: "SOON" })) : selected ? (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "0.5", y: "0.5", width: "15", height: "15", rx: "7.5", stroke: "#FF441A" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.3333 5.52227L7.48168 11.4007L7.1762 11.7708L6.83012 11.4354L4 8.69212L4.61955 8.10046L7.10358 10.5083L11.6497 5L12.3333 5.52227Z", fill: "#FF441A", stroke: "#FF441A", strokeWidth: "0.5" })] })) : (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "transition-opacity duration-200 group-hover:opacity-80", children: [_jsx("circle", { cx: "8", cy: "8", r: "8", fill: "black" }), _jsx("circle", { cx: "8", cy: "8", r: "7.5", stroke: "white", strokeOpacity: "0.2" })] })) })] }));
+    return ((0, jsx_runtime_1.jsxs)("button", { onClick: handleClick, className: buttonClasses, disabled: soon, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center rounded-full bg-n1-ww-gray-650 mr-2 h-8 w-8", children: typeof chain.logo === "string" ? ((0, jsx_runtime_1.jsx)(ImageWithFallback_1.ImageWithFallback, { src: chain.logo, width: 48, height: 48, alt: chain.name, className: imageClasses, fallbackClassName: "w-12 h-12 rounded-full text-lg font-bold opacity-90 group-hover:scale-105 transition-all duration-200 brightness-150", fallbackBgColor: "bg-n1-ww-main/20", fallbackTextColor: "text-n1-ww-main" })) : ((0, jsx_runtime_1.jsx)("div", { className: "grayscale brightness-150", children: chain.logo })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start justify-center text-left", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-white font-medium text-sm", children: chain.name }), subtitle ? ((0, jsx_runtime_1.jsx)("span", { className: "text-n1-ww-gray-100 font-light text-xs", children: subtitle })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-white font-light text-xs", children: chain.name }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center", children: soon ? ((0, jsx_runtime_1.jsx)("span", { className: "px-2 py-1 rounded text-xs font-medium bg-n1-ww-main-950 text-n1-ww-main-700", children: "SOON" })) : selected ? ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("rect", { x: "0.5", y: "0.5", width: "15", height: "15", rx: "7.5", stroke: "#FF441A" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.3333 5.52227L7.48168 11.4007L7.1762 11.7708L6.83012 11.4354L4 8.69212L4.61955 8.10046L7.10358 10.5083L11.6497 5L12.3333 5.52227Z", fill: "#FF441A", stroke: "#FF441A", strokeWidth: "0.5" })] })) : ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "transition-opacity duration-200 group-hover:opacity-80", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "8", fill: "black" }), (0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "7.5", stroke: "white", strokeOpacity: "0.2" })] })) })] }));
 }
 //# sourceMappingURL=ChainButton.js.map

package/dist/features/onboarding-flow/components/ChainButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChainButton.js","sourceRoot":"","sources":["../../../../src/features/onboarding-flow/components/ChainButton.tsx"],"names":[],"mappings":"~~;AACA~~,~~OAAO~~,~~EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC~~;AAUxD,~~MAAM~~,~~UAAU,~~WAAW,CAAC,EAMT;QALjB,KAAK,WAAA,EACL,OAAO,aAAA,EACP,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,QAAQ,cAAA;IAER,IAAM,WAAW,GAAG;QAClB,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,IAAM,YAAY,GAAG,iEAAiE,CAAC;IAEvF,sBAAsB;IACtB,IAAM,iBAAiB,GAAG,6GAA6G,CAAC;IAExI,wDAAwD;IACxD,IAAM,aAAa,GAAG,IAAI;QACxB,CAAC,CAAC,UAAG,iBAAiB,4CAAyC;QAC/D,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,UAAG,iBAAiB,+FAA4F;YAClH,CAAC,CAAC,UAAG,iBAAiB,+FAA4F,CAAC;IAErH,OAAO,CACL,~~kBACE~~,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,IAAI,aAEd,~~eAAK~~,SAAS,EAAC,iCAAiC,aAC9C,~~cAAK~~,SAAS,EAAC,8EAA8E,YAC1F,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAChC,~~KAAC~~,~~iBAAiB~~,IAChB,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,SAAS,EAAE,YAAY,EACvB,iBAAiB,EAAC,sHAAsH,EACxI,eAAe,EAAC,kBAAkB,EAClC,iBAAiB,EAAC,iBAAiB,GACnC,CACH,CAAC,CAAC,CAAC,CACF,~~cAAK~~,SAAS,EAAC,0BAA0B,YAAE,KAAK,CAAC,IAAI,GAAO,CAC7D,GACG,EACN,~~eAAK~~,SAAS,EAAC,oDAAoD,aACjE,~~eAAM~~,SAAS,EAAC,gCAAgC,YAAE,KAAK,CAAC,IAAI,GAAQ,EACnE,QAAQ,CAAC,CAAC,CAAC,CACV,~~eAAM~~,SAAS,EAAC,wCAAwC,YAAE,QAAQ,GAAQ,CAC3E,CAAC,CAAC,CAAC,CACF,~~eAAM~~,SAAS,EAAC,+BAA+B,YAAE,KAAK,CAAC,IAAI,GAAQ,CACpE,IACG,IACF,EACN,~~cAAK~~,SAAS,EAAC,kCAAkC,YAC9C,IAAI,CAAC,CAAC,CAAC,CACN,~~eAAM~~,SAAS,EAAC,6EAA6E,qBAEtF,CACR,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,~~eAAK~~,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC5F,~~eAAM~~,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,GAAE,EACxE,~~eAAM~~,QAAQ,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAC,CAAC,EAAC,sIAAsI,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,WAAW,EAAC,KAAK,GAAE,IACpO,CACP,CAAC,CAAC,CAAC,CACF,~~eAAK~~,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAC,wDAAwD,aAC/J,~~iBAAQ~~,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,GAAE,EAC1C,~~iBAAQ~~,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,GAAE,IAC9D,CACP,GACG,IACC,CACV,CAAC;AACJ,CAAC","sourcesContent":["import { Chain } from \"../types\";\nimport { ImageWithFallback } from \"./ImageWithFallback\";\n\ninterface ChainButtonProps {\n chain: Chain;\n onClick: (chainId: string) => void;\n selected?: boolean;\n soon?: boolean;\n subtitle?: string;\n}\n\nexport function ChainButton({\n chain,\n onClick,\n selected = false,\n soon = false,\n subtitle,\n}: ChainButtonProps) {\n const handleClick = () => {\n if (!soon) {\n onClick(chain.id);\n }\n };\n \n const imageClasses = \"opacity-90 grayscale brightness-150 transition-all duration-200\";\n\n // Base button classes\n const baseButtonClasses = \"group rounded-lg flex items-center justify-between border p-4 bg-n1-ww-gray-900 transition-all duration-200\";\n \n // Conditional classes based on selection and soon state\n const buttonClasses = soon\n ? `${baseButtonClasses} border-n1-ww-border cursor-not-allowed`\n : selected\n ? `${baseButtonClasses} border-n1-ww-border hover:border-n1-ww-main-400/50 hover:bg-n1-ww-gray-800 cursor-pointer`\n : `${baseButtonClasses} border-n1-ww-border hover:border-n1-ww-main-400/50 hover:bg-n1-ww-gray-800 cursor-pointer`;\n\n return (\n <button\n onClick={handleClick}\n className={buttonClasses}\n disabled={soon}\n >\n <div className=\"flex items-center justify-start\">\n <div className=\"flex items-center justify-center rounded-full bg-n1-ww-gray-650 mr-2 h-8 w-8\">\n {typeof chain.logo === \"string\" ? (\n <ImageWithFallback\n src={chain.logo}\n width={48}\n height={48}\n alt={chain.name}\n className={imageClasses}\n fallbackClassName=\"w-12 h-12 rounded-full text-lg font-bold opacity-90 group-hover:scale-105 transition-all duration-200 brightness-150\"\n fallbackBgColor=\"bg-n1-ww-main/20\"\n fallbackTextColor=\"text-n1-ww-main\"\n />\n ) : (\n <div className=\"grayscale brightness-150\">{chain.logo}</div>\n )}\n </div>\n <div className=\"flex flex-col items-start justify-center text-left\">\n <span className=\"text-white font-medium text-sm\">{chain.name}</span>\n {subtitle ? (\n <span className=\"text-n1-ww-gray-100 font-light text-xs\">{subtitle}</span>\n ) : (\n <span className=\"text-white font-light text-xs\">{chain.name}</span>\n )}\n </div>\n </div>\n <div className=\"flex items-center justify-center\">\n {soon ? (\n <span className=\"px-2 py-1 rounded text-xs font-medium bg-n1-ww-main-950 text-n1-ww-main-700\">\n SOON\n </span>\n ) : selected ? (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#FF441A\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\" d=\"M12.3333 5.52227L7.48168 11.4007L7.1762 11.7708L6.83012 11.4354L4 8.69212L4.61955 8.10046L7.10358 10.5083L11.6497 5L12.3333 5.52227Z\" fill=\"#FF441A\" stroke=\"#FF441A\" strokeWidth=\"0.5\"/>\n </svg>\n ) : (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"transition-opacity duration-200 group-hover:opacity-80\">\n <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"black\"/>\n <circle cx=\"8\" cy=\"8\" r=\"7.5\" stroke=\"white\" strokeOpacity=\"0.2\"/>\n </svg>\n )}\n </div>\n </button>\n );\n}\n"]}
1	+ {"version":3,"file":"ChainButton.js","sourceRoot":"","sources":["../../../../src/features/onboarding-flow/components/ChainButton.tsx"],"names":[],"mappings":";;AAWA,kCA4EC;;AAtFD,yDAAwD;AAUxD,SAAgB,WAAW,CAAC,EAMT;QALjB,KAAK,WAAA,EACL,OAAO,aAAA,EACP,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,QAAQ,cAAA;IAER,IAAM,WAAW,GAAG;QAClB,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,IAAM,YAAY,GAAG,iEAAiE,CAAC;IAEvF,sBAAsB;IACtB,IAAM,iBAAiB,GAAG,6GAA6G,CAAC;IAExI,wDAAwD;IACxD,IAAM,aAAa,GAAG,IAAI;QACxB,CAAC,CAAC,UAAG,iBAAiB,4CAAyC;QAC/D,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,UAAG,iBAAiB,+FAA4F;YAClH,CAAC,CAAC,UAAG,iBAAiB,+FAA4F,CAAC;IAErH,OAAO,CACL,oCACE,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,IAAI,aAEd,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,gCAAK,SAAS,EAAC,8EAA8E,YAC1F,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAChC,uBAAC,qCAAiB,IAChB,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,SAAS,EAAE,YAAY,EACvB,iBAAiB,EAAC,sHAAsH,EACxI,eAAe,EAAC,kBAAkB,EAClC,iBAAiB,EAAC,iBAAiB,GACnC,CACH,CAAC,CAAC,CAAC,CACF,gCAAK,SAAS,EAAC,0BAA0B,YAAE,KAAK,CAAC,IAAI,GAAO,CAC7D,GACG,EACN,iCAAK,SAAS,EAAC,oDAAoD,aACjE,iCAAM,SAAS,EAAC,gCAAgC,YAAE,KAAK,CAAC,IAAI,GAAQ,EACnE,QAAQ,CAAC,CAAC,CAAC,CACV,iCAAM,SAAS,EAAC,wCAAwC,YAAE,QAAQ,GAAQ,CAC3E,CAAC,CAAC,CAAC,CACF,iCAAM,SAAS,EAAC,+BAA+B,YAAE,KAAK,CAAC,IAAI,GAAQ,CACpE,IACG,IACF,EACN,gCAAK,SAAS,EAAC,kCAAkC,YAC9C,IAAI,CAAC,CAAC,CAAC,CACN,iCAAM,SAAS,EAAC,6EAA6E,qBAEtF,CACR,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,iCAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC5F,iCAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,GAAE,EACxE,iCAAM,QAAQ,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAC,CAAC,EAAC,sIAAsI,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,WAAW,EAAC,KAAK,GAAE,IACpO,CACP,CAAC,CAAC,CAAC,CACF,iCAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAC,wDAAwD,aAC/J,mCAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,GAAE,EAC1C,mCAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,GAAE,IAC9D,CACP,GACG,IACC,CACV,CAAC;AACJ,CAAC","sourcesContent":["import { Chain } from \"../types\";\nimport { ImageWithFallback } from \"./ImageWithFallback\";\n\ninterface ChainButtonProps {\n chain: Chain;\n onClick: (chainId: string) => void;\n selected?: boolean;\n soon?: boolean;\n subtitle?: string;\n}\n\nexport function ChainButton({\n chain,\n onClick,\n selected = false,\n soon = false,\n subtitle,\n}: ChainButtonProps) {\n const handleClick = () => {\n if (!soon) {\n onClick(chain.id);\n }\n };\n \n const imageClasses = \"opacity-90 grayscale brightness-150 transition-all duration-200\";\n\n // Base button classes\n const baseButtonClasses = \"group rounded-lg flex items-center justify-between border p-4 bg-n1-ww-gray-900 transition-all duration-200\";\n \n // Conditional classes based on selection and soon state\n const buttonClasses = soon\n ? `${baseButtonClasses} border-n1-ww-border cursor-not-allowed`\n : selected\n ? `${baseButtonClasses} border-n1-ww-border hover:border-n1-ww-main-400/50 hover:bg-n1-ww-gray-800 cursor-pointer`\n : `${baseButtonClasses} border-n1-ww-border hover:border-n1-ww-main-400/50 hover:bg-n1-ww-gray-800 cursor-pointer`;\n\n return (\n <button\n onClick={handleClick}\n className={buttonClasses}\n disabled={soon}\n >\n <div className=\"flex items-center justify-start\">\n <div className=\"flex items-center justify-center rounded-full bg-n1-ww-gray-650 mr-2 h-8 w-8\">\n {typeof chain.logo === \"string\" ? (\n <ImageWithFallback\n src={chain.logo}\n width={48}\n height={48}\n alt={chain.name}\n className={imageClasses}\n fallbackClassName=\"w-12 h-12 rounded-full text-lg font-bold opacity-90 group-hover:scale-105 transition-all duration-200 brightness-150\"\n fallbackBgColor=\"bg-n1-ww-main/20\"\n fallbackTextColor=\"text-n1-ww-main\"\n />\n ) : (\n <div className=\"grayscale brightness-150\">{chain.logo}</div>\n )}\n </div>\n <div className=\"flex flex-col items-start justify-center text-left\">\n <span className=\"text-white font-medium text-sm\">{chain.name}</span>\n {subtitle ? (\n <span className=\"text-n1-ww-gray-100 font-light text-xs\">{subtitle}</span>\n ) : (\n <span className=\"text-white font-light text-xs\">{chain.name}</span>\n )}\n </div>\n </div>\n <div className=\"flex items-center justify-center\">\n {soon ? (\n <span className=\"px-2 py-1 rounded text-xs font-medium bg-n1-ww-main-950 text-n1-ww-main-700\">\n SOON\n </span>\n ) : selected ? (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#FF441A\"/>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\" d=\"M12.3333 5.52227L7.48168 11.4007L7.1762 11.7708L6.83012 11.4354L4 8.69212L4.61955 8.10046L7.10358 10.5083L11.6497 5L12.3333 5.52227Z\" fill=\"#FF441A\" stroke=\"#FF441A\" strokeWidth=\"0.5\"/>\n </svg>\n ) : (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"transition-opacity duration-200 group-hover:opacity-80\">\n <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"black\"/>\n <circle cx=\"8\" cy=\"8\" r=\"7.5\" stroke=\"white\" strokeOpacity=\"0.2\"/>\n </svg>\n )}\n </div>\n </button>\n );\n}\n"]}

package/dist/features/onboarding-flow/components/Header.js CHANGED Viewed

@@ -1,12 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { useN1WalletContext, useN1WalletInternalContext } from '../../../hooks';
-import { shortenAddress } from '../../../utils/shortenString';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+var shortenString_1 = require("../../../utils/shortenString");
 var WalletConnectionBadge = function () {
-    var address = useN1WalletContext().address;
-    var dynamicWallet = useN1WalletInternalContext().dynamicWallet;
+    var address = (0, hooks_1.useN1WalletContext)().address;
+    var dynamicWallet = (0, hooks_1.useN1WalletInternalContext)().dynamicWallet;
     var connectionAddress = (dynamicWallet === null || dynamicWallet === void 0 ? void 0 : dynamicWallet.address) || address;
-    var handleShareClick = useCallback(function () {
+    var handleShareClick = (0, react_1.useCallback)(function () {
         var _a;
         if (!connectionAddress || typeof navigator === 'undefined')
             return;
@@ -22,15 +25,15 @@ var WalletConnectionBadge = function () {
     if (!connectionAddress) {
         return null;
     }
-    return (_jsxs("div", { className: "inline-flex items-center gap-2 text-[12px] leading-none text-n1-ww-icon", children: [_jsx("span", { className: "flex h-2 w-2 flex-shrink-0 rounded-full bg-n1-ww-accent-neon", "aria-label": "Wallet connected" }), _jsx("span", { className: "underline underline-offset-2 decoration-white/40 tracking-[-0.2px]", children: shortenAddress(connectionAddress) }), _jsx("button", { type: "button", onClick: handleShareClick, className: "flex h-4 w-4 flex-shrink-0 items-center justify-center text-n1-ww-main hover:text-white transition-colors", "aria-label": "Share wallet address", children: _jsxs("svg", { className: "h-full w-full", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M5.93066 8.06944L12.3473 1.65277", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }), _jsx("path", { d: "M8.06958 1.65277H12.3474V5.93055", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }), _jsx("path", { d: "M10.7431 7.80207V12.3472H1.65283V3.25693H6.19797", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-2 text-[12px] leading-none text-n1-ww-icon", children: [(0, jsx_runtime_1.jsx)("span", { className: "flex h-2 w-2 flex-shrink-0 rounded-full bg-n1-ww-accent-neon", "aria-label": "Wallet connected" }), (0, jsx_runtime_1.jsx)("span", { className: "underline underline-offset-2 decoration-white/40 tracking-[-0.2px]", children: (0, shortenString_1.shortenAddress)(connectionAddress) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleShareClick, className: "flex h-4 w-4 flex-shrink-0 items-center justify-center text-n1-ww-main hover:text-white transition-colors", "aria-label": "Share wallet address", children: (0, jsx_runtime_1.jsxs)("svg", { className: "h-full w-full", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M5.93066 8.06944L12.3473 1.65277", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.06958 1.65277H12.3474V5.93055", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.7431 7.80207V12.3472H1.65283V3.25693H6.19797", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })] }) })] }));
 };
 /**
  * Header component for the Nord Flow modal
  * Contains the "Bridge" text and close button
  */
-export var Header = function (_a) {
+var Header = function (_a) {
     var onClose = _a.onClose, onBack = _a.onBack, _b = _a.title, title = _b === void 0 ? 'Bridge' : _b;
-    return (_jsxs("div", { className: "w-full px-4 pt-4", children: [_jsxs("div", { className: "flex items-center h-4 gap-2", children: [_jsxs("div", { className: "flex flex-1 items-center min-w-0", children: [onBack && (_jsx("button", { type: "button", onClick: onBack, className: "flex h-full items-center justify-center cursor-pointer text-n1-ww-icon hover:text-white pr-4", "aria-label": "Go back", children: _jsx("svg", { className: "h-[10px] w-[6px]", width: "6", height: "10", viewBox: "0 0 6 10", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5.26316 10L0 5L5.26316 0L6 0.7125L1.48684 5L6 9.2875L5.26316 10Z" }) }) })), _jsx("div", { className: " text-[12px] text-n1-ww-icon opacity-90 tracking-[-0.24px] leading-none", children: title })] }), _jsx("div", { className: "flex flex-1 items-center justify-center px-2", children: _jsx(WalletConnectionBadge, {}) }), _jsx("div", { className: "flex flex-1 justify-end", children: _jsx("button", { type: "button", onClick: function (event) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full px-4 pt-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center h-4 gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 items-center min-w-0", children: [onBack && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onBack, className: "flex h-full items-center justify-center cursor-pointer text-n1-ww-icon hover:text-white pr-4", "aria-label": "Go back", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-[10px] w-[6px]", width: "6", height: "10", viewBox: "0 0 6 10", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M5.26316 10L0 5L5.26316 0L6 0.7125L1.48684 5L6 9.2875L5.26316 10Z" }) }) })), (0, jsx_runtime_1.jsx)("div", { className: " text-[12px] text-n1-ww-icon opacity-90 tracking-[-0.24px] leading-none", children: title })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 items-center justify-center px-2", children: (0, jsx_runtime_1.jsx)(WalletConnectionBadge, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 justify-end", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: function (event) {
                                 var _a;
                                 event.preventDefault();
                                 event.stopPropagation();
@@ -40,6 +43,7 @@ export var Header = function (_a) {
                                 if (onClose) {
                                     onClose();
                                 }
-                            }, className: "flex h-10 w-10 items-center justify-center cursor-pointer text-n1-ww-icon hover:text-white", children: _jsx("svg", { className: "h-[10px] w-[10px]", viewBox: "0 0 10 10", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5.88381 5L10 0.883812L9.11619 0L5 4.11619L0.883937 0L0 0.883812L4.11619 5L0 9.11619L0.883937 10L5 5.88381L9.11619 10L10 9.11619L5.88381 5Z" }) }) }) })] }), _jsx("div", { className: "h-4 relative mt-0 w-full", children: _jsx("div", { className: "absolute bottom-0 left-0 right-0 top-[-1px] border-b border-n1-ww-border" }) })] }));
+                            }, className: "flex h-10 w-10 items-center justify-center cursor-pointer text-n1-ww-icon hover:text-white", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-[10px] w-[10px]", viewBox: "0 0 10 10", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M5.88381 5L10 0.883812L9.11619 0L5 4.11619L0.883937 0L0 0.883812L4.11619 5L0 9.11619L0.883937 10L5 5.88381L9.11619 10L10 9.11619L5.88381 5Z" }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 relative mt-0 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-0 left-0 right-0 top-[-1px] border-b border-n1-ww-border" }) })] }));
 };
+exports.Header = Header;
 //# sourceMappingURL=Header.js.map

package/dist/features/onboarding-flow/components/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/features/onboarding-flow/components/Header.tsx"],"names":[],"mappings":";AAAA~~,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC~~;AAC3C,~~OAAO,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC~~;AAChF,~~OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC~~;AAE9D,IAAM,qBAAqB,GAAa;IAC9B,IAAA,OAAO,GAAK,~~kBAAkB~~,~~EAAE~~,QAAzB,CAA0B;IACjC,IAAA,aAAa,GAAK,~~0BAA0B~~,~~EAAE~~,cAAjC,CAAkC;IACvD,IAAM,iBAAiB,GAAG,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,KAAI,OAAO,CAAC;IAE5D,IAAM,gBAAgB,GAAG,~~WAAW~~,~~CAAC~~;;QACnC,IAAI,CAAC,iBAAiB,IAAI,OAAO,SAAS,KAAK,WAAW;YAAE,OAAO;QAEnE,IAAM,GAAG,GAAG,SAEX,CAAC;QAEF,IAAI,OAAO,GAAG,CAAC,KAAK,KAAK,UAAU,EAAE,CAAC;YACpC,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAC,KAAK,CAAC,cAAO,CAAC,CAAC,CAAC;YAChF,OAAO;QACT,CAAC;QAED,IAAI,MAAA,GAAG,CAAC,SAAS,0CAAE,SAAS,EAAE,CAAC;YAC7B,GAAG,CAAC,SAAS,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,cAAO,CAAC,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,~~eAAK~~,SAAS,EAAC,yEAAyE,aACtF,~~eACE~~,SAAS,EAAC,8DAA8D,gBAC7D,kBAAkB,GAC7B,EACF,~~eAAM~~,SAAS,EAAC,oEAAoE,YACjF,~~cAAc~~,~~CAAC~~,iBAAiB,CAAC,GAC7B,EACP,~~iBACE~~,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAC,2GAA2G,gBAC1G,sBAAsB,YAEjC,~~eACE~~,SAAS,EAAC,eAAe,EACzB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,aAElC,~~eACE~~,CAAC,EAAC,kCAAkC,EACpC,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,GACrB,EACF,~~eACE~~,CAAC,EAAC,kCAAkC,EACpC,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,GACrB,EACF,~~eACE~~,CAAC,EAAC,kDAAkD,EACpD,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,GACrB,IACE,GACC,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAQF;;;GAGG;~~AACH~~,~~MAAM,CAAC,~~IAAM,MAAM,GAA0B,UAAC,EAI7C;QAHC,OAAO,aAAA,EACP,MAAM,YAAA,EACN,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA;IAEhB,OAAO,CACL,~~eAAK~~,SAAS,EAAC,kBAAkB,aAC/B,~~eAAK~~,SAAS,EAAC,6BAA6B,aAC1C,~~eAAK~~,SAAS,EAAC,kCAAkC,aAC9C,MAAM,IAAI,CACT,~~iBACE~~,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,EACf,SAAS,EAAC,8FAA8F,gBAC7F,SAAS,YAEpB,~~cACE~~,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,4BAA4B,YAElC,~~eAAM~~,CAAC,EAAC,mEAAmE,GAAG,GAC1E,GACC,CACV,EACD,~~cAAK~~,SAAS,EAAE,yEAAyE,YACtF,KAAK,GACF,IACF,EACN,~~cAAK~~,SAAS,EAAC,8CAA8C,YAC3D,~~KAAC~~,qBAAqB,KAAG,GACrB,EACN,~~cAAK~~,SAAS,EAAC,yBAAyB,YACtC,~~iBACE~~,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAC,KAAK;;gCACb,KAAK,CAAC,cAAc,EAAE,CAAC;gCACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gCACxB,IAAI,MAAA,KAAK,CAAC,WAAW,0CAAE,wBAAwB,EAAE,CAAC;oCAChD,KAAK,CAAC,WAAW,CAAC,wBAAwB,EAAE,CAAC;gCAC/C,CAAC;gCACD,IAAI,OAAO,EAAE,CAAC;oCACZ,OAAO,EAAE,CAAC;gCACZ,CAAC;4BACH,CAAC,EACD,SAAS,EAAC,4FAA4F,YAEtG,~~cACE~~,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,4BAA4B,YAElC,~~eAAM~~,CAAC,EAAC,6IAA6I,GAAG,GACpJ,GACC,GACL,IACF,EACN,~~cAAK~~,SAAS,EAAC,0BAA0B,YACvC,~~cAAK~~,SAAS,EAAC,0EAA0E,GAAO,GAC5F,IACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useCallback } from 'react';\nimport { useN1WalletContext, useN1WalletInternalContext } from '../../../hooks';\nimport { shortenAddress } from '../../../utils/shortenString';\n\nconst WalletConnectionBadge: React.FC = () => {\n const { address } = useN1WalletContext();\n const { dynamicWallet } = useN1WalletInternalContext();\n const connectionAddress = dynamicWallet?.address \|\| address;\n\n const handleShareClick = useCallback(() => {\n if (!connectionAddress \|\| typeof navigator === 'undefined') return;\n\n const nav = navigator as Navigator & {\n share?: (data: ShareData) => Promise<void>;\n };\n\n if (typeof nav.share === 'function') {\n nav.share({ title: 'Wallet address', text: connectionAddress }).catch(() => {});\n return;\n }\n\n if (nav.clipboard?.writeText) {\n nav.clipboard.writeText(connectionAddress).catch(() => {});\n }\n }, [connectionAddress]);\n\n if (!connectionAddress) {\n return null;\n }\n\n return (\n <div className=\"inline-flex items-center gap-2 text-[12px] leading-none text-n1-ww-icon\">\n <span\n className=\"flex h-2 w-2 flex-shrink-0 rounded-full bg-n1-ww-accent-neon\"\n aria-label=\"Wallet connected\"\n />\n <span className=\"underline underline-offset-2 decoration-white/40 tracking-[-0.2px]\">\n {shortenAddress(connectionAddress)}\n </span>\n <button\n type=\"button\"\n onClick={handleShareClick}\n className=\"flex h-4 w-4 flex-shrink-0 items-center justify-center text-n1-ww-main hover:text-white transition-colors\"\n aria-label=\"Share wallet address\"\n >\n <svg\n className=\"h-full w-full\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M5.93066 8.06944L12.3473 1.65277\"\n stroke=\"currentColor\"\n strokeWidth=\"1.2\"\n strokeLinecap=\"round\"\n />\n <path\n d=\"M8.06958 1.65277H12.3474V5.93055\"\n stroke=\"currentColor\"\n strokeWidth=\"1.2\"\n strokeLinecap=\"round\"\n />\n <path\n d=\"M10.7431 7.80207V12.3472H1.65283V3.25693H6.19797\"\n stroke=\"currentColor\"\n strokeWidth=\"1.2\"\n strokeLinecap=\"round\"\n />\n </svg>\n </button>\n </div>\n );\n};\n\ninterface HeaderProps {\n title?: string;\n onClose?: () => void;\n onBack?: () => void;\n}\n\n/*\n Header component for the Nord Flow modal\n * Contains the \"Bridge\" text and close button\n */\nexport const Header: React.FC<HeaderProps> = ({\n onClose,\n onBack,\n title = 'Bridge',\n}) => {\n return (\n <div className=\"w-full px-4 pt-4\">\n <div className=\"flex items-center h-4 gap-2\">\n <div className=\"flex flex-1 items-center min-w-0\">\n {onBack && (\n <button\n type=\"button\"\n onClick={onBack}\n className=\"flex h-full items-center justify-center cursor-pointer text-n1-ww-icon hover:text-white pr-4\" \n aria-label=\"Go back\"\n >\n <svg\n className=\"h-[10px] w-[6px]\"\n width=\"6\"\n height=\"10\"\n viewBox=\"0 0 6 10\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5.26316 10L0 5L5.26316 0L6 0.7125L1.48684 5L6 9.2875L5.26316 10Z\" />\n </svg>\n </button>\n )}\n <div className={\" text-[12px] text-n1-ww-icon opacity-90 tracking-[-0.24px] leading-none\"}>\n {title}\n </div>\n </div>\n <div className=\"flex flex-1 items-center justify-center px-2\">\n <WalletConnectionBadge />\n </div>\n <div className=\"flex flex-1 justify-end\">\n <button\n type=\"button\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n if (event.nativeEvent?.stopImmediatePropagation) {\n event.nativeEvent.stopImmediatePropagation();\n }\n if (onClose) {\n onClose();\n }\n }}\n className=\"flex h-10 w-10 items-center justify-center cursor-pointer text-n1-ww-icon hover:text-white\"\n >\n <svg\n className=\"h-[10px] w-[10px]\"\n viewBox=\"0 0 10 10\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5.88381 5L10 0.883812L9.11619 0L5 4.11619L0.883937 0L0 0.883812L4.11619 5L0 9.11619L0.883937 10L5 5.88381L9.11619 10L10 9.11619L5.88381 5Z\" />\n </svg>\n </button>\n </div>\n </div>\n <div className=\"h-4 relative mt-0 w-full\">\n <div className=\"absolute bottom-0 left-0 right-0 top-[-1px] border-b border-n1-ww-border\"></div>\n </div>\n </div>\n );\n}; \n"]}
1	+ {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/features/onboarding-flow/components/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\nimport { useN1WalletContext, useN1WalletInternalContext } from '../../../hooks';\nimport { shortenAddress } from '../../../utils/shortenString';\n\nconst WalletConnectionBadge: React.FC = () => {\n const { address } = useN1WalletContext();\n const { dynamicWallet } = useN1WalletInternalContext();\n const connectionAddress = dynamicWallet?.address \|\| address;\n\n const handleShareClick = useCallback(() => {\n if (!connectionAddress \|\| typeof navigator === 'undefined') return;\n\n const nav = navigator as Navigator & {\n share?: (data: ShareData) => Promise<void>;\n };\n\n if (typeof nav.share === 'function') {\n nav.share({ title: 'Wallet address', text: connectionAddress }).catch(() => {});\n return;\n }\n\n if (nav.clipboard?.writeText) {\n nav.clipboard.writeText(connectionAddress).catch(() => {});\n }\n }, [connectionAddress]);\n\n if (!connectionAddress) {\n return null;\n }\n\n return (\n <div className=\"inline-flex items-center gap-2 text-[12px] leading-none text-n1-ww-icon\">\n <span\n className=\"flex h-2 w-2 flex-shrink-0 rounded-full bg-n1-ww-accent-neon\"\n aria-label=\"Wallet connected\"\n />\n <span className=\"underline underline-offset-2 decoration-white/40 tracking-[-0.2px]\">\n {shortenAddress(connectionAddress)}\n </span>\n <button\n type=\"button\"\n onClick={handleShareClick}\n className=\"flex h-4 w-4 flex-shrink-0 items-center justify-center text-n1-ww-main hover:text-white transition-colors\"\n aria-label=\"Share wallet address\"\n >\n <svg\n className=\"h-full w-full\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M5.93066 8.06944L12.3473 1.65277\"\n stroke=\"currentColor\"\n strokeWidth=\"1.2\"\n strokeLinecap=\"round\"\n />\n <path\n d=\"M8.06958 1.65277H12.3474V5.93055\"\n stroke=\"currentColor\"\n strokeWidth=\"1.2\"\n strokeLinecap=\"round\"\n />\n <path\n d=\"M10.7431 7.80207V12.3472H1.65283V3.25693H6.19797\"\n stroke=\"currentColor\"\n strokeWidth=\"1.2\"\n strokeLinecap=\"round\"\n />\n </svg>\n </button>\n </div>\n );\n};\n\ninterface HeaderProps {\n title?: string;\n onClose?: () => void;\n onBack?: () => void;\n}\n\n/*\n Header component for the Nord Flow modal\n * Contains the \"Bridge\" text and close button\n */\nexport const Header: React.FC<HeaderProps> = ({\n onClose,\n onBack,\n title = 'Bridge',\n}) => {\n return (\n <div className=\"w-full px-4 pt-4\">\n <div className=\"flex items-center h-4 gap-2\">\n <div className=\"flex flex-1 items-center min-w-0\">\n {onBack && (\n <button\n type=\"button\"\n onClick={onBack}\n className=\"flex h-full items-center justify-center cursor-pointer text-n1-ww-icon hover:text-white pr-4\" \n aria-label=\"Go back\"\n >\n <svg\n className=\"h-[10px] w-[6px]\"\n width=\"6\"\n height=\"10\"\n viewBox=\"0 0 6 10\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5.26316 10L0 5L5.26316 0L6 0.7125L1.48684 5L6 9.2875L5.26316 10Z\" />\n </svg>\n </button>\n )}\n <div className={\" text-[12px] text-n1-ww-icon opacity-90 tracking-[-0.24px] leading-none\"}>\n {title}\n </div>\n </div>\n <div className=\"flex flex-1 items-center justify-center px-2\">\n <WalletConnectionBadge />\n </div>\n <div className=\"flex flex-1 justify-end\">\n <button\n type=\"button\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n if (event.nativeEvent?.stopImmediatePropagation) {\n event.nativeEvent.stopImmediatePropagation();\n }\n if (onClose) {\n onClose();\n }\n }}\n className=\"flex h-10 w-10 items-center justify-center cursor-pointer text-n1-ww-icon hover:text-white\"\n >\n <svg\n className=\"h-[10px] w-[10px]\"\n viewBox=\"0 0 10 10\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5.88381 5L10 0.883812L9.11619 0L5 4.11619L0.883937 0L0 0.883812L4.11619 5L0 9.11619L0.883937 10L5 5.88381L9.11619 10L10 9.11619L5.88381 5Z\" />\n </svg>\n </button>\n </div>\n </div>\n <div className=\"h-4 relative mt-0 w-full\">\n <div className=\"absolute bottom-0 left-0 right-0 top-[-1px] border-b border-n1-ww-border\"></div>\n </div>\n </div>\n );\n}; \n"]}

package/dist/features/onboarding-flow/components/ImageWithFallback.js CHANGED Viewed

@@ -1,11 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageWithFallback = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 /**
  * A component that renders an image with a fallback div when the image is not available
  */
-export var ImageWithFallback = function (_a) {
+var ImageWithFallback = function (_a) {
     var src = _a.src, alt = _a.alt, _b = _a.width, width = _b === void 0 ? 'auto' : _b, _c = _a.height, height = _c === void 0 ? 'auto' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.fallbackClassName, fallbackClassName = _e === void 0 ? '' : _e, fallbackText = _a.fallbackText, _f = _a.fallbackBgColor, fallbackBgColor = _f === void 0 ? 'bg-n1-ww-gray-800' : _f, _g = _a.fallbackTextColor, fallbackTextColor = _g === void 0 ? 'text-n1-ww-gray-400' : _g;
-    var _h = useState(false), imageError = _h[0], setImageError = _h[1];
+    var _h = (0, react_1.useState)(false), imageError = _h[0], setImageError = _h[1];
     // Get initials from alt text for fallback
     var getInitials = function (text) {
         if (!text)
@@ -22,12 +25,13 @@ export var ImageWithFallback = function (_a) {
     };
     if (imageError || !src) {
         // Render fallback div
-        return (_jsx("div", { className: "flex items-center justify-center ".concat(fallbackBgColor, " ").concat(fallbackTextColor, " ").concat(fallbackClassName), style: {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center ".concat(fallbackBgColor, " ").concat(fallbackTextColor, " ").concat(fallbackClassName), style: {
                 width: typeof width === 'number' ? "".concat(width, "px") : width,
                 height: typeof height === 'number' ? "".concat(height, "px") : height,
             }, "aria-label": alt, children: fallbackText || getInitials(alt) }));
     }
     // Render image
-    return (_jsx("img", { src: src, alt: alt, width: width, height: height, className: className, onError: handleError }));
+    return ((0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, width: width, height: height, className: className, onError: handleError }));
 };
+exports.ImageWithFallback = ImageWithFallback;
 //# sourceMappingURL=ImageWithFallback.js.map

package/dist/features/onboarding-flow/components/ImageWithFallback.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageWithFallback.js","sourceRoot":"","sources":["../../../../src/features/onboarding-flow/components/ImageWithFallback.tsx"],"names":[],"mappings":";AAAA~~,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC~~;AAcxC;;GAEG;~~AACH~~,~~MAAM,CAAC,~~IAAM,iBAAiB,GAAqC,UAAC,EAUnE;QATC,GAAG,SAAA,EACH,GAAG,SAAA,EACH,aAAc,EAAd,KAAK,mBAAG,MAAM,KAAA,EACd,cAAe,EAAf,MAAM,mBAAG,MAAM,KAAA,EACf,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,yBAAsB,EAAtB,iBAAiB,mBAAG,EAAE,KAAA,EACtB,YAAY,kBAAA,EACZ,uBAAqC,EAArC,eAAe,mBAAG,mBAAmB,KAAA,EACrC,yBAAyC,EAAzC,iBAAiB,mBAAG,qBAAqB,KAAA;IAEnC,IAAA,KAA8B,~~QAAQ~~,~~CAAC~~,KAAK,CAAC,EAA5C,UAAU,QAAA,EAAE,aAAa,QAAmB,CAAC;IAEpD,0CAA0C;IAC1C,IAAM,WAAW,GAAG,UAAC,IAAY;QAC/B,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAC;QACrB,OAAO,IAAI;aACR,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,CAAC,CAAC,EAAP,CAAO,CAAC;aACtB,IAAI,CAAC,EAAE,CAAC;aACR,WAAW,EAAE;aACb,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG;QAClB,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,IAAI,UAAU,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,sBAAsB;QACtB,OAAO,CACL,~~cACE~~,SAAS,EAAE,2CAAoC,eAAe,cAAI,iBAAiB,cAAI,iBAAiB,CAAE,EAC1G,KAAK,EAAE;gBACL,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,KAAK,OAAI,CAAC,CAAC,CAAC,KAAK;gBACvD,MAAM,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,MAAM,OAAI,CAAC,CAAC,CAAC,MAAM;aAC5D,gBACW,GAAG,YAEd,YAAY,IAAI,WAAW,CAAC,GAAG,CAAC,GAC7B,CACP,CAAC;IACJ,CAAC;IAED,eAAe;IACf,OAAO,CACL,~~cACE~~,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,WAAW,GACpB,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useState } from 'react';\n\ninterface ImageWithFallbackProps {\n src: string;\n alt: string;\n width?: number \| string;\n height?: number \| string;\n className?: string;\n fallbackClassName?: string;\n fallbackText?: string;\n fallbackBgColor?: string;\n fallbackTextColor?: string;\n}\n\n/*\n A component that renders an image with a fallback div when the image is not available\n */\nexport const ImageWithFallback: React.FC<ImageWithFallbackProps> = ({\n src,\n alt,\n width = 'auto',\n height = 'auto',\n className = '',\n fallbackClassName = '',\n fallbackText,\n fallbackBgColor = 'bg-n1-ww-gray-800',\n fallbackTextColor = 'text-n1-ww-gray-400',\n}) => {\n const [imageError, setImageError] = useState(false);\n\n // Get initials from alt text for fallback\n const getInitials = (text: string) => {\n if (!text) return '';\n return text\n .split(' ')\n .map((word) => word[0])\n .join('')\n .toUpperCase()\n .substring(0, 2);\n };\n\n const handleError = () => {\n setImageError(true);\n };\n\n if (imageError \|\| !src) {\n // Render fallback div\n return (\n <div\n className={`flex items-center justify-center ${fallbackBgColor} ${fallbackTextColor} ${fallbackClassName}`}\n style={{\n width: typeof width === 'number' ? `${width}px` : width,\n height: typeof height === 'number' ? `${height}px` : height,\n }}\n aria-label={alt}\n >\n {fallbackText \|\| getInitials(alt)}\n </div>\n );\n }\n\n // Render image\n return (\n <img\n src={src}\n alt={alt}\n width={width}\n height={height}\n className={className}\n onError={handleError}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"ImageWithFallback.js","sourceRoot":"","sources":["../../../../src/features/onboarding-flow/components/ImageWithFallback.tsx"],"names":[],"mappings":";;;;AAAA,+BAAwC;AAcxC;;GAEG;AACI,IAAM,iBAAiB,GAAqC,UAAC,EAUnE;QATC,GAAG,SAAA,EACH,GAAG,SAAA,EACH,aAAc,EAAd,KAAK,mBAAG,MAAM,KAAA,EACd,cAAe,EAAf,MAAM,mBAAG,MAAM,KAAA,EACf,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,yBAAsB,EAAtB,iBAAiB,mBAAG,EAAE,KAAA,EACtB,YAAY,kBAAA,EACZ,uBAAqC,EAArC,eAAe,mBAAG,mBAAmB,KAAA,EACrC,yBAAyC,EAAzC,iBAAiB,mBAAG,qBAAqB,KAAA;IAEnC,IAAA,KAA8B,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA5C,UAAU,QAAA,EAAE,aAAa,QAAmB,CAAC;IAEpD,0CAA0C;IAC1C,IAAM,WAAW,GAAG,UAAC,IAAY;QAC/B,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAC;QACrB,OAAO,IAAI;aACR,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,CAAC,CAAC,EAAP,CAAO,CAAC;aACtB,IAAI,CAAC,EAAE,CAAC;aACR,WAAW,EAAE;aACb,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG;QAClB,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,IAAI,UAAU,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,sBAAsB;QACtB,OAAO,CACL,gCACE,SAAS,EAAE,2CAAoC,eAAe,cAAI,iBAAiB,cAAI,iBAAiB,CAAE,EAC1G,KAAK,EAAE;gBACL,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,KAAK,OAAI,CAAC,CAAC,CAAC,KAAK;gBACvD,MAAM,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,MAAM,OAAI,CAAC,CAAC,CAAC,MAAM;aAC5D,gBACW,GAAG,YAEd,YAAY,IAAI,WAAW,CAAC,GAAG,CAAC,GAC7B,CACP,CAAC;IACJ,CAAC;IAED,eAAe;IACf,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,WAAW,GACpB,CACH,CAAC;AACJ,CAAC,CAAC;AAvDW,QAAA,iBAAiB,qBAuD5B","sourcesContent":["import React, { useState } from 'react';\n\ninterface ImageWithFallbackProps {\n src: string;\n alt: string;\n width?: number \| string;\n height?: number \| string;\n className?: string;\n fallbackClassName?: string;\n fallbackText?: string;\n fallbackBgColor?: string;\n fallbackTextColor?: string;\n}\n\n/*\n A component that renders an image with a fallback div when the image is not available\n */\nexport const ImageWithFallback: React.FC<ImageWithFallbackProps> = ({\n src,\n alt,\n width = 'auto',\n height = 'auto',\n className = '',\n fallbackClassName = '',\n fallbackText,\n fallbackBgColor = 'bg-n1-ww-gray-800',\n fallbackTextColor = 'text-n1-ww-gray-400',\n}) => {\n const [imageError, setImageError] = useState(false);\n\n // Get initials from alt text for fallback\n const getInitials = (text: string) => {\n if (!text) return '';\n return text\n .split(' ')\n .map((word) => word[0])\n .join('')\n .toUpperCase()\n .substring(0, 2);\n };\n\n const handleError = () => {\n setImageError(true);\n };\n\n if (imageError \|\| !src) {\n // Render fallback div\n return (\n <div\n className={`flex items-center justify-center ${fallbackBgColor} ${fallbackTextColor} ${fallbackClassName}`}\n style={{\n width: typeof width === 'number' ? `${width}px` : width,\n height: typeof height === 'number' ? `${height}px` : height,\n }}\n aria-label={alt}\n >\n {fallbackText \|\| getInitials(alt)}\n </div>\n );\n }\n\n // Render image\n return (\n <img\n src={src}\n alt={alt}\n width={width}\n height={height}\n className={className}\n onError={handleError}\n />\n );\n};\n"]}

package/dist/features/onboarding-flow/components/TransactionTable.js CHANGED Viewed

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { shortenAddress } from '../utils/nordUtils';
-import { getExplorerUrl } from '../utils/transaction';
-export function TransactionTable(_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransactionTable = TransactionTable;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var nordUtils_1 = require("../utils/nordUtils");
+var transaction_1 = require("../utils/transaction");
+function TransactionTable(_a) {
     var tableValues = _a.tableValues, onClose = _a.onClose;
     // Friendly labels for the keys
     var getLabel = function (key) {
@@ -47,17 +50,17 @@ export function TransactionTable(_a) {
     // Format display value with ellipsis for long text
     var getDisplayValue = function (key, value) {
         if (key === 'tx') {
-            return shortenAddress(value, 5, 4);
+            return (0, nordUtils_1.shortenAddress)(value, 5, 4);
         }
         if (key === 'from' || key === 'to') {
-            return shortenAddress(value, 5, 4);
+            return (0, nordUtils_1.shortenAddress)(value, 5, 4);
         }
         return value;
     };
     // Get explorer URL for transaction ID or address
     var getExplorerLink = function (key, value) {
         if (key === 'tx') {
-            return getExplorerUrl(value);
+            return (0, transaction_1.getExplorerUrl)(value);
         }
         if (key === 'from') {
             return "https://explorer.solana.com/address/".concat(value, "?cluster=devnet");
@@ -74,10 +77,10 @@ export function TransactionTable(_a) {
         var indexB = fieldOrder.indexOf(keyB);
         return (indexA === -1 ? 999 : indexA) - (indexB === -1 ? 999 : indexB);
     });
-    return (_jsxs("div", { className: "relative w-full h-full bg-n1-ww-gray-950 border border-n1-ww-border p-5 rounded-sm flex flex-col justify-center", children: [onClose && (_jsx("button", { onClick: onClose, className: "absolute top-3 right-2 text-n1-ww-gray-600 hover:text-n1-ww-gray-300 transition-colors duration-200 focus:outline-none", "aria-label": "Close details", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("div", { className: "space-y-3 text-sm pt-5", children: sortedEntries.map(function (_a) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative w-full h-full bg-n1-ww-gray-950 border border-n1-ww-border p-5 rounded-sm flex flex-col justify-center", children: [onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "absolute top-3 right-2 text-n1-ww-gray-600 hover:text-n1-ww-gray-300 transition-colors duration-200 focus:outline-none", "aria-label": "Close details", children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), (0, jsx_runtime_1.jsx)("div", { className: "space-y-3 text-sm pt-5", children: sortedEntries.map(function (_a) {
                     var key = _a[0], value = _a[1];
-                    return (_jsxs("div", { className: "flex items-center justify-between py-2 ", children: [_jsx("span", { className: "text-n1-ww-gray-400 font-medium min-w-[120px]", children: getLabel(key) }), _jsxs("div", { className: "relative transition-all duration-300 ".concat(value.visible ? 'opacity-100' : 'opacity-0', " max-w-[65%] text-right flex-1"), children: [(key === 'tx' || key === 'from') &&
-                                        getExplorerLink(key, value.text) ? (_jsxs("a", { href: getExplorerLink(key, value.text), target: "_blank", rel: "noopener noreferrer", className: "".concat(getValueStyles(key, value.text), " break-all inline-block group"), title: value.text, children: [_jsx("span", { className: "underline hover:font-bold", children: getDisplayValue(key, value.text) }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 ml-1 inline-block opacity-50 group-hover:opacity-100 transition-opacity duration-200", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })] })) : (_jsx("span", { className: "".concat(getValueStyles(key, value.text), " break-all inline-block"), title: value.text, children: value.text })), value.typing && (_jsx("span", { className: "inline-block ml-1 w-[2px] h-[14px] bg-n1-ww-main-400 n1-ww-animate-pulse" }))] })] }, key));
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-2 ", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-n1-ww-gray-400 font-medium min-w-[120px]", children: getLabel(key) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative transition-all duration-300 ".concat(value.visible ? 'opacity-100' : 'opacity-0', " max-w-[65%] text-right flex-1"), children: [(key === 'tx' || key === 'from') &&
+                                        getExplorerLink(key, value.text) ? ((0, jsx_runtime_1.jsxs)("a", { href: getExplorerLink(key, value.text), target: "_blank", rel: "noopener noreferrer", className: "".concat(getValueStyles(key, value.text), " break-all inline-block group"), title: value.text, children: [(0, jsx_runtime_1.jsx)("span", { className: "underline hover:font-bold", children: getDisplayValue(key, value.text) }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 ml-1 inline-block opacity-50 group-hover:opacity-100 transition-opacity duration-200", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "".concat(getValueStyles(key, value.text), " break-all inline-block"), title: value.text, children: value.text })), value.typing && ((0, jsx_runtime_1.jsx)("span", { className: "inline-block ml-1 w-[2px] h-[14px] bg-n1-ww-main-400 n1-ww-animate-pulse" }))] })] }, key));
                 }) })] }));
 }
 //# sourceMappingURL=TransactionTable.js.map

package/dist/features/onboarding-flow/components/TransactionTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TransactionTable.js","sourceRoot":"","sources":["../../../../src/features/onboarding-flow/components/TransactionTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { TableValues } from '../types';\nimport { shortenAddress } from '../utils/nordUtils';\nimport { getExplorerUrl } from '../utils/transaction';\n\ninterface TransactionTableProps {\n tableValues: TableValues & {\n amount?: { text: string; visible: boolean; typing: boolean };\n };\n onClose?: () => void;\n}\n\nexport function TransactionTable({\n tableValues,\n onClose,\n}: TransactionTableProps) {\n // Friendly labels for the keys\n const getLabel = (key: string) => {\n const labels: Record<string, string> = {\n amount: 'Amount',\n tx: 'Transaction ID',\n from: 'From',\n to: 'To',\n network: 'Network',\n status: 'Status',\n };\n\n return labels[key] \|\| key;\n };\n\n // Get appropriate color for values based on key\n const getValueStyles = (key: string, value: string) => {\n if (key === 'status') {\n if (\n value.toLowerCase().includes('success') \|\|\n value.toLowerCase().includes('confirmed')\n ) {\n return 'text-emerald-500 font-medium';\n }\n if (value.toLowerCase().includes('pending')) {\n return 'text-amber-400 font-medium';\n }\n if (\n value.toLowerCase().includes('fail') \|\|\n value.toLowerCase().includes('error')\n ) {\n return 'text-red-400 font-medium';\n }\n }\n\n if (key === 'tx') {\n return 'text-n1-ww-gray-200 text-xs font-medium hover:text-n1-ww-main-400 transition-colors duration-200';\n }\n\n if (key === 'network') {\n return 'text-purple-400 font-medium';\n }\n\n if (key === 'from' \|\| key === 'to') {\n return 'text-n1-ww-gray-200 text-xs font-medium hover:text-n1-ww-main-400 transition-colors duration-200';\n }\n\n if (key === 'amount') {\n return 'text-emerald-500 font-semibold';\n }\n\n return 'text-n1-ww-gray-50 font-medium';\n };\n\n // Format display value with ellipsis for long text\n const getDisplayValue = (key: string, value: string) => {\n if (key === 'tx') {\n return shortenAddress(value, 5, 4);\n }\n\n if (key === 'from' \|\| key === 'to') {\n return shortenAddress(value, 5, 4);\n }\n\n return value;\n };\n\n // Get explorer URL for transaction ID or address\n const getExplorerLink = (key: string, value: string) => {\n\n if (key === 'tx') {\n return getExplorerUrl(value);\n }\n\n if (key === 'from') {\n return `https://explorer.solana.com/address/${value}?cluster=devnet`;\n }\n\n return '';\n };\n\n // Order of fields to display\n const fieldOrder = ['amount', 'status', 'network', 'from', 'to', 'tx'];\n\n // Sort entries based on fieldOrder\n const sortedEntries = Object.entries(tableValues).sort(([keyA], [keyB]) => {\n const indexA = fieldOrder.indexOf(keyA);\n const indexB = fieldOrder.indexOf(keyB);\n return (indexA === -1 ? 999 : indexA) - (indexB === -1 ? 999 : indexB);\n });\n\n return (\n <div className=\"relative w-full h-full bg-n1-ww-gray-950 border border-n1-ww-border p-5 rounded-sm flex flex-col justify-center\">\n {onClose && (\n <button\n onClick={onClose}\n className=\"absolute top-3 right-2 text-n1-ww-gray-600 hover:text-n1-ww-gray-300 transition-colors duration-200 focus:outline-none\"\n aria-label=\"Close details\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"h-5 w-5\"\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=\"M6 18L18 6M6 6l12 12\"\n />\n </svg>\n </button>\n )}\n <div className=\"space-y-3 text-sm pt-5\">\n {sortedEntries.map(([key, value]) => (\n <div key={key} className=\"flex items-center justify-between py-2 \">\n <span className=\"text-n1-ww-gray-400 font-medium min-w-[120px]\">\n {getLabel(key)}\n </span>\n <div\n className={`relative transition-all duration-300 ${value.visible ? 'opacity-100' : 'opacity-0'} max-w-[65%] text-right flex-1`}\n >\n {(key === 'tx' \|\| key === 'from') &&\n getExplorerLink(key, value.text) ? (\n <a\n href={getExplorerLink(key, value.text)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={`${getValueStyles(key, value.text)} break-all inline-block group`}\n title={value.text}\n >\n <span className=\"underline hover:font-bold\">\n {getDisplayValue(key, value.text)}\n </span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"h-3 w-3 ml-1 inline-block opacity-50 group-hover:opacity-100 transition-opacity duration-200\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n />\n </svg>\n </a>\n ) : (\n <span\n className={`${getValueStyles(key, value.text)} break-all inline-block`}\n title={value.text}\n >\n {value.text}\n </span>\n )}\n {value.typing && (\n <span className=\"inline-block ml-1 w-[2px] h-[14px] bg-n1-ww-main-400 n1-ww-animate-pulse\"></span>\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"TransactionTable.js","sourceRoot":"","sources":["../../../../src/features/onboarding-flow/components/TransactionTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { TableValues } from '../types';\nimport { shortenAddress } from '../utils/nordUtils';\nimport { getExplorerUrl } from '../utils/transaction';\n\ninterface TransactionTableProps {\n tableValues: TableValues & {\n amount?: { text: string; visible: boolean; typing: boolean };\n };\n onClose?: () => void;\n}\n\nexport function TransactionTable({\n tableValues,\n onClose,\n}: TransactionTableProps) {\n // Friendly labels for the keys\n const getLabel = (key: string) => {\n const labels: Record<string, string> = {\n amount: 'Amount',\n tx: 'Transaction ID',\n from: 'From',\n to: 'To',\n network: 'Network',\n status: 'Status',\n };\n\n return labels[key] \|\| key;\n };\n\n // Get appropriate color for values based on key\n const getValueStyles = (key: string, value: string) => {\n if (key === 'status') {\n if (\n value.toLowerCase().includes('success') \|\|\n value.toLowerCase().includes('confirmed')\n ) {\n return 'text-emerald-500 font-medium';\n }\n if (value.toLowerCase().includes('pending')) {\n return 'text-amber-400 font-medium';\n }\n if (\n value.toLowerCase().includes('fail') \|\|\n value.toLowerCase().includes('error')\n ) {\n return 'text-red-400 font-medium';\n }\n }\n\n if (key === 'tx') {\n return 'text-n1-ww-gray-200 text-xs font-medium hover:text-n1-ww-main-400 transition-colors duration-200';\n }\n\n if (key === 'network') {\n return 'text-purple-400 font-medium';\n }\n\n if (key === 'from' \|\| key === 'to') {\n return 'text-n1-ww-gray-200 text-xs font-medium hover:text-n1-ww-main-400 transition-colors duration-200';\n }\n\n if (key === 'amount') {\n return 'text-emerald-500 font-semibold';\n }\n\n return 'text-n1-ww-gray-50 font-medium';\n };\n\n // Format display value with ellipsis for long text\n const getDisplayValue = (key: string, value: string) => {\n if (key === 'tx') {\n return shortenAddress(value, 5, 4);\n }\n\n if (key === 'from' \|\| key === 'to') {\n return shortenAddress(value, 5, 4);\n }\n\n return value;\n };\n\n // Get explorer URL for transaction ID or address\n const getExplorerLink = (key: string, value: string) => {\n\n if (key === 'tx') {\n return getExplorerUrl(value);\n }\n\n if (key === 'from') {\n return `https://explorer.solana.com/address/${value}?cluster=devnet`;\n }\n\n return '';\n };\n\n // Order of fields to display\n const fieldOrder = ['amount', 'status', 'network', 'from', 'to', 'tx'];\n\n // Sort entries based on fieldOrder\n const sortedEntries = Object.entries(tableValues).sort(([keyA], [keyB]) => {\n const indexA = fieldOrder.indexOf(keyA);\n const indexB = fieldOrder.indexOf(keyB);\n return (indexA === -1 ? 999 : indexA) - (indexB === -1 ? 999 : indexB);\n });\n\n return (\n <div className=\"relative w-full h-full bg-n1-ww-gray-950 border border-n1-ww-border p-5 rounded-sm flex flex-col justify-center\">\n {onClose && (\n <button\n onClick={onClose}\n className=\"absolute top-3 right-2 text-n1-ww-gray-600 hover:text-n1-ww-gray-300 transition-colors duration-200 focus:outline-none\"\n aria-label=\"Close details\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"h-5 w-5\"\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=\"M6 18L18 6M6 6l12 12\"\n />\n </svg>\n </button>\n )}\n <div className=\"space-y-3 text-sm pt-5\">\n {sortedEntries.map(([key, value]) => (\n <div key={key} className=\"flex items-center justify-between py-2 \">\n <span className=\"text-n1-ww-gray-400 font-medium min-w-[120px]\">\n {getLabel(key)}\n </span>\n <div\n className={`relative transition-all duration-300 ${value.visible ? 'opacity-100' : 'opacity-0'} max-w-[65%] text-right flex-1`}\n >\n {(key === 'tx' \|\| key === 'from') &&\n getExplorerLink(key, value.text) ? (\n <a\n href={getExplorerLink(key, value.text)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={`${getValueStyles(key, value.text)} break-all inline-block group`}\n title={value.text}\n >\n <span className=\"underline hover:font-bold\">\n {getDisplayValue(key, value.text)}\n </span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"h-3 w-3 ml-1 inline-block opacity-50 group-hover:opacity-100 transition-opacity duration-200\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n />\n </svg>\n </a>\n ) : (\n <span\n className={`${getValueStyles(key, value.text)} break-all inline-block`}\n title={value.text}\n >\n {value.text}\n </span>\n )}\n {value.typing && (\n <span className=\"inline-block ml-1 w-[2px] h-[14px] bg-n1-ww-main-400 n1-ww-animate-pulse\"></span>\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n}\n"]}

package/dist/features/onboarding-flow/components/WaitingMessage.js CHANGED Viewed

@@ -1,17 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { N1LoaderAnimation } from '../../../animations/N1Loader';
-import { SolanaLogo, ZeroOneLogo } from '../../../components/logos';
-import Logo from '../../../components/Logo';
-export function WaitingMessage(_a) {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WaitingMessage = WaitingMessage;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var N1Loader_1 = require("../../../animations/N1Loader");
+var logos_1 = require("../../../components/logos");
+var Logo_1 = __importDefault(require("../../../components/Logo"));
+function WaitingMessage(_a) {
     var message = _a.message, _b = _a.loaderSize, loaderSize = _b === void 0 ? 48 : _b, _c = _a.animation, animation = _c === void 0 ? 'loader' : _c;
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center", children: [animation === 'loader' ? (_jsx(N1LoaderAnimation, { size: loaderSize })) : (_jsx(TransferWaveAnimation, {})), _jsxs("div", { className: "text-center w-[300px] my-4", children: [_jsx("h3", { className: "text-sm text-white transition-all duration-300 h-[32px] flex items-center justify-center relative", children: _jsx("div", { className: "absolute", children: message.visible && message.title }) }), _jsx("div", { className: "text-xs flex items-center justify-center relative mt-2 font-light", children: _jsx("div", { className: "absolute", children: message.visible && message.subtitle }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center", children: [animation === 'loader' ? ((0, jsx_runtime_1.jsx)(N1Loader_1.N1LoaderAnimation, { size: loaderSize })) : ((0, jsx_runtime_1.jsx)(TransferWaveAnimation, {})), (0, jsx_runtime_1.jsxs)("div", { className: "text-center w-[300px] my-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-sm text-white transition-all duration-300 h-[32px] flex items-center justify-center relative", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute", children: message.visible && message.title }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs flex items-center justify-center relative mt-2 font-light", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute", children: message.visible && message.subtitle }) })] })] }));
 }
 var DOT_INDICES = Array.from({ length: 7 }, function (_, index) { return index; });
-var TransferDots = function () { return (_jsx("div", { className: "flex items-center gap-[3px]", children: DOT_INDICES.map(function (index) { return (_jsx("span", { className: "n1-ww-animate-transfer-dot n1-ww-force-motion rounded-full bg-n1-ww-main/90", style: {
+var TransferDots = function () { return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-[3px]", children: DOT_INDICES.map(function (index) { return ((0, jsx_runtime_1.jsx)("span", { className: "n1-ww-animate-transfer-dot n1-ww-force-motion rounded-full bg-n1-ww-main/90", style: {
             width: '2.5px',
             height: '2.5px',
             animationDelay: "".concat(index * 0.12, "s"),
             animationDuration: '1.6s',
         }, "aria-hidden": "true" }, "wave-dot-".concat(index))); }) })); };
-var TransferWaveAnimation = function () { return (_jsx("div", { className: "flex w-full items-center justify-center", "aria-label": "Solana deposit moving into N1 and 01", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "relative h-7 w-7 rounded-full bg-gradient-to-br from-black via-neutral-900 to-neutral-800 p-px shadow-[0_12px_30px_rgba(0,0,0,0.6)]", children: _jsx("div", { className: "flex h-full w-full items-center justify-center rounded-full bg-black text-white", children: _jsx(SolanaLogo, { width: 14, height: 14 }) }) }), _jsx(TransferDots, {}), _jsx("div", { className: "relative h-7 w-7 rounded-full bg-n1-ww-gray-800/70 p-px shadow-[0_12px_30px_rgba(0,0,0,0.6)]", children: _jsx("div", { className: "flex h-full w-full items-center justify-center rounded-full bg-[#1b1b1b]", children: _jsx(Logo, { size: 12, className: "text-n1-ww-main/90" }) }) }), _jsx(TransferDots, {}), _jsx("div", { className: "relative h-7 w-7 rounded-full bg-n1-ww-gray-800/70 p-px shadow-[0_12px_30px_rgba(0,0,0,0.6)]", children: _jsx("div", { className: "flex h-full w-full items-center justify-center rounded-full bg-[#1b1b1b]", children: _jsx(ZeroOneLogo, { width: 14, height: 11 }) }) })] }) })); };
+var TransferWaveAnimation = function () { return ((0, jsx_runtime_1.jsx)("div", { className: "flex w-full items-center justify-center", "aria-label": "Solana deposit moving into N1 and 01", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative h-7 w-7 rounded-full bg-gradient-to-br from-black via-neutral-900 to-neutral-800 p-px shadow-[0_12px_30px_rgba(0,0,0,0.6)]", children: (0, jsx_runtime_1.jsx)("div", { className: "flex h-full w-full items-center justify-center rounded-full bg-black text-white", children: (0, jsx_runtime_1.jsx)(logos_1.SolanaLogo, { width: 14, height: 14 }) }) }), (0, jsx_runtime_1.jsx)(TransferDots, {}), (0, jsx_runtime_1.jsx)("div", { className: "relative h-7 w-7 rounded-full bg-n1-ww-gray-800/70 p-px shadow-[0_12px_30px_rgba(0,0,0,0.6)]", children: (0, jsx_runtime_1.jsx)("div", { className: "flex h-full w-full items-center justify-center rounded-full bg-[#1b1b1b]", children: (0, jsx_runtime_1.jsx)(Logo_1.default, { size: 12, className: "text-n1-ww-main/90" }) }) }), (0, jsx_runtime_1.jsx)(TransferDots, {}), (0, jsx_runtime_1.jsx)("div", { className: "relative h-7 w-7 rounded-full bg-n1-ww-gray-800/70 p-px shadow-[0_12px_30px_rgba(0,0,0,0.6)]", children: (0, jsx_runtime_1.jsx)("div", { className: "flex h-full w-full items-center justify-center rounded-full bg-[#1b1b1b]", children: (0, jsx_runtime_1.jsx)(logos_1.ZeroOneLogo, { width: 14, height: 11 }) }) })] }) })); };
 //# sourceMappingURL=WaitingMessage.js.map