feat: SwapAmountInput

[abcrane123]

What changed? Why?

• add SwapAmountInput component

Notes to reviewers
add this back in after PR is merged:

<App>
  <SwapAmountInputContainer>
    {(amount, setAmount, setToken, token, tokenBalance) => (
      <SwapAmountInput
        amount={amount}
        label="Sell"
        setAmount={setAmount}
        setToken={setToken}
        swappableTokens={[
          {
            name: 'Ethereum',
            address: '',
            symbol: 'ETH',
            decimals: 18,
            image: 'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
            chainId: 8453,
          },
          {
            name: 'USDC',
            address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
            symbol: 'USDC',
            decimals: 6,
            image:
              'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
            chainId: 8453,
          },
          {
            name: 'Dai',
            address: '0x50c5725949a6f0c72e6c4a641f24049a917db0cb',
            symbol: 'DAI',
            decimals: 18,
            image:
              'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/d0/d7/d0d7784975771dbbac9a22c8c0c12928cc6f658cbcf2bbbf7c909f0fa2426dec-NmU4ZWViMDItOTQyYy00Yjk5LTkzODUtNGJlZmJiMTUxOTgy',
            chainId: 8453,
          },
        ]}
        token={token}
        tokenBalance={tokenBalance}
      />
    )}
  </SwapAmountInputContainer>
</App>

How has it been tested?
locally

[kyhyco]

Maybe let's change the onTokenSelectorClick to setToken? The user shouldn't have to know that we are using TokenSelector under the hood.

Suggested change

	onTokenSelectorClick: () => void; // Callback function when the token selector is clicked
	setToken: () => void; // Callback function when the token selector is clicked

[abcrane123]

yes agreed.

[abcrane123]

The other cb props i am passing in start with on i.e onAmountChange, onMaxButtonClick. Should I do onTokenSelect to keep it consistent or do you think setToken is more clear ?

[abcrane123]

update: went with setToken and setAmount

[Zizzamia]

let's keep all types alphabetical.

[Zizzamia]

Great work!!!! 👏