@frak-labs/react-sdk 0.0.19-beta.f259d7fc → 0.1.0-beta.267778ad

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 (41) hide show
  1. package/dist/hook/helper/useReferralInteraction.d.cts +24 -0
  2. package/dist/hook/helper/useReferralInteraction.d.ts +24 -0
  3. package/dist/hook/index.d.cts +11 -0
  4. package/dist/hook/index.d.ts +11 -0
  5. package/dist/hook/useDisplayModal.d.cts +38 -0
  6. package/dist/hook/useDisplayModal.d.ts +38 -0
  7. package/dist/hook/useFrakClient.d.cts +6 -0
  8. package/dist/hook/useFrakClient.d.ts +6 -0
  9. package/dist/hook/useFrakConfig.d.cts +9 -0
  10. package/dist/hook/useFrakConfig.d.ts +9 -0
  11. package/dist/hook/useGetProductInformation.d.cts +30 -0
  12. package/dist/hook/useGetProductInformation.d.ts +30 -0
  13. package/dist/hook/useOpenSso.d.cts +33 -0
  14. package/dist/hook/useOpenSso.d.ts +33 -0
  15. package/dist/hook/usePrepareSso.d.cts +40 -0
  16. package/dist/hook/usePrepareSso.d.ts +40 -0
  17. package/dist/hook/useSendInteraction.d.cts +33 -0
  18. package/dist/hook/useSendInteraction.d.ts +33 -0
  19. package/dist/hook/useSendTransaction.d.cts +34 -0
  20. package/dist/hook/useSendTransaction.d.ts +34 -0
  21. package/dist/hook/useSiweAuthenticate.d.cts +35 -0
  22. package/dist/hook/useSiweAuthenticate.d.ts +35 -0
  23. package/dist/hook/useWalletStatus.d.cts +16 -0
  24. package/dist/hook/useWalletStatus.d.ts +16 -0
  25. package/dist/hook/utils/useFrakContext.d.cts +9 -0
  26. package/dist/hook/utils/useFrakContext.d.ts +9 -0
  27. package/dist/hook/utils/useMounted.d.cts +2 -0
  28. package/dist/hook/utils/useMounted.d.ts +2 -0
  29. package/dist/hook/utils/useWindowLocation.d.cts +8 -0
  30. package/dist/hook/utils/useWindowLocation.d.ts +8 -0
  31. package/dist/index.cjs +1 -1
  32. package/dist/index.d.cts +3 -345
  33. package/dist/index.d.ts +3 -345
  34. package/dist/index.js +1 -1
  35. package/dist/provider/FrakConfigProvider.d.cts +29 -0
  36. package/dist/provider/FrakConfigProvider.d.ts +29 -0
  37. package/dist/provider/FrakIFrameClientProvider.d.cts +32 -0
  38. package/dist/provider/FrakIFrameClientProvider.d.ts +32 -0
  39. package/dist/provider/index.d.cts +4 -0
  40. package/dist/provider/index.d.ts +4 -0
  41. package/package.json +6 -3
