UI: Header component

.env.example

@@ -1,6 +1,7 @@
-REACT_APP_SUPPORTED_CHAIN_ID=1337
-REACT_APP_ETH_HOSTNAME_HTTP=http://localhost:8545
-REACT_APP_ETH_HOSTNAME_WS=ws://localhost:8545
+REACT_APP_SUPPORTED_CHAIN_ID=5
+REACT_APP_ETH_HOSTNAME_HTTP=https://goerli.infura.io/v3/437bf9d604844b58846d1bff0b21872c
+REACT_APP_ETH_HOSTNAME_WS=ws://goerli.infura.io/v3/437bf9d604844b58846d1bff0b21872c
+REACT_APP_ELECTRUM_PROTOCOL=wss
 REACT_APP_MULTICALL_ADDRESS=$MULTICALL_ADDRESS
 REACT_APP_DAPP_DEVELOPMENT_TESTNET_CONTRACTS=$DAPP_DEVELOPMENT_TESTNET_CONTRACTS
 
@@ -13,8 +14,8 @@ REACT_APP_FEATURE_FLAG_LEDGER_LIVE=true
 REACT_APP_SENTRY_DSN=$SENTRY_DSN
 
 REACT_APP_ELECTRUM_PROTOCOL=$ELECTRUM_PROTOCOL
-REACT_APP_ELECTRUM_HOST=$ELECTRUM_HOST
-REACT_APP_ELECTRUM_PORT=$ELECTRUM_PORT
+REACT_APP_ELECTRUM_HOST=electrumx-server.test.tbtc.network
+REACT_APP_ELECTRUM_PORT=8443
 REACT_APP_MOCK_BITCOIN_CLIENT=true
 
-REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_PROJECT_ID
+REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_PROJECT_ID

src/App.tsx

@@ -39,6 +39,8 @@ import {
   useSubscribeToRedemptionRequestedEvent,
 } from "./hooks/tbtc"
 import { useSentry } from "./hooks/sentry"
