Launching Link

import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useCallback } from 'react';

import { useVitalLink } from '@tryvital/vital-link';
import { useState } from 'react';

const API_URL = process.env.API_URL ? process.env.API_URL : "http://localhost:3001"

const getTokenFromBackend = async (userKey: string, env: string) => {
  const resp = await fetch(<backend_url>);
  return await resp.json();
};

const App = props => {
  const userKey = '560596b9-924b-4af9-a670-cf21870fdac5';
  const [isLoading, setLoading] = useState(false);

  const onSuccess = useCallback(metadata => {
    // Device is now connected.
  }, []);

  const onExit = useCallback(metadata => {
    // User has quit the link flow.
  }, []);

  const onError = useCallback(metadata => {
    // Error encountered in connecting device.
  }, []);

  const config = {
    onSuccess,
    onExit,
    onError,
    env: "sandbox"
  };

  const { open, ready, error } = useVitalLink(config);

  const handleVitalOpen = async () => {
    setLoading(true);
    const token = await getTokenFromBackend(userKey, "sandbox");
    open(token);
    setLoading(false);
  };

  return (
    <button
      type="button"
      className="button"
      onClick={handleVitalOpen}
      disabled={isLoading || !ready}
    >
      Open Vital Link
    </button>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));