zh-web-sdk 2.3.0 → 2.3.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zh-web-sdk",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "private": false,
   "description": "ZeroHash Web SDK",
   "homepage": "https://github.com/seedcx/zh-web-sdk",