+import { Header } from "./components/Header"
+import { VStack } from "@threshold-network/components"
 
 const Web3EventHandlerComponent = () => {
   useSubscribeToERC20TransferEvent(Token.TBTCV2)
@@ -99,19 +101,22 @@ const AppBody = () => {
 
 const Layout = () => {
   return (
-    <Box display="flex">
-      <Sidebar />
-      <Box
-        // 100% - 80px is to account for the sidebar
-        w={{ base: "100%", md: "calc(100% - 80px)" }}
-        bg={useColorModeValue("transparent", "gray.900")}
-      >
-        <Navbar />
-        <Box as="main" data-cy="app-container">
-          <Outlet />
+    <VStack alignItems="normal" spacing="0">
+      <Header />
+      <Box display="flex">
+        <Sidebar />
+        <Box
+          // 100% - 80px is to account for the sidebar
+          w={{ base: "100%", md: "calc(100% - 80px)" }}
+          bg={useColorModeValue("transparent", "gray.900")}
+        >
+          <Navbar />
+          <Box as="main" data-cy="app-container">
+            <Outlet />
+          </Box>
         </Box>
       </Box>
-    </Box>
+    </VStack>
   )
 }
 

src/components/DotsLoadingIndicator/index.tsx

@@ -1,29 +1,54 @@
 import { FC } from "react"
-import {
-  Box,
-  HStack,
-  StackProps,
-  ThemingProps,
-  useStyleConfig,
-} from "@threshold-network/components"
+import { Box, StackProps, HStack } from "@threshold-network/components"
+import { motion } from "framer-motion"
 
-type DotsLoadingIndicatorProps = StackProps & Omit<ThemingProps, "orientation">
+const Dot: FC = () => (
+  <motion.div
+    variants={{
+      initial: {
+        y: "50%",
+        opacity: 0.85,
+      },
+      animate: {
+        y: "-50%",
+        opacity: 0,
+      },
+    }}
+    transition={{
+      duration: 0.8,
+      repeat: Infinity,
+      repeatType: "reverse",
+      ease: "easeInOut",
+    }}
+  >
+    <Box w={1} h={1} rounded="full" bg="white" />
+  </motion.div>
+)
 
-export const DotsLoadingIndicator: FC<DotsLoadingIndicatorProps> = ({
-  colorScheme = "brand",
-  size = "sm",
-  ...restProps
-}) => {
-  const styles = useStyleConfig("DotsLoadingIndicator", {
-    colorScheme,
-    size,
-  })
-
-  return (
-    <HStack spacing="4" {...restProps}>
-      <Box __css={styles} />
-      <Box __css={styles} />
-      <Box __css={styles} />
-    </HStack>
-  )
-}
+export const DotsLoadingIndicator: FC<StackProps> = (props) => (
+  <HStack
+    spacing={0.5}
+    w={5}
+    h={5}
+    as={motion.div}
+    variants={{
+      initial: {
+        transition: {
+          staggerChildren: 0.2,
+        },
+      },
+      animate: {
+        transition: {
+          staggerChildren: 0.2,
+        },
+      },
+    }}
+    initial="initial"
+    animate="animate"
+    {...props}
+  >
+    <Dot />
+    <Dot />
+    <Dot />
+  </HStack>
+)

src/components/Header/Header.children.tsx

@@ -0,0 +1,184 @@
+import {
+  As,
+  BodyMd,
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Icon,
+  Link,
+  List,
+  ListItem,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  SystemStyleObject,
+} from "@threshold-network/components"
+import { NavLink } from "react-router-dom"
+import { FaCogs as TestnetIcon } from "react-icons/fa"
+import shortenAddress from "../../utils/shortenAddress"
+import { spacing } from "@chakra-ui/theme/foundations/spacing"
+import { HiOutlinePlus as PlusIcon } from "react-icons/hi"
+import { InlineTokenBalance } from "../TokenBalance"
+import chainIdToNetworkName from "../../utils/chainIdToNetworkName"
+import { EthereumDark } from "../../static/icons/EthereumDark"
+import { ChainID } from "../../enums"
+import Identicon from "../Identicon"
+
+const activeLinkIndicatorStyles: SystemStyleObject = {
+  position: "relative",
+  "&.active": {
+    "&:before": {
+      content: '""',
+      position: "absolute",
+      bottom: 0,
+      left: 5,
+      width: `calc(100% - 2 * ${spacing[5]})`, // To account for container's padding
+      height: 0.5,
+      bg: "#53D2FF",
+    },
+  },
+}
+
+const networkIconMap = new Map<ChainID, As<unknown>>([
+  [ChainID.Ethereum, EthereumDark],
+  [ChainID.Goerli, TestnetIcon],
+])
+
+interface NavigationMenuItemProps {
+  /** The label of the menu item */
+  label: string
+  /** The route to navigate to when the menu item is clicked */
+  to: string
+}
+
+function NavigationMenuItem(props: NavigationMenuItemProps) {
+  const { label, to } = props
+  return (
+    <ListItem>
+      <Link
+        as={NavLink}
+        to={to}
+        display={"inline-flex"}
+        alignItems={"center"}
+        h={"full"}
+        px={5}
+        sx={activeLinkIndicatorStyles}
+        fontWeight={"black"}
+        textTransform={"uppercase"}
+        _hover={{ textDecoration: "none" }}
+      >
+        {label}
+      </Link>
+    </ListItem>
+  )
+}
+
+interface NavigationMenuProps {
+  /** The menu items to display */
+  items: NavigationMenuItemProps[]
+}
+
+export function NavigationMenu(props: NavigationMenuProps) {
+  const { items } = props
+  return (
+    <Flex as={List} alignSelf={"stretch"} ml={146 - 20} mr={"auto"}>
+      {items.map((item) => (
+        <NavigationMenuItem {...item} key={item.to} />
+      ))}
+    </Flex>
+  )
+}
+
+interface UserPanelProps {
+  /** Whether the user is connected to a wallet */
+  isConnected: boolean
+  /** The address of the connected wallet */
+  accountAddress?: Nullable<string>
+  /** The balance of the connected wallet */
+  balance: number | string
+  /** The identifier of the chain */
+  chainId?: Nullable<number>
+  /** The callback to invoke when the user clicks the disconnect button */
+  onDisconnectClick: () => void
+  /** The callback to invoke when the user clicks the connect button */
+  onConnectClick: () => void
+}
+
+export function UserPanel(props: UserPanelProps) {
+  const {
+    isConnected,
+    accountAddress,
+    balance,
+    chainId,
+    onDisconnectClick,
+    onConnectClick,
+  } = props
+  return (
+    <HStack spacing={6} alignSelf={"stretch"}>
+      {isConnected && !!accountAddress && !!chainId ? (
+        <>
+          <Box as="p">
+            <InlineTokenBalance
+              fontWeight="medium"
+              tokenAmount={balance}
+              color="hsla(0, 0%, 100%, 90%)"
+            />
+            &nbsp;
+            <BodyMd as="span" color="hsla(0, 0%, 100%, 50%)">
+              tBTC
+            </BodyMd>
+          </Box>
+          <HStack spacing={3}>
+            <Button
+              size="sm"
+              variant="outline"
+              color="white"
+              leftIcon={<Icon as={networkIconMap.get(chainId)} />}
+            >
+              {chainIdToNetworkName(chainId)}
+            </Button>
+            <Menu placement="bottom-end">
+              <MenuButton
+                as={Button}
+                size="sm"
+                variant="outline"
+                leftIcon={<Identicon address={accountAddress} />}
+              >
+                {shortenAddress(accountAddress)}
+              </MenuButton>
+              <MenuList
+                bgGradient="radial(circle at bottom right, #0A1616, #090909)"
+                border="1px solid"
+                borderColor="border.50"
+                rounded="lg"
+              >
+                <MenuItem
+                  onClick={onDisconnectClick}
+                  _hover={{
+                    bg: "whiteAlpha.100",
+                  }}
+                  _active={{
+                    bg: "whiteAlpha.200",
+                  }}
+                >
+                  Disconnect
+                </MenuItem>
+              </MenuList>
+            </Menu>
+          </HStack>
+        </>
+      ) : (
+        <Button
+          variant="outline"
+          leftIcon={<PlusIcon />}
+          onClick={onConnectClick}
+          size="sm"
+        >
+          Connect Wallet
+        </Button>
+      )}
+    </HStack>
+  )
+}

src/components/Header/Header.tsx

@@ -0,0 +1,52 @@
+import { Box, Flex } from "@threshold-network/components"
+import { useWeb3React } from "@web3-react/core"
+import { BigNumber } from "ethers"
+import { ModalType, Token } from "../../enums"
+import { useModal } from "../../hooks/useModal"
+import { useToken } from "../../hooks/useToken"
+import { Logo } from "../Logo"
+import { NavigationMenu, UserPanel } from "./Header.children"
+
+// TODO: Load new fonts
+
+function Header() {
+  const {
+    active: isConnected,
+    deactivate: handleWalletDisconnection,
+    account: accountAddress,
+    chainId,
+  } = useWeb3React()
+  const { openModal } = useModal()
+  const handleWalletConnection = () => openModal(ModalType.SelectWallet)
+  const { balance } = useToken(Token.TBTCV2)
+
+  return (
+    <Box
+      bg={"black"}
+      color={"white"}
+      borderBottom={"1px solid"}
+      borderColor={"border.100"}
+    >
+      <Flex maxW={"1920px"} mx={"auto"} alignItems={"center"} px={10} h={24}>
+        <Logo />
+        <NavigationMenu
+          items={[
+            { label: "Bridge", to: "/tBTC/mint" },
+            { label: "Collect", to: "/collect" },
+            { label: "Earn", to: "/earn" },
+          ]}
+        />
+        <UserPanel
+          isConnected={isConnected}
+          accountAddress={accountAddress}
+          balance={balance}
+          chainId={chainId}
+          onConnectClick={handleWalletConnection}
+          onDisconnectClick={handleWalletDisconnection}
+        />
+      </Flex>
+    </Box>
+  )
+}
+
+export default Header

src/components/Header/index.ts

@@ -0,0 +1 @@
+export { default as Header } from "./Header"