fixed top header

0xsequence · Aug 1, 2023 · ce7d530 · ce7d530
1 parent fd4bccc
commit ce7d530
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 84 deletions.
diff --git a/packages/wallet/src/api/data.tsx b/packages/wallet/src/api/data.tsx
@@ -165,8 +165,8 @@ export const fetchBalancesAssetsSummary = async ({ accountAddress, chainId }: Ge
       const aPrice = aPriceData?.price ? aPriceData.price.value : 0
       const bPrice = bPriceData?.price ? bPriceData.price.value : 0
 
-      const aFormattedBalance = Number(ethers.utils.formatUnits(a.balance, a.tokenMetadata?.decimals || 0))
-      const bFormattedBalance = Number(ethers.utils.formatUnits(b.balance, b.tokenMetadata?.decimals || 0))      
+      const aFormattedBalance = Number(ethers.utils.formatUnits(a.balance, a.contractInfo?.decimals || 0))
+      const bFormattedBalance = Number(ethers.utils.formatUnits(b.balance, b.contractInfo?.decimals || 0))      
 
       const aValue = aFormattedBalance * aPrice
       const bValue = bFormattedBalance * bPrice

diff --git a/.../wallet/src/views/Home/components/AssetSummary/CollectibleTile/CollectibleTileContent.tsx b/.../wallet/src/views/Home/components/AssetSummary/CollectibleTile/CollectibleTileContent.tsx
@@ -11,17 +11,7 @@ export const CollectibleTileContent = ({
 }: CollectibleTileContentProps) => {
   const imageUrl = balance?.tokenMetadata?.image
 
-  console.log('balance...', balance)
-
   return (
-    // <Box
-    //   width="full"
-    //   height="full"
-    //   background="backgroundSecondary"
-    //   borderRadius="md"
-    // >
-    //   <Image src={imageUrl} alt="collectible" />
-    // </Box>
       <Card
         padding="0"
         aspectRatio="1/1"

diff --git a/packages/wallet/src/views/Home/components/HomeHeader.tsx b/packages/wallet/src/views/Home/components/HomeHeader.tsx
@@ -1,94 +1,54 @@
 import React from 'react'
-import { ethers } from 'ethers'
-import { Token, TokenPrice } from '@0xsequence/api'
-import { TokenBalance } from '@0xsequence/indexer'
 import {
   Box,
+  IconButton,
   Text,
-  GradientAvatar
+  GradientAvatar,
+  SearchIcon,
+  ChevronDownIcon,
+  vars
 } from '@0xsequence/design-system'
-import { useAccount, useNetwork } from 'wagmi'
+import { useAccount } from 'wagmi'
 
-import { useBalances, useCoinPrices, useModalTheme } from '../../../hooks'
-import { formatAddress, compareAddress, capitalize, getChainColor } from '../../../utils'
-
-import { CopyButton  } from '../../../shared/CopyButton'
+import { formatAddress } from '../../../utils'
+import * as styles from '../../../shared/styles.css'
 
 export const HomeHeader = () => {
-  const theme = useModalTheme()
   const { address } = useAccount()
-  const { chain } = useNetwork()
-  const chainId = chain?.id || 1
-  const chainName = chain?.name || ''
-  const { data: balances = [], isLoading: isLoadingBalances } = useBalances({ accountAddress: address || '', chainId: chain?.id || 1 })
-
-  const nativeTokenBalances = balances?.filter(b => b.contractAddress === ethers.constants.AddressZero)
-
-  const erc20TokensBalances = balances?.filter(b => b.contractType === 'ERC20')
-
-  const tokenBalances = [...nativeTokenBalances, ...erc20TokensBalances]
-
-  const nativeToken: Token = {
-    chainId,
-    contractAddress: ethers.constants.AddressZero
-  }
-
-  const erc20Tokens: Token[] = balances.filter(b => b.contractType === 'ERC20').map((token) => ({
-    chainId,
-    contractAddress: token.contractAddress
-  }))
-
-  const { data: coinPrices = [], isLoading: isLoadingCoinPrices } = useCoinPrices({
-    tokens: [nativeToken, ...erc20Tokens]
-  })
 
-  const isLoading = isLoadingBalances || isLoadingCoinPrices
-
-  const computeBalance = (balances: TokenBalance[], prices: TokenPrice[]): string => {
-    let totalUsd = 0
-
-    balances.forEach((balance) => {
-        const priceForToken = prices.find(p => compareAddress(p.token.contractAddress, balance.contractAddress))
-        if (!priceForToken) {
-          return;
-        }
-        const priceFiat = priceForToken.price?.value || 0
-        const decimals = balance.contractInfo?.decimals || 18
-        const valueFormatted = ethers.utils.formatUnits(balance.balance, decimals)
-        const value = parseFloat(valueFormatted) * priceFiat
-        totalUsd += value
-    })
-
-    return totalUsd.toFixed(2)
+  const onClickSearch = () => {
+    console.log('clicked search')
   }
 
-  const balance = computeBalance(tokenBalances, coinPrices)
-
-  const getNetworkText = () => {
-    // if there is no network name
-    if (chainName === `Chain ${chainId}`) {
-      return chainName
-    }
-
-
-    return(`${capitalize(chainName)} - ${chainId}`)
+  const onClickAccount = () => {
+    console.log('clicked account')
   }
 
   return (
     <>
-      <GradientAvatar style={{ float: 'left', marginTop: '16px' }} address={address || ''} />
-      <Box marginTop="3" gap="2" alignItems="center" style={{ height: "60px"}}>
+      <IconButton
+        onClick={onClickSearch}
+        icon={SearchIcon}
+        style={{ float: 'left', marginTop: '8px', backgroundColor: vars.colors.backgroundPrimary }}
+      />
+      <Box gap="2" alignItems="center" style={{ height: "60px"}}>
           <Box width="full" flexDirection="column" alignItems="center" justifyContent="center" >
-            <Box alignItems="center" justifyContent="center">
-              <Text variant="normal">
+            <Box
+              onClick={onClickAccount}
+              gap="2"
+              alignItems="center"
+              justifyContent="center"
+              className={styles.clickable}
+              position="relative"
+              style={{
+                marginLeft: '-22px'
+              }}
+            >
+              <GradientAvatar size="sm" address={address || ''} />
+              <Text color="text100" fontWeight="medium" variant="normal">
                 {formatAddress(address || '')}
               </Text>
-              <CopyButton marginLeft="2" text={address || ''} />
-            </Box>
-            <Box style={{ marginTop: '-4px' }} >
-              <Text variant="small" style={{ color: getChainColor(chainId, theme) }}>
-                {getNetworkText()}
-              </Text>
+              <ChevronDownIcon />
             </Box>
           </Box>
       </Box>