package/dist/index.d.ts CHANGED
@@ -1,345 +1,3 @@
1
- import { Context } from 'react';
2
- import { CSSProperties } from 'react';
3
- import type { DisplayEmbeddedWalletParamsType } from '@frak-labs/core-sdk';
4
- import type { DisplayModalParamsType } from '@frak-labs/core-sdk';
5
- import { FragmentProps } from 'react';
6
- import { FrakClient } from '@frak-labs/core-sdk';
7
- import { FrakRpcError } from '@frak-labs/frame-connector';
8
- import { FrakWalletSdkConfig } from '@frak-labs/core-sdk';
9
- import { FunctionComponentElement } from 'react';
10
- import type { GetProductInformationReturnType } from '@frak-labs/core-sdk';
11
- import { Hex } from 'viem';
12
- import type { ModalRpcStepsResultType } from '@frak-labs/core-sdk';
13
- import type { ModalStepTypes } from '@frak-labs/core-sdk';
14
- import type { OpenSsoParamsType } from '@frak-labs/core-sdk';
15
- import type { OpenSsoReturnType } from '@frak-labs/core-sdk';
16
- import { ProcessReferralOptions } from '@frak-labs/core-sdk/actions';
17
- import { PropsWithChildren } from 'react';
18
- import { ProviderProps } from 'react';
19
- import { ReactNode } from 'react';
20
- import type { SendInteractionParamsType } from '@frak-labs/core-sdk';
21
- import type { SendInteractionReturnType } from '@frak-labs/core-sdk';
22
- import { SendTransactionParams } from '@frak-labs/core-sdk/actions';
23
- import type { SendTransactionReturnType } from '@frak-labs/core-sdk';
24
- import { SiweAuthenticateModalParams } from '@frak-labs/core-sdk/actions';
25
- import type { SiweAuthenticateReturnType } from '@frak-labs/core-sdk';
26
- import { UseMutationOptions } from '@tanstack/react-query';
27
- import { UseMutationResult } from '@tanstack/react-query';
28
- import { UseQueryOptions } from '@tanstack/react-query';
29
- import { UseQueryResult } from '@tanstack/react-query';
30
- import type { WalletStatusReturnType } from '@frak-labs/core-sdk';
31
-
32
- /**
33
- * The context that will keep the Frak Wallet SDK configuration
34
- * @ignore
35
- */
36
- export declare const FrakConfigContext: Context<FrakWalletSdkConfig | undefined>;
37
-
38
- /**
39
- * Simple config provider for the Frak Wallet SDK
40
- *
41
- * Should be wrapped within a {@link @tanstack/react-query!QueryClientProvider | `QueryClientProvider`}
42
- *
43
- * @group provider
44
- *
45
- * @param parameters
46
- */
47
- export declare function FrakConfigProvider(parameters: PropsWithChildren<FrakConfigProviderProps>): FunctionComponentElement<ProviderProps<FrakWalletSdkConfig | undefined>>;
48
-
49
- /**
50
- * Props to instantiate the Frak Wallet SDK configuration provider
51
- *
52
- * @group provider
53
- */
54
- export declare type FrakConfigProviderProps = {
55
- /**
56
- * The wanted Frak configuration
57
- * @see {@link @frak-labs/core-sdk!index.FrakWalletSdkConfig | FrakWalletSdkConfig}
58
- */
59
- config: FrakWalletSdkConfig;
60
- };
61
-
62
- /**
63
- * The context that will keep the Frak Wallet SDK client
64
- * @ignore
65
- */
66
- export declare const FrakIFrameClientContext: Context<FrakClient | undefined>;
67
-
68
- /**
69
- * Props to instantiate the Frak Wallet SDK configuration provider
70
- *
71
- * @group provider
72
- */
73
- export declare type FrakIFrameClientProps = {
74
- config: FrakWalletSdkConfig;
75
- };
76
-
77
- /**
78
- * IFrame client provider for the Frak Wallet SDK
79
- * It will automatically create the frak wallet iFrame (required for the wallet to communicate with the SDK securely), and provide it in the context
80
- *
81
- * @group provider
82
- *
83
- * @remarks
84
- * This provider must be wrapped within a {@link FrakConfigProvider} to work properly
85
- *
86
- * @param args
87
- * @param args.style - Some custom styles to apply to the iFrame
88
- * @param args.children - Descedant components that will have access to the Frak Client
89
- */
90
- export declare function FrakIFrameClientProvider({ style, children, }: {
91
- style?: CSSProperties;
92
- children?: ReactNode;
93
- }): FunctionComponentElement<FragmentProps>;
94
-
95
- /** @ignore */
96
- declare type MutationOptions = Omit<UseMutationOptions<SendTransactionReturnType, FrakRpcError, SendTransactionParams>, "mutationFn" | "mutationKey">;
97
-
98
- /** @ignore */
99
- declare type MutationOptions_2 = Omit<UseMutationOptions<SendInteractionReturnType, FrakRpcError, SendInteractionParamsType>, "mutationFn" | "mutationKey">;
100
-
101
- /** @inline */
102
- declare type MutationOptions_3 = Omit<UseMutationOptions<SiweAuthenticateReturnType, FrakRpcError, SiweAuthenticateModalParams>, "mutationFn" | "mutationKey">;
103
-
104
- /** @ignore */
105
- declare type MutationOptions_4<T extends ModalStepTypes[]> = Omit<UseMutationOptions<ModalRpcStepsResultType<T>, FrakRpcError, DisplayModalParamsType<T>>, "mutationFn" | "mutationKey">;
106
-
107
- /** @ignore */
108
- declare type MutationOptions_5 = Omit<UseMutationOptions<OpenSsoReturnType, FrakRpcError, OpenSsoParamsType>, "mutationFn" | "mutationKey">;
109
-
110
- /** @ignore */
111
- declare type QueryOptions = Omit<UseQueryOptions<GetProductInformationReturnType, FrakRpcError, undefined>, "queryKey" | "queryFn">;
112
-
113
- /**
114
- * Hook that return a mutation helping to display a modal to the user
115
- *
116
- * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.displayModal | `displayModal()`} action
117
- *
118
- * @param args
119
- *
120
- * @typeParam T
121
- * The modal steps types to display (the result will correspond to the steps types asked in params)
122
- * An array of {@link @frak-labs/core-sdk!index.ModalStepTypes | `ModalStepTypes`}
123
- * If not provided, it will default to a generic array of `ModalStepTypes`
124
- *
125
- * @group hooks
126
- *
127
- * @returns
128
- * The mutation hook wrapping the `displayModal()` action
129
- * The `mutate` and `mutateAsync` argument is of type {@link @frak-labs/core-sdk!index.DisplayModalParamsType | `DisplayModalParamsType<T>`}, with type params `T` being the modal steps types to display
130
- * The `data` result is a {@link @frak-labs/core-sdk!index.ModalRpcStepsResultType | `ModalRpcStepsResultType`}
131
- *
132
- * @see {@link @frak-labs/core-sdk!actions.displayModal | `displayModal()`} for more info about the underlying action
133
- * @see {@link @tanstack/react-query!useMutation | `useMutation()`} for more info about the mutation options and response
134
- */
135
- export declare function useDisplayModal<T extends ModalStepTypes[] = ModalStepTypes[]>({ mutations, }?: UseDisplayModalParams<T>): UseMutationResult< { [K in T[number]["key"]]: Extract<T[number], {
136
- key: K;
137
- }>["returns"]; }, FrakRpcError<undefined>, DisplayModalParamsType<T>, unknown>;
138
-
139
- /** @inline */
140
- declare interface UseDisplayModalParams<T extends ModalStepTypes[] = ModalStepTypes[]> {
141
- /**
142
- * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
143
- */
144
- mutations?: MutationOptions_4<T>;
145
- }
146
-
147
- /**
148
- * Get the current Frak client
149
- *
150
- * @group hooks
151
- */
152
- export declare function useFrakClient(): FrakClient | undefined;
153
-
154
- /**
155
- * Get the current Frak config
156
- * @throws {FrakRpcError} if the config is not found (only if this hooks is used outside a FrakConfigProvider)
157
- * @group hooks
158
- *
159
- * @see {@link @frak-labs/react-sdk!FrakConfigProvider | FrakConfigProvider} for the config provider
160
- * @see {@link @frak-labs/core-sdk!index.FrakWalletSdkConfig | FrakWalletSdkConfig} for the config type
161
- */
162
- export declare function useFrakConfig(): FrakWalletSdkConfig;
163
-
164
- /**
165
- * Hook that return a query helping to get the current product information
166
- *
167
- * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.getProductInformation | `getProductInformation()`} action
168
- *
169
- * @param args
170
- *
171
- * @group hooks
172
- *
173
- * @returns
174
- * The query hook wrapping the `getProductInformation()` action
175
- * The `data` result is a {@link @frak-labs/core-sdk!index.GetProductInformationReturnType | `GetProductInformationReturnType`}
176
- *
177
- * @see {@link @frak-labs/core-sdk!actions.getProductInformation | `getProductInformation()`} for more info about the underlying action
178
- * @see {@link @tanstack/react-query!useQuery | `useQuery()`} for more info about the useQuery options and response
179
- */
180
- export declare function useGetProductInformation({ query, }?: UseGetProductInformationParams): UseQueryResult<undefined, FrakRpcError<undefined>>;
181
-
182
- /** @inline */
183
- declare interface UseGetProductInformationParams {
184
- /**
185
- * Optional query options, see {@link @tanstack/react-query!useQuery | `useQuery()`} for more infos
186
- */
187
- query?: QueryOptions;
188
- }
189
-
190
- /**
191
- * Hook that return a mutation helping to open the SSO page
192
- *
193
- * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.openSso | `openSso()`} action
194
- *
195
- * @param args
196
- *
197
- * @group hooks
198
- *
199
- * @returns
200
- * The mutation hook wrapping the `openSso()` action
201
- * The `mutate` and `mutateAsync` argument is of type {@link @frak-labs/core-sdk!index.OpenSsoParamsType | `OpenSsoParamsType`}
202
- * The mutation doesn't output any value
203
- *
204
- * @see {@link @frak-labs/core-sdk!actions.openSso | `openSso()`} for more info about the underlying action
205
- * @see {@link @tanstack/react-query!useMutation | `useMutation()`} for more info about the mutation options and response
206
- */
207
- export declare function useOpenSso({ mutations }?: UseOpenSsoParams): UseMutationResult< {
208
- wallet?: Hex;
209
- }, FrakRpcError<undefined>, OpenSsoParamsType, unknown>;
210
-
211
- /** @inline */
212
- declare interface UseOpenSsoParams {
213
- /**
214
- * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
215
- */
216
- mutations?: MutationOptions_5;
217
- }
218
-
219
- /**
220
- * Helper hook to automatically submit a referral interaction when detected
221
- *
222
- * @group hooks
223
- *
224
- * @param args
225
- * @param args.productId - The product id to interact with (if not specified will be recomputed from the current domain)
226
- * @param args.modalConfig - The modal configuration to display if the user is not logged in
227
- * @param args.options - Some options for the referral interaction
228
- *
229
- * @returns The resulting referral state, or a potential error
230
- *
231
- * @description This function will automatically handle the referral interaction process
232
- *
233
- * @see {@link @frak-labs/core-sdk!actions.processReferral | `processReferral()`} for more details on the automatic referral handling process
234
- */
235
- export declare function useReferralInteraction({ productId, modalConfig, options, }?: {
236
- productId?: Hex;
237
- modalConfig?: DisplayEmbeddedWalletParamsType;
238
- options?: ProcessReferralOptions;
239
- }): Error | ("error" | "no-referrer" | "idle" | "processing" | "success" | "no-wallet" | "no-session" | "self-referral");
240
-
241
- /**
242
- * Hook that return a mutation helping to send a user interaction
243
- *
244
- * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.sendInteraction | `sendInteraction()`} action
245
- *
246
- * @param args
247
- *
248
- * @group hooks
249
- *
250
- * @returns
251
- * The mutation hook wrapping the `sendInteraction()` action
252
- * The `mutate` and `mutateAsync` argument is of type {@link @frak-labs/core-sdk!index.SendInteractionParamsType | `SendInteractionParamsType`}
253
- * The `data` result is a {@link @frak-labs/core-sdk!index.SendInteractionReturnType | `SendInteractionReturnType`}
254
- *
255
- * @see {@link @frak-labs/core-sdk!actions.sendInteraction | `sendInteraction()`} for more info about the underlying action
256
- * @see {@link @tanstack/react-query!useMutation | `useMutation()`} for more info about the mutation options and response
257
- */
258
- export declare function useSendInteraction({ mutations, }?: UseSendInteractionParams): UseMutationResult< {
259
- delegationId: string;
260
- }, FrakRpcError<undefined>, SendInteractionParamsType, unknown>;
261
-
262
- /** @inline */
263
- declare interface UseSendInteractionParams {
264
- /**
265
- * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
266
- */
267
- mutations?: MutationOptions_2;
268
- }
269
-
270
- /**
271
- * Hook that return a mutation helping to send a transaction
272
- *
273
- * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.sendTransaction | `sendTransaction()`} action
274
- *
275
- * @param args
276
- *
277
- * @group hooks
278
- *
279
- * @returns
280
- * The mutation hook wrapping the `sendTransaction()` action
281
- * The `mutate` and `mutateAsync` argument is of type {@link @frak-labs/core-sdk!actions.SendTransactionParams | `SendTransactionParams`}
282
- * The `data` result is a {@link @frak-labs/core-sdk!index.SendTransactionReturnType | `SendTransactionReturnType`}
283
- *
284
- * @see {@link @frak-labs/core-sdk!actions.sendTransaction | `sendTransaction()`} for more info about the underlying action
285
- * @see {@link @tanstack/react-query!useMutation | `useMutation()`} for more info about the mutation options and response
286
- */
287
- export declare function useSendTransactionAction({ mutations, }?: UseSendTransactionParams): UseMutationResult< {
288
- hash: Hex;
289
- }, FrakRpcError<undefined>, SendTransactionParams, unknown>;
290
-
291
- /** @inline */
292
- declare interface UseSendTransactionParams {
293
- /**
294
- * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
295
- */
296
- mutations?: MutationOptions;
297
- }
298
-
299
- /**
300
- * Hook that return a mutation helping to send perform a SIWE authentication
301
- *
302
- * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.sendTransaction | `sendTransaction()`} action
303
- *
304
- * @param args
305
- *
306
- * @group hooks
307
- *
308
- * @returns
309
- * The mutation hook wrapping the `siweAuthenticate()` action
310
- * The `mutate` and `mutateAsync` argument is of type {@link @frak-labs/core-sdk!actions.SiweAuthenticateModalParams | `SiweAuthenticateModalParams`}
311
- * The `data` result is a {@link @frak-labs/core-sdk!index.SiweAuthenticateReturnType | `SiweAuthenticateReturnType`}
312
- *
313
- * @see {@link @frak-labs/core-sdk!actions.siweAuthenticate | `siweAuthenticate()`} for more info about the underlying action
314
- * @see {@link @tanstack/react-query!useMutation | `useMutation()`} for more info about the mutation options and response
315
- */
316
- export declare function useSiweAuthenticate({ mutations, }?: UseSiweAuthenticateParams): UseMutationResult< {
317
- signature: Hex;
318
- message: string;
319
- }, FrakRpcError<undefined>, SiweAuthenticateModalParams, unknown>;
320
-
321
- /** @ignore */
322
- declare interface UseSiweAuthenticateParams {
323
- /**
324
- * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
325
- */
326
- mutations?: MutationOptions_3;
327
- }
328
-
329
- /**
330
- * Hook that return a query helping to get the current wallet status.
331
- *
332
- * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.watchWalletStatus | `watchWalletStatus()`} action
333
- *
334
- * @group hooks
335
- *
336
- * @returns
337
- * The query hook wrapping the `watchWalletStatus()` action
338
- * The `data` result is a {@link @frak-labs/core-sdk!index.WalletStatusReturnType | `WalletStatusReturnType`}
339
- *
340
- * @see {@link @frak-labs/core-sdk!actions.watchWalletStatus | `watchWalletStatus()`} for more info about the underlying action
341
- * @see {@link @tanstack/react-query!useQuery | `useQuery()`} for more info about the useQuery response
342
- */
343
- export declare function useWalletStatus(): UseQueryResult<WalletStatusReturnType, Error>;
344
-
345
- export { }
1
+ export { FrakConfigContext, FrakConfigProvider, FrakIFrameClientContext, FrakIFrameClientProvider, } from "./provider";
2
+ export type { FrakConfigProviderProps, FrakIFrameClientProps, } from "./provider";
3
+ export { useFrakConfig, useFrakClient, useWalletStatus, useSendTransactionAction, useSendInteraction, useSiweAuthenticate, useReferralInteraction, useDisplayModal, useOpenSso, usePrepareSso, useGetProductInformation, } from "./hook";
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import{Fragment as t,createContext as e,createElement as n,useCallback as r,useContext as o,useEffect as a,useMemo as i,useState as u}from"react";import{FrakContextManager as l,baseIframeProps as f,createIFrameFrakClient as s}from"@frak-labs/core-sdk";import{ClientNotFound as c,FrakRpcError as d,RpcErrorCodes as w}from"@frak-labs/frame-connector";import{displayModal as m,getProductInformation as k,openSso as y,processReferral as p,sendInteraction as h,sendTransaction as F,siweAuthenticate as v,watchWalletStatus as g}from"@frak-labs/core-sdk/actions";import{useMutation as C,useQuery as K,useQueryClient as q}from"@tanstack/react-query";let x=e(void 0);function b(t){let{children:e,config:r}=t;return n(x.Provider,{value:{...r,walletUrl:r.walletUrl??"https://wallet.frak.id",domain:r.domain??("undefined"!=typeof window?window?.location?.host:void 0)??"not-found"}},e)}function I(){let t=o(x);if(!t)throw new d(w.configError,"Frak config not found");return t}let P=e(void 0);function S({style:e,children:r}){let o=I(),[a,i]=u(void 0),l=n("iframe",{...f,src:`${o.walletUrl}/listener`,style:e??f.style,ref:t=>{t&&!a&&i(s({iframe:t,config:o}))}}),c=n(P.Provider,{value:a},r);return n(t,null,l,c)}function T(){return o(P)}function U(){let t=q(),e=T(),n=r(e=>{t.setQueryData(["frak-sdk","wallet-status-listener"],e)},[t]);return K({gcTime:0,staleTime:0,queryKey:["frak-sdk","wallet-status-listener"],queryFn:async()=>{if(!e)throw new c;return g(e,n)},enabled:!!e})}function E({mutations:t}={}){let e=T();return C({...t,mutationKey:["frak-sdk","send-transaction"],mutationFn:async t=>{if(!e)throw new c;return F(e,t)}})}function A({mutations:t}={}){let e=T();return C({...t,mutationKey:["frak-sdk","send-interaction"],mutationFn:async t=>{if(!e)throw new c;return h(e,t)}})}function D({mutations:t}={}){let e=T();return C({...t,mutationKey:["frak-sdk","siwe-authenticate",e?.config.domain??"no-domain"],mutationFn:async t=>{if(!e)throw new c;return v(e,t)}})}function L({productId:t,modalConfig:e,options:n}={}){let o=T(),{frakContext:f}=function(){let{location:t}=function(){let t=function(){let[t,e]=u(!1);return a(()=>{e(!0)},[]),t}(),[e,n]=u(t?window.location:void 0);a(()=>{if(t)return e||r(),window.addEventListener("popstate",r),()=>{window.removeEventListener("popstate",r)};function r(){n(window.location)}},[t,e]);let r=i(()=>e?.href,[e?.href]);return{location:e,href:r}}();return{frakContext:i(()=>t?.href?l.parse({url:t.href}):null,[t?.href]),updateContext:r(e=>{console.log("Updating context",{newContext:e}),l.replaceUrl({url:t?.href,context:e})},[t?.href])}}(),{data:s}=U(),{data:d,error:w,status:m}=K({gcTime:0,staleTime:0,queryKey:["frak-sdk","auto-referral-interaction",f?.r??"no-referrer",s?.key??"no-wallet-status",t??"no-product-id"],queryFn:()=>{if(!o)throw new c;return p(o,{walletStatus:s,frakContext:f,modalConfig:e,productId:t,options:n})},enabled:!!s});return i(()=>"pending"===m?"processing":"error"===m?w:d||"idle",[d,m,w])}function G({mutations:t}={}){let e=T();return C({...t,mutationKey:["frak-sdk","display-modal"],mutationFn:async t=>{if(!e)throw new c;return m(e,t)}})}function M({mutations:t}={}){let e=T();return C({...t,mutationKey:["frak-sdk","open-sso"],mutationFn:async t=>{if(!e)throw new c;return y(e,t)}})}function O({query:t}={}){let e=T();return K({...t,queryKey:["frak-sdk","get-product-information"],queryFn:async()=>{if(!e)throw new c;return k(e)}})}export{x as FrakConfigContext,b as FrakConfigProvider,P as FrakIFrameClientContext,S as FrakIFrameClientProvider,G as useDisplayModal,T as useFrakClient,I as useFrakConfig,O as useGetProductInformation,M as useOpenSso,L as useReferralInteraction,A as useSendInteraction,E as useSendTransactionAction,D as useSiweAuthenticate,U as useWalletStatus};
1
+ import{Fragment as e,createContext as t,createElement as n,useCallback as r,useContext as o,useEffect as a,useMemo as i,useState as u}from"react";import{FrakContextManager as s,baseIframeProps as l,createIFrameFrakClient as f}from"@frak-labs/core-sdk";import{ClientNotFound as c,FrakRpcError as d,RpcErrorCodes as w}from"@frak-labs/frame-connector";import{displayModal as k,getProductInformation as m,openSso as y,prepareSso as p,processReferral as h,sendInteraction as F,sendTransaction as v,siweAuthenticate as g,watchWalletStatus as C}from"@frak-labs/core-sdk/actions";import{useMutation as q,useQuery as K,useQueryClient as x}from"@tanstack/react-query";let P=t(void 0);function S(e){let{children:t,config:r}=e;return n(P.Provider,{value:{...r,walletUrl:r.walletUrl??"https://wallet.frak.id",domain:r.domain??("undefined"!=typeof window?window?.location?.host:void 0)??"not-found"}},t)}function b(){let e=o(P);if(!e)throw new d(w.configError,"Frak config not found");return e}let I=t(void 0);function T({style:t,children:r}){let o=b(),[a,i]=u(void 0),s=n("iframe",{...l,src:`${o.walletUrl}/listener`,style:t??l.style,ref:e=>{e&&!a&&i(f({iframe:e,config:o}))}}),c=n(I.Provider,{value:a},r);return n(e,null,s,c)}function U(){return o(I)}function E(){let e=x(),t=U(),n=r(t=>{e.setQueryData(["frak-sdk","wallet-status-listener"],t)},[e]);return K({gcTime:0,staleTime:0,queryKey:["frak-sdk","wallet-status-listener"],queryFn:async()=>{if(!t)throw new c;return C(t,n)},enabled:!!t})}function A({mutations:e}={}){let t=U();return q({...e,mutationKey:["frak-sdk","send-transaction"],mutationFn:async e=>{if(!t)throw new c;return v(t,e)}})}function D({mutations:e}={}){let t=U();return q({...e,mutationKey:["frak-sdk","send-interaction"],mutationFn:async e=>{if(!t)throw new c;return F(t,e)}})}function L({mutations:e}={}){let t=U();return q({...e,mutationKey:["frak-sdk","siwe-authenticate",t?.config.domain??"no-domain"],mutationFn:async e=>{if(!t)throw new c;return g(t,e)}})}function G({productId:e,modalConfig:t,options:n}={}){let o=U(),{frakContext:l}=function(){let{location:e}=function(){let e=function(){let[e,t]=u(!1);return a(()=>{t(!0)},[]),e}(),[t,n]=u(e?window.location:void 0);a(()=>{if(e)return t||r(),window.addEventListener("popstate",r),()=>{window.removeEventListener("popstate",r)};function r(){n(window.location)}},[e,t]);let r=i(()=>t?.href,[t?.href]);return{location:t,href:r}}();return{frakContext:i(()=>e?.href?s.parse({url:e.href}):null,[e?.href]),updateContext:r(t=>{console.log("Updating context",{newContext:t}),s.replaceUrl({url:e?.href,context:t})},[e?.href])}}(),{data:f}=E(),{data:d,error:w,status:k}=K({gcTime:0,staleTime:0,queryKey:["frak-sdk","auto-referral-interaction",l?.r??"no-referrer",f?.key??"no-wallet-status",e??"no-product-id"],queryFn:()=>{if(!o)throw new c;return h(o,{walletStatus:f,frakContext:l,modalConfig:t,productId:e,options:n})},enabled:!!f});return i(()=>"pending"===k?"processing":"error"===k?w:d||"idle",[d,k,w])}function M({mutations:e}={}){let t=U();return q({...e,mutationKey:["frak-sdk","display-modal"],mutationFn:async e=>{if(!t)throw new c;return k(t,e)}})}function O({mutations:e}={}){let t=U();return q({...e,mutationKey:["frak-sdk","open-sso"],mutationFn:async e=>{if(!t)throw new c;return y(t,e)}})}function Q(e){let t=U();return K({queryKey:["frak-sdk","prepare-sso",e],queryFn:async()=>{if(!t)throw new c;return p(t,e)}})}function R({query:e}={}){let t=U();return K({...e,queryKey:["frak-sdk","get-product-information"],queryFn:async()=>{if(!t)throw new c;return m(t)}})}export{P as FrakConfigContext,S as FrakConfigProvider,I as FrakIFrameClientContext,T as FrakIFrameClientProvider,M as useDisplayModal,U as useFrakClient,b as useFrakConfig,R as useGetProductInformation,O as useOpenSso,Q as usePrepareSso,G as useReferralInteraction,D as useSendInteraction,A as useSendTransactionAction,L as useSiweAuthenticate,E as useWalletStatus};
@@ -0,0 +1,29 @@
1
+ import type { FrakWalletSdkConfig } from "@frak-labs/core-sdk";
2
+ import { type PropsWithChildren } from "react";
3
+ /**
4
+ * The context that will keep the Frak Wallet SDK configuration
5
+ * @ignore
6
+ */
7
+ export declare const FrakConfigContext: import("react").Context<FrakWalletSdkConfig | undefined>;
8
+ /**
9
+ * Props to instantiate the Frak Wallet SDK configuration provider
10
+ *
11
+ * @group provider
12
+ */
13
+ export type FrakConfigProviderProps = {
14
+ /**
15
+ * The wanted Frak configuration
16
+ * @see {@link @frak-labs/core-sdk!index.FrakWalletSdkConfig | FrakWalletSdkConfig}
17
+ */
18
+ config: FrakWalletSdkConfig;
19
+ };
20
+ /**
21
+ * Simple config provider for the Frak Wallet SDK
22
+ *
23
+ * Should be wrapped within a {@link @tanstack/react-query!QueryClientProvider | `QueryClientProvider`}
24
+ *
25
+ * @group provider
26
+ *
27
+ * @param parameters
28
+ */
29
+ export declare function FrakConfigProvider(parameters: PropsWithChildren<FrakConfigProviderProps>): import("react").FunctionComponentElement<import("react").ProviderProps<FrakWalletSdkConfig | undefined>>;
@@ -0,0 +1,29 @@
1
+ import type { FrakWalletSdkConfig } from "@frak-labs/core-sdk";
2
+ import { type PropsWithChildren } from "react";
3
+ /**
4
+ * The context that will keep the Frak Wallet SDK configuration
5
+ * @ignore
6
+ */
7
+ export declare const FrakConfigContext: import("react").Context<FrakWalletSdkConfig | undefined>;
8
+ /**
9
+ * Props to instantiate the Frak Wallet SDK configuration provider
10
+ *
11
+ * @group provider
12
+ */
13
+ export type FrakConfigProviderProps = {
14
+ /**
15
+ * The wanted Frak configuration
16
+ * @see {@link @frak-labs/core-sdk!index.FrakWalletSdkConfig | FrakWalletSdkConfig}
17
+ */
18
+ config: FrakWalletSdkConfig;
19
+ };
20
+ /**
21
+ * Simple config provider for the Frak Wallet SDK
22
+ *
23
+ * Should be wrapped within a {@link @tanstack/react-query!QueryClientProvider | `QueryClientProvider`}
24
+ *
25
+ * @group provider
26
+ *
27
+ * @param parameters
28
+ */
29
+ export declare function FrakConfigProvider(parameters: PropsWithChildren<FrakConfigProviderProps>): import("react").FunctionComponentElement<import("react").ProviderProps<FrakWalletSdkConfig | undefined>>;
@@ -0,0 +1,32 @@
1
+ import { type FrakClient, type FrakWalletSdkConfig } from "@frak-labs/core-sdk";
2
+ import { type CSSProperties, type ReactNode } from "react";
3
+ /**
4
+ * The context that will keep the Frak Wallet SDK client
5
+ * @ignore
6
+ */
7
+ export declare const FrakIFrameClientContext: import("react").Context<FrakClient | undefined>;
8
+ /**
9
+ * Props to instantiate the Frak Wallet SDK configuration provider
10
+ *
11
+ * @group provider
12
+ */
13
+ export type FrakIFrameClientProps = {
14
+ config: FrakWalletSdkConfig;
15
+ };
16
+ /**
17
+ * IFrame client provider for the Frak Wallet SDK
18
+ * It will automatically create the frak wallet iFrame (required for the wallet to communicate with the SDK securely), and provide it in the context
19
+ *
20
+ * @group provider
21
+ *
22
+ * @remarks
23
+ * This provider must be wrapped within a {@link FrakConfigProvider} to work properly
24
+ *
25
+ * @param args
26
+ * @param args.style - Some custom styles to apply to the iFrame
27
+ * @param args.children - Descedant components that will have access to the Frak Client
28
+ */
29
+ export declare function FrakIFrameClientProvider({ style, children, }: {
30
+ style?: CSSProperties;
31
+ children?: ReactNode;
32
+ }): import("react").FunctionComponentElement<import("react").FragmentProps>;
@@ -0,0 +1,32 @@
1
+ import { type FrakClient, type FrakWalletSdkConfig } from "@frak-labs/core-sdk";
2
+ import { type CSSProperties, type ReactNode } from "react";
3
+ /**
4
+ * The context that will keep the Frak Wallet SDK client
5
+ * @ignore
6
+ */
7
+ export declare const FrakIFrameClientContext: import("react").Context<FrakClient | undefined>;
8
+ /**
9
+ * Props to instantiate the Frak Wallet SDK configuration provider
10
+ *
11
+ * @group provider
12
+ */
13
+ export type FrakIFrameClientProps = {
14
+ config: FrakWalletSdkConfig;
15
+ };
16
+ /**
17
+ * IFrame client provider for the Frak Wallet SDK
18
+ * It will automatically create the frak wallet iFrame (required for the wallet to communicate with the SDK securely), and provide it in the context
19
+ *
20
+ * @group provider
21
+ *
22
+ * @remarks
23
+ * This provider must be wrapped within a {@link FrakConfigProvider} to work properly
24
+ *
25
+ * @param args
26
+ * @param args.style - Some custom styles to apply to the iFrame
27
+ * @param args.children - Descedant components that will have access to the Frak Client
28
+ */
29
+ export declare function FrakIFrameClientProvider({ style, children, }: {
30
+ style?: CSSProperties;
31
+ children?: ReactNode;
32
+ }): import("react").FunctionComponentElement<import("react").FragmentProps>;
@@ -0,0 +1,4 @@
1
+ export { FrakConfigProvider, FrakConfigContext } from "./FrakConfigProvider";
2
+ export type { FrakConfigProviderProps } from "./FrakConfigProvider";
3
+ export { FrakIFrameClientContext, FrakIFrameClientProvider, } from "./FrakIFrameClientProvider";
4
+ export type { FrakIFrameClientProps } from "./FrakIFrameClientProvider";
@@ -0,0 +1,4 @@
1
+ export { FrakConfigProvider, FrakConfigContext } from "./FrakConfigProvider";
2
+ export type { FrakConfigProviderProps } from "./FrakConfigProvider";
3
+ export { FrakIFrameClientContext, FrakIFrameClientProvider, } from "./FrakIFrameClientProvider";
4
+ export type { FrakIFrameClientProps } from "./FrakIFrameClientProvider";
package/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  "url": "https://twitter.com/QNivelais"
12
12
  }
