import {
  Box,
  Button,
  Flex,
  Link,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Text,
} from '@chakra-ui/react';
import { ExternalLinkIcon, CopyIcon } from '@chakra-ui/icons';
import { useEthers } from '@usedapp/core';
import Identicon, { FriendIdenticon } from './Identicon';
import { useState, useEffect } from 'react';

type Props = {
  isOpen: any;
  onClose: any;
};

export function AccountModal({ isOpen, onClose }: Props) {
  const { account, deactivate } = useEthers();
  const [friendAccount, setFriendAccount] = useState([
    '0x10cacffbf3cdcfb365fddc4795079417768baa74',
  ]);
  const [input, setInput] = useState('');

  function handleDeactivateAccount() {
    deactivate();
    onClose();
  }

  function handleAddAccount() {
    friendAccount.push(input);
    setFriendAccount([input, ...friendAccount]);
  }

  return (
    <Modal isOpen={isOpen} onClose={onClose} isCentered size="md">
      <ModalOverlay />
      <ModalContent
        background="gray.900"
        border="1px"
        borderStyle="solid"
        borderColor="gray.700"
        borderRadius="3xl"
      >
        <ModalHeader color="white" px={4} fontSize="lg" fontWeight="medium">
          Account
        </ModalHeader>
        <ModalCloseButton
          color="white"
          fontSize="sm"
          _hover={{
            color: 'whiteAlpha.700',
          }}
        />
        <ModalBody pt={0} px={4}>
          <Box
            borderRadius="3xl"
            border="1px"
            borderStyle="solid"
            borderColor="gray.600"
            px={5}
            pt={4}
            pb={2}
            mb={3}
          >
            <Flex justifyContent="space-between" alignItems="center" mb={3}>
              <Text color="gray.400" fontSize="sm">
                Connected with MetaMask
              </Text>
              <Button
                variant="outline"
                size="sm"
                borderColor="blue.800"
                borderRadius="3xl"
                color="blue.500"
                fontSize="13px"
                fontWeight="normal"
                px={2}
                height="26px"
                _hover={{
                  background: 'none',
                  borderColor: 'blue.300',
                  textDecoration: 'underline',
                }}
                onClick={handleDeactivateAccount}
              >
                Change
              </Button>
            </Flex>
            <Flex alignItems="center" mt={2} mb={4} lineHeight={1}>
              <Identicon />
              <Text
                color="white"
                fontSize="xl"
                fontWeight="semibold"
                ml="2"
                lineHeight="1.1"
              >
                {account &&
                  `${account.slice(0, 6)}...${account.slice(
                    account.length - 4,
                    account.length
                  )}`}
              </Text>
            </Flex>
            <Flex alignContent="center" m={3}>
              <Button
                variant="link"
                color="gray.400"
                fontWeight="normal"
                fontSize="sm"
                _hover={{
                  textDecoration: 'none',
                  color: 'whiteAlpha.800',
                }}
              >
                <CopyIcon mr={1} />
                Copy Address
              </Button>
              <Link
                fontSize="sm"
                display="flex"
                alignItems="center"
                href={`https://ropsten.etherscan.io/address/${account}`}
                isExternal
                color="gray.400"
                ml={6}
                _hover={{
                  color: 'whiteAlpha.800',
                  textDecoration: 'underline',
                }}
              >
                <ExternalLinkIcon mr={1} />
                View on Explorer
              </Link>
            </Flex>
          </Box>
        </ModalBody>

        <ModalHeader color="white" px={4} fontSize="lg" fontWeight="medium">
          {/* Your friend */}
          <Flex justifyContent="flex-start" alignItems="center" mb={3}>
            <Text color="gray.400" fontSize="xl">
              Your friend
            </Text>
            <input
              style={{ color: 'black' }}
              color="blue.300"
              onChange={(e) => {
                setInput(e.target.value);
                /* 用e.target.value去setState */
              }}
            />
            <Button
              ml="2"
              variant="outline"
              size="sm"
              borderColor="blue.800"
              borderRadius="3xl"
              color="blue.300"
              fontSize="13px"
              fontWeight="normal"
              px={2}
              height="26px"
              _hover={{
                background: 'none',
                borderColor: 'blue.300',
                textDecoration: 'underline',
              }}
              onClick={handleAddAccount}
            >
              + Add
            </Button>
          </Flex>
        </ModalHeader>

        {friendAccount.map((item) => {
          return (
            <ModalBody pt={0} px={4}>
              <Box
                borderRadius="3xl"
                border="1px"
                borderStyle="solid"
                borderColor="gray.600"
                px={5}
                pt={4}
                pb={2}
                mb={3}
              >
                <Flex justifyContent="space-between" alignItems="center" mb={3}>
                  <Text color="gray.400" fontSize="sm">
                    Switch to friendAccount
                  </Text>
                  <Button
                    variant="outline"
                    size="sm"
                    borderColor="blue.800"
                    borderRadius="3xl"
                    color="yellow.500"
                    fontSize="13px"
                    fontWeight="normal"
                    px={2}
                    height="26px"
                    _hover={{
                      background: 'none',
                      borderColor: 'blue.300',
                      textDecoration: 'underline',
                    }}
                    onClick={handleDeactivateAccount}
                  >
                    Switch
                  </Button>
                </Flex>
                <Flex alignItems="center" mt={2} mb={4} lineHeight={1}>
                  <FriendIdenticon account={item} />
                  <Text
                    color="white"
                    fontSize="xl"
                    fontWeight="semibold"
                    ml="2"
                    lineHeight="1.1"
                  >
                    {item &&
                      `${item.slice(0, 6)}...${item.slice(
                        item.length - 4,
                        item.length
                      )}`}
                  </Text>
                </Flex>
                <Flex alignContent="center" m={3}>
                  <Button
                    variant="link"
                    color="gray.400"
                    fontWeight="normal"
                    fontSize="sm"
                    _hover={{
                      textDecoration: 'none',
                      color: 'whiteAlpha.800',
                    }}
                  >
                    <CopyIcon mr={1} />
                    Copy Address
                  </Button>
                  <Link
                    fontSize="sm"
                    display="flex"
                    alignItems="center"
                    href={`https://ropsten.etherscan.io/address/${account}`}
                    isExternal
                    color="gray.400"
                    ml={6}
                    _hover={{
                      color: 'whiteAlpha.800',
                      textDecoration: 'underline',
                    }}
                  >
                    <ExternalLinkIcon mr={1} />
                    View on Explorer
                  </Link>
                </Flex>
              </Box>
            </ModalBody>
          );
        })}

        <ModalFooter
          justifyContent="end"
          background="gray.700"
          borderBottomLeftRadius="3xl"
          borderBottomRightRadius="3xl"
          p={6}
        >
          <Text
            color="white"
            textAlign="center"
            fontWeight="medium"
            fontSize="md"
          >
            {` logout: MetaMask > Connected sites > Disconnect`}
          </Text>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

// export function UserAccount(Account:string) {

//   return (
//   )

// })

最終效果

如果有不懂的地方可以偷看完成的DEMO