fare-privy-core 1.8.3 → 1.8.4
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/README.md +47 -7
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/src/components/shared/Modal/styles.d.ts.map +1 -1
- package/dist/src/components/shared/Modal/styles.js +20 -1
- package/dist/src/components/shared/Modal/styles.js.map +1 -1
- package/dist/src/modals/FundWalletModal/CardCarousel.d.ts +4 -0
- package/dist/src/modals/FundWalletModal/CardCarousel.d.ts.map +1 -1
- package/dist/src/modals/FundWalletModal/CardCarousel.js +3 -3
- package/dist/src/modals/FundWalletModal/CardCarousel.js.map +1 -1
- package/dist/src/modals/FundWalletModal/FundWalletMenu.d.ts +2 -0
- package/dist/src/modals/FundWalletModal/FundWalletMenu.d.ts.map +1 -1
- package/dist/src/modals/FundWalletModal/FundWalletMenu.js +4 -4
- package/dist/src/modals/FundWalletModal/FundWalletMenu.js.map +1 -1
- package/dist/src/modals/FundWalletModal/index.d.ts +5 -0
- package/dist/src/modals/FundWalletModal/index.d.ts.map +1 -1
- package/dist/src/modals/FundWalletModal/index.js +5 -3
- package/dist/src/modals/FundWalletModal/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -159,15 +159,21 @@ A ready-to-use modal for funding your wallet, with animated carousel and exchang
|
|
|
159
159
|
- Animated card carousel (`CardCarousel`)
|
|
160
160
|
- Transfer funds via exchange or card
|
|
161
161
|
- Uses `useWalletBalance` for live balances
|
|
162
|
+
- Fully customizable images, navigation, and step control
|
|
162
163
|
- Minimal required props, npm-friendly defaults
|
|
163
164
|
|
|
164
165
|
**Props:**
|
|
165
|
-
| Prop
|
|
166
|
-
|
|
167
|
-
| `isOpen`
|
|
168
|
-
| `onClose`
|
|
169
|
-
|
|
170
|
-
|
|
166
|
+
| Prop | Type | Description |
|
|
167
|
+
|----------------|----------------------------|---------------------------------------------|
|
|
168
|
+
| `isOpen` | `boolean` | Controls modal visibility |
|
|
169
|
+
| `onClose` | `() => void` | Function to close the modal |
|
|
170
|
+
| `images` | `string[]` | Custom images for exchanges/cards |
|
|
171
|
+
| `stepIdx` | `number` | (Optional) Current step index (carousel) |
|
|
172
|
+
| `setStepIdx` | `(idx: number) => void` | (Optional) Handler to change step index |
|
|
173
|
+
| `onTransferNext` | `() => void` | (Optional) Handler for transfer next action |
|
|
174
|
+
| `onDepositNext` | `() => void` | (Optional) Handler for deposit next action |
|
|
175
|
+
|
|
176
|
+
**Basic Usage Example:**
|
|
171
177
|
```tsx
|
|
172
178
|
import React, { useState } from "react";
|
|
173
179
|
import { FundWalletModal } from "fare-privy-core";
|
|
@@ -183,7 +189,41 @@ export function FundWalletModalDemo() {
|
|
|
183
189
|
}
|
|
184
190
|
```
|
|
185
191
|
|
|
186
|
-
|
|
192
|
+
**Advanced Usage Example (Custom images, step control, handlers):**
|
|
193
|
+
```tsx
|
|
194
|
+
import React, { useState } from "react";
|
|
195
|
+
import { FundWalletModal } from "fare-privy-core";
|
|
196
|
+
|
|
197
|
+
const customImages = [
|
|
198
|
+
"/custom/coinbase.svg",
|
|
199
|
+
"/custom/binance.svg",
|
|
200
|
+
"/custom/kraken.svg",
|
|
201
|
+
"/custom/card.svg",
|
|
202
|
+
];
|
|
203
|
+
|
|
204
|
+
export function CustomFundWalletModalDemo() {
|
|
205
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
206
|
+
const [stepIdx, setStepIdx] = useState(0);
|
|
207
|
+
const handleTransferNext = () => setStepIdx(1);
|
|
208
|
+
const handleDepositNext = () => setStepIdx(1);
|
|
209
|
+
return (
|
|
210
|
+
<>
|
|
211
|
+
<button onClick={() => setIsOpen(true)}>Open Fund Wallet Modal</button>
|
|
212
|
+
<FundWalletModal
|
|
213
|
+
isOpen={isOpen}
|
|
214
|
+
onClose={() => { setIsOpen(false); setStepIdx(0); }}
|
|
215
|
+
images={customImages}
|
|
216
|
+
stepIdx={stepIdx}
|
|
217
|
+
setStepIdx={setStepIdx}
|
|
218
|
+
onTransferNext={handleTransferNext}
|
|
219
|
+
onDepositNext={handleDepositNext}
|
|
220
|
+
/>
|
|
221
|
+
</>
|
|
222
|
+
);
|
|
223
|
+
}
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
You can fully control the modal's images, navigation, and step logic from your app. The modal will call `onClose` when the user closes it.
|
|
187
227
|
---
|
|
188
228
|
|
|
189
229
|
## 🪝 Hooks Overview
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* fare-privy-core - v1.8.
|
|
2
|
+
* fare-privy-core - v1.8.4 - Updated FundModal
|
|
3
3
|
* Proven wallet patterns with simplified balance fetching and focused micro-hooks architecture.
|
|
4
4
|
*/
|
|
5
5
|
export { PrivyProvider, type PrivyProviderProps } from "./PrivyProviderTest";
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/Modal/styles.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,EAAE,GAapC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/Modal/styles.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,EAAE,GAapC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,GAwB3B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkFzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,GAW9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAW7B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,GAW1B,CAAC"}
|
|
@@ -27,6 +27,13 @@ export const SModalWrapper = styled(motion.div) `
|
|
|
27
27
|
height: 100%;
|
|
28
28
|
min-width: 450px;
|
|
29
29
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
|
30
|
+
|
|
31
|
+
/* Hide scrollbars for wrapper if any */
|
|
32
|
+
scrollbar-width: none; /* Firefox */
|
|
33
|
+
-ms-overflow-style: none; /* IE and Edge */
|
|
34
|
+
&::-webkit-scrollbar {
|
|
35
|
+
display: none;
|
|
36
|
+
}
|
|
30
37
|
|
|
31
38
|
@media (max-width: 600px) {
|
|
32
39
|
min-width: 300px;
|
|
@@ -45,6 +52,12 @@ export const SModalContent = styled.div `
|
|
|
45
52
|
border-radius: 6px;
|
|
46
53
|
overflow: hidden;
|
|
47
54
|
position: relative;
|
|
55
|
+
/* Hide scrollbars for modal content */
|
|
56
|
+
scrollbar-width: none; /* Firefox */
|
|
57
|
+
-ms-overflow-style: none; /* IE and Edge */
|
|
58
|
+
&::-webkit-scrollbar {
|
|
59
|
+
display: none;
|
|
60
|
+
}
|
|
48
61
|
|
|
49
62
|
&.card-modal-content {
|
|
50
63
|
height: 600px;
|
|
@@ -143,7 +156,7 @@ export const SModalDescription = styled.p `
|
|
|
143
156
|
margin: 8px 0;
|
|
144
157
|
text-align: justify;
|
|
145
158
|
|
|
146
|
-
|
|
159
|
+
@media (max-width: 600px) {
|
|
147
160
|
font-size: 14px;
|
|
148
161
|
margin-inline: 12px;
|
|
149
162
|
text-align: left;
|
|
@@ -154,6 +167,12 @@ export const SModalBody = styled.div `
|
|
|
154
167
|
flex-grow: 1;
|
|
155
168
|
width: 100%;
|
|
156
169
|
padding: 16px;
|
|
170
|
+
/* Hide scrollbars for modal body */
|
|
171
|
+
scrollbar-width: none; /* Firefox */
|
|
172
|
+
-ms-overflow-style: none; /* IE and Edge */
|
|
173
|
+
&::-webkit-scrollbar {
|
|
174
|
+
display: none;
|
|
175
|
+
}
|
|
157
176
|
|
|
158
177
|
@media (max-width: 600px) {
|
|
159
178
|
padding: 8px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/shared/Modal/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,CAAC,MAAM,sBAAsB,GAAQ,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;;;CAa5D,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAQ,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/shared/Modal/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,CAAC,MAAM,sBAAsB,GAAQ,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;;;CAa5D,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAQ,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBnD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFtC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAQ,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;;;;;;CAWlD,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGrC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;CAUnC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;;;;;;CAWxC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BnC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmBrC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAQ,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;;;;;;CAW9C,CAAC"}
|
|
@@ -13,6 +13,10 @@ import React from "react";
|
|
|
13
13
|
*/
|
|
14
14
|
export interface CardCarouselProps {
|
|
15
15
|
stepIndex: number;
|
|
16
|
+
setStepIdx?: (idx: number) => void;
|
|
17
|
+
images?: string[];
|
|
18
|
+
onTransferNext?: () => void;
|
|
19
|
+
onDepositNext?: () => void;
|
|
16
20
|
className?: string;
|
|
17
21
|
style?: React.CSSProperties;
|
|
18
22
|
footer?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardCarousel.d.ts","sourceRoot":"","sources":["../../../../src/modals/FundWalletModal/CardCarousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAOvC;;;;;;;;;;;GAWG;AAEH,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"CardCarousel.d.ts","sourceRoot":"","sources":["../../../../src/modals/FundWalletModal/CardCarousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAOvC;;;;;;;;;;;GAWG;AAEH,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkDpD,CAAC"}
|
|
@@ -5,12 +5,12 @@ import { FundWalletMenu } from "./FundWalletMenu";
|
|
|
5
5
|
import { TransferModalFunds } from "./TransferFunds";
|
|
6
6
|
import { Container, ContentWrapper } from "../styles";
|
|
7
7
|
import { useWalletBalance } from "../../hooks/useWalletBalance";
|
|
8
|
-
export const CardCarousel = ({ stepIndex, className, style, footer, }) => {
|
|
8
|
+
export const CardCarousel = ({ stepIndex, setStepIdx, images, onTransferNext, onDepositNext, className, style, footer, }) => {
|
|
9
9
|
const { ethereumBalance } = useWalletBalance();
|
|
10
10
|
const cards = useMemo(() => [
|
|
11
|
-
_jsx(FundWalletMenu, {}, 0),
|
|
11
|
+
_jsx(FundWalletMenu, { images: images, onTransferNext: onTransferNext, onDepositNext: onDepositNext, setStepIdx: setStepIdx }, 0),
|
|
12
12
|
_jsx(TransferModalFunds, { selectedCurrencyBalance: ethereumBalance ?? 0 }, 1),
|
|
13
|
-
], [ethereumBalance]);
|
|
13
|
+
], [ethereumBalance, images, onTransferNext, onDepositNext, setStepIdx]);
|
|
14
14
|
const selectedCardElem = cards[stepIndex] ?? cards[0];
|
|
15
15
|
return (_jsxs(Container, { className: className, style: style, children: [_jsx(ContentWrapper, { children: _jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { layout: true, transition: { layout: { duration: 0.2, type: "spring" } }, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -20 }, children: selectedCardElem }, stepIndex) }) }), footer && _jsx("div", { children: footer })] }));
|
|
16
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardCarousel.js","sourceRoot":"","sources":["../../../../src/modals/FundWalletModal/CardCarousel.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"CardCarousel.js","sourceRoot":"","sources":["../../../../src/modals/FundWalletModal/CardCarousel.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AA0BhE,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,SAAS,EACT,UAAU,EACV,MAAM,EACN,cAAc,EACd,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,GACP,EAAE,EAAE;IACH,MAAM,EAAE,eAAe,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE/C,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC;QACJ,KAAC,cAAc,IAEb,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,IAJjB,CAAC,CAKN;QACF,KAAC,kBAAkB,IAEjB,uBAAuB,EAAE,eAAe,IAAI,CAAC,IADxC,CAAC,CAEN;KACH,EACD,CAAC,eAAe,EAAE,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,CAAC,CACrE,CAAC;IAEF,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;IAEtD,OAAO,CACL,MAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aAC3C,KAAC,cAAc,cACb,KAAC,eAAe,IAAC,IAAI,EAAC,MAAM,YAC1B,KAAC,MAAM,CAAC,GAAG,IAET,MAAM,QACN,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EACzD,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAC9B,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,YAE3B,gBAAgB,IAPZ,SAAS,CAQH,GACG,GACH,EAChB,MAAM,IAAI,wBAAM,MAAM,GAAO,IACpB,CACb,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -4,8 +4,10 @@
|
|
|
4
4
|
* Images are hardcoded for typical use.
|
|
5
5
|
*/
|
|
6
6
|
export interface FundWalletMenuProps {
|
|
7
|
+
images?: string[];
|
|
7
8
|
onTransferNext?: () => void;
|
|
8
9
|
onDepositNext?: () => void;
|
|
10
|
+
setStepIdx?: (idx: number) => void;
|
|
9
11
|
}
|
|
10
12
|
export declare const FundWalletMenu: React.FC<FundWalletMenuProps>;
|
|
11
13
|
//# sourceMappingURL=FundWalletMenu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FundWalletMenu.d.ts","sourceRoot":"","sources":["../../../../src/modals/FundWalletModal/FundWalletMenu.tsx"],"names":[],"mappings":"AAUA;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"FundWalletMenu.d.ts","sourceRoot":"","sources":["../../../../src/modals/FundWalletModal/FundWalletMenu.tsx"],"names":[],"mappings":"AAUA;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+DxD,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { FundsAccordion } from "./FundsAccordion";
|
|
|
4
4
|
import { useState } from "react";
|
|
5
5
|
import { AccordionDetails } from "../styles";
|
|
6
6
|
import { depositReadMoreText, descriptionDetails, transferReadMoreText, } from "./DescriptionDetails";
|
|
7
|
-
export const FundWalletMenu = ({ onTransferNext = () => { }, onDepositNext = () => { }, }) => {
|
|
7
|
+
export const FundWalletMenu = ({ images, onTransferNext = () => { }, onDepositNext = () => { }, setStepIdx, }) => {
|
|
8
8
|
const [activeAccordion, setActiveAccordion] = useState(null);
|
|
9
9
|
const handleAccordionToggle = (id) => {
|
|
10
10
|
setActiveAccordion(activeAccordion === id ? null : id);
|
|
@@ -14,13 +14,13 @@ export const FundWalletMenu = ({ onTransferNext = () => { }, onDepositNext = ()
|
|
|
14
14
|
return description;
|
|
15
15
|
return description.substring(0, 50).trim() + "...";
|
|
16
16
|
};
|
|
17
|
-
|
|
18
|
-
const images = [
|
|
17
|
+
const defaultImages = [
|
|
19
18
|
"/icons/coinbase.svg",
|
|
20
19
|
"/icons/binance.svg",
|
|
21
20
|
"/icons/kraken.svg",
|
|
22
21
|
"/icons/card.svg",
|
|
23
22
|
];
|
|
24
|
-
|
|
23
|
+
const usedImages = images && images.length > 0 ? images : defaultImages;
|
|
24
|
+
return (_jsx(motion.div, { layout: true, children: _jsxs(LayoutGroup, { children: [_jsx(FundsAccordion, { id: "accordion1", isOpen: activeAccordion === "accordion1", onToggle: handleAccordionToggle, next: onTransferNext, title: "Transfer Crypto", images: usedImages.slice(0, 3), description: truncatedDescription(transferReadMoreText.join(" ")), fullContent: _jsx(AccordionDetails, { children: transferReadMoreText.map((text, i) => descriptionDetails(i, text)) }) }), _jsx(FundsAccordion, { id: "accordion2", isOpen: activeAccordion === "accordion2", onToggle: handleAccordionToggle, next: onDepositNext, title: "Card Deposit", images: [usedImages[3]], description: truncatedDescription(depositReadMoreText.join(" ")), fullContent: _jsx(AccordionDetails, { children: depositReadMoreText.map((text, i) => descriptionDetails(i, text)) }) })] }) }));
|
|
25
25
|
};
|
|
26
26
|
//# sourceMappingURL=FundWalletMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FundWalletMenu.js","sourceRoot":"","sources":["../../../../src/modals/FundWalletModal/FundWalletMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"FundWalletMenu.js","sourceRoot":"","sources":["../../../../src/modals/FundWalletModal/FundWalletMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,sBAAsB,CAAC;AAc9B,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,MAAM,EACN,cAAc,GAAG,GAAG,EAAE,GAAE,CAAC,EACzB,aAAa,GAAG,GAAG,EAAE,GAAE,CAAC,EACxB,UAAU,GACX,EAAE,EAAE;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE5E,MAAM,qBAAqB,GAAG,CAAC,EAAU,EAAE,EAAE;QAC3C,kBAAkB,CAAC,eAAe,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,WAAmB,EAAU,EAAE;QAC3D,IAAI,WAAW,CAAC,MAAM,IAAI,EAAE;YAAE,OAAO,WAAW,CAAC;QACjD,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC;IACrD,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG;QACpB,qBAAqB;QACrB,oBAAoB;QACpB,mBAAmB;QACnB,iBAAiB;KAClB,CAAC;IACF,MAAM,UAAU,GAAG,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC;IAExE,OAAO,CACL,KAAC,MAAM,CAAC,GAAG,IAAC,MAAM,kBAChB,MAAC,WAAW,eACV,KAAC,cAAc,IACb,EAAE,EAAC,YAAY,EACf,MAAM,EAAE,eAAe,KAAK,YAAY,EACxC,QAAQ,EAAE,qBAAqB,EAC/B,IAAI,EAAE,cAAc,EACpB,KAAK,EAAC,iBAAiB,EACvB,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAC9B,WAAW,EAAE,oBAAoB,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EACjE,WAAW,EACT,KAAC,gBAAgB,cACd,oBAAoB,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,CAAS,EAAE,EAAE,CACpD,kBAAkB,CAAC,CAAC,EAAE,IAAI,CAAC,CAC5B,GACgB,GAErB,EACF,KAAC,cAAc,IACb,EAAE,EAAC,YAAY,EACf,MAAM,EAAE,eAAe,KAAK,YAAY,EACxC,QAAQ,EAAE,qBAAqB,EAC/B,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,cAAc,EACpB,MAAM,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EACvB,WAAW,EAAE,oBAAoB,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAChE,WAAW,EACT,KAAC,gBAAgB,cACd,mBAAmB,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,CAAS,EAAE,EAAE,CACnD,kBAAkB,CAAC,CAAC,EAAE,IAAI,CAAC,CAC5B,GACgB,GAErB,IACU,GACH,CACd,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
export interface FundWalletModalProps {
|
|
2
2
|
isOpen: boolean;
|
|
3
3
|
onClose: () => void;
|
|
4
|
+
stepIdx?: number;
|
|
5
|
+
setStepIdx?: (idx: number) => void;
|
|
6
|
+
images?: string[];
|
|
7
|
+
onTransferNext?: () => void;
|
|
8
|
+
onDepositNext?: () => void;
|
|
4
9
|
}
|
|
5
10
|
export declare const FundWalletModal: React.FC<FundWalletModalProps>;
|
|
6
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modals/FundWalletModal/index.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modals/FundWalletModal/index.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6D1D,CAAC"}
|
|
@@ -4,10 +4,12 @@ import { useActiveWallet } from "../../hooks/useActiveWallet";
|
|
|
4
4
|
import { CardCarousel } from "./CardCarousel";
|
|
5
5
|
import ModalCard from "../../components/shared/Modal/Card";
|
|
6
6
|
import { AnimatePresence } from "framer-motion";
|
|
7
|
-
export const FundWalletModal = ({ isOpen, onClose, }) => {
|
|
7
|
+
export const FundWalletModal = ({ isOpen, onClose, stepIdx: controlledStepIdx, setStepIdx: controlledSetStepIdx, images, onTransferNext, onDepositNext, }) => {
|
|
8
8
|
const modalRef = useRef(null);
|
|
9
9
|
const { activeWallet } = useActiveWallet();
|
|
10
|
-
const [
|
|
10
|
+
const [internalStepIdx, setInternalStepIdx] = useState(0);
|
|
11
|
+
const stepIdx = controlledStepIdx !== undefined ? controlledStepIdx : internalStepIdx;
|
|
12
|
+
const setStepIdx = controlledSetStepIdx || setInternalStepIdx;
|
|
11
13
|
const setIsVisible = (isVisible) => {
|
|
12
14
|
setStepIdx(0);
|
|
13
15
|
if (!isVisible)
|
|
@@ -21,6 +23,6 @@ export const FundWalletModal = ({ isOpen, onClose, }) => {
|
|
|
21
23
|
if (!activeWallet) {
|
|
22
24
|
return null;
|
|
23
25
|
}
|
|
24
|
-
return (_jsx(AnimatePresence, { children: isOpen && (_jsx(ModalCard, { maxHeight: maxHeight, stepIdx: stepIdx, setStepIdx: setStepIdx, isVisible: isOpen, setIsVisible: setIsVisible, ref: modalRef, title: "Deposit Funds", description: _jsxs(_Fragment, { children: ["There are 2 fast and easy ways to deposit funds.", _jsx("br", {}), "No KYC. You'll be ready to play in just a few minutes!"] }), className: "fund-modal-content", children: _jsx(CardCarousel, { stepIndex: stepIdx }) })) }));
|
|
26
|
+
return (_jsx(AnimatePresence, { children: isOpen && (_jsx(ModalCard, { maxHeight: maxHeight, stepIdx: stepIdx, setStepIdx: setStepIdx, isVisible: isOpen, setIsVisible: setIsVisible, ref: modalRef, title: "Deposit Funds", description: _jsxs(_Fragment, { children: ["There are 2 fast and easy ways to deposit funds.", _jsx("br", {}), "No KYC. You'll be ready to play in just a few minutes!"] }), className: "fund-modal-content", children: _jsx(CardCarousel, { stepIndex: stepIdx, setStepIdx: setStepIdx, images: images, onTransferNext: onTransferNext, onDepositNext: onDepositNext }) })) }));
|
|
25
27
|
};
|
|
26
28
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/modals/FundWalletModal/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,SAAS,MAAM,oCAAoC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/modals/FundWalletModal/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,SAAS,MAAM,oCAAoC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAYhD,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,MAAM,EACN,OAAO,EACP,OAAO,EAAE,iBAAiB,EAC1B,UAAU,EAAE,oBAAoB,EAChC,MAAM,EACN,cAAc,EACd,aAAa,GACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,CAAC;IAC3C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,OAAO,GACX,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe,CAAC;IACxE,MAAM,UAAU,GAAG,oBAAoB,IAAI,kBAAkB,CAAC;IAE9D,MAAM,YAAY,GAAG,CAAC,SAAkB,EAAE,EAAE;QAC1C,UAAU,CAAC,CAAC,CAAC,CAAC;QACd,IAAI,CAAC,SAAS;YAAE,OAAO,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,OAAO,KAAK,CAAC;YAAE,OAAO,MAAM,CAAC;QACjC,OAAO,OAAO,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,eAAe,cACb,MAAM,IAAI,CACT,KAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,QAAQ,EACb,KAAK,EAAC,eAAe,EACrB,WAAW,EACT,kFAEE,cAAM,8DAEL,EAEL,SAAS,EAAC,oBAAoB,YAE9B,KAAC,YAAY,IACX,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,GAC5B,GACQ,CACb,GACe,CACnB,CAAC;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fare-privy-core",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.4",
|
|
4
4
|
"description": "A comprehensive React library for Privy authentication and wallet management with casino gaming features, featuring reliable micro-hooks based on proven patterns",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"privy",
|