@keyban/sdk-react
Version:
Keyban SDK React simplifies the integration of Keyban's MPC wallet in React apps with TypeScript support, flexible storage, and Ethereum blockchain integration.
2 lines • 10.3 kB
JavaScript
import {useSuspenseQuery,useSubscription}from'@apollo/client';import {KeybanClient,SdkError,SdkErrorTypes,formatBalance}from'@keyban/sdk-base';export*from'@keyban/sdk-base';import {walletBalanceDocument,walletSubscriptionDocument,walletTokenBalancesDocument,GqlTokenBalancesOrderBy,tokenBalancesSubscriptionDocument,walletTokenBalanceDocument,walletNftsDocument,GqlNftBalancesOrderBy,nftBalancesSubscriptionDocument,walletNftDocument,walletAssetTransfersDocument,GqlAssetTransfersOrderBy,assetTransfersSubscriptionDocument,walletOrdersDocument,GqlOrdersOrderBy,ordersSubscriptionDocument,GqlMutationType}from'@keyban/sdk-base/graphql';import m from'react';import {jsxs,jsx}from'react/jsx-runtime';import D from'./KeybanInput.module-2KPLL4WZ.module.css';var O=new WeakMap,U=m.createContext(new Map);function F({children:e}){let t=p(),s=O.get(t);return s||(s=new Map,O.set(t,s)),m.createElement(U.Provider,{value:s},e)}var q=e=>{e.promise.then(t=>(e.status=1,e.value=t,t)).catch(t=>{throw e.status=2,e.value=t,t});};function A(e,t,s){let o=m.useContext(U),n=o.get(e);n||(n={status:0,value:null,promise:t()},q(n),o.set(e,n));let[l,a]=m.useState(n.status===0);m.useEffect(()=>{n.promise.finally(()=>a(false));},[n.promise]);let u=m.useCallback(()=>{a(true),n.promise=t(),q(n);},[n,t]),r=m.useCallback(()=>{a(true),o.delete(e);},[n,t]),c={refresh:u,reset:r,loading:l};switch(n.status){case 0:if(s?.suspense)throw n.promise;return [null,null,c];case 1:return [n.value,null,c];case 2:return [null,n.value,c]}}var _=m.createContext(null);function Ae(e){let{children:t,...s}=e,o=m.useMemo(()=>new KeybanClient(s),Object.values(s));return jsx(_.Provider,{value:o,children:jsx(G,{children:jsx(F,{children:t})})})}var p=()=>{let e=m.useContext(_);if(!e)throw new Error("useKeybanClient hook must be used within a KeybanProvider");return e};var W=m.createContext(null);function G({children:e}){let t=p(),[s,o]=m.useState(),[n,l]=m.useState(0),a=m.useCallback(async f=>{try{l(h=>h+1),await f?.(),await t.getUser().then(o);}finally{l(h=>h-1);}},[t]);m.useEffect(()=>{a();},[a]);let u=m.useCallback(f=>a(()=>t.login(f)),[t,a]),r=m.useCallback(()=>a(()=>t.logout()),[t,a]),c=m.useCallback(f=>a(()=>t.passwordLogin(f)),[t,a]),d=m.useCallback(f=>t.passwordlessStart(f),[t]),i=m.useCallback(f=>a(()=>t.passwordlessLogin(f)),[t,a]),b=m.useMemo(()=>({login:u,logout:r,passwordLogin:c,passwordlessStart:d,passwordlessLogin:i,user:s,isAuthenticated:s===void 0?void 0:s!==null,isLoading:s===void 0||!!n}),[n,u,r,c,d,i,s]);return jsx(W.Provider,{value:b,children:e})}function j(){let e=m.useContext(W);if(!e)throw new Error("useKeybanAuth hook must be used within a KeybanProvider");return e}function S(e){return {hasPrevPage:e.pageInfo.hasPreviousPage,hasNextPage:e.pageInfo.hasNextPage,totalCount:e.totalCount,nodes:e.edges.map(({node:t})=>t).filter(Boolean)}}function w(e,t){let[s,o]=m.useTransition();return {loading:s,fetchMore:()=>{o(()=>{t({variables:{after:e.pageInfo.endCursor}});});}}}function B(e,t,s,o,n){switch(t){case GqlMutationType.INSERT:case GqlMutationType.UPDATE:{if(e.edges.find(({node:i})=>i?.id===s.node?.id))return e;let l=e.edges.findLastIndex(i=>o(i))+1,a=l===0,u=l===e.edges.length,{hasPreviousPage:r,hasNextPage:c}=e.pageInfo;if(r&&a||c&&u)return {...e,totalCount:e.totalCount+ +(t===GqlMutationType.INSERT)};let d=[...e.edges];return d.splice(l,0,s),{pageInfo:{...e.pageInfo,startCursor:d[0].cursor,endCursor:d[d.length-1].cursor},totalCount:e.totalCount+1,edges:d}}case GqlMutationType.DELETE:{if(n)return e;let l=e.edges.filter(({node:a})=>a?.id!==s.node?.id);return {pageInfo:{...e.pageInfo,startCursor:l[0]?.cursor??null,endCursor:l[l.length-1]?.cursor??null},totalCount:e.totalCount-1,edges:l}}}}function qe(){let e=p(),t=j(),[s,o]=A(`account:${t.user?.sub}`,()=>e.initialize(),{suspense:true});return [s,o,void 0]}function Ue(e){let t=p(),{data:s,error:o}=useSuspenseQuery(walletBalanceDocument,{client:t.apolloClient,variables:{walletId:e.address}});return useSubscription(walletSubscriptionDocument,{client:t.apolloClient,variables:{walletIds:[e.address]},onData({client:n,data:{data:l}}){n.cache.updateQuery({query:walletBalanceDocument,variables:{walletId:e.address}},()=>({res:l.sub.entity}));}}),o?[null,o,void 0]:[s.res?.balance??"0",null,void 0]}function Fe(e,t){let s=p(),{data:o,error:n,fetchMore:l,subscribeToMore:a}=useSuspenseQuery(walletTokenBalancesDocument,{client:s.apolloClient,variables:{walletId:e.address,orderBy:[GqlTokenBalancesOrderBy.TOKEN_SYMBOL_ASC],...t}});m.useEffect(()=>a({document:tokenBalancesSubscriptionDocument,updateQuery(r,{subscriptionData:c}){if(!r.res||!c.data.sub?.entity)return r;let{mutationType:d,entity:i}=c.data.sub;return i.walletId!==e.address?r:{res:B(r.res,d,{cursor:btoa(JSON.stringify([GqlTokenBalancesOrderBy.TOKEN_SYMBOL_ASC.toLowerCase(),[Number(i.token?.symbol),JSON.parse(atob(i.nodeId))[0]]])),node:i},({node:b})=>b.token.symbol<i.token.symbol,false)}}}),[a,e.address]);let u=w(o.res,l);return n?[null,n,u]:[S(o.res),null,u]}function _e(e,t){let s=p(),o=[e.address,t].join(":"),{data:n,error:l}=useSuspenseQuery(walletTokenBalanceDocument,{client:s.apolloClient,variables:{tokenBalanceId:o}});return useSubscription(tokenBalancesSubscriptionDocument,{client:s.apolloClient,variables:{tokenBalancesIds:[o]},onData({client:a,data:{data:u}}){a.cache.updateQuery({query:walletTokenBalanceDocument,variables:{tokenBalanceId:o}},()=>({res:u.sub.entity}));}}),l?[null,l,void 0]:n.res?[n.res,null,void 0]:[null,new SdkError(SdkErrorTypes.TokenBalanceNotFound,"useKeybanAccountTokenBalance"),void 0]}function Ge(e,t){let s=p(),{data:o,error:n,fetchMore:l,subscribeToMore:a}=useSuspenseQuery(walletNftsDocument,{client:s.apolloClient,variables:{...t,walletId:e.address,orderBy:GqlNftBalancesOrderBy.NFT_TOKEN_ID_ASC}});m.useEffect(()=>a({document:nftBalancesSubscriptionDocument,updateQuery(r,{subscriptionData:c}){if(!r.res||!c.data.sub?.entity)return r;let{mutationType:d,entity:i}=c.data.sub;return i.walletId!==e.address?r:{res:B(r.res,d,{cursor:btoa(JSON.stringify([GqlNftBalancesOrderBy.NFT_TOKEN_ID_ASC.toLowerCase(),[Number(i.nft?.tokenId),JSON.parse(atob(i.nodeId))[0]]])),node:i},({node:b})=>b.nft.tokenId<i.nft.tokenId,false)}}}),[a,e.address]);let u=w(o.res,l);return n?[null,n,u]:[S(o.res),null,u]}function We(e,t,s){let o=p(),n=[e.address,t,s].join(":"),{data:l,error:a}=useSuspenseQuery(walletNftDocument,{client:o.apolloClient,variables:{nftBalanceId:n}});return useSubscription(nftBalancesSubscriptionDocument,{client:o.apolloClient,variables:{nftBalanceIds:[n]},onData({client:u,data:{data:r}}){u.cache.updateQuery({query:walletNftDocument,variables:{nftBalanceId:n}},()=>({res:r.sub.entity}));}}),a?[null,a,void 0]:l.res?[l.res,null,void 0]:[null,new SdkError(SdkErrorTypes.NftNotFound,"useKeybanAccountNft"),void 0]}function je(e,t){let s=p(),{data:o,error:n,fetchMore:l,subscribeToMore:a}=useSuspenseQuery(walletAssetTransfersDocument,{client:s.apolloClient,variables:{walletId:e.address,orderBy:GqlAssetTransfersOrderBy.TRANSACTION_BLOCK_NUMBER_DESC,...t}});m.useEffect(()=>a({document:assetTransfersSubscriptionDocument,updateQuery(r,{subscriptionData:c}){if(!r.res||!c.data.sub?.entity)return r;let{mutationType:d,entity:i}=c.data.sub;return [i.fromId,i.toId].includes(e.address)?{res:B(r.res,d,{cursor:btoa(JSON.stringify([GqlAssetTransfersOrderBy.TRANSACTION_BLOCK_NUMBER_DESC.toLowerCase(),[Number(i.transaction?.blockNumber),JSON.parse(atob(i.nodeId))[0]]])),node:i},({node:f})=>BigInt(f.transaction.blockNumber)>BigInt(i.transaction.blockNumber),true)}:r}}),[a,e.address]);let u=w(o.res,l);return n?[null,n,u]:[S(o.res),null,u]}function He(e,t){let s=p(),{data:o,error:n,fetchMore:l,subscribeToMore:a}=useSuspenseQuery(walletOrdersDocument,{client:s.apolloClient,variables:{walletId:e.address,orderBy:GqlOrdersOrderBy.ID_DESC,...t}});m.useEffect(()=>a({document:ordersSubscriptionDocument,updateQuery(r,{subscriptionData:c}){if(!r.res||!c.data.sub?.entity)return r;let{mutationType:d,entity:i}=c.data.sub;return i.orderTransactions.nodes.some(f=>[f?.assetTransfer?.fromId,f?.assetTransfer?.toId].includes(e.address))?{res:B(r.res,d,{cursor:btoa(JSON.stringify([GqlOrdersOrderBy.ID_DESC.toLowerCase(),[Number(i.id),JSON.parse(atob(i.nodeId))[0]]])),node:i},({node:f})=>f.id>i.id,true)}:r}}),[a,e.address]);let u=w(o.res,l);return n?[null,n,u]:[S(o.res),null,u]}function Ye(){let e=p();return A("api-status",()=>e.apiStatus(),{suspense:true})}function be(e,t){return formatBalance(p(),e,t)}function tt(e){let{balance:t,token:s}=e;return be(t,s)}var rt=m.forwardRef((e,t)=>{let{className:s,style:o,type:n,inputMode:l,name:a,onFocus:u,onBlur:r,onInput:c,onChange:d,inputStyles:i={}}=e,[b,f]=m.useState(null),h=p(),C=new URL("/sdk-client/input",h.apiUrl);n&&C.searchParams.set("type",n),l&&C.searchParams.set("inputMode",l),i.colorScheme??=getComputedStyle(b??document.querySelector("html")).colorScheme;for(let[x,K]of Object.entries(i))C.searchParams.set(x,K);let E=m.useRef(null),k=m.useCallback(()=>{E.current?.contentWindow?.postMessage("focus",C.origin);},[C.origin]);m.useImperativeHandle(t,()=>({focus:k}),[k]),m.useEffect(()=>{let x=K=>{if(K.source===E.current?.contentWindow)switch(K.data){case "focus":M(N=>[...N,"focused"]),u?.();break;case "blur":M(N=>N.filter(oe=>oe!=="focused")),r?.();break;case "input":c?.();break;case "change":d?.();break}};return window.addEventListener("message",x),()=>window.removeEventListener("message",x)},[u,r,c,d]);let[se,M]=m.useState([]);return jsxs("div",{onClick:k,style:o,className:[D["KeybanInput-container"],...se,s].filter(Boolean).join(" "),ref:f,children:[jsx("input",{tabIndex:-1,disabled:true,readOnly:true,className:D["KeybanInput-input"]}),b&&jsx("iframe",{ref:E,src:C.toString(),name:a,className:D["KeybanInput-iframe"]})]})});export{tt as FormattedBalance,G as KeybanAuthProvider,rt as KeybanInput,Ae as KeybanProvider,be as useFormattedBalance,qe as useKeybanAccount,Ue as useKeybanAccountBalance,We as useKeybanAccountNft,Ge as useKeybanAccountNfts,He as useKeybanAccountOrders,_e as useKeybanAccountTokenBalance,Fe as useKeybanAccountTokenBalances,je as useKeybanAccountTransferHistory,Ye as useKeybanApiStatus,j as useKeybanAuth,p as useKeybanClient};//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map