zh-web-sdk 1.1.0 → 2.0.1

package/.eslintrc.js

@@ -8,7 +8,5 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
   plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': 'warn',
-  },
+  rules: {},
 }

package/README.md

@@ -1,23 +1,59 @@
 # ZeroHash Platform SDK
 
 This SDK exposes functionality that allows platforms to integrate with ZeroHash on the web.
+You should be able to access different UI flows, such as Onboarding and Crypto Withdrawals
+using a single instance of `ZeroHashSDK`.
+
+## Migrating from 1.x.x to 2.x.x
+On SDK v2 we added some new methods that will replace the ones marked with deprecated
+on future releases, if you update our SDK to v2 but don't do the below changes,
+your App should still work fine as we ensured everything is backwards compatible, but 
+we highly recommend that when updating to v2 you follow the steps below to ensure your App
+is up to date with our SDK.
+### Instantiating the SDK
+- `zeroHashOnboardingURL` was renamed to `zeroHashAppsURL`. Please replace `zeroHashOnboardingURL` with `zeroHashAppsURL`.
+### SDK Methods
+```javascript
+import { AppIdentifier } from 'zh-web-sdk'
+
+// openOnboardingModal replacement
+sdk.openOnboardingModal({userOnboardingJWT: jwt}) // Deprecated method
+sdk.openModal({appIdentifier: AppIdentifier.ONBOARDING, jwt: jwt}) // New method
+sdk.openOnboardingModal({}) // Deprecated method
+sdk.openModal({appIdentifier: AppIdentifier.ONBOARDING}) // New method
+
+// closeOnboardingModal replacement
+sdk.closeOnboardingModal() // Deprecated method
+sdk.closeModal(AppIdentifier.ONBOARDING) // New method
+
+// setUserOnboardingJWT replacement
+sdk.setUserOnboardingJWT({ userOnboardingJWT: jwt }) // Deprecated method
+sdk.setJWT({ jwt: jwt, appIdentifier: AppIdentifier.ONBOARDING }) // New method
+
+// isOnboardingModalOpen replacement
+sdk.isOnboardingModalOpen() // Deprecated method
+sdk.isModalOpen(AppIdentifier.ONBOARDING) // New method
+```
 
 ## Quick setup
 
 ```javascript
-import ZeroHashSDK from "zh-web-sdk";
+import ZeroHashSDK, { AppIdentifier } from 'zh-web-sdk';
 
 // Initialize SDK
 const sdk = new ZeroHashSDK({
-    zeroHashOnboardingURL: "https://onboarding.zerohash.com/"
+    zeroHashAppsURL: "https://web-sdk.zerohash.com",
+    userOnboardingJWT: onboardingJWT // This can also be set later, when opening the Modal using the `openModal` method.
 });
 
-// Set the user onboarding JWT retrieved for a particular user
-// A user onboarding JWT before the user can proceed with the onboarding flow.
-sdk.openOnboardingModal({
-    userOnboardingJWT: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9." +
-        "eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ." +
-        "SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
+// Set the JWT retrieved for a particular App (each App requires a specific JWT,
+// i.e. you should not use your Onboarding JWT for Crypto Witdhrawals)
+// before the user can proceed with the flow. Currently the Apps
+sdk.openModal({
+  appIdentifier: AppIdentifier.ONBOARDING,
+  jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9." +
+    "eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ." +
+    "SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
 });
 ```
 
@@ -46,26 +82,35 @@ These are the URLs your `WebView` should use on your Mobile App.
 ### React native guide
 
 #### 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: 
