zh-web-sdk 2.3.1 → 2.3.3

package/README.md

@@ -125,6 +125,8 @@ To control the `WebView` you can also send messages *down*, using the `postMessa
 
 #### Notes
 A postMessage call is required to open the modal when the webview is loaded (type: OPEN_MODAL). This requirement was added in version `https://{SDK_SERVER_URL}/v1` and is not present in `https://{SDK_SERVER_URL}/`, which opens the onboarding app automatically. The latter will be deprecated and will not be available for use in the future.
+
+To safely trigger the "OPEN_MODAL" event in the version 1, listen for an event sent by sdk-mobile indicating that the app is ready to receive events. This event generate by sdk-mobile is called **SDK_MOBILE_READY**.
  
 The example below shows how you can implement the mentioned methods in a `react-native` project
 
@@ -145,7 +147,6 @@ const App = () => {
     fiatWithdrawals: { identifier: 'fiat-withdrawals', jwt: mockJWT },
     userOnboarding: { identifier: 'onboarding', jwt: mockJWT },
   }
-
   /**
    * Receive messages from sdk-mobile. Currently we expose the following event types:
    * "ONBOARDING_APP_LOADED", "ONBOARDING_CLOSE_BUTTON_CLICKED",
@@ -167,9 +168,14 @@ const App = () => {
     ]
     try {
       const parsedMessage = JSON.parse(event.nativeEvent.data)
+      console.log('Received message:', parsedMessage)
       if (closeModalEvents.includes(parsedMessage.type)) {
         setIsWebViewOpen(false)
       }
+      if (parsedMessage.type === 'SDK_MOBILE_READY') {
+        console.log('SDK is ready, opening modal...')
+        openModal()
+      }
     } catch (e) {
       alert(
         `could not parse message: ${JSON.stringify(event.nativeEvent.data)}`,
@@ -195,7 +201,6 @@ const App = () => {
     ) {
       throw new Error('Invalid app identifier')
     }
-
     if (useJWT) {
       // You can send events with JWTs. See the example below
       // { "type": "OPEN_MODAL", "payload": { "appIdentifier": "onboarding", "jwt": "some-jwt-token"}}
@@ -207,7 +212,6 @@ const App = () => {
     // { "type": "CLOSE_MODAL", "payload": { "appIdentifier": "onboarding"}}
     return `{ "type": "${eventType}", "payload": { "appIdentifier": "${eventAppIdentifier}"}}`
   }
-
   const openModal = () => {
     setIsWebViewOpen(true)
     webViewRef.current?.injectJavaScript(
@@ -282,13 +286,6 @@ const App = () => {
               ref={webViewRef}
               onMessage={handleMessage}
               source={{ uri: generateURL() }}
-              onNavigationStateChange={(navState) => {
-                if (!navState.loading) {
-                  setTimeout(() => {
-                    openModal()
-                  }, 100)
-                }
-              }}
             />
           )}
         </View>

package/dist/index.js

@@ -9,7 +9,7 @@ Error generating stack: `+i.message+`
 The error may be correlated with this previous error:
 ${Qi.current.stack}
 
-`),Ge}Mn(()=>{Qi.current=void 0,Fn.current=void 0,Hi.current=$r});let Ki=(0,D.useMemo)(()=>D.default.createElement(k,dt({},$r,{ref:H})),[H,k,$r]);return(0,D.useMemo)(()=>w?D.default.createElement(me.Provider,{value:Us},Ki):Ki,[me,Ki,Us])}let A=D.default.memo(v);if(A.WrappedComponent=k,A.displayName=v.displayName=c,s){let _=D.default.forwardRef(function(O,me){return D.default.createElement(A,dt({},O,{reactReduxForwardedRef:me}))});return _.displayName=c,_.WrappedComponent=k,(0,Rs.default)(_,k)}return(0,Rs.default)(A,k)}}var Ds=Bv;var Mr=b(Pe());function Hv({store:e,context:t,children:n,serverState:r,stabilityCheck:o="once",noopCheck:i="once"}){let l=(0,Mr.useMemo)(()=>{let a=zi(e);return{store:e,subscription:a,getServerState:r?()=>r:void 0,stabilityCheck:o,noopCheck:i}},[e,r,o,i]),u=(0,Mr.useMemo)(()=>e.getState(),[e]);Mn(()=>{let{subscription:a}=l;return a.onStateChange=a.notifyNestedSubs,a.trySubscribe(),u!==e.getState()&&a.notifyNestedSubs(),()=>{a.tryUnsubscribe(),a.onStateChange=void 0}},[l,u]);let s=t||je;return Mr.default.createElement(s.Provider,{value:l},n)}var Wi=Hv;od(Nd.useSyncExternalStoreWithSelector);Pd(Id.useSyncExternalStore);qp(Es.unstable_batchedUpdates);var Qv=540,zr=[{id:"MTE_SM",size:Qv}],Ld=()=>{for(let e=0;e<zr.length;e++){let{id:t,size:n}=zr[e];if(window.matchMedia(`(min-width: ${n}px`).matches)return t}return"ANY"},Ms={paddingRight:0,paddingLeft:0,marginRight:"auto",marginLeft:"auto",maxHeight:882},Rd={MTE_SM:{width:540},ANY:{width:"100%",height:"100%",maxWidth:"100%",borderRadius:0,maxHeight:"100%"}},Dd={position:"absolute",zIndex:999999,display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",width:"100vw",height:CSS.supports("height: 100dvh")?"100dvh":window.innerHeight+"px",maxHeight:window.innerHeight+"px",background:"rgba(0,0,0,0.5)",cursor:"pointer"},Md={display:"none",width:0,height:0},zd={padding:0,borderRadius:5,backgroundColor:"#FFF",height:"calc(100% - 100px)",maxWidth:"calc(100% - 30px)"},jd={width:"100%",height:"100%",border:"none",overflow:"hidden"},Wd={width:"100%",height:"100%",border:"none",margin:0,padding:0,overflow:"hidden",borderRadius:"0 0 15px 15px"};var zs=e=>{Nn(e,de,{isAppActive:!0})},Je=e=>{Nn(e,de,{isAppActive:!1})},qt=e=>{Nn(e,Ee,{isAppLoaded:!0})};var Wr=b(jr()),bv=Date.now(),eg={onboarding:"Onboarding","crypto-withdrawals":"Crypto Withdrawals","ach-deposits":"ACH Deposits","fiat-withdrawals":"Fiat Withdrawals","crypto-buy":"Crypto Buy","crypto-sell":"Crypto Sell"},tg=({isAppActive:e,isAppLoaded:t,jwt:n,zeroHashAppURL:r,appIdentifier:o})=>{let i=eg[o],l=!!n,[u,s]=(0,bt.useState)(Ms),a=xs(h=>h),m=()=>{let h=Ld(),w=Rd[h];s({...Ms,...w})},y=(0,bt.useRef)(null);(0,bt.useEffect)(()=>{r&&t&&l&&y.current?.contentWindow&&Object.keys(a).forEach(h=>{a[h].jwt&&y.current?.contentWindow?.postMessage({type:`${R.get(h)}SEND_JWT_TOKEN`,jwt:a[h].jwt},r)})},[o,l,t,n,r,a]),(0,bt.useEffect)(()=>{if(m(),window)return zr.forEach(({size:h})=>{window.matchMedia(`(min-width: ${h}px)`).addEventListener("change",m)}),()=>zr.forEach(({size:h})=>{window.matchMedia(`(min-width: ${h}px)`).removeEventListener("change",m)})},[]);let d=new URL(r);return d.searchParams.set("name",bv.toString()),window&&d.searchParams.set("origin",window.location.origin),(0,Wr.jsx)("div",{style:e?{...Dd}:Md,onClick:()=>Je(o),children:(0,Wr.jsx)("div",{style:{...zd,...u},children:(0,Wr.jsx)("div",{style:{...jd},children:(0,Wr.jsx)("iframe",{ref:y,title:i,src:d.toString(),allow:"camera *; fullscreen *; accelerometer *; gyroscope *; magnetometer *;",sandbox:"allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation",style:Wd})})})})},ng=(e,t)=>({isAppActive:e[t.appIdentifier].isAppActive,isAppLoaded:e[t.appIdentifier].isAppLoaded,jwt:e[t.appIdentifier].jwt}),js=Ds(ng)(tg);var Fr=b(jr()),$i=ys,Hd="",Bd={ONBOARDING_APP_LOADED:()=>{qt("onboarding")},ONBOARDING_CLOSE_BUTTON_CLICKED:()=>{Je("onboarding")},CRYPTO_WITHDRAWALS_CLOSE_BUTTON_CLICKED:()=>{Je("crypto-withdrawals")},CRYPTO_WITHDRAWALS_APP_LOADED:()=>{qt("crypto-withdrawals")},ACH_DEPOSITS_CLOSE_BUTTON_CLICKED:()=>{Je("ach-deposits")},ACH_DEPOSITS_APP_LOADED:()=>{qt("ach-deposits")},FIAT_WITHDRAWALS_CLOSE_BUTTON_CLICKED:()=>{Je("fiat-withdrawals")},FIAT_WITHDRAWALS_APP_LOADED:()=>{qt("fiat-withdrawals")},CRYPTO_BUY_CLOSE_BUTTON_CLICKED:()=>{Je("crypto-buy")},CRYPTO_BUY_APP_LOADED:()=>{qt("crypto-buy")},CRYPTO_SELL_CLOSE_BUTTON_CLICKED:()=>{Je("crypto-sell")},CRYPTO_SELL_APP_LOADED:()=>{qt("crypto-sell")}},rg=e=>{if(e.origin===Hd){let t=e.data;if(t&&t.type&&Bd[t.type])try{Bd[t.type](t.payload)}catch(n){console.error(n)}}},Ui=class{rootQuerySelector="";onboardingInitialized=!1;initializedApps=new Map([["crypto-withdrawals",!1],["onboarding",!1],["ach-deposits",!1],["fiat-withdrawals",!1],["crypto-buy",!1],["crypto-sell",!1]]);constructor({zeroHashOnboardingURL:t=ys,rootQuerySelector:n,userOnboardingJWT:r,cryptoWithdrawalsJWT:o,achDepositsJWT:i,fiatWithdrawalsJWT:l,cryptoBuyJWT:u,cryptoSellJWT:s,zeroHashAppsURL:a}){$i=a||t,Hd=new URL($i).origin,n&&(this.rootQuerySelector=n),window.addEventListener("message",rg,!1),r&&this.setJWT({jwt:r,appIdentifier:"onboarding"}),o&&this.setJWT({jwt:o,appIdentifier:"crypto-withdrawals"}),i&&this.setJWT({jwt:i,appIdentifier:"ach-deposits"}),l&&this.setJWT({jwt:l,appIdentifier:"fiat-withdrawals"}),u&&this.setJWT({jwt:u,appIdentifier:"crypto-buy"}),s&&this.setJWT({jwt:s,appIdentifier:"crypto-sell"})}setJWT({jwt:t,appIdentifier:n}){Nn(n,we,{jwt:t})}setUserOnboardingJWT(t){this.setJWT({jwt:t.userOnboardingJWT,appIdentifier:"onboarding"})}isOnboardingModalOpen(){return Zt.getState().onboarding.isAppActive}isModalOpen(t){return Zt.getState()[t].isAppActive}closeModal(t){Je(t)}openModal({jwt:t,appIdentifier:n}){if(t&&this.setJWT({jwt:t,appIdentifier:n}),zs(n),this.initializedApps.get(n))return;let r=null;if(this.rootQuerySelector&&(r=document.querySelector(this.rootQuerySelector)),!this.initializedApps.get(n)){r=document.createElement("div");let o=gs(n);r.id=o,r.style.position="absolute",r.style.top="0",r.style.left="0",this.rootQuerySelector=`#${o}`,document.querySelector("body").appendChild(r)}if(r){let o=r.attachShadow({mode:"closed"});Ws.default.createRoot(o).render((0,Fr.jsx)(Wi,{store:Zt,children:(0,Fr.jsx)(js,{appIdentifier:n,zeroHashAppURL:`${$i}/${n}`})})),this.initializedApps.set(n,!0)}else{let o="failed to append ZeroHash root to the page: root not found";throw console.error(o),new Error(o)}}openOnboardingModal(t){if(t.userOnboardingJWT&&this.setUserOnboardingJWT({userOnboardingJWT:t.userOnboardingJWT}),zs("onboarding"),this.onboardingInitialized)return;let n=null;if(this.rootQuerySelector&&(n=document.querySelector(this.rootQuerySelector)),!n){n=document.createElement("div");let r=gs();n.id=r,n.style.position="absolute",n.style.top="0",n.style.left="0",this.rootQuerySelector=`#${r}`,document.querySelector("body").appendChild(n)}if(n){let r=n.attachShadow({mode:"closed"});Ws.default.createRoot(r).render((0,Fr.jsx)(Wi,{store:Zt,children:(0,Fr.jsx)(js,{appIdentifier:"onboarding",zeroHashAppURL:$i})})),this.onboardingInitialized=!0}else{let r="failed to append ZeroHash root to the page: root not found";throw console.error(r),new Error(r)}}closeOnboardingModal(){Je("onboarding")}};window&&(window.zerohash=Ui);var WS=Ui;export{pt as AppIdentifier,kp as IncomingMessageType,Ui as ZeroHashSDK,R as appIdentifierToActionPrefixMap,WS as default};
+`),Ge}Mn(()=>{Qi.current=void 0,Fn.current=void 0,Hi.current=$r});let Ki=(0,D.useMemo)(()=>D.default.createElement(k,dt({},$r,{ref:H})),[H,k,$r]);return(0,D.useMemo)(()=>w?D.default.createElement(me.Provider,{value:Us},Ki):Ki,[me,Ki,Us])}let A=D.default.memo(v);if(A.WrappedComponent=k,A.displayName=v.displayName=c,s){let _=D.default.forwardRef(function(O,me){return D.default.createElement(A,dt({},O,{reactReduxForwardedRef:me}))});return _.displayName=c,_.WrappedComponent=k,(0,Rs.default)(_,k)}return(0,Rs.default)(A,k)}}var Ds=Bv;var Mr=b(Pe());function Hv({store:e,context:t,children:n,serverState:r,stabilityCheck:o="once",noopCheck:i="once"}){let l=(0,Mr.useMemo)(()=>{let a=zi(e);return{store:e,subscription:a,getServerState:r?()=>r:void 0,stabilityCheck:o,noopCheck:i}},[e,r,o,i]),u=(0,Mr.useMemo)(()=>e.getState(),[e]);Mn(()=>{let{subscription:a}=l;return a.onStateChange=a.notifyNestedSubs,a.trySubscribe(),u!==e.getState()&&a.notifyNestedSubs(),()=>{a.tryUnsubscribe(),a.onStateChange=void 0}},[l,u]);let s=t||je;return Mr.default.createElement(s.Provider,{value:l},n)}var Wi=Hv;od(Nd.useSyncExternalStoreWithSelector);Pd(Id.useSyncExternalStore);qp(Es.unstable_batchedUpdates);var Qv=540,zr=[{id:"MTE_SM",size:Qv}],Ld=()=>{for(let e=0;e<zr.length;e++){let{id:t,size:n}=zr[e];if(window.matchMedia(`(min-width: ${n}px`).matches)return t}return"ANY"},Ms={paddingRight:0,paddingLeft:0,marginRight:"auto",marginLeft:"auto",maxHeight:882},Rd={MTE_SM:{width:540},ANY:{width:"100%",height:"100%",maxWidth:"100%",borderRadius:0,maxHeight:"100%"}},Dd={position:"absolute",zIndex:999999,display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",width:"100vw",height:CSS.supports("height: 100dvh")?"100dvh":window.innerHeight+"px",maxHeight:window.innerHeight+"px",background:"rgba(0,0,0,0.5)",cursor:"pointer"},Md={display:"none",width:0,height:0},zd={padding:0,borderRadius:5,backgroundColor:"#FFF",height:"calc(100% - 100px)",maxWidth:"calc(100% - 30px)"},jd={width:"100%",height:"100%",border:"none",overflow:"hidden"},Wd={width:"100%",height:"100%",border:"none",margin:0,padding:0,overflow:"hidden",borderRadius:"0 0 15px 15px"};var zs=e=>{Nn(e,de,{isAppActive:!0})},Je=e=>{Nn(e,de,{isAppActive:!1})},qt=e=>{Nn(e,Ee,{isAppLoaded:!0})};var Wr=b(jr()),bv=Date.now(),eg={onboarding:"Onboarding","crypto-withdrawals":"Crypto Withdrawals","ach-deposits":"ACH Deposits","fiat-withdrawals":"Fiat Withdrawals","crypto-buy":"Crypto Buy","crypto-sell":"Crypto Sell"},tg=({isAppActive:e,isAppLoaded:t,jwt:n,zeroHashAppURL:r,appIdentifier:o})=>{let i=eg[o],l=!!n,[u,s]=(0,bt.useState)(Ms),a=xs(h=>h),m=()=>{let h=Ld(),w=Rd[h];s({...Ms,...w})},y=(0,bt.useRef)(null);(0,bt.useEffect)(()=>{r&&t&&l&&y.current?.contentWindow&&Object.keys(a).forEach(h=>{a[h].jwt&&y.current?.contentWindow?.postMessage({type:`${R.get(h)}SEND_JWT_TOKEN`,jwt:a[h].jwt},r)})},[o,l,t,n,r,a]),(0,bt.useEffect)(()=>{if(m(),window)return zr.forEach(({size:h})=>{window.matchMedia(`(min-width: ${h}px)`).addEventListener("change",m)}),()=>zr.forEach(({size:h})=>{window.matchMedia(`(min-width: ${h}px)`).removeEventListener("change",m)})},[]);let d=new URL(r);return d.searchParams.set("name",bv.toString()),window&&d.searchParams.set("origin",window.location.origin),(0,Wr.jsx)("div",{style:e?{...Dd}:Md,onClick:()=>Je(o),children:(0,Wr.jsx)("div",{style:{...zd,...u},children:(0,Wr.jsx)("div",{style:{...jd},children:(0,Wr.jsx)("iframe",{ref:y,title:i,src:d.toString(),allow:"camera *; fullscreen *; accelerometer *; gyroscope *; magnetometer *;",sandbox:"allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation",style:Wd})})})})},ng=(e,t)=>({isAppActive:e[t.appIdentifier].isAppActive,isAppLoaded:e[t.appIdentifier].isAppLoaded,jwt:e[t.appIdentifier].jwt}),js=Ds(ng)(tg);var Fr=b(jr()),$i=ys,Hd="",Bd={ONBOARDING_APP_LOADED:()=>{qt("onboarding")},ONBOARDING_CLOSE_BUTTON_CLICKED:()=>{Je("onboarding")},CRYPTO_WITHDRAWALS_CLOSE_BUTTON_CLICKED:()=>{Je("crypto-withdrawals")},CRYPTO_WITHDRAWALS_APP_LOADED:()=>{qt("crypto-withdrawals")},ACH_DEPOSITS_CLOSE_BUTTON_CLICKED:()=>{Je("ach-deposits")},ACH_DEPOSITS_APP_LOADED:()=>{qt("ach-deposits")},FIAT_WITHDRAWALS_CLOSE_BUTTON_CLICKED:()=>{Je("fiat-withdrawals")},FIAT_WITHDRAWALS_APP_LOADED:()=>{qt("fiat-withdrawals")},CRYPTO_BUY_CLOSE_BUTTON_CLICKED:()=>{Je("crypto-buy")},CRYPTO_BUY_APP_LOADED:()=>{qt("crypto-buy")},CRYPTO_SELL_CLOSE_BUTTON_CLICKED:()=>{Je("crypto-sell")},CRYPTO_SELL_APP_LOADED:()=>{qt("crypto-sell")}},rg=e=>{if(e.origin===Hd){let t=e.data;if(t&&t.type&&Bd[t.type])try{Bd[t.type](t.payload)}catch(n){console.error(n)}}},Ui=class{rootQuerySelector="";onboardingInitialized=!1;initializedApps=new Map([["crypto-withdrawals",!1],["onboarding",!1],["ach-deposits",!1],["fiat-withdrawals",!1],["crypto-buy",!1],["crypto-sell",!1]]);constructor({zeroHashOnboardingURL:t=ys,rootQuerySelector:n,userOnboardingJWT:r,cryptoWithdrawalsJWT:o,achDepositsJWT:i,fiatWithdrawalsJWT:l,cryptoBuyJWT:u,cryptoSellJWT:s,zeroHashAppsURL:a}){$i=a||t,Hd=new URL($i).origin,n&&(this.rootQuerySelector=n),window.addEventListener("message",rg,!1),r&&this.setJWT({jwt:r,appIdentifier:"onboarding"}),o&&this.setJWT({jwt:o,appIdentifier:"crypto-withdrawals"}),i&&this.setJWT({jwt:i,appIdentifier:"ach-deposits"}),l&&this.setJWT({jwt:l,appIdentifier:"fiat-withdrawals"}),u&&this.setJWT({jwt:u,appIdentifier:"crypto-buy"}),s&&this.setJWT({jwt:s,appIdentifier:"crypto-sell"})}setJWT({jwt:t,appIdentifier:n}){Nn(n,we,{jwt:t})}setUserOnboardingJWT(t){this.setJWT({jwt:t.userOnboardingJWT,appIdentifier:"onboarding"})}isOnboardingModalOpen(){return Zt.getState().onboarding.isAppActive}isModalOpen(t){return Zt.getState()[t].isAppActive}closeModal(t){Je(t)}openModal({jwt:t,appIdentifier:n}){if(t&&this.setJWT({jwt:t,appIdentifier:n}),zs(n),this.initializedApps.get(n))return;let r=null;if(this.rootQuerySelector&&(r=document.querySelector(this.rootQuerySelector)),!this.initializedApps.get(n)){r=document.createElement("div");let o=gs(n);r.id=o,r.style.position="absolute",r.style.top="0",r.style.left="0",this.rootQuerySelector=`#${o}`,document.querySelector("body").appendChild(r)}if(r){let o=r.attachShadow({mode:"closed"}),i=new URL(n,$i).href;Ws.default.createRoot(o).render((0,Fr.jsx)(Wi,{store:Zt,children:(0,Fr.jsx)(js,{appIdentifier:n,zeroHashAppURL:i})})),this.initializedApps.set(n,!0)}else{let o="failed to append ZeroHash root to the page: root not found";throw console.error(o),new Error(o)}}openOnboardingModal(t){if(t.userOnboardingJWT&&this.setUserOnboardingJWT({userOnboardingJWT:t.userOnboardingJWT}),zs("onboarding"),this.onboardingInitialized)return;let n=null;if(this.rootQuerySelector&&(n=document.querySelector(this.rootQuerySelector)),!n){n=document.createElement("div");let r=gs();n.id=r,n.style.position="absolute",n.style.top="0",n.style.left="0",this.rootQuerySelector=`#${r}`,document.querySelector("body").appendChild(n)}if(n){let r=n.attachShadow({mode:"closed"});Ws.default.createRoot(r).render((0,Fr.jsx)(Wi,{store:Zt,children:(0,Fr.jsx)(js,{appIdentifier:"onboarding",zeroHashAppURL:$i})})),this.onboardingInitialized=!0}else{let r="failed to append ZeroHash root to the page: root not found";throw console.error(r),new Error(r)}}closeOnboardingModal(){Je("onboarding")}};window&&(window.zerohash=Ui);var WS=Ui;export{pt as AppIdentifier,kp as IncomingMessageType,Ui as ZeroHashSDK,R as appIdentifierToActionPrefixMap,WS as default};
 /*! Bundled license information:
 
 react/cjs/react.production.min.js: