@rownd/react-native 0.2.5 → 2.2.0

package/src/components/images/CheckmarkFilled.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import Svg, { SvgProps, Defs, Path, Polygon, Rect } from 'react-native-svg';
-/* SVGR has dropped some elements not supported by react-native-svg: style */
-
-const SvgComponent = (props: SvgProps) => (
-  <Svg
-    id="icon"
-    // @ts-ignore
-    xmlns="http://www.w3.org/2000/svg"
-    width={32}
-    height={32}
-    viewBox="0 0 32 32"
-    {...props}
-  >
-    <Defs />
-    <Path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z" />
-    <Polygon
-      id="inner-path"
-      points="14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591"
-    />
-    <Rect
-      id="_Transparent_Rectangle_"
-      data-name="&lt;Transparent Rectangle&gt;"
-      width={32}
-      height={32}
-    />
-  </Svg>
-);
-
-export default SvgComponent;

package/src/components/images/EmailVerifyWaiting.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import Svg, { SvgProps, Defs, Rect, Path, G, Use } from 'react-native-svg';
-/* SVGR has dropped some elements not supported by react-native-svg: title, filter */
-
-const SvgComponent = (props: SvgProps) => (
-  <Svg
-    width="79px"
-    height="68px"
-    viewBox="0 0 79 68"
-    // @ts-ignore
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}
-  >
-    <Defs>
-      <Rect
-        id="path-1"
-        x={9.69736842}
-        y={6.17105263}
-        width={53.7763158}
-        height={45.8421053}
-        rx={8}
-      />
-      <Path
-        d="M1.49198314,22.8826009 L27.3602885,37.5009111 C33.5004408,40.9707422 41.014234,40.9500831 47.1352131,37.4465401 L72.5558685,22.8961951 C73.0351888,22.6218404 73.6461631,22.7879979 73.9205178,23.2673182 C74.007089,23.4185653 74.0526316,23.5898106 74.0526316,23.7640813 L74.0526316,63 C74.0526316,65.209139 72.2617706,67 70.0526316,67 L4,67 C1.790861,67 2.705415e-16,65.209139 0,63 L0,23.7532056 C8.43762138e-16,23.2009209 0.44771525,22.7532056 1,22.7532056 C1.17240673,22.7532056 1.34188502,22.7977797 1.49198314,22.8826009 Z"
-        id="path-3"
-      />
-    </Defs>
-    <G
-      id="V2-post--feedback"
-      stroke="none"
-      strokeWidth={1}
-      fill="none"
-      fillRule="evenodd"
-    >
-      <G
-        id="xlg-1312px-16-column-copy-96"
-        transform="translate(-616.000000, -265.000000)"
-      >
-        <G id="Group" transform="translate(618.000000, 265.000000)">
-          <Path
-            d="M1.1333848,21.7417845 L33.0948714,2.49908682 C35.6464021,0.96291506 38.8400625,0.97130271 41.383489,2.52085558 L72.9358668,21.743773 C73.4075139,22.0311185 73.5569199,22.6464036 73.2695744,23.1180507 C73.2235298,23.1936281 73.1676563,23.2627588 73.1034181,23.3236315 L37.2457723,57.3026316 L37.2457723,57.3026316 L0.965647178,23.3284209 C0.562522036,22.9509179 0.54175124,22.3180937 0.919254307,21.9149685 C0.982302388,21.8476412 1.0543624,21.7893607 1.1333848,21.7417845 Z"
-            id="Path-28"
-            fill="#545454"
-          />
-          <G id="Rectangle">
-            <Use
-              fill="black"
-              fillOpacity={1}
-              // @ts-ignore
-              filter="url(#filter-2)"
-              xlinkHref="#path-1"
-            />
-            <Use fill="#FFFFFF" fillRule="evenodd" xlinkHref="#path-1" />
-          </G>
-          <Rect
-            id="Rectangle"
-            fillOpacity={0.4}
-            fill="#D8D8D8"
-            x={18.5131579}
-            y={19.3947368}
-            width={36.1447368}
-            height={3.52631579}
-          />
-          <Rect
-            id="Rectangle-Copy"
-            fillOpacity={0.4}
-            fill="#D8D8D8"
-            x={18.5131579}
-            y={27.3289474}
-            width={36.1447368}
-            height={26.4473684}
-          />
-          <G id="Rectangle">
-            <Use
-              fill="black"
-              fillOpacity={1}
-              // @ts-ignore
-              filter="url(#filter-4)"
-              xlinkHref="#path-3"
-            />
-            <Use fill="#646464" fillRule="evenodd" xlinkHref="#path-3" />
-          </G>
-          <Path
-            d="M23.2845382,51.744338 L1.76315789,67 L1.76315789,67 L71.4078947,67 L49.8865144,51.744338 C41.9186006,46.0961966 31.252452,46.0961966 23.2845382,51.744338 Z"
-            id="Path-29"
-            fill="#545454"
-          />
-        </G>
-      </G>
-    </G>
-  </Svg>
-);
-
-export default SvgComponent;

package/src/components/images/ErrorIcon.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import Svg, { SvgProps, Path } from 'react-native-svg';
-/* SVGR has dropped some elements not supported by react-native-svg: title */
-
-const SvgComponent = (props: SvgProps) => (
-  <Svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" {...props}>
-    <Path d="M0 0h48v1H0z" fill="#DA1E28" fillRule="evenodd" />
-  </Svg>
-);
-
-export default SvgComponent;

package/src/components/images/PhoneVerifyWaiting.tsx

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import Svg, { SvgProps, Defs, Rect, G, Use, Circle } from 'react-native-svg';
-/* SVGR has dropped some elements not supported by react-native-svg: title, filter */
-
-const SvgComponent = (props: SvgProps) => (
-  <Svg
-    width="62px"
-    height="100px"
-    viewBox="0 0 62 100"
-    // @ts-ignore
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}
-  >
-    <Defs>
-      <Rect id="path-1" x={0} y={0} width={58} height={96} rx={8} />
-    </Defs>
-    <G
-      id="SMS-verify-from-web-stay-on-web-(BR)"
-      stroke="none"
-      strokeWidth={1}
-      fill="none"
-      fillRule="evenodd"
-    >
-      <G
-        id="xlg-1312px-16-column-copy-51"
-        transform="translate(-625.000000, -259.000000)"
-      >
-        <G id="unverified-phone" transform="translate(627.000000, 261.000000)">
-          <G id="Rectangle">
-            <Use
-              fill="black"
-              fillOpacity={1}
-              // @ts-ignore
-              filter="url(#filter-2)"
-              xlinkHref="#path-1"
-            />
-            <Use fill="#444444" fillRule="evenodd" xlinkHref="#path-1" />
-          </G>
-          <Circle id="Oval" fill="#000000" cx={29} cy={89} r={5} />
-          <Rect
-            id="Rectangle"
-            fill="#FFFFFF"
-            x={5}
-            y={11}
-            width={48}
-            height={71}
-            rx={2}
-          />
-          <Rect
-            id="Rectangle"
-            fillOpacity={0.4}
-            fill="#D8D8D8"
-            x={10}
-            y={20}
-            width={38}
-            height={5}
-          />
-          <Rect
-            id="Rectangle-Copy"
-            fillOpacity={0.4}
-            fill="#D8D8D8"
-            x={10}
-            y={31}
-            width={38}
-            height={36}
-          />
-        </G>
-      </G>
-    </G>
-  </Svg>
-);
-
-export default SvgComponent;

package/src/data/actions.ts

@@ -1,21 +0,0 @@
-export enum ActionType {
-  SET_CONTAINER_VISIBLE = 'SET_CONTAINER_VISIBLE',
-  CHANGE_ROUTE = 'CHANGE_ROUTE',
-  LOGIN_SUCCESS = 'LOGIN_SUCCESS',
-  LOAD_USER = 'LOAD_USER',
-  REFRESH_TOKEN = 'REFRESH_TOKEN',
-  SIGN_OUT = 'SIGN_OUT',
-  UPDATE_LOCAL_ACLS = 'UPDATE_LOCAL_ACLS',
-  SET_USER_DATA_FIELD = 'SET_USER_DATA_FIELD',
-  SET_USER_DATA = 'SET_USER_DATA',
-  SET_REFRESH_USER_DATA = 'SET_REFRESH_USER_DATA',
-  LOAD_STATE = 'LOAD_STATE',
-  SET_SECTION = 'SET_SECTION',
-  SET_IS_SAVING_USER_DATA = 'SET_IS_SAVING_USER_DATA',
-  SET_APP_CONFIG = 'SET_APP_CONFIG',
-}
-
-export type TAction = {
-  type: ActionType;
-  payload?: any;
-};

