zh-web-sdk 2.12.0 → 2.12.2

package/dist/redux/reducers/fiat-account-link.d.ts

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

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

@@ -14,5 +14,6 @@ declare const rootReducer: import("redux").Reducer<import("redux").CombinedState
     "crypto-account-link-payouts": import("./crypto-account-link-payouts").ICryptoAccountLinkPayoutsState;
     payouts: import("./payouts").IPayoutsState;
     pay: import("./pay").IPayState;
+    "fiat-account-link": import("./fiat-account-link").IFiatAccountLinkState;
 }>, import("./crypto-withdrawals").ICryptoWithdrawalsAction | import("./onboarding").IOnboardingAction | import("./crypto-buy").ICryptoBuyAction>;
 export default rootReducer;

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

@@ -16,6 +16,7 @@ declare const store: import("redux").Store<import("redux").EmptyObject & {
     "crypto-account-link-payouts": import("../reducers/crypto-account-link-payouts").ICryptoAccountLinkPayoutsState;
     payouts: import("../reducers/payouts").IPayoutsState;
     pay: import("../reducers/pay").IPayState;
+    "fiat-account-link": import("../reducers/fiat-account-link").IFiatAccountLinkState;
 }, import("../reducers/crypto-withdrawals").ICryptoWithdrawalsAction | import("../reducers/onboarding").IOnboardingAction | import("../reducers/crypto-buy").ICryptoBuyAction>;
 export default store;
 export type RootState = ReturnType<typeof rootReducer>;

package/dist/styles.d.ts

@@ -3,6 +3,10 @@ export declare const screenSizes: {
     id: string;
     size: number;
 }[];
