1  import { useEffect } from 'react';
 2  import { useAtomValue } from 'jotai';
 3  import { useStore } from 'zustand';
 4  import { Box, Button, Flex, Spinner, useToast } from '@chakra-ui/react';
 5  import {
 6    ChainConnection,
 7    chainConnectionAtom,
 8    chainStorageWatcherAtom,
 9    isWalletConnectionInProgressAtom,
10    localStorageStore,
11    networkConfigAtom,
12    walletServiceAtom,
13  } from 'store/app';
14  import NetworkDropdown from 'components/NetworkDropdown';
15  // import TermsDialog, { currentTermsIndex } from 'components/TermsDialog';
16  import { CircleIcon } from 'components/CircleIcon';
17  
18  const truncatedAddress = (chainConnection: ChainConnection) =>
19    chainConnection.address.substring(chainConnection.address.length - 7);
20  
21  const WalletConnection = () => {
22    const walletService = useAtomValue(walletServiceAtom);
23    const chainStorageWatcher = useAtomValue(chainStorageWatcherAtom);
24    const isConnectionInProgress = useAtomValue(isWalletConnectionInProgressAtom);
25    const chainConnection = useAtomValue(chainConnectionAtom);
26    const { url } = useAtomValue(networkConfigAtom);
27    const { hasWalletPreviouslyConnected } = useStore(localStorageStore);
28  
29    console.log({ walletService, chainConnection, isConnectionInProgress, url });
30  
31    // Automatically connect if the user has previously connected.
32    useEffect(() => {
33      if (
34        chainStorageWatcher &&
35        hasWalletPreviouslyConnected &&
36        !(isConnectionInProgress || chainConnection)
37      ) {
38        walletService.connect();
39      }
40    }, [
41      chainConnection,
42      hasWalletPreviouslyConnected,
43      isConnectionInProgress,
44      url,
45      walletService,
46      chainStorageWatcher,
47    ]);
48  
49    // const toast = useToast({
50    //   position: 'bottom-right',
51    //   isClosable: true,
52    //   variant: 'left-accent',
53    // });
54  
55    const status = (() => {
56      if (isConnectionInProgress) {
57        return 'Connecting';
58      } else if (chainConnection) {
59        // TODO, add a way to call walletService.disconnect.
60        return `...${truncatedAddress(chainConnection)} Connected`;
61      }
62      return 'Connect Wallet';
63    })();
64  
65    const getStatusColor = () => {
66      if (isConnectionInProgress) return 'yellow.500';
67      return chainConnection ? 'green.500' : 'red.500';
68    };
69  
70    return (
71      <Flex dir="row" justify="flex-end" pt={5} pr={7}>
72        <Box mr={3}>
73          <NetworkDropdown />
74        </Box>
75        <Button variant="glass" onClick={() => walletService.connect()}>
76          <CircleIcon boxSize={2} mr={2} color={getStatusColor()} />
77          {status}
78          {isConnectionInProgress ? (
79            <Box ml={2}>
80              <Spinner color="white" height={18} width={18} />
81            </Box>
82          ) : null}
83        </Button>
84        {/* <TermsDialog
85          isOpen={isTermsDialogOpen}
86          onClose={handleTermsDialogClose}
87        /> */}
88      </Flex>
89    );
90  };
91  
92  export default WalletConnection;