zh-web-sdk 2.7.3 → 2.9.0

package/dist/redux/reducers/constants.d.ts

@@ -5,3 +5,4 @@ export declare const ACTION_PENDING_APPROVAL = "PENDING_APPROVAL";
 export declare const ACTION_COMPLETED = "COMPLETED";
 export declare const ACTION_FAILED = "FAILED";
 export declare const ACTION_SET_FILTERS = "ACTION_SET_FILTERS";
+export declare const ACTION_SET_NAVIGATE = "SET_NAVIGATE";

package/dist/redux/reducers/index.d.ts

@@ -9,5 +9,6 @@ declare const rootReducer: import("redux").Reducer<import("redux").CombinedState
     "csp-fiat-withdrawals": import("./fiat-withdrawals").IFiatWithdrawalsState;
     "csp-crypto-sell": import("./crypto-sell").ICryptoSellState;
     fund: import("./fund").IFundState;
-}>, import("./crypto-withdrawals").ICryptoWithdrawalsAction | import("./crypto-buy").ICryptoBuyAction>;
+    profile: import("./profile").ProfileState;
+}>, import("./crypto-withdrawals").ICryptoWithdrawalsAction | import("./onboarding").IOnboardingAction | import("./crypto-buy").ICryptoBuyAction>;
 export default rootReducer;

package/dist/redux/reducers/onboarding.d.ts

@@ -1,13 +1,16 @@
+import { OnboardingPage } from "../../types";
 export interface IOnboardingState {
     jwt: string;
     isAppLoaded: boolean;
     isAppActive: boolean;
+    navigate?: OnboardingPage;
 }
 export interface IOnboardingAction {
     type: string;
     jwt?: string;
     isAppActive?: boolean;
     isAppLoaded?: boolean;
+    navigate?: OnboardingPage;
 }
 declare const onboardingReducer: (state: IOnboardingState | undefined, action: IOnboardingAction) => IOnboardingState;
 export default onboardingReducer;

package/dist/redux/reducers/profile.d.ts

@@ -0,0 +1,13 @@
+export interface ProfileState {
+    jwt: string;
+    isAppLoaded: boolean;
+    isAppActive: boolean;
+}
+export interface ProfileAction {
+    type: string;
+    jwt?: string;
+    isAppActive?: boolean;
+    isAppLoaded?: boolean;
+}
+declare const profileReducer: (state: ProfileState | undefined, action: ProfileAction) => ProfileState;
+export default profileReducer;

package/dist/redux/store/index.d.ts

@@ -9,5 +9,6 @@ declare const store: import("redux").Store<import("redux").EmptyObject & {
     "csp-fiat-withdrawals": import("../reducers/fiat-withdrawals").IFiatWithdrawalsState;
     "csp-crypto-sell": import("../reducers/crypto-sell").ICryptoSellState;
     fund: import("../reducers/fund").IFundState;
-}, import("../reducers/crypto-withdrawals").ICryptoWithdrawalsAction | import("../reducers/crypto-buy").ICryptoBuyAction>;
+    profile: import("../reducers/profile").ProfileState;
+}, import("../reducers/crypto-withdrawals").ICryptoWithdrawalsAction | import("../reducers/onboarding").IOnboardingAction | import("../reducers/crypto-buy").ICryptoBuyAction>;
 export default store;

package/dist/types.d.ts