+/**
+ * When the width is smaller than
+ *
+ */
 export declare const minWidthMatcher: () => string;
 export declare const containerStyle: CSSProperties;
 export declare const containerMediaStyles: {

package/dist/types.d.ts

@@ -109,6 +109,12 @@ export interface IInitializeParameters {
      * to perform pay.
      */
     payJWT?: string;
+    /**
+     * fiatAccountLinkJWT is the JWT that you received from
+     * the ZeroHash HTTP API and have specific permissions to
+     * create a new Fiat Account.
+     */
+    fiatAccountLinkJWT?: string;
     /**
      * zeroHashAppsURL is the base URL for all our Apps.
      * It defaults to https://web-sdk.zerohash.com/ and will
@@ -375,7 +381,27 @@ export declare enum IncomingMessageType {
     /**
      * PayFailed is received when the Pay flow has failed.
      */
-    PayFailed = "PAY_FAILED"
+    PayFailed = "PAY_FAILED",
+    /**
+     * FiatAccountLinkAppLoaded is received when the Fiat Account Link
+     * app has initialized.
+     */
+    FiatAccountLinkAppLoaded = "FIAT_ACCOUNT_LINK_APP_LOADED",
+    /**
+     * FiatAccountLinkCloseButtonClicked is received when the close button
+     * has been clicked in the Fiat Account Link app
+     */
+    FiatAccountLinkCloseButtonClicked = "FIAT_ACCOUNT_LINK_CLOSE_BUTTON_CLICKED",
+    /**
+     * FiatAccountLinkFailed is received when the
+     * Fiat Account Link flow has failed.
+     */
+    FiatAccountLinkFailed = "FIAT_ACCOUNT_LINK_FAILED",
+    /**
+     * FiatAccountLinkCompleted is received when the
+     * Fiat Account Link flow is completed.
+     */
+    FiatAccountLinkCompleted = "FIAT_ACCOUNT_LINK_COMPLETED"
 }
 /**
  * IncomingMessage defines the structure of an incoming
@@ -422,7 +448,8 @@ export declare enum AppIdentifier {
     CRYPTO_ACCOUNT_LINK = "crypto-account-link",
     CRYPTO_ACCOUNT_LINK_PAYOUTS = "crypto-account-link-payouts",
     PAYOUTS = "payouts",
-    PAY = "pay"
+    PAY = "pay",
+    FIAT_ACCOUNT_LINK = "fiat-account-link"
 }
 /**
 * Map that maps the app AppIdentifier to the redux action prefix

package/package.json

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

package/src/iframe-container/AppContainer.tsx

@@ -129,6 +129,12 @@ interface AppContainerMappedProps {
     jwt: string;
     filters?: Filters;
   };
+  [AppIdentifier.FIAT_ACCOUNT_LINK]: {
+    isAppActive: boolean;
+    isAppLoaded: boolean;
+    jwt: string;
+    filters?: Filters;
+  };
 }
 
 const appLoadTime = Date.now();
@@ -149,6 +155,7 @@ const mapAppToTitle = {
   [AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS]: "Crypto Account Link Payouts",
   [AppIdentifier.PAYOUTS]: "Payouts",
   [AppIdentifier.PAY]: "Pay",
+  [AppIdentifier.FIAT_ACCOUNT_LINK]: "Fiat Account Link",
 };
 
 const AppContainer = ({
@@ -192,11 +199,11 @@ const AppContainer = ({
         iRef.current?.contentWindow?.postMessage(
           {
             type: `${appIdentifierToActionPrefixMap.get(
-              key as AppIdentifier,
+              key as AppIdentifier
             )}SEND_JWT_TOKEN`,
             jwt: allAppsState[key as AppIdentifier].jwt,
           },
-          zeroHashAppURL,
+          zeroHashAppURL
         );
 
         // If the zh-web-sdk is being run inside the WorldApp, we must send the WorldApp object
@@ -204,7 +211,7 @@ const AppContainer = ({
         if (isInsideWorldApp()) {
           iRef.current?.contentWindow?.postMessage(
             { type: `WORLD_APP_OBJECT`, WorldApp: window.WorldApp },
-            zeroHashAppURL,
+            zeroHashAppURL
           );
         }
 
@@ -213,11 +220,11 @@ const AppContainer = ({
           iRef.current?.contentWindow?.postMessage(
             {
               type: `${appIdentifierToActionPrefixMap.get(
-                key as AppIdentifier,
+                key as AppIdentifier
               )}SEND_FILTERS`,
               filters: allAppsState[key as AppIdentifier].filters,
             },
-            zeroHashAppURL,
+            zeroHashAppURL
           );
         }
         // Send navigate to Onboarding App
@@ -225,11 +232,11 @@ const AppContainer = ({
           iRef.current?.contentWindow?.postMessage(
             {
               type: `${appIdentifierToActionPrefixMap.get(
-                AppIdentifier.ONBOARDING,
+                AppIdentifier.ONBOARDING
               )}NAVIGATE`,
               navigate,
             },
-            zeroHashAppURL,
+            zeroHashAppURL
           );
         }
       });
@@ -274,7 +281,7 @@ const AppContainer = ({
             data: event.data,
           },
         },
-        zeroHashAppURL,
+        zeroHashAppURL
       );
 
       if (!window.MiniKit) {
@@ -283,7 +290,7 @@ const AppContainer = ({
             type: "MINIKIT_PAY_COMMAND_CANCELED",
             payload: { reason: "window.Minikit not found" },
           },
-          zeroHashAppURL,
+          zeroHashAppURL
         );
         return;
       }
@@ -299,7 +306,7 @@ const AppContainer = ({
                 symbol: payload.token as Tokens,
                 token_amount: tokenToDecimals(
                   Number(payload.amount),
-                  payload.token,
+                  payload.token
                 ).toString(),
               },
             ],
@@ -310,14 +317,14 @@ const AppContainer = ({
               type: "MINIKIT_PAY_COMMAND_SUBMITTING_PAYMENT",
               payload: { minikitPayload },
             },
-            zeroHashAppURL,
+            zeroHashAppURL
           );
           const { finalPayload } =
             await window.MiniKit.commandsAsync.pay(minikitPayload);
 
           iRef.current?.contentWindow?.postMessage(
             { type: "MINIKIT_PAY_COMMAND_RESULT", payload: { finalPayload } },
-            zeroHashAppURL,
+            zeroHashAppURL
           );
         }
       } catch (error) {
@@ -326,11 +333,11 @@ const AppContainer = ({
             type: "MINIKIT_PAY_COMMAND_ERROR",
             payload: { error, status: "error" },
           },
-          zeroHashAppURL,
+          zeroHashAppURL
         );
       }
     },
-    [zeroHashAppURL],
+    [zeroHashAppURL]
   );
 
   useEffect(() => {
@@ -379,7 +386,7 @@ const AppContainer = ({
 
 const mapStateToProps = (
   state: AppContainerMappedProps,
-  ownProps: AppContainerProps,
+  ownProps: AppContainerProps
 ) => {
   return {
     isAppActive: state[ownProps.appIdentifier].isAppActive,

package/src/iframe-container/__tests__/AppContainer.test.tsx

@@ -1,9 +1,9 @@
-import {screen} from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import AppContainer from "../AppContainer";
-import {AppIdentifier} from "../../types";
-import {renderWithProviders} from "../../utils/test-utils";
+import { AppIdentifier } from "../../types";
+import { renderWithProviders } from "../../utils/test-utils";
 
-describe('AppContainer', () => {
+describe("AppContainer", () => {
   test.each([
     [AppIdentifier.CRYPTO_WITHDRAWALS, "Crypto Withdrawals"],
     [AppIdentifier.FIAT_DEPOSITS, "Fiat Deposits"],
@@ -19,34 +19,38 @@ describe('AppContainer', () => {
     [AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS, "Crypto Account Link Payouts"],
     [AppIdentifier.PAYOUTS, "Payouts"],
     [AppIdentifier.PAY, "Pay"],
-  ])("should render AppContainer correctly for %s", async (appIdentifier, title) => {
-    renderWithProviders(
-      <AppContainer
-        appIdentifier={appIdentifier}
-        zeroHashAppURL={"https://testurl.com/"}
-      />,
-      {
-        preloadedState: {
-          [appIdentifier]: {
-            isAppActive: true,
-            isAppLoaded: true,
-            jwt: "jwt"
-          }
+    [AppIdentifier.FIAT_ACCOUNT_LINK, "Fiat Account Link"],
+  ])(
+    "should render AppContainer correctly for %s",
+    async (appIdentifier, title) => {
+      renderWithProviders(
+        <AppContainer
+          appIdentifier={appIdentifier}
+          zeroHashAppURL={"https://testurl.com/"}
+        />,
+        {
+          preloadedState: {
+            [appIdentifier]: {
+              isAppActive: true,
+              isAppLoaded: true,
+              jwt: "jwt",
+            },
+          },
         }
-      }
-    )
-    // Expect that a post message event is sent
+      );
+      // Expect that a post message event is sent
 
-    const iframe = screen.getByTitle(title)
-    expect(iframe).toBeDefined()
-    expect(iframe.style.width).toBe("100%")
-    expect(iframe.style.height).toBe("100%")
+      const iframe = screen.getByTitle(title);
+      expect(iframe).toBeDefined();
+      expect(iframe.style.width).toBe("100%");
+      expect(iframe.style.height).toBe("100%");
 
-    const iframeSrc = new URL(iframe.getAttribute("src") as string)
-    expect(iframeSrc.origin).toBe("https://testurl.com")
-    expect(iframeSrc.searchParams.get("origin")).toBe("http://localhost")
-    expect(screen.getByTitle(title)).toBeDefined()
+      const iframeSrc = new URL(iframe.getAttribute("src") as string);
+      expect(iframeSrc.origin).toBe("https://testurl.com");
+      expect(iframeSrc.searchParams.get("origin")).toBe("http://localhost");
+      expect(screen.getByTitle(title)).toBeDefined();
 
-    // Verify that postMessage has been called
-  })
-})
+      // Verify that postMessage has been called
+    }
+  );
+});

package/src/index.tsx

@@ -19,8 +19,19 @@ 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, ACTION_SET_NAVIGATE } from "./redux/reducers/constants";
-import { appCompleted, appFailed, appLoaded, appPendingApproval, closeModal, openModal } from "./redux/actions";
+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;
 let _zeroHashAppsOrigin: string = "";
@@ -139,29 +150,29 @@ const appsMessageHandlers: {
   },
   // Crypto Account Link message handlers
   [IncomingMessageType.CryptoAccountLinkAppLoaded]: () => {
-    appLoaded(AppIdentifier.CRYPTO_ACCOUNT_LINK)
+    appLoaded(AppIdentifier.CRYPTO_ACCOUNT_LINK);
   },
   [IncomingMessageType.CryptoAccountLinkCloseButtonClicked]: () => {
-    closeModal(AppIdentifier.CRYPTO_ACCOUNT_LINK)
+    closeModal(AppIdentifier.CRYPTO_ACCOUNT_LINK);
   },
   [IncomingMessageType.CryptoAccountLinkFailed]: () => {
-    appFailed(AppIdentifier.CRYPTO_ACCOUNT_LINK)
+    appFailed(AppIdentifier.CRYPTO_ACCOUNT_LINK);
   },
   [IncomingMessageType.CryptoAccountLinkCompleted]: () => {
-    appCompleted(AppIdentifier.CRYPTO_ACCOUNT_LINK)
+    appCompleted(AppIdentifier.CRYPTO_ACCOUNT_LINK);
   },
   // Crypto Account Link Payouts message handlers
   [IncomingMessageType.CryptoAccountLinkPayoutsAppLoaded]: () => {
-    appLoaded(AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS)
+    appLoaded(AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS);
   },
   [IncomingMessageType.CryptoAccountLinkPayoutsCloseButtonClicked]: () => {
-    closeModal(AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS)
+    closeModal(AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS);
   },
   [IncomingMessageType.CryptoAccountLinkPayoutsFailed]: () => {
-    appFailed(AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS)
+    appFailed(AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS);
   },
   [IncomingMessageType.CryptoAccountLinkPayoutsCompleted]: () => {
-    appCompleted(AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS)
+    appCompleted(AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS);
   },
   // Payouts message handlers
   [IncomingMessageType.PayoutsAppLoaded]: () => {
@@ -189,6 +200,19 @@ const appsMessageHandlers: {
   [IncomingMessageType.PayFailed]: () => {
     appFailed(AppIdentifier.PAY);
   },
+  // Fiat Account Link message handlers
+  [IncomingMessageType.FiatAccountLinkAppLoaded]: () => {
+    appLoaded(AppIdentifier.FIAT_ACCOUNT_LINK);
+  },
+  [IncomingMessageType.FiatAccountLinkCloseButtonClicked]: () => {
+    closeModal(AppIdentifier.FIAT_ACCOUNT_LINK);
+  },
+  [IncomingMessageType.FiatAccountLinkCompleted]: () => {
+    appCompleted(AppIdentifier.FIAT_ACCOUNT_LINK);
+  },
+  [IncomingMessageType.FiatAccountLinkFailed]: () => {
+    appFailed(AppIdentifier.FIAT_ACCOUNT_LINK);
+  },
 };
 
 /**
@@ -233,6 +257,7 @@ export class ZeroHashSDK implements IZeroHashSDK {
     [AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS, false],
     [AppIdentifier.PAYOUTS, false],
     [AppIdentifier.PAY, false],
+    [AppIdentifier.FIAT_ACCOUNT_LINK, false],
   ]);
 
   /**
@@ -241,22 +266,23 @@ export class ZeroHashSDK implements IZeroHashSDK {
    * For more information, see {@code IInitializeParameters}
    */
   constructor({
-                zeroHashOnboardingURL = DEFAULT_ZH_APPS_URL,
-                rootQuerySelector,
-                userOnboardingJWT,
-                cryptoWithdrawalsJWT,
-                fiatDepositsJWT,
-                fiatWithdrawalsJWT,
-                cryptoBuyJWT,
-                cryptoSellJWT,
-                fundJWT,
-                profileJWT,
-                cryptoAccountLinkJWT,
-                cryptoAccountLinkPayoutsJWT,
-                payoutsJWT,
-                payJWT,
-                zeroHashAppsURL,
-              }: IInitializeParameters) {
+    zeroHashOnboardingURL = DEFAULT_ZH_APPS_URL,
+    rootQuerySelector,
+    userOnboardingJWT,
+    cryptoWithdrawalsJWT,
+    fiatDepositsJWT,
+    fiatWithdrawalsJWT,
+    cryptoBuyJWT,
+    cryptoSellJWT,
+    fundJWT,
+    profileJWT,
+    cryptoAccountLinkJWT,
+    cryptoAccountLinkPayoutsJWT,
+    payoutsJWT,
+    payJWT,
+    fiatAccountLinkJWT,
+    zeroHashAppsURL,
+  }: IInitializeParameters) {
     // The || is for backwards compatibility
     _zeroHashAppsURL = zeroHashAppsURL || zeroHashOnboardingURL;
     const onboardingURL = new URL(_zeroHashAppsURL);
@@ -319,14 +345,14 @@ export class ZeroHashSDK implements IZeroHashSDK {
     if (cryptoAccountLinkJWT) {
       this.setJWT({
         jwt: cryptoAccountLinkJWT,
-        appIdentifier: AppIdentifier.CRYPTO_ACCOUNT_LINK
-      })
+        appIdentifier: AppIdentifier.CRYPTO_ACCOUNT_LINK,
+      });
     }
     if (cryptoAccountLinkPayoutsJWT) {
       this.setJWT({
         jwt: cryptoAccountLinkPayoutsJWT,
-        appIdentifier: AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS
-      })
+        appIdentifier: AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS,
+      });
     }
     if (payoutsJWT) {
       this.setJWT({
@@ -340,6 +366,12 @@ export class ZeroHashSDK implements IZeroHashSDK {
         appIdentifier: AppIdentifier.PAY,
       });
     }
+    if (fiatAccountLinkJWT) {
+      this.setJWT({
+        jwt: fiatAccountLinkJWT,
+        appIdentifier: AppIdentifier.FIAT_ACCOUNT_LINK,
+      });
+    }
   }
 
   /**
@@ -357,14 +389,18 @@ export class ZeroHashSDK implements IZeroHashSDK {
     dispatchActionBasedOnAppIdentifier(appIdentifier, ACTION_SET_JWT, { jwt });
   }
   setFilters({ filters, appIdentifier }: ISetFiltersParameters): void {
-    dispatchActionBasedOnAppIdentifier(appIdentifier, ACTION_SET_FILTERS, { filters });
+    dispatchActionBasedOnAppIdentifier(appIdentifier, ACTION_SET_FILTERS, {
+      filters,
+    });
   }
   /**
-   * Sets the navigate field for the appIdentifier provided. Currently this is 
+   * 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 });
+    dispatchActionBasedOnAppIdentifier(appIdentifier, ACTION_SET_NAVIGATE, {
+      navigate,
+    });
   }
   /**
    * setUserOnboardingJWT sets the JWT to be whatever value is provided.
@@ -412,12 +448,17 @@ export class ZeroHashSDK implements IZeroHashSDK {
   /**
    * openModal opens the modal for the appIdentifier provided.
    */
