zh-web-sdk 1.0.2

package/src/redux/reducers/app.ts

@@ -0,0 +1,61 @@
+import {
+    ACTION_SET_ONBOARDING_MODAL_STATE,
+    ACTION_ONBOARDING_APP_LOADED,
+    ACTION_SET_USER_ONBOARDING_JWT
+} from "./constants";
+
+export interface IState {
+    isOnboardingAppActive: boolean;
+    isOnboardingAppLoaded: boolean;
+    userOnboardingJWT: string;
+}
+
+export interface IAction {
+    type: string;
+    isOnboardingAppActive?: boolean;
+    isOnboardingAppLoaded?: boolean;
+    userOnboardingJWT?: string;
+}
+
+const INITIAL_STATE: IState = {
+    isOnboardingAppActive: false,
+    isOnboardingAppLoaded: false,
+    userOnboardingJWT: ""
+}
+
+const applySetIsOnboardingAppActive = (state: IState, action: IAction) : IState => {
+    return {
+        ...state,
+        isOnboardingAppActive: !!action.isOnboardingAppActive,
+    }
+}
+
+const applySetSendJWTToApp = (state: IState, action: IAction) : IState => {
+    return {
+        ...state,
+        isOnboardingAppLoaded: !!action.isOnboardingAppLoaded,
+    }
+}
+
+const applySetUserOnboardingJWT = (state: IState, action: IAction) : IState => {
+    return {
+        ...state,
+        userOnboardingJWT: action.userOnboardingJWT as string,
+    }
+}
+
+const reducerMap: { [actionType: string]: (state: IState, action: IAction) => IState } = {
+    [ACTION_SET_ONBOARDING_MODAL_STATE]: applySetIsOnboardingAppActive,
+    [ACTION_ONBOARDING_APP_LOADED]: applySetSendJWTToApp,
+    [ACTION_SET_USER_ONBOARDING_JWT]: applySetUserOnboardingJWT,
+};
+
+const appReducer = (state = INITIAL_STATE, action: IAction) => {
+    if (!!action.type && !!reducerMap[action.type]) {
+        return reducerMap[action.type](state, action);
+    } else {
+        return state;
+    }
+}
+
+export default appReducer;

package/src/redux/reducers/constants.ts

@@ -0,0 +1,3 @@
+export const ACTION_SET_ONBOARDING_MODAL_STATE = "SET_ONBOARDING_MODAL_STATE"
+export const ACTION_SET_USER_ONBOARDING_JWT = "SET_USER_ONBOARDING_JWT"
+export const ACTION_ONBOARDING_APP_LOADED = "ONBOARDING_APP_LOADED"

package/src/redux/reducers/index.ts

@@ -0,0 +1,8 @@
+import {combineReducers} from "redux";
+import appReducer from "./app";
+
+const rootReducer = combineReducers({
+    appState: appReducer,
+});
+
+export default rootReducer;

package/src/redux/store/index.ts

@@ -0,0 +1,6 @@
+import {legacy_createStore as createStore} from "redux";
+import rootReducer from "../reducers";
+
+const store = createStore(rootReducer);
+
+export default store;

package/src/styles.ts

@@ -0,0 +1,85 @@
+import {CSSProperties} from "react";
+
+const MTE_SM = 540;
+
+export const screenSizes: { id: string, size: number }[] = [
+    {
+        id: "MTE_SM",
+        size: MTE_SM,
+    }
+]
+
+export const minWidthMatcher = (): string => {
+    for (let i = 0; i < screenSizes.length; i++) {
+        const {id, size} = screenSizes[i];
+        if (window.matchMedia(`(min-width: ${size}px`).matches) {
+            return id
+        }
+    }
+    return "ANY"
+}
+
+export const containerStyle: CSSProperties = {
+    paddingRight: 0,
+    paddingLeft: 0,
+    marginRight: "auto",
+    marginLeft: "auto",
+    maxHeight: 882,
+}
+
+export const containerMediaStyles: { [id: string]: CSSProperties } = {
+    MTE_SM: {
+        width: 540
+    },
+    ANY: {
+        width: "100%",
+        height: "100%",
+        maxWidth: "100%",
+        borderRadius: 0,
+        maxHeight: "100%"
+    },
+}
+
+export const appWrapperStyle: CSSProperties = {
+    position: "absolute",
+    zIndex: 999999,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    width: "100vw",
+    height: "100vh",
+    background: "rgba(0,0,0,0.5)",
+    cursor: "pointer",
+}
+
+export const appWrapperHiddenStyle: CSSProperties = {
+    display: "none",
+    width: 0,
+    height: 0
+}
+
+export const modalStyle: CSSProperties = {
+    padding: 0,
+    borderRadius: 5,
+    backgroundColor: "#FFF",
+    height: "calc(100% - 100px)",
+    maxWidth: "calc(100% - 30px)",
+}
+
+export const iframeWrapperStyle: CSSProperties = {
+    width: "100%",
+    height: "100%",
+    border: "none",
+    overflow: "hidden"
+};
+
+export const iframeStyle: CSSProperties = {
+    width: "100%",
+    height: "100%",
+    border: "none",
+    margin: 0,
+    padding: 0,
+    overflow: "hidden",
+    borderRadius: "0 0 15px 15px"
+};

