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