-  openModal({ jwt, appIdentifier, filters, navigate }: IOpenModalParameters): void {
+  openModal({
+    jwt,
+    appIdentifier,
+    filters,
+    navigate,
+  }: IOpenModalParameters): void {
     if (filters) {
-      this.setFilters({filters, appIdentifier})
+      this.setFilters({ filters, appIdentifier });
     }
     if (navigate) {
-      this.setNavigate({ appIdentifier, navigate })
+      this.setNavigate({ appIdentifier, navigate });
     }
     if (jwt) {
       this.setJWT({
@@ -459,7 +500,7 @@ export class ZeroHashSDK implements IZeroHashSDK {
       const shadowRoot = root.attachShadow({ mode: "closed" });
 
       // Render the React modal
-      const urlWithIdentifier = new URL(appIdentifier, _zeroHashAppsURL).href
+      const urlWithIdentifier = new URL(appIdentifier, _zeroHashAppsURL).href;
       ReactDOM.createRoot(shadowRoot).render(
         <Provider store={store}>
           <AppContainer

package/src/redux/reducers/fiat-account-link.ts

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

package/src/redux/reducers/index.ts

@@ -11,6 +11,7 @@ import cryptoAccountLinkReducer from "./crypto-account-link";
 import cryptoAccountLinkPayoutsReducer from "./crypto-account-link-payouts";
 import payoutsReducer from "./payouts";
 import payReducer from "./pay";
+import fiatAccountLinkReducer from "./fiat-account-link";
 
 const rootReducer = combineReducers({
   ["crypto-withdrawals"]: cryptoWithdrawalsReducer,
@@ -28,6 +29,7 @@ const rootReducer = combineReducers({
   ["crypto-account-link-payouts"]: cryptoAccountLinkPayoutsReducer,
   ["payouts"]: payoutsReducer,
   ["pay"]: payReducer,
+  ["fiat-account-link"]: fiatAccountLinkReducer,
 });
 
 export default rootReducer;

package/src/styles.ts

@@ -1,14 +1,24 @@
 import { CSSProperties } from "react";
 
-const MTE_SM = 540;
+const MTE_SM = 480;
+const MTE_MD = 720;
+const modalBorderRadius = 24
 
 export const screenSizes: { id: string, size: number }[] = [
     {
         id: "MTE_SM",
         size: MTE_SM,
-    }
+    },
+    {
+        id: "MTE_MD",
+        size: MTE_MD,
+    },
 ]
 
+/**
+ * When the width is smaller than 
+ * 
+ */
 export const minWidthMatcher = (): string => {
     for (let i = 0; i < screenSizes.length; i++) {
         const { id, size } = screenSizes[i];
@@ -24,18 +34,20 @@ export const containerStyle: CSSProperties = {
     paddingLeft: 0,
     marginRight: "auto",
     marginLeft: "auto",
-    maxHeight: 882,
+    maxHeight: 812
 }
 
 export const containerMediaStyles: { [id: string]: CSSProperties } = {
     MTE_SM: {
-        width: 540
+        width: 480
+    },
+    MTE_MD: {
+        width: 720
     },
     ANY: {
         width: "100%",
         height: "100%",
         maxWidth: "100%",
-        borderRadius: 0,
         maxHeight: "100%"
     },
 }
@@ -51,15 +63,15 @@ export const appWrapperStyle: CSSProperties = {
     height: CSS.supports("height: 100dvh") ? "100dvh" : window.innerHeight + "px",
     maxHeight: CSS.supports("height: 100dvh") ? "100dvh" : window.innerHeight + "px",
     background: "rgba(0,0,0,0.5)",
-    cursor: "pointer",
+    cursor: "pointer"
 }
 
 export const modalStyle: CSSProperties = {
     padding: 0,
-    borderRadius: 5,
     backgroundColor: "#FFF",
     height: "calc(100% - 100px)",
     maxWidth: "calc(100% - 30px)",
+    borderRadius: modalBorderRadius
 }
 
 export const iframeWrapperStyle: CSSProperties = {
@@ -76,5 +88,5 @@ export const iframeStyle: CSSProperties = {
     margin: 0,
     padding: 0,
     overflow: "hidden",
-    borderRadius: "0 0 15px 15px"
+    borderRadius: modalBorderRadius
 };