zh-web-sdk 2.3.0 → 2.3.2

package/README.md

@@ -72,10 +72,10 @@ The pipeline automatically updates the version in package.json after merge to ma
 - default is a patch release (`1.0.0` to `1.0.1`)
 
 ## Mobile usage
-In order to use our SDK on Mobile Apps you should follow the guide below. You won't need to install or have `zh-web-sdk` as a dependency in your project to use it for Mobile Apps.
-We use a proxy server that calls the SDK internally in order to make it work for Mobile Applications. This proxy service is referred to as `sdk-mobile` and the URLs are:
-- Cert: https://sdk-mobile.cert.zerohash.com
-- Prod: https://sdk-mobile.zerohash.com
+In order to use our SDK on Mobile Apps you should follow the guide below. You won't need to install or have `zh-web-sdk` as a dependency in your project to use it for Mobile Apps. We use a proxy server that calls the SDK internally in order to make it work for Mobile Applications. This proxy service is referred to as `sdk-mobile` and the URLs are:
+
+- Cert: https://sdk-mobile.cert.zerohash.com/v1
+- Prod: https://sdk-mobile.zerohash.com/v1
 
 These are the URLs your `WebView` should use on your Mobile App.
 
@@ -84,22 +84,22 @@ These are the URLs your `WebView` should use on your Mobile App.
 #### Events
 We forward events that come from the UI to the Native App using the `postMessage` API. You can handle these events using `onMessage` from the `WebView` component. Currently these are the events we have, for the respective Apps:
 - **Onboarding:** 
-  - `ONBOARDING_APP_LOADED` Sent when the App is loaded
+  - `ONBOARDING_APP_LOADED` Sent when the App is loaded in the first time
   - `ONBOARDING_CLOSE_BUTTON_CLICKED` Sent when the user clicks the Close button on the top-right corner
 - **Crypto Withdrawals:**
-  - `CRYPTO_WITHDRAWALS_APP_LOADED` Sent when the App is loaded
+  - `CRYPTO_WITHDRAWALS_APP_LOADED` Sent when the App is loaded in the first time
   - `CRYPTO_WITHDRAWALS_CLOSE_BUTTON_CLICKED` Sent when the user clicks the Close button on the top-right corner
 - **ACH Deposits:**
-  - `ACH_DEPOSITS_APP_LOADED` Sent when the App is loaded
+  - `ACH_DEPOSITS_APP_LOADED` Sent when the App is loaded in the first time
   - `ACH_DEPOSITS_CLOSE_BUTTON_CLICKED` Sent when the user clicks the Close button on the top-right corner
 - **Fiat Withdrawals:**
-  - `FIAT_WITHDRAWALS_APP_LOADED` Sent when the App is loaded
+  - `FIAT_WITHDRAWALS_APP_LOADED` Sent when the App is loaded in the first time
   - `FIAT_WITHDRAWALS_CLOSE_BUTTON_CLICKED` Sent when the user clicks the Close button on the top-right corner
 - **Crypto Buy:**
-  - `CRYPTO_BUY_APP_LOADED` Sent when the App is loaded
+  - `CRYPTO_BUY_APP_LOADED` Sent when the App is loaded in the first time
   - `CRYPTO_BUY_CLOSE_BUTTON_CLICKED` Sent when the user clicks the Close button on the top-right corner
 - **Crypto Sell:**
-  - `CRYPTO_SELL_APP_LOADED` Sent when the App is loaded
+  - `CRYPTO_SELL_APP_LOADED` Sent when the App is loaded in the first time
   - `CRYPTO_SELL_CLOSE_BUTTON_CLICKED` Sent when the user clicks the Close button on the top-right corner
 
 #### Messages
@@ -123,33 +123,51 @@ To control the `WebView` you can also send messages *down*, using the `postMessa
   - `{type: "OPEN_MODAL", payload:{jwt: "<JWT_HERE>", appIdentifier: "crypto-sell"} }`: It will open the Crypto sell modal with the JWT provided
   - `{type: "CLOSE_MODAL", payload:{appIdentifier: "crypto-sell"}}`: It will close the Crypto sell modal
 
+#### 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.
+ 
 The example below shows how you can implement the mentioned methods in a `react-native` project
 
 ```jsx
