From f3f166b26ae13831954de4134b41caa8f7ec96a6 Mon Sep 17 00:00:00 2001
From: nikhil arora <narora200@gmail.com>
Date: Tue, 7 Feb 2023 17:13:02 +0530
Subject: [PATCH] feat: headerbar to show connected wallet status

---
 .../components/Positions/ConnectWallet.tsx    |  29 ----
 .../src/components/Positions/HeaderBar.tsx    | 130 ++++++++++++++++++
 packages/frontend/src/utils/network.ts        |  12 ++
 3 files changed, 142 insertions(+), 29 deletions(-)
 delete mode 100644 packages/frontend/src/components/Positions/ConnectWallet.tsx
 create mode 100644 packages/frontend/src/components/Positions/HeaderBar.tsx
 create mode 100644 packages/frontend/src/utils/network.ts

diff --git a/packages/frontend/src/components/Positions/ConnectWallet.tsx b/packages/frontend/src/components/Positions/ConnectWallet.tsx
deleted file mode 100644
index 2b14e0f6b7..0000000000
--- a/packages/frontend/src/components/Positions/ConnectWallet.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Typography } from '@material-ui/core'
-import { useAtomValue } from 'jotai'
-
-import { supportedNetworkAtom } from '@state/wallet/atoms'
-import { useSelectWallet } from '@state/wallet/hooks'
-import { LinkButton } from '@components/Button'
-import useStyles from './useStyles'
-
-const ConnectWallet: React.FC = () => {
-  const selectWallet = useSelectWallet()
-  const classes = useStyles()
-  const supportedNetwork = useAtomValue(supportedNetworkAtom)
-
-  return (
-    <div>
-      <div className={classes.container}>
-        {supportedNetwork ? (
-          <LinkButton style={{ margin: 'auto' }} onClick={selectWallet}>
-            Connect Wallet
-          </LinkButton>
-        ) : (
-          <Typography>Unsupported Network</Typography>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default ConnectWallet
diff --git a/packages/frontend/src/components/Positions/HeaderBar.tsx b/packages/frontend/src/components/Positions/HeaderBar.tsx
new file mode 100644
index 0000000000..f9991c6b71
--- /dev/null
+++ b/packages/frontend/src/components/Positions/HeaderBar.tsx
@@ -0,0 +1,130 @@
+import { Tooltip, Typography } from '@material-ui/core'
+import InfoIcon from '@material-ui/icons/InfoOutlined'
+import { makeStyles, createStyles } from '@material-ui/core/styles'
+import { useAtomValue } from 'jotai'
+import { useMemo } from 'react'
+
+import { supportedNetworkAtom, networkIdAtom, connectedWalletAtom, addressAtom } from '@state/wallet/atoms'
+import { useSelectWallet } from '@state/wallet/hooks'
+import { LinkButton } from '@components/Button'
+import SqueethCard from '@components/SqueethCard'
+import { Tooltips } from '@constants/index'
+import { toTokenAmount } from '@utils/calculations'
+import { indexAtom } from '@state/controller/atoms'
+import { formatCurrency } from '@utils/formatter'
+import { useENS } from '@hooks/useENS'
+import { getNetwork } from '@utils/network'
+import useCommonStyles from './useStyles'
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    container: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: '100%',
+    },
+    userInfoContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      gridGap: '6px',
+    },
+    ethPriceContainer: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+    textMedium: {
+      fontWeight: 500,
+    },
+    profileImageCircle: {
+      width: theme.spacing(1.5),
+      height: theme.spacing(1.5),
+      borderRadius: '50%',
+      marginRight: theme.spacing(0.5),
+      backgroundColor: theme.palette.primary.main,
+    },
+    ctaButton: {
+      fontSize: '16px',
+    },
+    networkText: {
+      textTransform: 'capitalize',
+    },
+  }),
+)
+
+const UserInfo = () => {
+  const networkId = useAtomValue(networkIdAtom)
+  const address = useAtomValue(addressAtom)
+  const isNetworkSupported = useAtomValue(supportedNetworkAtom)
+
+  const { ensName } = useENS(address)
+
+  const shortAddress = useMemo(
+    () => (address ? address.slice(0, 6) + '...' + address.slice(address.length - 4, address.length) : ''),
+    [address],
+  )
+
+  const classes = useStyles()
+
+  return (
+    <div className={classes.userInfoContainer}>
+      <div className={classes.profileImageCircle} />
+      <Typography variant="body1" className={classes.textMedium}>
+        {ensName || shortAddress}
+        {': '}
+      </Typography>
+      <Typography variant="body1" className={classes.networkText}>
+        {getNetwork(networkId).toLowerCase()} {!isNetworkSupported && '(Unsupported)'}
+      </Typography>
+    </div>
+  )
+}
+
+const EthPrice = () => {
+  const index = useAtomValue(indexAtom)
+  const ethPrice = toTokenAmount(index, 18).sqrt()
+
+  const classes = useStyles()
+  const commonClasses = useCommonStyles()
+
+  return (
+    <div className={classes.ethPriceContainer}>
+      <Typography variant="body1" color="textSecondary">
+        ETH Price:
+      </Typography>
+
+      <div className={commonClasses.tooltipContainer}>
+        <Typography variant="body1" component="span" className={commonClasses.textMonospace}>
+          {formatCurrency(ethPrice.toNumber())}
+        </Typography>
+        <Tooltip title={Tooltips.SpotPrice}>
+          <InfoIcon className={commonClasses.infoIcon} />
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+const HeaderBar: React.FC = () => {
+  const isWalletConnected = useAtomValue(connectedWalletAtom)
+
+  const selectWallet = useSelectWallet()
+  const classes = useStyles()
+
+  return (
+    <SqueethCard>
+      <div className={classes.container}>
+        {isWalletConnected ? (
+          <UserInfo />
+        ) : (
+          <LinkButton onClick={selectWallet} className={classes.ctaButton}>
+            Connect Wallet
+          </LinkButton>
+        )}
+        <EthPrice />
+      </div>
+    </SqueethCard>
+  )
+}
+
+export default HeaderBar
diff --git a/packages/frontend/src/utils/network.ts b/packages/frontend/src/utils/network.ts
new file mode 100644
index 0000000000..e9790d5725
--- /dev/null
+++ b/packages/frontend/src/utils/network.ts
@@ -0,0 +1,12 @@
+export function getNetwork(networkId: number) {
+  switch (networkId) {
+    case 1:
+      return 'MAINNET'
+    case 5:
+      return 'GOERI'
+    case 11155111:
+      return 'SEPOLIA'
+    default:
+      return 'UNKNOWN'
+  }
+}