React Native

To use our SDK with React Native, you only need to check the nativeEvent field from the WebViewMessageEvent, which contains data about the specific event. See the example below:

import { useEffect, useRef, useState } from "react";
import { Linking } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { WebView, WebViewMessageEvent } from "react-native-webview";

const urlMapper = {
  cert: {
    sdkMobile: "https://sdk-mobile.cert.zerohash.com",
    zeroHashAppsURL: "https://web-sdk.cert.zerohash.com",
  },
  prod: {
    sdkMobile: "https://sdk-mobile.zerohash.com",
    zeroHashAppsURL: "https://web-sdk.zerohash.com",
  },
};

/**
 * List of permissions used to request a JWT in the `client_auth_token` request
 */
const permissions = [
  "crypto-buy",
  "crypto-sell",
  "crypto-withdrawals",
  "crypto-payouts",
  "fiat-deposits",
  "fiat-withdrawals",
  "fwc", // Fund
  "onboarding",
  "participant-profile",
  "update-participant",
  "crypto-account-link",
];

/**
 * You can copy and paste a JWT on jwtToken for testing. You will need to
 * implement a function to fetch the JWT from your backend and replace this variable.
 * We have an example below using fetchJwt and setToken functions.
 * */
const jwtToken = ``;

const App = () => {
  const webViewRef = useRef<WebView>(null);
  const [token, setToken] = useState<string>(jwtToken);
  useEffect(() => {
    fetchJwt();
  }, []);

  // Fetch JWT token from server
  const fetchJwt = async () => {
    const jwtPayload = {
      // The participant code you want to request the JWT for.
      participant_code: "<PARTICIPANT_CODE>",
      // The permission required for your use-case, refer to Permissions for
      // the allowed values
      permissions: ["fwc"],
    };
    try {
      const response = await fetch(`<API_URL_TO_FETCH_TOKEN>`, {
        method: "POST",
        body: JSON.stringify(jwtPayload),
      });
      const parsedResponse = await response.json();
      setToken(parsedResponse.message.token);
    } catch (e) {
      console.error("could not fetch jwt", e);
    }
  };

  // Open modal using injected JS script in webview
  const openModal = () => {
     // Replace "jwtToken" with "token" to use the token you got from your backend
    webViewRef.current?.injectJavaScript(
      `window.postMessage({ "type": "OPEN_MODAL", "payload": { "appIdentifier": "fund", "jwt": "${jwtToken}"}});true;`
    );
  };

  const handleMessage = (event: WebViewMessageEvent) => {
    try {
      // Parse message from webview event data checking nativeEvent field
      const parsedMessage = JSON.parse(event.nativeEvent.data);
      console.log("Received message:", parsedMessage);
      if (parsedMessage.type === "SDK_MOBILE_READY") {
        console.log("SDK is ready, opening modal...");
        openModal();
      }
      // Handle webview events
      // Your code here...
    } catch (e) {
      alert(
        `could not parse message: ${JSON.stringify(event.nativeEvent.data)}`
      );
    }
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }}>
        <WebView
          allowsInlineMediaPlayback={true}
          ref={webViewRef}
          onMessage={handleMessage}
          source={{
            // Double check the environment you are using and pick the correct URLs
            // accordingly
            uri: `${urlMapper.cert.sdkMobile}/v1?zeroHashAppsURL=${urlMapper.cert.zeroHashAppsURL}`,
          }}
          onNavigationStateChange={(event) => {
            if (!event.url.startsWith(urlMapper.cert.sdkMobile)) {
              webViewRef?.current.stopLoading();
              Linking.openURL(event.url);
            }
          }}
        />
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

export default App;