import { useState } from 'react';
import TruvBridge from '@truv/react';

const ModalBridge = () => {
  const [isOpened, setOpened] = useState(false);

  return (
    <>
      <button onClick={() => setOpened(true)}>Open</button>
      <TruvBridge
        bridgeToken="<previously generated bridge token>" // more info https://docs.truv.com/reference/bridge-tokens_create
        onClose={() => setOpened(false)}
        onSuccess={(publicToken, metaData) => {
          console.log(publicToken, metaData);
        }}
        isOpened={isOpened}
      />
    </>
  );
}

import { useState } from 'react';
import { TruvBridgeInline } from '@truv/react';

const InlineBridge = () => {
  const [isOpened, setOpened] = useState(false);

  return (
    <>
      <button onClick={() => setOpened(true)}>Open</button>
      <TruvBridgeInline
        // We can pass the properties of the div element here
        style={{ width: '300px', height: '500px', backgroundColor: 'red' }}
        // Required parameters for opening the bridge
        isOpened={isOpened}
        bridgeParams={{
          bridgeToken: "<previously generated bridge token>", // more info https://docs.truv.com/reference/bridge-tokens_create
          onClose: () => setOpened(false),
          onSuccess: () => {
            console.log('Success');
          }
        }}
      />
    </>
  );
}