package/src/types.ts

@@ -0,0 +1,110 @@
+declare global {
+    interface Window {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        zerohash: any
+    }
+}
+
+/**
+ * IInitializeParameters describes the parameters
+ * required for initializing the platform SDK
+ */
+export interface IInitializeParameters {
+    /**
+     * zeroHashOnboardingURL should be set to the URL of
+     * the webapp for onboarding users onto the ZeroHash
+     * platform.
+     */
+    zeroHashOnboardingURL: string
+    /**
+     * rootQuerySelector is a query selector string that
+     * allows creating the ZeroHash UI subtree under a
+     * custom element.
+     *
+     * The default #zh-root query selector will be used
+     * instead otherwise. #zh-root will be a <div> appended
+     * as a child of the body in no specified order.
+     */
+    rootQuerySelector?: string
+    /**
+     * userOnboardingJWT is the JWT that you received from
+     * the ZeroHash HTTP API that pertains to the customer
+     * to be onboarded.
+     *
+     * This is optional in the constructor and can be
+     * deferred to setUserOnboardingJWT() at a later time
+     * but must be provided before opening the onboarding
+     * UI in order for the onboarding UI to be loaded.
+     */
+    userOnboardingJWT?: string
+}
+
+/**
+ * ISetUserOnboardingJWTParameters describes the
+ * parameters required for setting the user onboarding
+ * JWT.
+ */
+export interface ISetUserOnboardingJWTParameters {
+    /**
+     * userOnboardingJWT is the JWT that you received from
+     * the ZeroHash HTTP API that pertains to the customer
+     * to be onboarded.
+     */
+    userOnboardingJWT: string
+}
+
+export interface IOpenOnboardingModalParameters {
+    /**
+     * userOnboardingJWT is the JWT that you received from
+     * the ZeroHash HTTP API that pertains to the customer
+     * to be onboarded.
+     */
+    userOnboardingJWT?: string
+}
+
+/**
+ * IncomingMessageType are enums of message types that
+ * are registered that the host can handle.
+ */
+export enum IncomingMessageType {
+    /**
+     * OnboardingAppLoaded is received when the onboarding
+     * app has initialized.
+     */
+    OnboardingAppLoaded = "ONBOARDING_APP_LOADED",
+
+    /**
+     * OnboardingCloseButtonClicked is received when the close button
+     * has been clicked in the onboarding app
+     */
+    OnboardingCloseButtonClicked = "ONBOARDING_CLOSE_BUTTON_CLICKED",
+}
+
+/**
+ * IncomingMessage defines the structure of an incoming
+ * message
+ */
+export interface IncomingMessage {
+    /**
+     * type is the type of message that is used for routing
+     * the request to the appropriate handler
+     */
+    type: IncomingMessageType
+    /**
+     * payload is any freeform value that pertains to the
+     * request
+     */
+    payload: unknown
+}
+
+export type IncomingMessageHandler = (payload: unknown) => void;
+
+/**
+ * IZeroHashSDK is the interface that you may use to interact with the ZeroHash SDK.
+ */
+export interface IZeroHashSDK {
+    setUserOnboardingJWT(params: ISetUserOnboardingJWTParameters): void
+    isOnboardingModalOpen(): boolean
+    openOnboardingModal(params: IOpenOnboardingModalParameters): void
+    closeOnboardingModal(): void
+}

package/src/utils/strings.ts

@@ -0,0 +1,19 @@
+/**
+ * randomString generates a random string of specified
+ * @param length
+ * @param characters - charset to be used.
+ */
+export const randomString = (
+  length: number,
+  characters: string = 'abcdefghijklmnopqrstuvwxyz0123456789'
+) => {
+  let result = '';
+  const charactersLength = characters.length;
+  let counter = 0;
+  while (counter < length) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    counter += 1;
+  }
+  return result;
+}
+

package/src/utils.ts

@@ -0,0 +1,13 @@
+import {randomString} from "./utils/strings";
+import {DEFAULT_ROOT_ID_PREFIX} from "./constants";
+
+/**
+ * generateRootID attempts to create a dynamic ID to be
+ * used with a HTML element that is relatively unique
+ * and will not cause namespace conflicts.
+ *
+ * E.g. 'zerohash-49vt8y'
+ */
+export const generateRootID = () : string => {
+  return `${DEFAULT_ROOT_ID_PREFIX}-${randomString(6)}`
+};

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "target": "esnext",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}