import React, { useEffect } from 'react';
import {
  ChainId,
  ETH,
  UniswapDappSharedLogicContext,
} from './uniswap_components/uniswap-dapp-integration-shared';
import UniswapReact from './uniswap_components/uniswap-react';

function UniswapWindow() {
  const [uniswapDappSharedLogicContext, setUniswapDappSharedLogicContext] =
    React.useState<undefined | UniswapDappSharedLogicContext>(undefined);
  useEffect(() => {
    (async () => {
      const accounts = await (window as any).ethereum.request({
        method: 'eth_requestAccounts',
      });

      const uniswapDappSharedLogicContext: UniswapDappSharedLogicContext = {
        supportedNetworkTokens: [
          {
            chainId: ChainId.MAINNET,
            defaultInputValue: '0.000001',
            defaultInputToken: ETH.MAINNET().contractAddress,
            defaultOutputToken: '0xd79F43113B22D1eA9F29cfcC7BB287489F8EE5e0',
            supportedTokens: [
              {
                contractAddress: '0xd79F43113B22D1eA9F29cfcC7BB287489F8EE5e0',
              },
            ],
          }
        ],
        ethereumAddress: accounts[0],
        ethereumProvider: (window as any).ethereum,
      };

      setUniswapDappSharedLogicContext(uniswapDappSharedLogicContext);
    })();
  }, []);

  return (
    <div className="App">
      <div className="uniswap-container">
        {uniswapDappSharedLogicContext !== undefined && (
          <UniswapReact
            uniswapDappSharedLogicContext={uniswapDappSharedLogicContext}
          />
        )}
      </div>
    </div>
  );
}

export default UniswapWindow;