@goodcash/react 0.0.0-stage → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/LICENSE +21 -0
- package/README.md +36 -2
- package/dist/index.cjs +564 -0
- package/dist/index.d.cts +123 -0
- package/dist/index.d.ts +123 -0
- package/dist/index.js +527 -0
- package/package.json +41 -4
package/CHANGELOG.md
ADDED
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 GoodCash
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,37 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @goodcash/react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A ready-made **"Cash out to bank"** button for React apps: your users turn GoodDollar (G$) into naira in their own
|
|
4
|
+
Nigerian bank account, without leaving your app. Built on [`@goodcash/sdk`](https://www.npmjs.com/package/@goodcash/sdk).
|
|
5
|
+
|
|
6
|
+
```bash
|
|
7
|
+
npm install @goodcash/react @goodcash/sdk
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
```tsx
|
|
11
|
+
import { GoodCashProvider, CashOutButton } from '@goodcash/react';
|
|
12
|
+
|
|
13
|
+
export function Wallet() {
|
|
14
|
+
return (
|
|
15
|
+
<GoodCashProvider publishableKey="gc_pk_test_..." theme={{ accent: '#7b39fc', mode: 'auto' }}>
|
|
16
|
+
<CashOutButton
|
|
17
|
+
signer={window.ethereum} // or your WalletConnect / Magic / embedded wallet provider
|
|
18
|
+
partnerRef={currentUser.id}
|
|
19
|
+
onEvent={(e) => e.type === 'cashout.paid' && toast('Paid!')}
|
|
20
|
+
/>
|
|
21
|
+
</GoodCashProvider>
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
- `<CashOutButton />` opens the whole flow (amount, bank, review, confirm, tracking) in an accessible dialog
|
|
27
|
+
(focus trap, Escape to close, labelled controls). Phones first.
|
|
28
|
+
- `<CashOutFlow />` is the same flow inline, for your own page or sheet.
|
|
29
|
+
- Hooks for your own screens: `useQuote`, `useBanks`, `useVerifyAccount`, `useCashOut`, `useCashOutStatus`.
|
|
30
|
+
- Theme: `background`, `surface`, `ink`, `accent`, `accentInk`, `highlight`, `success`, `radius`, `font`,
|
|
31
|
+
`mode: 'light' | 'dark' | 'auto'`. Styles are scoped (`.gcw-*`), so they never touch your CSS. No web fonts are loaded.
|
|
32
|
+
- Every fee is shown as its own line, in plain words. "Powered by GoodCash" stays visible.
|
|
33
|
+
|
|
34
|
+
Events: `cashout.created`, `cashout.sent`, `cashout.paid`, `cashout.failed`, `closed`.
|
|
35
|
+
Use webhooks (server) for anything that must not be missed, like crediting a user.
|
|
36
|
+
|
|
37
|
+
Docs: https://pay.goodcash.xyz/docs
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,564 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/index.ts
|
|
22
|
+
var src_exports = {};
|
|
23
|
+
__export(src_exports, {
|
|
24
|
+
CashOutButton: () => CashOutButton,
|
|
25
|
+
CashOutFlow: () => CashOutFlow,
|
|
26
|
+
GOODCASH_CSS: () => CSS,
|
|
27
|
+
GoodCashProvider: () => GoodCashProvider,
|
|
28
|
+
injectStyles: () => injectStyles,
|
|
29
|
+
themeVars: () => themeVars,
|
|
30
|
+
useBanks: () => useBanks,
|
|
31
|
+
useCashOut: () => useCashOut,
|
|
32
|
+
useCashOutStatus: () => useCashOutStatus,
|
|
33
|
+
useGoodCash: () => useGoodCash,
|
|
34
|
+
useQuote: () => useQuote,
|
|
35
|
+
useVerifyAccount: () => useVerifyAccount
|
|
36
|
+
});
|
|
37
|
+
module.exports = __toCommonJS(src_exports);
|
|
38
|
+
|
|
39
|
+
// src/context.tsx
|
|
40
|
+
var import_react = require("react");
|
|
41
|
+
var import_sdk = require("@goodcash/sdk");
|
|
42
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
43
|
+
var GoodCashContext = (0, import_react.createContext)(null);
|
|
44
|
+
function GoodCashProvider({ publishableKey, appId, baseUrl, rpcUrl, fetch, theme, client, children }) {
|
|
45
|
+
const value = (0, import_react.useMemo)(
|
|
46
|
+
() => ({ client: client ?? new import_sdk.GoodCash({ publishableKey, appId, baseUrl, rpcUrl, fetch }), theme: theme ?? {} }),
|
|
47
|
+
[client, publishableKey, appId, baseUrl, rpcUrl, fetch, theme]
|
|
48
|
+
);
|
|
49
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GoodCashContext.Provider, { value, children });
|
|
50
|
+
}
|
|
51
|
+
function useGoodCash() {
|
|
52
|
+
const ctx = (0, import_react.useContext)(GoodCashContext);
|
|
53
|
+
if (!ctx) throw new Error('Wrap your app (or the cash out button) in <GoodCashProvider publishableKey="gc_pk_...">.');
|
|
54
|
+
return ctx;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// src/hooks.ts
|
|
58
|
+
var import_react2 = require("react");
|
|
59
|
+
var import_sdk2 = require("@goodcash/sdk");
|
|
60
|
+
var asError = (e) => e instanceof import_sdk2.GoodCashError ? e : new import_sdk2.GoodCashError("unavailable", { detail: String(e?.message ?? e) });
|
|
61
|
+
function useQuote(amountG, opts = {}) {
|
|
62
|
+
const { client } = useGoodCash();
|
|
63
|
+
const [quote, setQuote] = (0, import_react2.useState)(null);
|
|
64
|
+
const [error, setError] = (0, import_react2.useState)(null);
|
|
65
|
+
const [loading, setLoading] = (0, import_react2.useState)(false);
|
|
66
|
+
const amount = amountG === null || amountG === void 0 ? "" : String(amountG).trim();
|
|
67
|
+
(0, import_react2.useEffect)(() => {
|
|
68
|
+
if (!/^\d+(\.\d{1,6})?$/.test(amount) || Number(amount) <= 0) {
|
|
69
|
+
setQuote(null);
|
|
70
|
+
setError(null);
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
let live = true;
|
|
74
|
+
let timer;
|
|
75
|
+
const run = async () => {
|
|
76
|
+
setLoading(true);
|
|
77
|
+
try {
|
|
78
|
+
const q = await client.quote({ amountG: amount });
|
|
79
|
+
if (live) {
|
|
80
|
+
setQuote(q);
|
|
81
|
+
setError(null);
|
|
82
|
+
}
|
|
83
|
+
} catch (e) {
|
|
84
|
+
if (live) setError(asError(e));
|
|
85
|
+
} finally {
|
|
86
|
+
if (live) setLoading(false);
|
|
87
|
+
}
|
|
88
|
+
if (live) timer = setTimeout(run, opts.refreshMs ?? 25e3);
|
|
89
|
+
};
|
|
90
|
+
timer = setTimeout(run, opts.debounceMs ?? 400);
|
|
91
|
+
return () => {
|
|
92
|
+
live = false;
|
|
93
|
+
clearTimeout(timer);
|
|
94
|
+
};
|
|
95
|
+
}, [client, amount, opts.debounceMs, opts.refreshMs]);
|
|
96
|
+
return { quote, error, loading };
|
|
97
|
+
}
|
|
98
|
+
function useBanks() {
|
|
99
|
+
const { client } = useGoodCash();
|
|
100
|
+
const [banks, setBanks] = (0, import_react2.useState)([]);
|
|
101
|
+
const [error, setError] = (0, import_react2.useState)(null);
|
|
102
|
+
const [loading, setLoading] = (0, import_react2.useState)(true);
|
|
103
|
+
(0, import_react2.useEffect)(() => {
|
|
104
|
+
let live = true;
|
|
105
|
+
client.banks().then((b) => live && setBanks(b)).catch((e) => live && setError(asError(e))).finally(() => live && setLoading(false));
|
|
106
|
+
return () => {
|
|
107
|
+
live = false;
|
|
108
|
+
};
|
|
109
|
+
}, [client]);
|
|
110
|
+
return { banks, error, loading };
|
|
111
|
+
}
|
|
112
|
+
function useVerifyAccount(bankCode, accountNumber) {
|
|
113
|
+
const { client } = useGoodCash();
|
|
114
|
+
const [accountName, setName] = (0, import_react2.useState)(null);
|
|
115
|
+
const [error, setError] = (0, import_react2.useState)(null);
|
|
116
|
+
const [loading, setLoading] = (0, import_react2.useState)(false);
|
|
117
|
+
(0, import_react2.useEffect)(() => {
|
|
118
|
+
setName(null);
|
|
119
|
+
setError(null);
|
|
120
|
+
if (!bankCode || !/^\d{10}$/.test(accountNumber)) return;
|
|
121
|
+
let live = true;
|
|
122
|
+
setLoading(true);
|
|
123
|
+
client.verifyAccount({ bankCode, accountNumber }).then((r) => live && setName(r.accountName)).catch((e) => live && setError(asError(e))).finally(() => live && setLoading(false));
|
|
124
|
+
return () => {
|
|
125
|
+
live = false;
|
|
126
|
+
};
|
|
127
|
+
}, [client, bankCode, accountNumber]);
|
|
128
|
+
return { accountName, error, loading };
|
|
129
|
+
}
|
|
130
|
+
function useCashOut() {
|
|
131
|
+
const { client } = useGoodCash();
|
|
132
|
+
const [step, setStep] = (0, import_react2.useState)(null);
|
|
133
|
+
const [cashOut, setCashOut] = (0, import_react2.useState)(null);
|
|
134
|
+
const [error, setError] = (0, import_react2.useState)(null);
|
|
135
|
+
const running = (0, import_react2.useRef)(false);
|
|
136
|
+
const start = (0, import_react2.useCallback)(
|
|
137
|
+
async (args, onStep) => {
|
|
138
|
+
if (running.current) return null;
|
|
139
|
+
running.current = true;
|
|
140
|
+
setError(null);
|
|
141
|
+
try {
|
|
142
|
+
const out = await client.cashOut({
|
|
143
|
+
...args,
|
|
144
|
+
onStep: (s, c) => {
|
|
145
|
+
setStep(s);
|
|
146
|
+
if (c) setCashOut(c);
|
|
147
|
+
onStep?.(s, c);
|
|
148
|
+
}
|
|
149
|
+
});
|
|
150
|
+
setCashOut(out.cashOut);
|
|
151
|
+
return out;
|
|
152
|
+
} catch (e) {
|
|
153
|
+
setError(asError(e));
|
|
154
|
+
setStep(null);
|
|
155
|
+
return null;
|
|
156
|
+
} finally {
|
|
157
|
+
running.current = false;
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
[client]
|
|
161
|
+
);
|
|
162
|
+
const reset = (0, import_react2.useCallback)(() => {
|
|
163
|
+
setStep(null);
|
|
164
|
+
setCashOut(null);
|
|
165
|
+
setError(null);
|
|
166
|
+
}, []);
|
|
167
|
+
return { start, step, cashOut, error, reset };
|
|
168
|
+
}
|
|
169
|
+
function useCashOutStatus(id) {
|
|
170
|
+
const { client } = useGoodCash();
|
|
171
|
+
const [cashOut, setCashOut] = (0, import_react2.useState)(null);
|
|
172
|
+
const [error, setError] = (0, import_react2.useState)(null);
|
|
173
|
+
(0, import_react2.useEffect)(() => {
|
|
174
|
+
if (!id) return;
|
|
175
|
+
const ac = new AbortController();
|
|
176
|
+
client.watchCashOut(id, setCashOut, { signal: ac.signal }).catch((e) => !ac.signal.aborted && setError(asError(e)));
|
|
177
|
+
return () => ac.abort();
|
|
178
|
+
}, [client, id]);
|
|
179
|
+
return { cashOut, error };
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
// src/CashOutFlow.tsx
|
|
183
|
+
var import_react3 = require("react");
|
|
184
|
+
|
|
185
|
+
// src/styles.ts
|
|
186
|
+
var CSS = `
|
|
187
|
+
.gcw{font-family:var(--gcw-font);color:var(--gcw-ink);background:var(--gcw-bg);border-radius:calc(var(--gcw-radius) + 6px);padding:16px;box-sizing:border-box;max-width:440px;width:100%;line-height:1.35;-webkit-font-smoothing:antialiased}
|
|
188
|
+
.gcw *{box-sizing:border-box}
|
|
189
|
+
.gcw-h{font-size:22px;font-weight:800;margin:0 0 4px;letter-spacing:-.3px}
|
|
190
|
+
.gcw-sub{font-size:14px;margin:0 0 12px;opacity:.85}
|
|
191
|
+
.gcw-card{background:var(--gcw-surface);border:2.5px solid var(--gcw-ink);border-radius:var(--gcw-radius);padding:14px;margin:0 0 10px;box-shadow:4px 4px 0 var(--gcw-ink)}
|
|
192
|
+
.gcw-card--ok{background:var(--gcw-success)}
|
|
193
|
+
.gcw-lab{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;opacity:.8;margin:0 0 6px;display:block}
|
|
194
|
+
.gcw-big{font-size:30px;font-weight:800;letter-spacing:-.6px}
|
|
195
|
+
.gcw-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;padding:3px 0}
|
|
196
|
+
.gcw-input{width:100%;font:inherit;font-size:18px;font-weight:700;color:var(--gcw-ink);background:var(--gcw-surface);border:2.5px solid var(--gcw-ink);border-radius:calc(var(--gcw-radius) - 6px);padding:12px 14px;outline:none}
|
|
197
|
+
.gcw-input:focus-visible,.gcw-btn:focus-visible,.gcw-bank:focus-visible,.gcw-x:focus-visible{outline:3px solid var(--gcw-accent);outline-offset:2px}
|
|
198
|
+
.gcw-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;font:inherit;font-size:17px;font-weight:800;color:var(--gcw-accent-ink);background:var(--gcw-accent);border:2.5px solid var(--gcw-ink);border-radius:999px;box-shadow:4px 4px 0 var(--gcw-ink);cursor:pointer;margin-top:6px}
|
|
199
|
+
.gcw-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--gcw-ink)}
|
|
200
|
+
.gcw-btn[disabled]{opacity:.55;cursor:not-allowed}
|
|
201
|
+
.gcw-btn--ghost{background:var(--gcw-surface);color:var(--gcw-ink)}
|
|
202
|
+
.gcw-note{font-size:14px;background:var(--gcw-surface);border:2px dashed var(--gcw-ink);border-radius:calc(var(--gcw-radius) - 6px);padding:10px 12px;margin:8px 0}
|
|
203
|
+
.gcw-err{font-size:14px;font-weight:700;background:#ffe1e1;color:#5a0000;border:2.5px solid #5a0000;border-radius:calc(var(--gcw-radius) - 6px);padding:10px 12px;margin:8px 0}
|
|
204
|
+
.gcw-steps{display:flex;gap:6px;margin:0 0 12px}
|
|
205
|
+
.gcw-step{flex:1;height:8px;border-radius:99px;border:2px solid var(--gcw-ink);background:var(--gcw-surface)}
|
|
206
|
+
.gcw-step--done{background:var(--gcw-success)}
|
|
207
|
+
.gcw-step--on{background:var(--gcw-accent)}
|
|
208
|
+
.gcw-banks{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-top:8px}
|
|
209
|
+
.gcw-bank{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-weight:700;color:var(--gcw-ink);background:var(--gcw-surface);border:2.5px solid var(--gcw-ink);border-radius:calc(var(--gcw-radius) - 6px);padding:10px 12px;cursor:pointer}
|
|
210
|
+
.gcw-bank[aria-selected=true]{background:var(--gcw-success)}
|
|
211
|
+
.gcw-chip{display:inline-block;font-size:12px;font-weight:800;background:var(--gcw-highlight);color:#111;border:2px solid var(--gcw-ink);border-radius:99px;padding:2px 8px}
|
|
212
|
+
.gcw-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px}
|
|
213
|
+
.gcw-top .gcw-h{flex:1;min-width:0;margin:0}
|
|
214
|
+
.gcw-x{flex:none;font:inherit;font-size:18px;font-weight:800;width:40px;height:40px;border-radius:99px;border:2.5px solid var(--gcw-ink);background:var(--gcw-surface);color:var(--gcw-ink);cursor:pointer}
|
|
215
|
+
.gcw-foot{font-size:12px;text-align:center;opacity:.75;margin-top:10px}
|
|
216
|
+
.gcw-spin{width:40px;height:40px;border-radius:99px;border:4px solid var(--gcw-ink);border-top-color:transparent;margin:10px auto;animation:gcw-spin 1s linear infinite}
|
|
217
|
+
@keyframes gcw-spin{to{transform:rotate(360deg)}}
|
|
218
|
+
@media (prefers-reduced-motion:reduce){.gcw-spin{animation:none;border-top-color:var(--gcw-ink)}.gcw-btn:active{transform:none}}
|
|
219
|
+
.gcw-overlay{position:fixed;inset:0;background:rgba(17,17,17,.55);display:flex;align-items:flex-end;justify-content:center;z-index:2147483000;padding:12px}
|
|
220
|
+
@media (min-width:560px){.gcw-overlay{align-items:center}}
|
|
221
|
+
.gcw-dialog{max-height:calc(100vh - 24px);overflow-y:auto;width:100%;max-width:440px;border:2.5px solid #111;border-radius:24px;box-shadow:6px 6px 0 #111}
|
|
222
|
+
.gcw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
|
|
223
|
+
`;
|
|
224
|
+
var injected = false;
|
|
225
|
+
function injectStyles() {
|
|
226
|
+
if (injected || typeof document === "undefined") return;
|
|
227
|
+
if (document.querySelector("style[data-goodcash]")) {
|
|
228
|
+
injected = true;
|
|
229
|
+
return;
|
|
230
|
+
}
|
|
231
|
+
const el = document.createElement("style");
|
|
232
|
+
el.setAttribute("data-goodcash", "");
|
|
233
|
+
el.textContent = CSS;
|
|
234
|
+
document.head.appendChild(el);
|
|
235
|
+
injected = true;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
// src/theme.ts
|
|
239
|
+
var LIGHT = {
|
|
240
|
+
background: "#cdb8ff",
|
|
241
|
+
surface: "#ffffff",
|
|
242
|
+
ink: "#111111",
|
|
243
|
+
accent: "#7b39fc",
|
|
244
|
+
accentInk: "#ffffff",
|
|
245
|
+
highlight: "#ffd23f",
|
|
246
|
+
success: "#8cf0c0",
|
|
247
|
+
radius: 18,
|
|
248
|
+
font: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif'
|
|
249
|
+
};
|
|
250
|
+
var DARK = {
|
|
251
|
+
background: "#1c1533",
|
|
252
|
+
surface: "#2a2246",
|
|
253
|
+
ink: "#f5f1ff",
|
|
254
|
+
accent: "#9b6bff",
|
|
255
|
+
accentInk: "#ffffff",
|
|
256
|
+
highlight: "#ffd23f",
|
|
257
|
+
success: "#5fd6a0"
|
|
258
|
+
};
|
|
259
|
+
function themeVars(t = {}, dark = false) {
|
|
260
|
+
const base = { ...LIGHT, ...dark ? DARK : {}, ...stripUndefined(t) };
|
|
261
|
+
return {
|
|
262
|
+
"--gcw-bg": base.background,
|
|
263
|
+
"--gcw-surface": base.surface,
|
|
264
|
+
"--gcw-ink": base.ink,
|
|
265
|
+
"--gcw-accent": base.accent,
|
|
266
|
+
"--gcw-accent-ink": base.accentInk,
|
|
267
|
+
"--gcw-highlight": base.highlight,
|
|
268
|
+
"--gcw-success": base.success,
|
|
269
|
+
"--gcw-radius": `${base.radius}px`,
|
|
270
|
+
"--gcw-font": base.font
|
|
271
|
+
};
|
|
272
|
+
}
|
|
273
|
+
function stripUndefined(o) {
|
|
274
|
+
return Object.fromEntries(Object.entries(o).filter(([k, v]) => v !== void 0 && k !== "mode"));
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
// src/CashOutFlow.tsx
|
|
278
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
279
|
+
var naira = (n) => `\u20A6${Math.round(n).toLocaleString("en-US")}`;
|
|
280
|
+
var gText = (n) => `${Number(n).toLocaleString("en-US", { maximumFractionDigits: 2 })} G$`;
|
|
281
|
+
var WORKING = {
|
|
282
|
+
checking: "Checking your wallet\u2026",
|
|
283
|
+
creating: "Preparing your payout\u2026",
|
|
284
|
+
confirm_in_wallet: "Confirm in your wallet. Open your wallet app, tap Confirm, then come back here.",
|
|
285
|
+
confirming: "Sending\u2026",
|
|
286
|
+
reporting: "Sending\u2026",
|
|
287
|
+
done: "Sent."
|
|
288
|
+
};
|
|
289
|
+
function defaultSigner() {
|
|
290
|
+
const eth = typeof window !== "undefined" ? window.ethereum : void 0;
|
|
291
|
+
return eth ?? void 0;
|
|
292
|
+
}
|
|
293
|
+
function CashOutFlow({ signer, wallet, defaultAmountG, partnerRef, onEvent, onClose, titleId }) {
|
|
294
|
+
injectStyles();
|
|
295
|
+
const { theme, client } = useGoodCash();
|
|
296
|
+
const [dark, setDark] = (0, import_react3.useState)(false);
|
|
297
|
+
(0, import_react3.useEffect)(() => {
|
|
298
|
+
if (theme.mode !== "auto" || typeof window === "undefined" || !window.matchMedia) return setDark(theme.mode === "dark");
|
|
299
|
+
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
300
|
+
setDark(mq.matches);
|
|
301
|
+
const on = () => setDark(mq.matches);
|
|
302
|
+
mq.addEventListener?.("change", on);
|
|
303
|
+
return () => mq.removeEventListener?.("change", on);
|
|
304
|
+
}, [theme.mode]);
|
|
305
|
+
const vars = (0, import_react3.useMemo)(() => themeVars(theme, dark), [theme, dark]);
|
|
306
|
+
const [stage, setStage] = (0, import_react3.useState)("amount");
|
|
307
|
+
const [amount, setAmount] = (0, import_react3.useState)(defaultAmountG === void 0 ? "" : String(defaultAmountG));
|
|
308
|
+
const [bank, setBank] = (0, import_react3.useState)(null);
|
|
309
|
+
const [account, setAccount] = (0, import_react3.useState)("");
|
|
310
|
+
const [search, setSearch] = (0, import_react3.useState)("");
|
|
311
|
+
const { quote, error: quoteError, loading: quoting } = useQuote(amount);
|
|
312
|
+
const { banks, error: banksError, loading: banksLoading } = useBanks();
|
|
313
|
+
const { accountName, error: nameError, loading: naming } = useVerifyAccount(bank?.code ?? "", account);
|
|
314
|
+
const run = useCashOut();
|
|
315
|
+
const [trackId, setTrackId] = (0, import_react3.useState)(null);
|
|
316
|
+
const status = useCashOutStatus(trackId);
|
|
317
|
+
const ownTitle = (0, import_react3.useId)();
|
|
318
|
+
const amountId = (0, import_react3.useId)();
|
|
319
|
+
const acctId = (0, import_react3.useId)();
|
|
320
|
+
const searchId = (0, import_react3.useId)();
|
|
321
|
+
const ids = { title: titleId ?? ownTitle, amount: amountId, acct: acctId, search: searchId };
|
|
322
|
+
const live = status.cashOut ?? run.cashOut;
|
|
323
|
+
(0, import_react3.useEffect)(() => {
|
|
324
|
+
if (!status.cashOut) return;
|
|
325
|
+
if (status.cashOut.status === "paid") onEvent?.({ type: "cashout.paid", cashOut: status.cashOut });
|
|
326
|
+
if (["failed", "refunded", "expired"].includes(status.cashOut.status)) onEvent?.({ type: "cashout.failed", cashOut: status.cashOut });
|
|
327
|
+
}, [status.cashOut?.status]);
|
|
328
|
+
const shownBanks = (0, import_react3.useMemo)(() => {
|
|
329
|
+
const q = search.trim().toLowerCase();
|
|
330
|
+
return banks.filter((b) => !q || b.name.toLowerCase().includes(q));
|
|
331
|
+
}, [banks, search]);
|
|
332
|
+
const enough = !!quote && quote.enough;
|
|
333
|
+
const stepIndex = { amount: 0, bank: 1, review: 2, working: 3, tracking: 3 }[stage];
|
|
334
|
+
async function confirm() {
|
|
335
|
+
if (!quote || !bank || !accountName) return;
|
|
336
|
+
const s = signer ?? defaultSigner();
|
|
337
|
+
setStage("working");
|
|
338
|
+
const out = await run.start(
|
|
339
|
+
{ signer: s, wallet, amountG: amount, recipient: { bankCode: bank.code, accountNumber: account, accountName }, quote, partnerRef },
|
|
340
|
+
(step, c) => {
|
|
341
|
+
if (step === "confirm_in_wallet" && c) onEvent?.({ type: "cashout.created", cashOut: c });
|
|
342
|
+
}
|
|
343
|
+
);
|
|
344
|
+
if (out) {
|
|
345
|
+
onEvent?.({ type: "cashout.sent", cashOut: out.cashOut });
|
|
346
|
+
setTrackId(out.cashOut.id);
|
|
347
|
+
setStage("tracking");
|
|
348
|
+
} else {
|
|
349
|
+
setStage("review");
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
const noWallet = !signer && !defaultSigner() && client.mode === "live";
|
|
353
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw", style: vars, "data-goodcash-flow": "", children: [
|
|
354
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-top", children: [
|
|
355
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "gcw-h", id: ids.title, children: "Cash out to your bank" }),
|
|
356
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "gcw-x", "aria-label": "Close", onClick: onClose, children: "\u2715" })
|
|
357
|
+
] }),
|
|
358
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gcw-steps", "aria-hidden": true, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `gcw-step ${i < stepIndex ? "gcw-step--done" : i === stepIndex ? "gcw-step--on" : ""}` }, i)) }),
|
|
359
|
+
client.mode === "test" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-note", children: "Test mode: no real money moves." }),
|
|
360
|
+
stage === "amount" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
361
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-card", children: [
|
|
362
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "gcw-lab", htmlFor: ids.amount, children: "How much G$?" }),
|
|
363
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
364
|
+
"input",
|
|
365
|
+
{
|
|
366
|
+
id: ids.amount,
|
|
367
|
+
className: "gcw-input",
|
|
368
|
+
inputMode: "decimal",
|
|
369
|
+
autoComplete: "off",
|
|
370
|
+
placeholder: "0",
|
|
371
|
+
value: amount,
|
|
372
|
+
onChange: (e) => setAmount(e.target.value.replace(/[^\d.]/g, ""))
|
|
373
|
+
}
|
|
374
|
+
)
|
|
375
|
+
] }),
|
|
376
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-card gcw-card--ok", "aria-live": "polite", children: [
|
|
377
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gcw-lab", children: "You get about" }),
|
|
378
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gcw-big", children: quote ? naira(quote.receive.naira) : quoting ? "\u2026" : "\u20A60" }),
|
|
379
|
+
quote && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-row", children: [
|
|
380
|
+
"at least ",
|
|
381
|
+
naira(quote.receive.minimumNaira)
|
|
382
|
+
] })
|
|
383
|
+
] }),
|
|
384
|
+
quote && !quote.enough && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "gcw-note", children: [
|
|
385
|
+
"The smallest cash out is about ",
|
|
386
|
+
gText(quote.minimumG),
|
|
387
|
+
"."
|
|
388
|
+
] }),
|
|
389
|
+
quoteError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-err", children: quoteError.message }),
|
|
390
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "gcw-btn", disabled: !enough, onClick: () => setStage("bank"), children: "Next" })
|
|
391
|
+
] }),
|
|
392
|
+
stage === "bank" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
393
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-card", children: [
|
|
394
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "gcw-lab", htmlFor: ids.search, children: "Your bank" }),
|
|
395
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { id: ids.search, className: "gcw-input", type: "search", placeholder: "Search banks", value: search, onChange: (e) => setSearch(e.target.value) }),
|
|
396
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-banks", role: "listbox", "aria-label": "Banks", children: [
|
|
397
|
+
banksLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Loading banks\u2026" }),
|
|
398
|
+
shownBanks.map((b) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { type: "button", role: "option", "aria-selected": bank?.code === b.code, className: "gcw-bank", onClick: () => setBank(b), children: [
|
|
399
|
+
b.name,
|
|
400
|
+
bank?.code === b.code && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, children: " \u2713" })
|
|
401
|
+
] }, b.code)),
|
|
402
|
+
!banksLoading && shownBanks.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
|
|
403
|
+
"No bank matches \u201C",
|
|
404
|
+
search,
|
|
405
|
+
"\u201D. Check the spelling."
|
|
406
|
+
] })
|
|
407
|
+
] }),
|
|
408
|
+
banksError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-err", children: banksError.message })
|
|
409
|
+
] }),
|
|
410
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-card", children: [
|
|
411
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "gcw-lab", htmlFor: ids.acct, children: "Account number" }),
|
|
412
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
413
|
+
"input",
|
|
414
|
+
{
|
|
415
|
+
id: ids.acct,
|
|
416
|
+
className: "gcw-input",
|
|
417
|
+
inputMode: "numeric",
|
|
418
|
+
autoComplete: "off",
|
|
419
|
+
maxLength: 10,
|
|
420
|
+
placeholder: "10 digits",
|
|
421
|
+
value: account,
|
|
422
|
+
onChange: (e) => setAccount(e.target.value.replace(/\D/g, "").slice(0, 10))
|
|
423
|
+
}
|
|
424
|
+
),
|
|
425
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "aria-live": "polite", children: [
|
|
426
|
+
naming && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-sub", children: "Checking the account name\u2026" }),
|
|
427
|
+
accountName && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-sub", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("b", { children: accountName }) }),
|
|
428
|
+
nameError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-err", children: nameError.message })
|
|
429
|
+
] })
|
|
430
|
+
] }),
|
|
431
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "gcw-btn", disabled: !accountName, onClick: () => setStage("review"), children: "Review" }),
|
|
432
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "gcw-btn gcw-btn--ghost", onClick: () => setStage("amount"), children: "Back" })
|
|
433
|
+
] }),
|
|
434
|
+
stage === "review" && quote && bank && accountName && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
435
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-card gcw-card--ok", children: [
|
|
436
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gcw-lab", children: "You get about" }),
|
|
437
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gcw-big", children: naira(quote.receive.naira) }),
|
|
438
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-row", children: [
|
|
439
|
+
"for ",
|
|
440
|
+
gText(amount),
|
|
441
|
+
" \xB7 at least ",
|
|
442
|
+
naira(quote.receive.minimumNaira)
|
|
443
|
+
] })
|
|
444
|
+
] }),
|
|
445
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-card", children: [
|
|
446
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gcw-lab", children: "Paid to" }),
|
|
447
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("b", { children: accountName }) }),
|
|
448
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-row", children: [
|
|
449
|
+
bank.name,
|
|
450
|
+
" \xB7 \u2022\u2022\u2022\u2022",
|
|
451
|
+
account.slice(-4)
|
|
452
|
+
] })
|
|
453
|
+
] }),
|
|
454
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-card", children: [
|
|
455
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gcw-lab", children: "Fees" }),
|
|
456
|
+
quote.fees.map((f) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-row", children: [
|
|
457
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: f.label }),
|
|
458
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: f.amountG ? `\u2212${gText(f.amountG)}` : f.naira !== void 0 ? naira(f.naira) : "" })
|
|
459
|
+
] }, f.type)),
|
|
460
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-row", children: [
|
|
461
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Network fee" }),
|
|
462
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "paid in CELO from your wallet" })
|
|
463
|
+
] })
|
|
464
|
+
] }),
|
|
465
|
+
run.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-err", children: run.error.message }),
|
|
466
|
+
noWallet && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-err", children: "Connect a wallet first." }),
|
|
467
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "gcw-note", children: [
|
|
468
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("b", { children: "You'll confirm once in your wallet." }),
|
|
469
|
+
" Your G$ only leaves your wallet when you confirm."
|
|
470
|
+
] }),
|
|
471
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "gcw-btn", disabled: noWallet, onClick: confirm, children: "Confirm cash out" }),
|
|
472
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "gcw-btn gcw-btn--ghost", onClick: () => setStage("bank"), children: "Back" })
|
|
473
|
+
] }),
|
|
474
|
+
stage === "working" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-card", "aria-live": "polite", role: "status", children: [
|
|
475
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gcw-spin", "aria-hidden": true }),
|
|
476
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-sub", style: { textAlign: "center" }, children: run.step ? WORKING[run.step] : "Working on it\u2026" })
|
|
477
|
+
] }),
|
|
478
|
+
stage === "tracking" && live && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "aria-live": "polite", role: "status", children: [
|
|
479
|
+
live.status === "paid" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-card gcw-card--ok", children: [
|
|
480
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gcw-lab", children: "Paid" }),
|
|
481
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gcw-big", children: naira(live.receive.naira) }),
|
|
482
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-sub", children: "is in your bank account. Thank you!" })
|
|
483
|
+
] }) : ["failed", "refunded", "expired"].includes(live.status) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-card", children: [
|
|
484
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gcw-lab", children: "Not paid" }),
|
|
485
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-sub", children: live.status === "refunded" ? "The payout could not be completed, so your money is being returned to your wallet." : "The payout could not be completed. Please contact support with your reference." }),
|
|
486
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-row", children: [
|
|
487
|
+
"Reference: ",
|
|
488
|
+
live.id.slice(0, 8)
|
|
489
|
+
] })
|
|
490
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gcw-card", children: [
|
|
491
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gcw-spin", "aria-hidden": true }),
|
|
492
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-sub", style: { textAlign: "center" }, children: "Your money is on its way to your bank. This usually takes a few minutes. You can close this; it will still arrive." })
|
|
493
|
+
] }),
|
|
494
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "gcw-btn gcw-btn--ghost", onClick: onClose, children: "Done" })
|
|
495
|
+
] }),
|
|
496
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gcw-foot", children: "Powered by GoodCash" })
|
|
497
|
+
] });
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
// src/CashOutButton.tsx
|
|
501
|
+
var import_react4 = require("react");
|
|
502
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
503
|
+
var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
504
|
+
function CashOutButton({ label = "Cash out to bank", className, style, onEvent, ...flow }) {
|
|
505
|
+
injectStyles();
|
|
506
|
+
const [open, setOpen] = (0, import_react4.useState)(false);
|
|
507
|
+
const titleId = (0, import_react4.useId)();
|
|
508
|
+
const panel = (0, import_react4.useRef)(null);
|
|
509
|
+
const opener = (0, import_react4.useRef)(null);
|
|
510
|
+
const close = (0, import_react4.useCallback)(() => {
|
|
511
|
+
setOpen(false);
|
|
512
|
+
onEvent?.({ type: "closed" });
|
|
513
|
+
setTimeout(() => opener.current?.focus(), 0);
|
|
514
|
+
}, [onEvent]);
|
|
515
|
+
(0, import_react4.useEffect)(() => {
|
|
516
|
+
if (!open) return;
|
|
517
|
+
const first = panel.current?.querySelector(FOCUSABLE);
|
|
518
|
+
first?.focus();
|
|
519
|
+
const onKey = (e) => {
|
|
520
|
+
if (e.key === "Escape") {
|
|
521
|
+
e.preventDefault();
|
|
522
|
+
close();
|
|
523
|
+
}
|
|
524
|
+
if (e.key !== "Tab" || !panel.current) return;
|
|
525
|
+
const items = [...panel.current.querySelectorAll(FOCUSABLE)];
|
|
526
|
+
if (!items.length) return;
|
|
527
|
+
const firstEl = items[0];
|
|
528
|
+
const lastEl = items[items.length - 1];
|
|
529
|
+
if (e.shiftKey && document.activeElement === firstEl) {
|
|
530
|
+
e.preventDefault();
|
|
531
|
+
lastEl.focus();
|
|
532
|
+
} else if (!e.shiftKey && document.activeElement === lastEl) {
|
|
533
|
+
e.preventDefault();
|
|
534
|
+
firstEl.focus();
|
|
535
|
+
}
|
|
536
|
+
};
|
|
537
|
+
document.addEventListener("keydown", onKey);
|
|
538
|
+
const prev = document.body.style.overflow;
|
|
539
|
+
document.body.style.overflow = "hidden";
|
|
540
|
+
return () => {
|
|
541
|
+
document.removeEventListener("keydown", onKey);
|
|
542
|
+
document.body.style.overflow = prev;
|
|
543
|
+
};
|
|
544
|
+
}, [open, close]);
|
|
545
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
546
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { ref: opener, type: "button", className: className ?? "gcw-btn", style, onClick: () => setOpen(true), "aria-haspopup": "dialog", children: label }),
|
|
547
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gcw-overlay", onMouseDown: (e) => e.target === e.currentTarget && close(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: panel, className: "gcw-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CashOutFlow, { ...flow, onEvent, onClose: close, titleId }) }) })
|
|
548
|
+
] });
|
|
549
|
+
}
|
|
550
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
551
|
+
0 && (module.exports = {
|
|
552
|
+
CashOutButton,
|
|
553
|
+
CashOutFlow,
|
|
554
|
+
GOODCASH_CSS,
|
|
555
|
+
GoodCashProvider,
|
|
556
|
+
injectStyles,
|
|
557
|
+
themeVars,
|
|
558
|
+
useBanks,
|
|
559
|
+
useCashOut,
|
|
560
|
+
useCashOutStatus,
|
|
561
|
+
useGoodCash,
|
|
562
|
+
useQuote,
|
|
563
|
+
useVerifyAccount
|
|
564
|
+
});
|