13
13
  ],
14
- "version": "0.0.19-beta.f259d7fc",
14
+ "version": "0.1.0-beta.267778ad",
15
15
  "description": "React SDK of the Frak wallet, low level library to interact directly with the frak ecosystem.",
16
16
  "repository": {
17
17
  "url": "https://github.com/frak-id/wallet",
@@ -62,8 +62,8 @@
62
62
  "publish": "echo 'Publishing react...'"
63
63
  },
64
64
  "dependencies": {
65
- "@frak-labs/frame-connector": "0.0.1",
66
- "@frak-labs/core-sdk": "0.0.19"
65
+ "@frak-labs/frame-connector": "0.1.0",
66
+ "@frak-labs/core-sdk": "0.1.0"
67
67
  },
68
68
  "peerDependencies": {
69
69
  "viem": "^2.x",
@@ -72,10 +72,13 @@
72
72
  },
73
73
  "devDependencies": {
74
74
  "@arethetypeswrong/cli": "^0.18.2",
75
+ "@frak-labs/browserslist-config": "0.0.1",
75
76
  "@microsoft/api-extractor": "^7.52.8",
76
77
  "@rsbuild/plugin-react": "^1.3.2",
77
78
  "@rslib/core": "^0.9.2",
78
79
  "@types/node": "^24",
80
+ "@types/react": "^19.1.8",
81
+ "react": "^19.1.8",
79
82
  "typescript": "^5",
80
83
  "@frak-labs/dev-tooling": "0.0.0"
81
84
  },