@@ -72,6 +72,12 @@ export interface IInitializeParameters {
      * perform Fund operations.
      */
     fundJWT?: string;
+    /**
+     * profileJWT is the JWT that you received from
+     * the ZeroHash HTTP API and have specific permissions to
+     * perform Profile operations.
+     */
+    profileJWT?: string;
     /**
      * zeroHashAppsURL is the base URL for all our Apps.
      * It defaults to https://web-sdk.zerohash.com/ and will
@@ -249,7 +255,22 @@ export declare enum IncomingMessageType {
      * FundFailed is received when the
      * Fund flow has failed.
      */
-    FundFailed = "FUND_FAILED"
+    FundFailed = "FUND_FAILED",
+    /**
+     * ProfileAppLoaded is received when the Profile
+     * app has initialized.
+     */
+    ProfileAppLoaded = "PROFILE_APP_LOADED",
+    /**
+     * ProfileCloseButtonClicked is received when the close button
+     * has been clicked in the Profile app
+    */
+    ProfileCloseButtonClicked = "PROFILE_CLOSE_BUTTON_CLICKED",
+    /**
+     * ProfileFailed is received when the
+     * Profile flow has failed.
+     */
+    ProfileFailed = "PROFILE_FAILED"
 }
 /**
  * IncomingMessage defines the structure of an incoming
@@ -291,7 +312,8 @@ export declare enum AppIdentifier {
     CSP_CRYPTO_WITHDRAWALS = "csp-crypto-withdrawals",
     CSP_FIAT_WITHDRAWALS = "csp-fiat-withdrawals",
     CSP_CRYPTO_SELL = "csp-crypto-sell",
-    FUND = "fund"
+    FUND = "fund",
+    PROFILE = "profile"
 }
 /**
 * Map that maps the app AppIdentifier to the redux action prefix
@@ -311,8 +333,25 @@ export interface IOpenModalParameters {
     jwt?: string;
     appIdentifier: AppIdentifier;
     filters?: Filters;
+    navigate?: Page;
 }
 export interface ISetFiltersParameters {
     appIdentifier: AppIdentifier;
     filters?: Filters;
 }
+export interface EditAddress {
+    to: "edit-address";
+}
+/**
+ * Since we may extend this in the future, we use a union type to make it easy
+ * to allow for example a new CryptoBuyPage type to be added in the future or
+ * new pages for the Onboarding App with specialized props.
+ * Page is expected to be a union of "AppPage" and each App shall have it's own
+ * union of pages, such as EditAddress.
+ */
+export type OnboardingPage = EditAddress;
+export type Page = OnboardingPage;
+export interface ISetNavigateParameters {
+    appIdentifier: AppIdentifier;
+    navigate: Page;
+}

package/package.json

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

package/src/iframe-container/AppContainer.tsx

@@ -16,6 +16,8 @@ import { closeModal } from "../redux/actions";
 import {
   AppIdentifier,
   Filters,
+  OnboardingPage,
+  Page,
   appIdentifierToActionPrefixMap,
 } from "../types";
 
