MetaMapButton.jsx

import { Button, Image } from 'ui';
import metamapSrc from '@assets/images/metamap.webp';
import { getMetaMapConfig } from '@config';
import { useMetamap } from './hooks';

const { scriptSrc } = getMetaMapConfig();

const styles = {
  button: {
    width: 'xs',
  },
  image: {
    width: '8',
    marginRight: '2',
  },
};

export const MetaMapButton = ({
  metaData,
  children,
  onUserFinish,
  ...props
}) => {
  const {
    isLoading,
    onOpenWidget,
  } = useMetamap({ metaData, onUserFinish });

  return (
    <>
      <script async src={scriptSrc} />
      <Button {...styles.button} onClick={onOpenWidget} {...props} isDisabled={isLoading}>
        <Image {...styles.image} data-testid="metamap-logo" src={metamapSrc} alt="metamap logo" />
        {children}
      </Button>
    </>
  );
};

useMetamap.js

import {
  useMemo,
  useState,
  useEffect,
  useCallback,
} from 'react';
import {
  isDevelopment,
  getMetaMapConfig,
} from '@config';

const { flowId, clientId } = getMetaMapConfig();

export const useMetamap = ({
  metaData,
  onUserFinish,
} = {}) => {
  const [isScriptLoaded, setIsScriptLoaded] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const verification = useMemo(() => {
    if (!isScriptLoaded) return null;
    const configuration = {
      flowId,
      clientId,
      debug: isDevelopment,
      metadata: metaData ? JSON.stringify(metaData) : undefined,
    };
    const instance = new window.MetamapVerification(configuration);
    return instance;
  }, [metaData, isScriptLoaded]);

  const onOpenWidget = useCallback(() => {
    setIsLoading(true);
    verification.start();
  }, [verification]);

  useEffect(() => {
    if (!verification) return;
    if (onUserFinish) verification.on('metamap:userFinishedSdk', onUserFinish);
  }, [onUserFinish, verification]);

  useEffect(() => {
    if (!verification) return;
    verification.on('metamap:loaded', () => setIsLoading(false));
  }, [verification]);

  useEffect(() => {
    // Since script with onLoad prevents the script to be loaded
    // we need to check if the script is loaded by polling
    const interval = setInterval(() => {
      if (window.MetamapVerification) {
        setIsScriptLoaded(true);
        clearInterval(interval);
      }
    }, 100);

    return () => clearInterval(interval);
  }, []);

  return {
    isLoading,
    onOpenWidget,
    setIsScriptLoaded,
  };
};