package/src/hooks/api.ts

@@ -1,162 +0,0 @@
-import ky from 'ky';
-import jwt_decode, { JwtPayload } from 'jwt-decode';
-
-import { useGlobalContext, GlobalState } from '../components/GlobalContext';
-import AutoQueue from '../utils/queue';
-import { useRef, useEffect } from 'react';
-import { Platform } from 'react-native';
-import { ActionType } from '../data/actions';
-
-import packageJson from '../../package.json';
-
-type RefreshTokenResp = {
-  access_token: string;
-  refresh_token: string;
-};
-
-const refreshQueue = new AutoQueue<RefreshTokenResp>();
-
-export const DEFAULT_USER_AGENT = `Rownd SDK for React Native/${packageJson.version} (Language: TypeScript/JavaScript; Platform=${Platform.OS};)`;
-
-export default function useApi() {
-  const { state, dispatch } = useGlobalContext();
-
-  const authRef = useRef({
-    access_token: state.auth.access_token,
-    refresh_token: state.auth.refresh_token,
-  });
-
-  useEffect(() => {
-    authRef.current = {
-      access_token: state.auth.access_token,
-      refresh_token: state.auth.refresh_token,
-    };
-  }, [state.auth.access_token, state.auth.refresh_token]);
-
-  function isNewAccessTokenNeeded(request?: Request) {
-    // stateCopy = stateCopy || state;
-    // Skip requests that don't need authentication
-    if (
-      (!!request && !request?.headers.get('authorization')) ||
-      !authRef.current?.access_token
-    ) {
-      return false;
-    }
-
-    const tokenPayload: JwtPayload = jwt_decode(authRef.current?.access_token);
-
-    // Shave 5 minutes off the token expiration to account for clock skew
-    const tokenExpiration = (tokenPayload.exp! - 5 * 60) * 1000;
-    if (tokenExpiration > Date.now()) {
-      return false; // shouldn't be expired
-    }
-
-    return true;
-  }
-
-  async function _newAccessTokenFromRefreshToken(
-    this: AutoQueue<RefreshTokenResp>,
-    stateCopy?: GlobalState
-  ) {
-    stateCopy = stateCopy || state;
-    if (this?._cache?.resp) {
-      // logger.log('using cached refresh response');
-      return this._cache.resp;
-    }
-
-    try {
-      // logger.log('requesting new refresh token');
-      const resp: RefreshTokenResp = await ky
-        .post(`${stateCopy.config?.apiUrl}/hub/auth/token`, {
-          json: {
-            refresh_token: stateCopy.auth?.refresh_token,
-          },
-        })
-        .json();
-
-      this._cache.resp = resp;
-
-      // Update local cache ref immediately to prevent stale auth checks
-      authRef.current = {
-        access_token: resp.access_token,
-        refresh_token: resp.refresh_token,
-      };
-
-      dispatch({
-        type: ActionType.REFRESH_TOKEN,
-        payload: resp,
-      });
-
-      return resp;
-    } catch (err) {
-      dispatch({
-        type: ActionType.SIGN_OUT,
-      });
-
-      throw err;
-    }
-  }
-
-  async function newAccessTokenFromRefreshToken(
-    stateCopy?: GlobalState
-  ): Promise<RefreshTokenResp> {
-    return await refreshQueue.enqueue(
-      _newAccessTokenFromRefreshToken.bind(refreshQueue, stateCopy)
-    );
-  }
-
-  const client = useRef(
-    ky.extend({
-      prefixUrl: state.config?.apiUrl,
-      headers: {
-        'Content-Type': 'application/json',
-        'User-Agent': DEFAULT_USER_AGENT,
-      },
-      retry: {
-        limit: 2,
-        statusCodes: [401, 408, 429, 500, 502, 503, 504],
-      },
-      hooks: {
-        beforeRequest: [
-          // Auto-refresh tokens
-          async (request) => {
-            // Skip requests that don't need authentication
-            if (!isNewAccessTokenNeeded(request)) {
-              return;
-            }
-
-            const tokenResp: RefreshTokenResp =
-              await newAccessTokenFromRefreshToken();
-
-            request.headers.set(
-              'Authorization',
-              `Bearer ${tokenResp.access_token}`
-            );
-          },
-        ],
-        beforeRetry: [
-          async ({ request /*, options, error, retryCount*/ }) => {
-            // Skip requests that don't need authentication
-            if (!isNewAccessTokenNeeded(request)) {
-              return;
-            }
-
-            const tokenResp: RefreshTokenResp =
-              await newAccessTokenFromRefreshToken();
-
-            request.headers.set(
-              'Authorization',
-              `Bearer ${tokenResp.access_token}`
-            );
-          },
-        ],
-      },
-    })
-  ).current;
-
-  return {
-    client,
-    newAccessTokenFromRefreshToken,
-    isNewAccessTokenNeeded,
-  };
-}

