import { useRouter } from 'next/router';
import { useMemo } from 'react';
import { Web3Container } from '../../../components/web3-container';
import { DepositContainer } from './deposit-container';

const Deposit = () => {
  const { query } = useRouter();

  // AssetId can be specified in the query string to allow link to deposit a particular asset
  const assetId = useMemo(() => {
    if (query.assetId && Array.isArray(query.assetId)) {
      return undefined;
    }

    if (Array.isArray(query.assetId)) {
      return undefined;
    }

    return query.assetId;
  }, [query]);

  return (
    <Web3Container>
      {({ ethereumConfig }) => (
        <div className="max-w-[420px] p-24 mx-auto">
          <h1 className="text-h3 mb-12">Deposit</h1>
          <DepositContainer ethereumConfig={ethereumConfig} assetId={assetId} />
        </div>
      )}
    </Web3Container>
  );
};

export default Deposit;