Replacing SCROLLBAR_WIDTH constant with useScrollbarWidth hook to avo…

…id navigator referenced in SSR contexts (#17)

packages/wallet/src/constants/sizing.ts

@@ -1,2 +1 @@
 export const HEADER_HEIGHT = '54px'
-export const SCROLLBAR_WIDTH = navigator.userAgent.match(/chrome|chromium|crios/i) ? '13px' : '0px'

packages/wallet/src/hooks/useScrollbarWidth.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react'
+
+export const useScrollbarWidth = () => {
+  const [scrollbarWidth, setScrollbarWidth] = useState<string>('0px')
+
+  useEffect(() => {
+    setScrollbarWidth(navigator.userAgent.match(/chrome|chromium|crios/i) ? '13px' : '0px')
+  }, [])
+
+  return scrollbarWidth
+}

packages/wallet/src/views/CoinDetails/Skeleton.tsx

@@ -5,13 +5,16 @@ import { TransactionHistorySkeleton } from '../../shared/TransactionHistoryList/
 import { NetworkBadge } from '../../shared/NetworkBadge'
 import { Skeleton } from '../../shared/Skeleton'
 
-import { HEADER_HEIGHT, SCROLLBAR_WIDTH } from '../../constants'
+import { HEADER_HEIGHT } from '../../constants'
+import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
 
 interface CoinDetailsSkeletonProps {
   chainId: number
 }
 
 export const CoinDetailsSkeleton = ({ chainId }: CoinDetailsSkeletonProps) => {
+  const scrollbarWidth = useScrollbarWidth()
+
   return (
     <Box style={{ paddingTop: HEADER_HEIGHT }}>
       <Box
@@ -20,7 +23,7 @@ export const CoinDetailsSkeleton = ({ chainId }: CoinDetailsSkeletonProps) => {
         paddingBottom="5"
         paddingLeft="5"
         paddingTop="0"
-        style={{ marginTop: '-20px', paddingRight: `calc(${vars.space[5]} - ${SCROLLBAR_WIDTH})` }}
+        style={{ marginTop: '-20px', paddingRight: `calc(${vars.space[5]} - ${scrollbarWidth})` }}
       >
         <Box marginBottom="10" gap="2" alignItems="center" justifyContent="center" flexDirection="column">
           <Skeleton width="32px" height="32px" />

packages/wallet/src/views/CoinDetails/index.tsx

@@ -11,8 +11,9 @@ import { InfiniteScroll } from '../../shared/InfiniteScroll'
 import { NetworkBadge } from '../../shared/NetworkBadge'
 import { TransactionHistoryList } from '../../shared/TransactionHistoryList'
 import { useCoinBalance, useConversionRate, useSettings, useCoinPrices, useTransactionHistory, useNavigation } from '../../hooks'
-import { HEADER_HEIGHT, SCROLLBAR_WIDTH } from '../../constants'
+import { HEADER_HEIGHT } from '../../constants'
 import { compareAddress, computeBalanceFiat, formatDisplay, flattenPaginatedTransactionHistory } from '../../utils'
+import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
 
 export interface CoinDetailsProps {
   contractAddress: string
@@ -23,6 +24,7 @@ export const CoinDetails = ({ contractAddress, chainId }: CoinDetailsProps) => {
   const { chains } = useConfig()
   const { setNavigation } = useNavigation()
   const { fiatCurrency, hideUnlistedTokens } = useSettings()
+  const scrollbarWidth = useScrollbarWidth()
 
   const { address: accountAddress } = useAccount()
 
@@ -103,7 +105,7 @@ export const CoinDetails = ({ contractAddress, chainId }: CoinDetailsProps) => {
         paddingBottom="5"
         paddingLeft="5"
         paddingTop="0"
-        style={{ marginTop: '-20px', paddingRight: `calc(${vars.space[5]} - ${SCROLLBAR_WIDTH})` }}
+        style={{ marginTop: '-20px', paddingRight: `calc(${vars.space[5]} - ${scrollbarWidth})` }}
       >
         <Box marginBottom="10" gap="2" alignItems="center" justifyContent="center" flexDirection="column">
           <Image width="8" src={logo} alt="logo" />

packages/wallet/src/views/CollectibleDetails/Skeleton.tsx

@@ -4,9 +4,12 @@ import { Box, Button, SendIcon, Text, vars } from '@0xsequence/design-system'
 import { Skeleton } from '../../shared/Skeleton'
 import { TransactionHistorySkeleton } from '../../shared/TransactionHistoryList/TransactionHistorySkeleton'
 
-import { HEADER_HEIGHT, SCROLLBAR_WIDTH } from '../../constants'
+import { HEADER_HEIGHT } from '../../constants'
+import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
 
 export const CollectibleDetailsSkeleton = () => {
+  const scrollbarWidth = useScrollbarWidth()
+
   return (
     <Box style={{ paddingTop: HEADER_HEIGHT }}>
       <Box
@@ -17,7 +20,7 @@ export const CollectibleDetailsSkeleton = () => {
         paddingTop="0"
         style={{
           marginTop: '-20px',
-          paddingRight: `calc(${vars.space[5]} - ${SCROLLBAR_WIDTH})`
+          paddingRight: `calc(${vars.space[5]} - ${scrollbarWidth})`
         }}
       >
         <Box gap="3" alignItems="center" justifyContent="center" flexDirection="column">

packages/wallet/src/views/CollectibleDetails/index.tsx

@@ -18,7 +18,8 @@ import {
 import { InfiniteScroll } from '../../shared/InfiniteScroll'
 import { TransactionHistoryList } from '../../shared/TransactionHistoryList'
 import { CollectibleTileImage } from '../../shared/CollectibleTileImage'
-import { HEADER_HEIGHT, SCROLLBAR_WIDTH } from '../../constants'
+import { HEADER_HEIGHT } from '../../constants'
+import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
 
 export interface CollectibleDetailsProps {
   contractAddress: string
@@ -31,6 +32,7 @@ export const CollectibleDetails = ({ contractAddress, chainId, tokenId }: Collec
   const { address: accountAddress } = useAccount()
   const { fiatCurrency } = useSettings()
   const { setNavigation } = useNavigation()
+  const scrollbarWidth = useScrollbarWidth()
 
   const {
     data: dataTransactionHistory,
@@ -113,7 +115,7 @@ export const CollectibleDetails = ({ contractAddress, chainId, tokenId }: Collec
         paddingTop="0"
         style={{
           marginTop: '-20px',
-          paddingRight: `calc(${vars.space[5]} - ${SCROLLBAR_WIDTH})`
+          paddingRight: `calc(${vars.space[5]} - ${scrollbarWidth})`
         }}
       >
         <Box gap="3" alignItems="center" justifyContent="center" flexDirection="column">

packages/wallet/src/views/CollectionDetails/Skeleton.tsx

@@ -3,13 +3,15 @@ import { Box, vars } from '@0xsequence/design-system'
 
 import { NetworkBadge } from '../../shared/NetworkBadge'
 import { Skeleton } from '../../shared/Skeleton'
-import { SCROLLBAR_WIDTH } from '../../constants'
+import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
 
 interface CollectionDetailsSkeletonProps {
   chainId: number
 }
 
 export const CollectionDetailsSkeleton = ({ chainId }: CollectionDetailsSkeletonProps) => {
+  const scrollbarWidth = useScrollbarWidth()
+
   return (
     <Box
       paddingLeft="5"
@@ -20,7 +22,7 @@ export const CollectionDetailsSkeleton = ({ chainId }: CollectionDetailsSkeleton
       alignItems="center"
       justifyContent="center"
       gap="10"
-      style={{ paddingRight: `calc(${vars.space[5]} - ${SCROLLBAR_WIDTH})` }}
+      style={{ paddingRight: `calc(${vars.space[5]} - ${scrollbarWidth})` }}
     >
       <Box flexDirection="column" gap="2" justifyContent="center" alignItems="center">
         <Skeleton width="32px" height="32px" />

packages/wallet/src/views/CollectionDetails/index.tsx

@@ -6,13 +6,13 @@ import { useAccount } from 'wagmi'
 
 import { CollectionDetailsSkeleton } from './Skeleton'
 
-import { SCROLLBAR_WIDTH } from '../../constants'
 import { NetworkBadge } from '../../shared/NetworkBadge'
 import { CoinIcon } from '../../shared/CoinIcon'
 import { useCollectionBalance, useNavigation } from '../../hooks'
 import { formatDisplay } from '../../utils'
 
 import * as sharedStyles from '../../shared/styles.css'
+import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
 
 interface CollectionDetailsProps {
   chainId: number
@@ -27,6 +27,7 @@ export const CollectionDetails = ({ chainId, contractAddress }: CollectionDetail
     accountAddress: accountAddress || '',
     collectionAddress: contractAddress
   })
+  const scrollbarWidth = useScrollbarWidth()
 
   const contractInfo = collectionBalanceData?.[0]?.contractInfo
   const collectionLogoURI = contractInfo?.logoURI
@@ -57,7 +58,7 @@ export const CollectionDetails = ({ chainId, contractAddress }: CollectionDetail
       alignItems="center"
       justifyContent="center"
       gap="10"
-      style={{ paddingRight: `calc(${vars.space[5]} - ${SCROLLBAR_WIDTH})` }}
+      style={{ paddingRight: `calc(${vars.space[5]} - ${scrollbarWidth})` }}
     >
       <Box flexDirection="column" gap="2" justifyContent="center" alignItems="center">
         <CoinIcon imageUrl={collectionLogoURI} size={32} />

packages/wallet/src/views/History.tsx

@@ -2,13 +2,14 @@ import { Box, vars } from '@0xsequence/design-system'
 import React from 'react'
 import { useAccount } from 'wagmi'
 
-import { SCROLLBAR_WIDTH } from '../constants'
 import { useSettings, useTransactionHistorySummary } from '../hooks'
 import { TransactionHistoryList } from '../shared/TransactionHistoryList'
+import { useScrollbarWidth } from '../hooks/useScrollbarWidth'
 
 export const History = () => {
   const { selectedNetworks } = useSettings()
   const { address: accountAddress } = useAccount()
+  const scrollbarWidth = useScrollbarWidth()
 
   const { data: transactionHistory = [], isLoading: isLoadingTransactionHistory } = useTransactionHistorySummary({
     accountAddress: accountAddress || '',
@@ -22,7 +23,7 @@ export const History = () => {
         paddingBottom="5"
         paddingTop="3"
         style={{
-          paddingRight: `calc(${vars.space[5]} - ${SCROLLBAR_WIDTH})`
+          paddingRight: `calc(${vars.space[5]} - ${scrollbarWidth})`
         }}
       >
         <TransactionHistoryList

packages/wallet/src/views/Home/index.tsx

@@ -1,18 +1,19 @@
 import React from 'react'
 import { Box, vars } from '@0xsequence/design-system'
 
-import { SCROLLBAR_WIDTH } from '../../constants'
-
 import { AssetSummary } from './components/AssetSummary'
+import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
 
 export const Home = () => {
+  const scrollbarWidth = useScrollbarWidth()
+
   return (
     <Box
       paddingLeft="5"
       paddingBottom="5"
       gap="4"
       flexDirection="column"
-      style={{ paddingRight: `calc(${vars.space[5]} - ${SCROLLBAR_WIDTH})` }}
+      style={{ paddingRight: `calc(${vars.space[5]} - ${scrollbarWidth})` }}
     >
       <AssetSummary />
     </Box>

packages/wallet/src/views/Search/SearchWallet.tsx

@@ -9,15 +9,16 @@ import { BalanceItem } from './components/BalanceItem'
 import { WalletLink } from './components/WalletLink'
 
 import { Skeleton } from '../../shared/Skeleton'
-import { SCROLLBAR_WIDTH } from '../../constants'
 import { useBalances, useCoinPrices, useConversionRate, useSettings } from '../../hooks'
 import { compareAddress, computeBalanceFiat } from '../../utils'
+import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
 
 export const SearchWallet = () => {
   const { chains } = useConfig()
   const { fiatCurrency, hideUnlistedTokens, selectedNetworks } = useSettings()
   const [search, setSearch] = useState('')
   const { address: accountAddress } = useAccount()
+  const scrollbarWidth = useScrollbarWidth()
 
   const { data: tokenBalancesData, isLoading: tokenBalancesIsLoading } = useBalances(
     {
@@ -126,7 +127,7 @@ export const SearchWallet = () => {
       gap="10"
       alignItems="center"
       justifyContent="center"
-      style={{ paddingRight: `calc(${vars.space[5]} - ${SCROLLBAR_WIDTH})` }}
+      style={{ paddingRight: `calc(${vars.space[5]} - ${scrollbarWidth})` }}
     >
       <Box width="full">
         <TextInput

packages/wallet/src/views/Search/SearchWalletViewAll.tsx

@@ -7,9 +7,9 @@ import Fuse from 'fuse.js'
 import { useAccount, useConfig } from 'wagmi'
 
 import { Skeleton } from '../../shared/Skeleton'
-import { SCROLLBAR_WIDTH } from '../../constants'
 import { useBalances, useCoinPrices, useConversionRate, useSettings } from '../../hooks'
 import { compareAddress, computeBalanceFiat } from '../../utils'
+import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
 
 interface SearchWalletViewAllProps {
   defaultTab: 'coins' | 'collections'
@@ -20,6 +20,7 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
   const { fiatCurrency, hideUnlistedTokens, selectedNetworks } = useSettings()
   const [search, setSearch] = useState('')
   const [selectedTab, setSelectedTab] = useState(defaultTab)
+  const scrollbarWidth = useScrollbarWidth()
 
   useEffect(() => {
     setSearch('')
@@ -148,7 +149,7 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
       alignItems="center"
       justifyContent="center"
       style={{
-        paddingRight: `calc(${vars.space[5]} - ${SCROLLBAR_WIDTH})`
+        paddingRight: `calc(${vars.space[5]} - ${scrollbarWidth})`
       }}
     >
       <Box width="full">

packages/wallet/src/views/Settings/Currency.tsx

@@ -2,18 +2,21 @@ import React from 'react'
 import { Box, Text, vars } from '@0xsequence/design-system'
 
 import { SelectButton } from '../../shared/SelectButton'
-import { SCROLLBAR_WIDTH, supportedFiatCurrencies } from '../../constants'
+import { supportedFiatCurrencies } from '../../constants'
 import { useSettings } from '../../hooks'
+import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
 
 export const SettingsCurrency = () => {
   const { fiatCurrency, setFiatCurrency } = useSettings()
+  const scrollbarWidth = useScrollbarWidth()
+
   return (
     <Box
       paddingBottom="5"
       paddingLeft="5"
       paddingTop="3"
       style={{
-        paddingRight: `calc(${vars.space[5]} - ${SCROLLBAR_WIDTH})`
+        paddingRight: `calc(${vars.space[5]} - ${scrollbarWidth})`
       }}
     >
       <Box flexDirection="column" gap="2">