package/src/hooks/debounce.ts

@@ -1,36 +0,0 @@
-import { debounce } from 'debounce';
-import { useMemo, useEffect, useRef } from 'react';
-
-export default function useDebounce(cb: any, delay: any) {
-  const immediate = false;
-  const inputsRef = useRef(cb);
-  const isMounted = useIsMounted();
-  useEffect(() => {
-    inputsRef.current = { cb, delay };
-  });
-
-  return useMemo(
-    () =>
-      debounce(
-        (...args: any) => {
-          // Don't execute callback, if (1) component in the meanwhile
-          // has been unmounted or (2) delay has changed
-          if (inputsRef.current.delay === delay && isMounted())
-            inputsRef.current.cb(...args);
-        },
-        delay,
-        immediate
-      ),
-    [delay, immediate, isMounted]
-  );
-}
-
-function useIsMounted() {
-  const isMountedRef = useRef(true);
-  useEffect(() => {
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-  return () => isMountedRef.current;
-}

package/src/hooks/fingerprint.ts

@@ -1,217 +0,0 @@
-import DeviceInfo from 'react-native-device-info';
-import { useEffect, useCallback } from 'react';
-import useApi from './api';
-import { useGlobalContext } from '../components/GlobalContext';
-import storage from '../utils/storage';
-import { sha256 } from 'react-native-sha256';
-
-interface IFingerprint {
-  message: string;
-  hash: string;
-  challenge: string;
-}
-
-interface IChallenge {
-  key: string;
-  value: string;
-}
-
-let isFingerprintingInProgress = false;
-
-export default function () {
-  const { state } = useGlobalContext();
-  const { client: api } = useApi();
-
-  /**
-   * Computes hashes for all possible lookup fields values coupled with the app ID
-   * @param appId
-   * @param rawLookupValues
-   * @returns array of challenge hashes
-   */
-  async function computePossibleChallengeLookupValues(
-    appId: string,
-    rawLookupValues: string[]
-  ): Promise<string[]> {
-    const lookupHashes = [];
-    for (const value of rawLookupValues) {
-      lookupHashes.push(await sha256(`${appId}:${value}`));
-    }
-    return lookupHashes;
-  }
-
-  /**
-   * Looks for a challenge in storage based on presented lookup values
-   */
-  const getChallengeIfPresent = useCallback(
-    async (
-      appId: string | undefined,
-      challengeLookupValues: string[]
-    ): Promise<IChallenge | null> => {
-      if (!appId) {
-        return null;
-      }
-
-      const challenges: Record<string, string[]> = JSON.parse(
-        storage.getString('challenges') || '{}'
-      );
-
-      if (!Object.keys(challenges).length) {
-        return null;
-      }
-
-      let challengeKey = '';
-      let challengeValue = '';
-      for (const value of challengeLookupValues) {
-        const hash = await sha256(`${appId}:${value}`);
-        const challenge = Object.entries(challenges).find(([, hashes]) =>
-          hashes.includes(hash)
-        );
-
-        if (challenge) {
-          challengeKey = hash;
-          challengeValue = challenge[0];
-          break;
-        }
-      }
-
-      if (!challengeKey || !challengeValue) {
-        return null;
-      }
-
-      return {
-        key: challengeKey,
-        value: challengeValue,
-      };
-    },
-    []
-  );
-
-  const getFingerprint = useCallback(async () => {
-    const visitorId = DeviceInfo.getDeviceId();
-
-    return {
-      visitorId,
-    };
-  }, []);
-
-  const registerFingerprint = useCallback(async () => {
-    if (
-      !state.auth.access_token ||
-      !state.auth.is_verified_user ||
-      !state.app.id ||
-      isFingerprintingInProgress
-    ) {
-      return;
-    }
-
-    isFingerprintingInProgress = true;
-
-    try {
-      // Check for existing challenge
-      const challengeEntry = await getChallengeIfPresent(
-        state.app.id,
-        [state.user?.data?.email, state.user?.data?.phone_number].filter(
-          Boolean
-        )
-      );
-
-      const fingerprint = await getFingerprint();
-      const payload: IFingerprint = await api
-        .post('hub/auth/fingerprints', {
-          headers: {
-            Authorization: `Bearer ${state.auth.access_token}`,
-          },
-          json: {
-            hash: fingerprint.visitorId,
-            challenge: challengeEntry?.value || null, // Might exist from a previous run, in which case this request will be a no-op
-          },
-        })
-        .json();
-
-      if (payload.challenge === challengeEntry?.key) {
-        // This is a no-op
-        console.debug('Fingerprint already registered');
-        return;
-      }
-
-      // Save the challenge for future sign-ins if we don't have one already or we got a new one from the server
-      const challengeLookupHashes = await computePossibleChallengeLookupValues(
-        state.app.id,
-        [state.user?.data?.email, state.user?.data?.phone_number].filter(
-          Boolean
-        )
-      );
-      if (payload.challenge && challengeLookupHashes.length > 0) {
-        const challenges = JSON.parse(storage.getString('challenges') || '{}');
-        storage.set(
-          'challenges',
-          JSON.stringify({
-            ...challenges,
-            [payload.challenge]: challengeLookupHashes,
-          })
-        );
-      }
-    } catch (err) {
-      console.warn('Failed to register fingerprint', err);
-    } finally {
-      isFingerprintingInProgress = false;
-    }
-  }, [
-    api,
-    state.app.id,
-    state.auth.access_token,
-    state.auth.is_verified_user,
-    state.user?.data?.email,
-    state.user?.data?.phone_number,
-    getChallengeIfPresent,
-    getFingerprint,
-  ]);
-
-  const clearFingerprint = useCallback((challenge: string) => {
-    const challenges: Record<string, string[]> = JSON.parse(
-      storage.getString('challenges') || '{}'
-    );
-    delete challenges[challenge];
-    storage.set('challenges', JSON.stringify(challenges));
-  }, []);
-
-  useEffect(() => {
-    if (!state.auth.access_token) {
-      return;
-    }
-
-    (async () => {
-      // If already fingerprinted, don't try again
-      const existingChallenge = await getChallengeIfPresent(
-        state.app.id,
-        [state.user?.data?.email, state.user?.data?.phone_number].filter(
-          Boolean
-        )
-      );
-
-      // Don't need to re-register a fingerprint if we already have one registered
-      if (existingChallenge) {
-        console.debug(
-          'Found existing challenge, so not requesting fingerprint registration.'
-        );
-        return;
-      }
-
-      // We have an access token, so we can use it to get the fingerprint
-      registerFingerprint();
-    })();
-  }, [
-    getChallengeIfPresent,
-    registerFingerprint,
-    state.app.id,
-    state.auth.access_token,
-    state.user?.data?.email,
-    state.user?.data?.phone_number,
-  ]);
-
-  return {
-    getFingerprint,
-    getChallengeIfPresent,
-    clearFingerprint,
-  };
-}

package/src/hooks/index.ts

@@ -1,7 +0,0 @@
-import useApi from './api';
-import useDebounce from './debounce';
-import useInterval from './interval';
-import useNav from './nav';
-import useDeviceFingerprint from './fingerprint';
-
-export { useApi, useDebounce, useInterval, useNav, useDeviceFingerprint };

package/src/hooks/interval.ts

@@ -1,25 +0,0 @@
-import { useEffect, useLayoutEffect, useRef } from 'react';
-
-function useInterval(callback: () => void, delay: number | null) {
-  const savedCallback = useRef(callback);
-
-  // Remember the latest callback if it changes.
-  useLayoutEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  // Set up the interval.
-  useEffect(() => {
-    // Don't schedule if no delay is specified.
-    // Note: 0 is a valid value for delay.
-    if (!delay && delay !== 0) {
-      return;
-    }
-
-    const id = setInterval(() => savedCallback.current(), delay);
-
-    return () => clearInterval(id);
-  }, [delay]);
-}
-
-export default useInterval;