-const sdkMobileServer = 'https://sdk-mobile.cert.zerohash.com/'
+const sdkMobileServer = 'https://sdk-mobile.cert.zerohash.com/v1'
 const zeroHashAppsURL = 'https://web-sdk.zerohash.com/'
 const App = () => {
   const webViewRef = useRef<WebView>(null)
-  const jwt = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c`
-  /* 
-   Receive messages from sdk-mobile. Currently we expose the following event types:
-   "ONBOARDING_APP_LOADED", "ONBOARDING_CLOSE_BUTTON_CLICKED",
-   "CRYPTO_WITHDRAWALS_APP_LOADED", "CRYPTO_WITHDRAWALS_CLOSE_BUTTON_CLICKED",
-   "ACH_DEPOSITS_APP_LOADED", "ACH_DEPOSITS_CLOSE_BUTTON_CLICKED",
-   "FIAT_WITHDRAWALS_APP_LOADED", "FIAT_WITHDRAWALS_CLOSE_BUTTON_CLICKED",
-   "CRYPTO_BUY_APP_LOADED", "CRYPTO_BUY_CLOSE_BUTTON_CLICKED",
-   "CRYPTO_SELL_APP_LOADED", "CRYPTO_SELL_CLOSE_BUTTON_CLICKED",
-   you should be able to take action based on these events.
-  */
+  const [isWebViewOpen, setIsWebViewOpen] = React.useState(false)
+  const currentAppIdentifier = 'onboarding'
+  const mockJWT =
+    'eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ6ZXJvaGFzaC5jb20iLCJzdWIiOiJ0ZXN0U3ViamVjdCIsImF1ZCI6WyJ6ZXJvaGFzaC5jb20iXSwiZXhwIjoxNjk1OTc2OTMzLCJpYXQiOjE2OTMzODQ5MzMsInBheWxvYWQiOnsiZW1haWwiOiJteS1lbWFpbEB0ZXN0LmNvbSIsInBhcnRpY2lwYW50X2NvZGUiOiJwYXJ0aWNpcGFudC1jb2RlIiwicGxhdGZvcm1fbmFtZSI6InBsYXRmb3JtLW5hbWUiLCJwbGF0Zm9ybV9jb2RlIjoicGxhdGZvcm0tY29kZSIsInBsYXRmb3JtX2FncmVlbWVudF9saW5rIjoicGxhdGZvcm0tYWdyZWVtZW50LWxpbmsifX0.r549t4J_iQ8wP5pnD2uTdRaRm4nHLO722lDmhbGoIc0E_cKVyVYnxZTO1DnXJ6NUJ6a3DvnkGv78iQHqvnFTmg'
+  const apps = {
+    achDeposits: { identifier: 'ach-deposits', jwt: mockJWT },
+    cryptoBuy: { identifier: 'crypto-buy', jwt: mockJWT },
+    cryptoSell: { identifier: 'crypto-sell', jwt: mockJWT },
+    cryptoWithdrawals: { identifier: 'crypto-withdrawals', jwt: mockJWT },
+    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",
+   * "CRYPTO_WITHDRAWALS_APP_LOADED", "CRYPTO_WITHDRAWALS_CLOSE_BUTTON_CLICKED",
+   * "ACH_DEPOSITS_APP_LOADED", "ACH_DEPOSITS_CLOSE_BUTTON_CLICKED",
+   * "FIAT_WITHDRAWALS_APP_LOADED", "FIAT_WITHDRAWALS_CLOSE_BUTTON_CLICKED",
+   * "CRYPTO_BUY_APP_LOADED", "CRYPTO_BUY_CLOSE_BUTTON_CLICKED",
+   * "CRYPTO_SELL_APP_LOADED", "CRYPTO_SELL_CLOSE_BUTTON_CLICKED",
+   * you should be able to take action based on these events.
+   */
   const handleMessage = (event: WebViewMessageEvent) => {
+    const closeModalEvents = [
+      'ONBOARDING_CLOSE_BUTTON_CLICKED',
+      'CRYPTO_WITHDRAWALS_CLOSE_BUTTON_CLICKED',
+      'ACH_DEPOSITS_CLOSE_BUTTON_CLICKED',
+      'FIAT_WITHDRAWALS_CLOSE_BUTTON_CLICKED',
+      'CRYPTO_BUY_CLOSE_BUTTON_CLICKED',
+      'CRYPTO_SELL_CLOSE_BUTTON_CLICKED',
+    ]
     try {
       const parsedMessage = JSON.parse(event.nativeEvent.data)
-      if (parsedMessage.type === "ONBOARDING_APP_LOADED") {
-        // setOnboardingAppLoaded(true)
-      }
-      if (
-        parsedMessage.type === "ONBOARDING_CLOSE_BUTTON_CLICKED"
-      ) {
+      if (closeModalEvents.includes(parsedMessage.type)) {
         setIsWebViewOpen(false)
       }
     } catch (e) {
@@ -158,47 +176,125 @@ const App = () => {
       )
     }
   }
-  /* You can also send messages to sdk-mobile, currently we accept the following messages:
+  /**
+   * You can also send messages to sdk-mobile, currently we accept the following messages:
    * "OPEN_MODAL" and "CLOSE_MODAL"
    * Note that the "true;" after the postMessage is required
    * and recommended by the official react-native-webview docs
    * https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#the-injectedjavascript-prop
    */
-  const openOnboardingModalType = `{
-    type: 'OPEN_MODAL',
-    payload: { jwt: '${jwt}', appIdentifier: 'onboarding' } }`
-  const openOnboardingModal = () => {
+  const makeEventType = (
+    eventAppIdentifier: string,
+    eventType: string,
+    useJWT = false,
+  ) => {
+    if (
+      !Object.entries(apps).some(
+        ([_, { identifier }]) => identifier === eventAppIdentifier,
+      )
+    ) {
+      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"}}
+      // { "type": "CLOSE_MODAL", "payload": { "appIdentifier": "onboarding", "jwt": "some-jwt-token"}}
+      return `{ "type": "${eventType}", "payload": { "appIdentifier": "${eventAppIdentifier}", "jwt": "${apps[eventAppIdentifier].jwt}"}}`
+    }
+    // Send events without JWTs if you already set in the URL with query parameters and don't want to send it again
+    // { "type": "OPEN_MODAL", "payload": { "appIdentifier": "onboarding"}}
+    // { "type": "CLOSE_MODAL", "payload": { "appIdentifier": "onboarding"}}
+    return `{ "type": "${eventType}", "payload": { "appIdentifier": "${eventAppIdentifier}"}}`
+  }
+
+  const openModal = () => {
+    setIsWebViewOpen(true)
     webViewRef.current?.injectJavaScript(
-      `window.postMessage(${openOnboardingModalType});true;`,
+      `window.postMessage(${makeEventType(currentAppIdentifier, 'OPEN_MODAL')});true;`,
     )
   }
-  const closeOnboardingModalType = `{ type: 'CLOSE_MODAL', payload: 'onboarding' }`
-  const closeOnboardingModal = () =>
+  const closeModal = () => {
     webViewRef.current?.injectJavaScript(
-      `window.postMessage(${closeOnboardingModalType});true;`,
+      `window.postMessage(${makeEventType(currentAppIdentifier, 'CLOSE_MODAL')});true;`,
     )
+  }
+  /**
+   * Generate the URL with the query parameters required and the JWTs for the apps
+   */
+  const generateURL = () => {
+    const jwtParams = Object.entries(apps)
+      .filter(([_, { jwt }]) => jwt)
+      .map(([key, { jwt }]) => `${key}JWT=${encodeURIComponent(jwt)}`)
+      .join('&')
+
+    return `${sdkMobileServer}?zeroHashAppsURL=${encodeURIComponent(zeroHashAppsURL)}&${jwtParams}`
+  }
   return (
     <SafeAreaProvider style={{ flex: 1 }}>
-      <SafeAreaView style={{ flex: 1 }}>
-        <TouchableOpacity onPress={() => closeOnboardingModal()}>
-          <Text>Close modal</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={() => openOnboardingModal()}>
-          <Text>Open modal</Text>
-        </TouchableOpacity>
-        <WebView
-          ref={webViewRef}
-          onMessage={handleMessage}
-          source={{
-            uri: `${sdkMobileServer}?
-            cryptoSellJWT=${cryptoSellJWT}&
-            cryptoBuyJWT=${cryptoBuyJWT}&
-            fiatWithdrawalsJWT=${fiatWithdrawalsJWT}&
-            achDepositsJWT=${achDepositsJWT}&cryptoWithdrawalsJWT=${cwJWT}userOnboardingJWT=${jwt}&zeroHashAppsURL=${zeroHashOnboardingURL}`,
-          }}
-        />
+      <SafeAreaView
+        style={{
+          flex: 1,
+          padding: 0,
+        }}
+      >
+        {!isWebViewOpen && (
+          <View
+            style={{
+              flex: 1,
+              alignContent: 'center',
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <TouchableOpacity
+              style={{
+                backgroundColor: '#00f197',
+                padding: 10,
+                margin: 10,
+                borderRadius: 5,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              onPress={() => setIsWebViewOpen(true)}
+            >
+              <Text>Open modal</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{
+                backgroundColor: '#00f197',
+                padding: 10,
+                margin: 10,
+                borderRadius: 5,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              onPress={() => closeModal()}
+            >
+              <Text>Close modal</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+        <View style={{ display: isWebViewOpen ? 'flex' : 'none', flex: 1 }}>
+          {isWebViewOpen && (
+            <WebView
+              ref={webViewRef}
+              onMessage={handleMessage}
+              source={{ uri: generateURL() }}
+              onNavigationStateChange={(navState) => {
+                if (!navState.loading) {
+                  setTimeout(() => {
+                    openModal()
+                  }, 100)
+                }
+              }}
+            />
+          )}
+        </View>
       </SafeAreaView>
     </SafeAreaProvider>
   )
 }
+export default App
 ```

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: