import { usePortal } from '@sunnyside-io/privacy-boost-react';

function PortalList() {
  const { portals, loading, error, create, refresh, delegateAddress } = usePortal();

  const createPortal = async () => {
    if (!(await delegateAddress())) {
      throw new Error('This server does not support portal deposits.');
    }
    const portal = await create();
    console.log('Deposit address:', portal.address); // share this publicly
    await refresh();
  };

  if (loading) return <Spinner />;
  if (error) return <p>{error.message}</p>;

  return (
    <>
      <button onClick={createPortal}>Create portal</button>
      <ul>{portals.map((p) => <li key={p.address}>{p.address}</li>)}</ul>
    </>
  );
}