@@ -26,6 +28,7 @@ interface AppContainerProps {
   zeroHashAppURL: string;
   appIdentifier: AppIdentifier;
   filters?: Filters;
+  navigate?: Page;
 }
 
 interface AppContainerMappedProps {
@@ -40,6 +43,7 @@ interface AppContainerMappedProps {
     isAppLoaded: boolean;
     jwt: string;
     filters?: Filters;
+    navigate?: OnboardingPage;
   };
   [AppIdentifier.FIAT_DEPOSITS]: {
     isAppActive: boolean;
@@ -89,6 +93,12 @@ interface AppContainerMappedProps {
     jwt: string;
     filters?: Filters;
   };
+  [AppIdentifier.PROFILE]: {
+    isAppActive: boolean;
+    isAppLoaded: boolean;
+    jwt: string;
+    filters?: Filters;
+  };
 }
 
 const appLoadTime = Date.now();
@@ -103,7 +113,8 @@ const mapAppToTitle = {
   [AppIdentifier.CSP_CRYPTO_WITHDRAWALS]: "CBP Crypto Withdrawals",
   [AppIdentifier.CSP_FIAT_WITHDRAWALS]: "CBP Fiat Withdrawals",
   [AppIdentifier.CSP_CRYPTO_SELL]: "Crypto Sell",
-  [AppIdentifier.FUND]: "Fund"
+  [AppIdentifier.FUND]: "Fund",
+  [AppIdentifier.PROFILE]: "Profile",
 };
 
 const AppContainer = ({
@@ -112,6 +123,7 @@ const AppContainer = ({
   jwt,
   zeroHashAppURL,
   appIdentifier,
+  navigate,
 }: AppContainerProps) => {
   const title = mapAppToTitle[appIdentifier];
   const hasJwt = !!jwt;
@@ -133,17 +145,18 @@ const AppContainer = ({
   const iRef: React.MutableRefObject<HTMLIFrameElement | null> =
     useRef<HTMLIFrameElement | null>(null);
   useEffect(() => {
-    // Send JWT to iframe when all 3 props are ready
+    // Send events to the iframe when Apps are ready
     if (
       zeroHashAppURL &&
       isAppLoaded &&
       hasJwt &&
       iRef.current?.contentWindow
     ) {
-      // This loops all registered apps and sends their JWT tokens.
+      // This loops all registered apps and send events listed below.
       Object.keys(allAppsState).forEach((key: string) => {
         if (!allAppsState[key as AppIdentifier].jwt) return;
 
+        // Send JWT token
         iRef.current?.contentWindow?.postMessage(
           {
             type: `${appIdentifierToActionPrefixMap.get(
@@ -153,6 +166,7 @@ const AppContainer = ({
           },
           zeroHashAppURL
         );
+        // Send filters
         if (allAppsState[key as AppIdentifier].filters) {
           iRef.current?.contentWindow?.postMessage(
             {
@@ -164,9 +178,29 @@ const AppContainer = ({
             zeroHashAppURL
           );
         }
+        // Send navigate to Onboarding App
+        if (appIdentifier === AppIdentifier.ONBOARDING && navigate) {
+          iRef.current?.contentWindow?.postMessage(
+            {
+              type: `${appIdentifierToActionPrefixMap.get(
+                AppIdentifier.ONBOARDING
+              )}NAVIGATE`,
+              navigate,
+            },
+            zeroHashAppURL
+          );
+        }
       });
     }
-  }, [appIdentifier, hasJwt, isAppLoaded, jwt, zeroHashAppURL, allAppsState]);
+  }, [
+    appIdentifier,
+    hasJwt,
+    isAppLoaded,
+    jwt,
+    zeroHashAppURL,
+    allAppsState,
+    navigate,
+  ]);
 
   useEffect(() => {
     // set the styles when the screen size changes
@@ -236,6 +270,10 @@ const mapStateToProps = (
     isAppLoaded: state[ownProps.appIdentifier].isAppLoaded,
     jwt: state[ownProps.appIdentifier].jwt,
     filters: state[ownProps.appIdentifier].filters,
+    navigate:
+      ownProps.appIdentifier === AppIdentifier.ONBOARDING
+        ? state[ownProps.appIdentifier].navigate
+        : undefined,
   };
 };
 

package/src/index.tsx

@@ -10,6 +10,7 @@ import {
   IOpenOnboardingModalParameters,
   ISetFiltersParameters,
   ISetJWTParameters,
+  ISetNavigateParameters,
   ISetUserOnboardingJWTParameters,
   IZeroHashSDK,
 } from "./types";
@@ -18,7 +19,7 @@ import { DEFAULT_ZH_APPS_URL } from "./constants";
 import AppContainer from "./iframe-container/AppContainer";
 import { Provider } from "react-redux";
 import store from "./redux/store";
-import { ACTION_SET_FILTERS, ACTION_SET_JWT } from "./redux/reducers/constants";
+import { ACTION_SET_FILTERS, ACTION_SET_JWT, ACTION_SET_NAVIGATE } from "./redux/reducers/constants";
 import { appCompleted, appFailed, appLoaded, appPendingApproval, closeModal, openModal } from "./redux/actions";
 
 let _zeroHashAppsURL: string = DEFAULT_ZH_APPS_URL;
@@ -126,6 +127,16 @@ const appsMessageHandlers: {
   [IncomingMessageType.FundFailed]: () => {
     appFailed(AppIdentifier.FUND);
   },
+  // Profile message handlers
+  [IncomingMessageType.ProfileAppLoaded]: () => {
+    appLoaded(AppIdentifier.PROFILE);
+  },
+  [IncomingMessageType.ProfileCloseButtonClicked]: () => {
+    closeModal(AppIdentifier.PROFILE);
+  },
+  [IncomingMessageType.ProfileFailed]: () => {
+    appFailed(AppIdentifier.PROFILE);
+  },
 };
 
 /**
@@ -165,6 +176,7 @@ export class ZeroHashSDK implements IZeroHashSDK {
     [AppIdentifier.CRYPTO_BUY, false],
     [AppIdentifier.CRYPTO_SELL, false],
     [AppIdentifier.FUND, false],
+    [AppIdentifier.PROFILE, false],
   ]);
 
   /**
@@ -182,6 +194,7 @@ export class ZeroHashSDK implements IZeroHashSDK {
     cryptoBuyJWT,
     cryptoSellJWT,
     fundJWT,
+    profileJWT,
     zeroHashAppsURL,
   }: IInitializeParameters) {
     // The || is for backwards compatibility
@@ -237,6 +250,12 @@ export class ZeroHashSDK implements IZeroHashSDK {
         appIdentifier: AppIdentifier.FUND,
       });
     }
+    if (profileJWT) {
+      this.setJWT({
+        jwt: profileJWT,
+        appIdentifier: AppIdentifier.PROFILE,
+      });
+    }
   }
 
   /**
@@ -256,7 +275,13 @@ export class ZeroHashSDK implements IZeroHashSDK {
   setFilters({ filters, appIdentifier }: ISetFiltersParameters): void {
     dispatchActionBasedOnAppIdentifier(appIdentifier, ACTION_SET_FILTERS, { filters });
   }
-
+  /**
+   * Sets the navigate field for the appIdentifier provided. Currently this is 
+   * specific to Onboarding and is used to navigate to a specific page within the App.
+   */
+  setNavigate({ appIdentifier, navigate }: ISetNavigateParameters): void {
+    dispatchActionBasedOnAppIdentifier(appIdentifier, ACTION_SET_NAVIGATE, { navigate });
+  }
   /**
    * setUserOnboardingJWT sets the JWT to be whatever value is provided.
    * The JWT should be the UserJWT provided by ZeroHash via the platform
@@ -303,10 +328,13 @@ export class ZeroHashSDK implements IZeroHashSDK {
   /**
    * openModal opens the modal for the appIdentifier provided.
    */
-  openModal({ jwt, appIdentifier, filters }: IOpenModalParameters): void {
+  openModal({ jwt, appIdentifier, filters, navigate }: IOpenModalParameters): void {
     if (filters) {
       this.setFilters({filters, appIdentifier})
     }
+    if (navigate) {
+      this.setNavigate({ appIdentifier, navigate })
+    }
     if (jwt) {
       this.setJWT({
         jwt,

package/src/redux/reducers/constants.ts

@@ -5,4 +5,5 @@ export const ACTION_APP_LOADED = "APP_LOADED"
 export const ACTION_PENDING_APPROVAL = "PENDING_APPROVAL"
 export const ACTION_COMPLETED = "COMPLETED"
 export const ACTION_FAILED = "FAILED"
-export const ACTION_SET_FILTERS = "ACTION_SET_FILTERS"
+export const ACTION_SET_FILTERS = "ACTION_SET_FILTERS"
+export const ACTION_SET_NAVIGATE = "SET_NAVIGATE"

package/src/redux/reducers/index.ts

@@ -6,6 +6,7 @@ import fiatWithdrawalsReducer from "./fiat-withdrawals";
 import cryptoBuyReducer from "./crypto-buy";
 import cryptoSellReducer from "./crypto-sell";
 import fundReducer from "./fund";
+import profileReducer from "./profile";
 
 const rootReducer = combineReducers({
     ["crypto-withdrawals"]: cryptoWithdrawalsReducer,
@@ -18,6 +19,7 @@ const rootReducer = combineReducers({
     ["csp-fiat-withdrawals"]: fiatWithdrawalsReducer,
     ["csp-crypto-sell"]: cryptoSellReducer,
     ["fund"]: fundReducer,
+    ["profile"]: profileReducer,
 });
 
 export default rootReducer;

package/src/redux/reducers/onboarding.ts

@@ -1,15 +1,17 @@
-import { AppIdentifier } from "../../types";
+import { AppIdentifier, OnboardingPage } from "../../types";
 import { appIdentifierToActionPrefixMap } from "../../types";
 import {
   ACTION_SET_JWT,
   ACTION_SET_MODAL_STATE,
-  ACTION_APP_LOADED
+  ACTION_APP_LOADED,
+  ACTION_SET_NAVIGATE
 } from "./constants";
 
 export interface IOnboardingState {
   jwt: string;
   isAppLoaded: boolean;
   isAppActive: boolean;
+  navigate?: OnboardingPage;
 }
 
 export interface IOnboardingAction {
@@ -17,6 +19,7 @@ export interface IOnboardingAction {
   jwt?: string;
   isAppActive?: boolean;
   isAppLoaded?: boolean;
+  navigate?: OnboardingPage;
 }
 
 const INITIAL_STATE: IOnboardingState = {
@@ -45,12 +48,19 @@ const applySetJWT = (state: IOnboardingState, action: IOnboardingAction) : IOnbo
       jwt: action.jwt as string,
   }
 }
+const applySetNavigate = (state: IOnboardingState, action: IOnboardingAction): IOnboardingState => {
+  return {
+    ...state,
+    navigate: action.navigate,
+  }
+}
 
 const reducerMap: { [actionType: string]: (state: IOnboardingState, action: IOnboardingAction) => IOnboardingState } = {
   // Onboarding reducer
   [`${appIdentifierToActionPrefixMap.get(AppIdentifier.ONBOARDING)}${ACTION_SET_JWT}`]: applySetJWT,
   [`${appIdentifierToActionPrefixMap.get(AppIdentifier.ONBOARDING)}${ACTION_SET_MODAL_STATE}`]: applySetIsAppActive,
   [`${appIdentifierToActionPrefixMap.get(AppIdentifier.ONBOARDING)}${ACTION_APP_LOADED}`]: applySetSendJWTToApp,
+  [`${appIdentifierToActionPrefixMap.get(AppIdentifier.ONBOARDING)}${ACTION_SET_NAVIGATE}`]: applySetNavigate,
 };
 
 const onboardingReducer = (state = INITIAL_STATE, action: IOnboardingAction) => {

package/src/redux/reducers/profile.ts

@@ -0,0 +1,63 @@
+import { AppIdentifier } from "../../types";
+import { appIdentifierToActionPrefixMap } from "../../types";
+import {
+  ACTION_SET_JWT,
+  ACTION_SET_MODAL_STATE,
+  ACTION_APP_LOADED
+} from "./constants";
+
+export interface ProfileState {
+  jwt: string;
+  isAppLoaded: boolean;
+  isAppActive: boolean;
+}
+
+export interface ProfileAction {
+  type: string;
+  jwt?: string;
+  isAppActive?: boolean;
+  isAppLoaded?: boolean;
+}
+
+const INITIAL_STATE: ProfileState = {
+  jwt: "",
+  isAppActive: false,
+  isAppLoaded: false
+}
+
+const applySetIsAppActive = (state: ProfileState, action: ProfileAction) : ProfileState => {
+  return {
+      ...state,
+      isAppActive: !!action.isAppActive,
+  }
+}
+
+const applySetSendJWTToApp = (state: ProfileState, action: ProfileAction) : ProfileState => {
+  return {
+      ...state,
+      isAppLoaded: !!action.isAppLoaded,
+  }
+}
+
+const applySetJWT = (state: ProfileState, action: ProfileAction) : ProfileState => {
+  return {
+      ...state,
+      jwt: action.jwt as string,
+  }
+}
+
+const reducerMap: { [actionType: string]: (state: ProfileState, action: ProfileAction) => ProfileState } = {
+  [`${appIdentifierToActionPrefixMap.get(AppIdentifier.PROFILE)}${ACTION_SET_JWT}`]: applySetJWT,
+  [`${appIdentifierToActionPrefixMap.get(AppIdentifier.PROFILE)}${ACTION_SET_MODAL_STATE}`]: applySetIsAppActive,
+  [`${appIdentifierToActionPrefixMap.get(AppIdentifier.PROFILE)}${ACTION_APP_LOADED}`]: applySetSendJWTToApp,
+};
+
+const profileReducer = (state = INITIAL_STATE, action: ProfileAction) => {
+  if (!!action.type && !!reducerMap[action.type]) {
+      return reducerMap[action.type](state, action);
+  } else {
+      return state;
+  }
+}
+
+export default profileReducer;