-- **ONBOARDING_APP_LOADED:** Sent when the App is loaded
-- **ONBOARDING_CLOSE_BUTTON_CLICKED:** Sent when the user clicks the Close button on the top-right corner
+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_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_CLOSE_BUTTON_CLICKED` Sent when the user clicks the Close button on the top-right corner
 
 #### Messages
-To control the `WebView` you can also send messages *down*, using the `postMessage` API. Currently the accepted messages are:
-- `{type: "OPEN_ONBOARDING_MODAL", payload:{userOnboardingJWT: "<JWT_HERE>"} }`: It will open the onboarding modal with the JWT provided
-- `{type: "CLOSE_ONBOARDING_MODAL"}`: It will close the onboarding modal
+To control the `WebView` you can also send messages *down*, using the `postMessage` API. Currently the accepted messages are for the respective Apps are:
+- **Onboarding**
+  - `{type: "OPEN_MODAL", payload:{jwt: "<JWT_HERE>", appIdentifier: "onboarding"} }`: It will open the onboarding modal with the JWT provided
+  - `{type: "CLOSE_MODAL", payload:{appIdentifier: "onboarding"}}`: It will close the onboarding modal
+- **Crypto Withdrawals**
+  - `{type: "OPEN_MODAL", payload:{jwt: "<JWT_HERE>", appIdentifier: "crypto-withdrawals"} }`: It will open the Crypto Withdrawals modal with the JWT provided
+  - `{type: "CLOSE_MODAL", payload:{appIdentifier: "crypto-withdrawals"}}`: It will close the Crypto Withdrawals modal
 
 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 zeroHashOnboardingURL = 'https://onboarding.cert.zerohash.com'
+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" and "ONBOARDING_CLOSE_BUTTON_CLICKED"
+   "ONBOARDING_APP_LOADED", "ONBOARDING_CLOSE_BUTTON_CLICKED",
+   "CRYPTO_WITHDRAWALS_APP_LOADED", "CRYPTO_WITHDRAWALS_CLOSE_BUTTON_CLICKED"
    you should be able to take action based on these events.
   */
   const handleMessage = (event: WebViewMessageEvent) => {
@@ -86,23 +131,23 @@ const App = () => {
     }
   }
   /* You can also send messages to sdk-mobile, currently we accept the following messages:
-   * "OPEN_ONBOARDING_MODAL" and "CLOSE_ONBOARDING_MODAL"
+   * "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 openModalType = `{
-    type: 'OPEN_ONBOARDING_MODAL',
-    payload: { userOnboardingJWT: '${jwt}' } }`
+  const openOnboardingModalType = `{
+    type: 'OPEN_MODAL',
+    payload: { jwt: '${jwt}', appIdentifier: 'onboarding' } }`
   const openOnboardingModal = () => {
     webViewRef.current?.injectJavaScript(
-      `window.postMessage(${openModalType});true;`,
+      `window.postMessage(${openOnboardingModalType});true;`,
     )
   }
-  const closeModalType = `{ type: 'CLOSE_ONBOARDING_MODAL' }`
-  const closeModal = () =>
+  const closeOnboardingModalType = `{ type: 'CLOSE_MODAL', payload: 'onboarding' }`
+  const closeOnboardingModal = () =>
     webViewRef.current?.injectJavaScript(
-      `window.postMessage(${closeModalType});true;`,
+      `window.postMessage(${closeOnboardingModalType});true;`,
     )
   return (
     <SafeAreaProvider style={{ flex: 1 }}>
@@ -117,7 +162,8 @@ const App = () => {
           ref={webViewRef}
           onMessage={handleMessage}
           source={{
-            uri: `${sdkMobileServer}?userOnboardingJWT=${jwt}&zeroHashOnboardingURL=${zeroHashOnboardingURL}`,
+            uri: `${sdkMobileServer}?
+            cryptoWithdrawalsJWT=${cwJWT}userOnboardingJWT=${jwt}&zeroHashAppsURL=${zeroHashOnboardingURL}`,
           }}
         />
       </SafeAreaView>

package/dist/constants.d.ts

@@ -1,2 +1,2 @@
-export declare const DEFAULT_ZH_ONBOARDING_URL = "https://onboarding.zerohash.com/";
+export declare const DEFAULT_ZH_APPS_URL = "https://web-sdk.zerohash.com/";
 export declare const DEFAULT_ROOT_ID_PREFIX = "zerohash";

package/dist/iframe-container/AppContainer.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { AppIdentifier } from "../types";
+interface AppContainerProps {
+    isAppActive?: boolean;
+    isAppLoaded?: boolean;
+    jwt?: string;
+    zeroHashAppURL: string;
+    appIdentifier: AppIdentifier;
+}
+declare const _default: import("react-redux").ConnectedComponent<({ isAppActive, isAppLoaded, jwt, zeroHashAppURL, appIdentifier, }: AppContainerProps) => import("react/jsx-runtime").JSX.Element, {
+    zeroHashAppURL: string;
+    appIdentifier: AppIdentifier;
+    isAppActive?: boolean | undefined;
+    isAppLoaded?: boolean | undefined;
+    jwt?: string | undefined;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").AnyAction>> | undefined;
+    store?: import("redux").Store<any, import("redux").AnyAction> | undefined;
+}>;
+export default _default;

package/dist/iframe-container/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MESSAGE_TYPE_SEND_JWT_TOKEN: string;
+export declare const MESSAGE_TYPE_SEND_JWT_TOKEN_WITHDRAWALS: string;

package/dist/index.d.ts

@@ -1,13 +1,30 @@
-import { IInitializeParameters, IOpenOnboardingModalParameters, ISetUserOnboardingJWTParameters, IZeroHashSDK } from './types';
+import { AppIdentifier, IInitializeParameters, IOpenModalParameters, IOpenOnboardingModalParameters, ISetJWTParameters, ISetUserOnboardingJWTParameters, IZeroHashSDK } from "./types";
 export declare class ZeroHashSDK implements IZeroHashSDK {
     private rootQuerySelector;
     private onboardingInitialized;
+    /**
+     * initializedApps is a map that keeps track of which apps have been initialized.
+     * This might grow as we start supporting new apps.
+     */
+    private initializedApps;
     /**
      * Sets up the ZeroHash SDK and appends the ZeroHash DOM elements onto the page.
      *
      * For more information, see {@code IInitializeParameters}
      */
-    constructor({ zeroHashOnboardingURL, rootQuerySelector, userOnboardingJWT }: IInitializeParameters);
+    constructor({ zeroHashOnboardingURL, rootQuerySelector, userOnboardingJWT, cryptoWithdrawalsJWT, zeroHashAppsURL, }: IInitializeParameters);
+    /**
+     * setJWT sets the JWT for the appIdentifier provided.
+     * The JWT should be the JWT provided by ZeroHash via the platform
+     * API proxied through your servers. As ZeroHash cannot authenticate
+     * your users' requests, it is paramount that the user be authenticated
+     * and validated on your servers, and exchanged for the JWT using your
+     * API key. DO NOT have the JWT exchange logic be on your front-end.
+     *
+     * As a precaution, we may restrict traffic to the JWT exchange API to
+     * whitelisted IPs that come from your server.
+     */
+    setJWT({ jwt, appIdentifier }: ISetJWTParameters): void;
     /**
      * setUserOnboardingJWT sets the JWT to be whatever value is provided.
      * The JWT should be the UserJWT provided by ZeroHash via the platform
@@ -18,20 +35,38 @@ export declare class ZeroHashSDK implements IZeroHashSDK {
      *
      * As a precaution, we may restrict traffic to the JWT exchange API to
      * whitelisted IPs that come from your server.
+     * @deprecated in favor of setJWT({jwt: <userOnboardingJWT>, appIdentifier: "onboarding"})
      */
     setUserOnboardingJWT(params: ISetUserOnboardingJWTParameters): void;
     /**
      * isOnboardingModalOpen returns true if the onboarding modal is open,
      * false otherwise
+     * @deprecated in favor of isModalOpen("onboarding")
      */
     isOnboardingModalOpen(): boolean;
+    /**
+     * isModalOpen returns true if the modal is open,
+     * for the appIdentifier provided, false otherwise
+     */
+    isModalOpen(appIdentifier: AppIdentifier): boolean;
+    /**
+     * closeModal hides the modal for the appIdentifier provided.
+     */
+    closeModal(appIdentifier: AppIdentifier): void;
+    /**
+     * openModal opens the modal for the appIdentifier provided.
+     */
+    openModal({ jwt, appIdentifier }: IOpenModalParameters): void;
     /**
      * openOnboardingModal opens the onboarding modal
+     * @deprecated in favor of openModal({appIdentifier: "onboarding", jwt: <userOnboardingJWT>})
      */
     openOnboardingModal(params: IOpenOnboardingModalParameters): void;
     /**
      * closeOnboardingModalModal hides the onboarding modal
+     * @deprecated in favor of closeModal("onboarding")
      */
     closeOnboardingModal(): void;
 }
 export default ZeroHashSDK;
+export * from "./types";