import { Modal } from '@talismn/connect-ui';


<Modal
  className={}

  // The Modal title
  title={}

  // The Modal toggle
  isOpen={false}

  // The id where the Modal is appended. By default, it's appended to document.body.
  appId=""

  // Callback on Modal close
  handleClose={() => { ... }}

  // [Optional] Callback on Modal back button click. Used with a multi modal setup.
  handleBack={() => { ... }}
>
  <div>The modal body</div>
</Modal>

import { useLocalStorage } from '@talismn/connect-ui';
const Dummy = () => {
  const [value, setValue] = useLocalStorage('dummy-key');
  return (
    <button onClick={() => setValue('Dummy')}>{value || 'Click Me'}</button>
  );
};

import { useOnClickOutside } from '@talismn/connect-ui';

const Popup = ({ handleClose }) => {
  const ref = useRef<HTMLDivElement>(null);
  useOnClickOutside(ref, handleClose);
  return <div ref={ref}>/* content */</div>;
};

import { truncateMiddle } from '@talismn/connect-ui';

truncateMiddle('5FNfznCsgDKywfDXsYTf7YydpnMHUr8fjabK48rS2oFUugdc'); // 5FNf...ugdc