Start to clean up AddressDetailsModal + dynamic scroll + many lil things

apps/desktop-wallet/src/components/AnimatedBackground.tsx

@@ -17,7 +17,7 @@ interface AnimatedBackgroundProps {
 
 type AnchorPosition = 'top' | 'bottom'
 
-const DARK_COLORS = ['#58a0ff', '#7057ff', '#ff709b', '#ff9b2f', '#1e71ff']
+const DARK_COLORS = ['#58a0ff', '#7057ff', '#272aff', '#ff9b2f', '#1e71ff']
 const LIGHT_COLORS = ['#ad6eff', '#ffb47f', '#ffaaaa', '#ffc089', '#ff9bc8']
 
 const AnimatedBackground = ({
@@ -263,6 +263,8 @@ const AnimatedContainer = styled.div`
   position: absolute;
   right: 0;
   left: 0;
+  z-index: 0;
+  pointer-events: none;
 `
 
 const Circle = styled(motion.div)`

apps/desktop-wallet/src/components/Button.tsx

@@ -227,7 +227,7 @@ export default styled(Button)`
   justify-content: ${({ Icon, justifyContent, children }) =>
     justifyContent ?? (!Icon || !children ? 'center' : 'flex-start')};
   height: ${({ circle, short, tall, tiny }) =>
-    tiny ? '28px' : short ? '34px' : circle ? '34px' : tall ? '44px' : 'var(--inputHeight)'};
+    tiny ? '28px' : short ? '34px' : circle ? '34px' : tall ? '46px' : 'var(--inputHeight)'};
   width: ${({ circle, short, wide, tiny }) =>
     tiny ? '28px' : circle ? '34px' : short && !wide ? 'auto' : wide ? '100%' : '80%'};
   max-width: ${({ wide }) => (wide ? 'auto' : '250px')};

apps/desktop-wallet/src/components/Buttons/ShortcutButtons.tsx

@@ -184,4 +184,5 @@ const ButtonsContainer = styled.div`
   align-items: center;
   justify-content: center;
   gap: 12px;
+  z-index: 1;
 `

apps/desktop-wallet/src/components/HashEllipsed.tsx

@@ -25,26 +25,28 @@ const HashEllipsed = ({
 }: HashEllipsedProps) => {
   const { t } = useTranslation()
 
-  return disableCopy ? (
+  return (
     <Container className={className}>
-      <Ellipsed text={hash} {...props} />
+      {disableCopy ? (
+        <Ellipsed text={hash} {...props} />
+      ) : (
+        <ClipboardButtonStyled
+          textToCopy={hash}
+          tooltip={tooltipText ?? t('Copy address')}
+          disableA11y={disableA11y}
+          showSnackbarOnCopied={showSnackbarOnCopied}
+        >
+          <Ellipsed className={className} text={hash} {...props} />
+        </ClipboardButtonStyled>
+      )}
     </Container>
-  ) : (
-    <ClipboardButtonStyled
-      textToCopy={hash}
-      tooltip={tooltipText ?? t('Copy address')}
-      disableA11y={disableA11y}
-      className={className}
-      showSnackbarOnCopied={showSnackbarOnCopied}
-    >
-      <Ellipsed text={hash} {...props} />
-    </ClipboardButtonStyled>
   )
 }
 
 export default HashEllipsed
 
 const Container = styled.div`
+  position: relative;
   display: flex;
   align-items: center;
   overflow: hidden;

apps/desktop-wallet/src/components/LabeledWorthOverview.tsx

@@ -24,33 +24,33 @@ import NetworkSwitch from '@/components/NetworkSwitch'
 import AddressWorth from '@/modals/AddressDetailsModal/AddressWorth'
 import WalletWorth from '@/pages/UnlockedWallet/OverviewPage/WalletWorth'
 
-interface WorthOverviewPanelProps {
+interface LabeledWorthOverviewProps {
   addressHash?: string
   isLoading?: boolean
   className?: string
   chartVisible?: boolean
   children?: ReactNode
 }
 
-const WorthOverviewPanel = ({ className, addressHash, children }: WorthOverviewPanelProps) => {
+const LabeledWorthOverview = ({ className, addressHash, children }: LabeledWorthOverviewProps) => {
   const { t } = useTranslation()
 
   const singleAddress = !!addressHash
 
   return (
-    <WorthOverviewPanelStyled className={className}>
+    <LabeledWorthOverviewStyled className={className}>
       <Surtitle>
         <Worth>{t(singleAddress ? 'Address worth' : 'Wallet worth')}</Worth>
         <NetworkSwitch />
       </Surtitle>
       {singleAddress ? <AddressWorth addressHash={addressHash} /> : <WalletWorth />}
-    </WorthOverviewPanelStyled>
+    </LabeledWorthOverviewStyled>
   )
 }
 
-export default WorthOverviewPanel
+export default LabeledWorthOverview
 
-const WorthOverviewPanelStyled = styled.div`
+const LabeledWorthOverviewStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;

apps/desktop-wallet/src/components/Scrollbar.tsx

@@ -1,5 +1,3 @@
-// Used as reference: https://github.com/xobotyi/react-scrollbars-custom/issues/46#issuecomment-897506147
-
 import { useMotionValue } from 'framer-motion'
 import { ReactNode, UIEvent, useRef } from 'react'
 import { CustomScroll } from 'react-custom-scroll'
@@ -9,18 +7,21 @@ import { ScrollContextProvider, ScrollContextType } from '@/contexts/scroll'
 interface ScrollbarCustomProps {
   children?: ReactNode
   className?: string
+  onScroll?: (scrollTop: number) => void
 }
 
-const ScrollbarCustom = ({ children, className }: ScrollbarCustomProps) => {
+const ScrollbarCustom = ({ children, className, onScroll }: ScrollbarCustomProps) => {
   const scrollY = useMotionValue(0)
   const contextValueRef = useRef<ScrollContextType>({ scrollY })
 
   const handleScrollUpdate = (e: UIEvent<Element>) => {
-    scrollY.set((e.target as HTMLElement).scrollTop)
+    const scrollTop = (e.target as HTMLElement).scrollTop
+    scrollY.set(scrollTop)
+    if (onScroll) {
+      onScroll(scrollTop)
+    }
   }
 
-  // react-scrollbars-custom has a type issue where you can't just spread props
-  // onto the component. That's why needed props are added as necessary.
   return (
     <CustomScroll onScroll={handleScrollUpdate} flex="1" className={className}>
       <ScrollContextProvider value={contextValueRef.current}>{children}</ScrollContextProvider>

apps/desktop-wallet/src/features/assetsLists/TokensTabs.tsx

@@ -22,8 +22,8 @@ export const AddressTokensTabs = ({ addressHash }: AddressTokensTabsProps) => {
   const { tabs, isExpanded, toggleExpansion } = useTokensTabs({
     numberOfNSTs: nstIds.length,
     ftsTabTitle: t('Address tokens'),
-    nstsTabTitle: t('Address unknown tokens'),
-    nftsTabTitle: t('Address NFTs')
+    nftsTabTitle: t('Address NFTs'),
+    nstsTabTitle: t('Address unknown tokens')
   })
 
   const [currentTab, setCurrentTab] = useState<TabItem<TokensTabValue>>(tabs[0])

apps/desktop-wallet/src/features/snackbar/SnackbarBox.tsx

@@ -21,9 +21,9 @@ const SnackbarBoxContent = styled(motion.div)`
   word-wrap: break-word;
   overflow-y: auto;
   font-weight: var(--fontWeight-semiBold);
-  z-index: 1;
   pointer-events: all;
   margin-top: -10px;
+  z-index: 1;
 `
 
 const BlurredBackground = styled.div`
@@ -54,7 +54,7 @@ const SnackBarBoxContainer = styled(motion.div)`
   }
 
   &.info {
-    ${({ theme }) => getSnackbarStyling(colord(theme.global.accent).alpha(0.5).toHex())}
+    ${({ theme }) => getSnackbarStyling(theme.global.accent)}
   }
 
   &.success {
@@ -66,13 +66,14 @@ export default SnackbarBox
 
 const getSnackbarStyling = (color: string) => css`
   ${BlurredBackground} {
-    background: linear-gradient(to bottom, ${color} 0%, transparent 80%);
+    background: linear-gradient(to bottom, ${color} 50%, transparent 80%);
   }
 
   ${SnackbarBoxContent} {
+    font-size: 14px;
     color: ${({ theme }) =>
       theme.name === 'light'
-        ? colord(color).alpha(1).darken(0.1).toHex()
-        : colord(color).alpha(1).lighten(0.3).toHex()};
+        ? colord(color).alpha(1).lighten(0.7).toHex()
+        : colord(color).alpha(1).lighten(0.4).toHex()};
   }
 `

apps/desktop-wallet/src/modals/AddressDetailsModal/AddressDetailsModal.tsx

@@ -2,16 +2,20 @@ import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
+import AnimatedBackground from '@/components/AnimatedBackground'
 import { ShortcutButtonsGroupAddress } from '@/components/Buttons/ShortcutButtons'
-import WorthOverviewPanel from '@/components/LabeledWorthOverview'
+import LabeledWorthOverview from '@/components/LabeledWorthOverview'
 import { AddressTokensTabs } from '@/features/assetsLists/TokensTabs'
 import { AddressModalProps } from '@/features/modals/modalTypes'
 import AddressTransactionsList from '@/features/transactionsDisplay/transactionLists/lists/AddressTransactionsList'
+import { useAppSelector } from '@/hooks/redux'
 import AddressDetailsModalHeader from '@/modals/AddressDetailsModal/AddressDetailsModalHeader'
 import SideModal from '@/modals/SideModal'
+import { selectAddressByHash } from '@/storage/addresses/addressesSelectors'
 
 const AddressDetailsModal = memo(({ id, addressHash }: AddressModalProps) => {
   const { t } = useTranslation()
+  const addressColor = useAppSelector((s) => selectAddressByHash(s, addressHash)?.color)
 
   const [showChart, setShowChart] = useState(false)
 
@@ -23,8 +27,9 @@ const AddressDetailsModal = memo(({ id, addressHash }: AddressModalProps) => {
       header={<AddressDetailsModalHeader addressHash={addressHash} />}
       onAnimationComplete={() => setShowChart(true)}
     >
-      <WorthOverviewPanel addressHash={addressHash} chartVisible={showChart} />
+      <LabeledWorthOverview addressHash={addressHash} chartVisible={showChart} />
       <Content>
+        <AnimatedBackground shade={addressColor} anchorPosition="top" verticalOffset={-300} opacity={0.5} />
         <ShortcutButtonsGroupAddress addressHash={addressHash} analyticsOrigin="address_details" />
         <AddressTokensTabs addressHash={addressHash} />
         <AddressTransactionsList addressHash={addressHash} />
@@ -36,7 +41,7 @@ const AddressDetailsModal = memo(({ id, addressHash }: AddressModalProps) => {
 export default AddressDetailsModal
 
 const Content = styled.div`
-  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4);
+  padding: 0 var(--spacing-4) var(--spacing-4);
   position: relative;
   gap: 45px;
   display: flex;

apps/desktop-wallet/src/modals/AddressDetailsModal/AddressDetailsModalHeader.tsx

@@ -20,7 +20,7 @@ const Header = ({ addressHash }: AddressModalBaseProp) => {
   return (
     <HeaderStyled>
       <LeftSide>
-        <AddressColorIndicator addressHash={addressHash} size={26} />
+        <AddressColorIndicator addressHash={addressHash} size={17} />
         <TitleBadge addressHash={addressHash} />
       </LeftSide>
       <ExplorerButton role="secondary" transparent short onClick={handleExplorerLinkClick}>
@@ -61,7 +61,7 @@ const HeaderStyled = styled.div`
 const LeftSide = styled.div`
   display: flex;
   align-items: center;
-  gap: 25px;
+  gap: 15px;
 `
 
 const ExplorerButton = styled(Button)`
@@ -70,19 +70,18 @@ const ExplorerButton = styled(Button)`
 `
 
 const AddressBadgeStyled = styled(AddressBadge)`
-  font-size: 16px;
+  font-size: 15px;
   max-width: 160px;
 `
 
 const Title = styled.div`
   display: flex;
-  flex-direction: column;
-  gap: 5px;
-  font-weight: var(--fontWeight-semiBold);
+  align-items: center;
+  gap: 10px;
 `
 
 const TitleAddressHash = styled(HashEllipsed)`
   max-width: 100px;
   color: ${({ theme }) => theme.font.tertiary};
-  font-size: 13px;
+  font-size: 14px;
 `

apps/desktop-wallet/src/modals/AddressDetailsModal/AddressWorth.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react'
+import styled from 'styled-components'
 
 import useFetchAddressWorth from '@/api/apiDataHooks/address/useFetchAddressWorth'
 import WorthOverview from '@/components/WorthOverview'
@@ -11,7 +12,11 @@ interface AddressWorthProps {
 const AddressWorth = memo(({ addressHash, ...props }: AddressWorthProps) => {
   const { data: worth, isLoading } = useFetchAddressWorth(addressHash)
 
-  return <WorthOverview worth={worth} isLoading={isLoading} {...props} />
+  return <AddressWorthStyled worth={worth} isLoading={isLoading} {...props} />
 })
 
 export default AddressWorth
+
+const AddressWorthStyled = styled(WorthOverview)`
+  font-size: 38px;
+`

apps/desktop-wallet/src/modals/SettingsModal/DevToolsSettingsSection.tsx

@@ -110,10 +110,10 @@ const DevToolsSettingsSection = () => {
               {t('Smart contracts')}
             </h2>
             <ButtonsRow>
-              <Button Icon={FileCode} onClick={openDeployContractModal} role="secondary">
+              <Button Icon={FileCode} onClick={openDeployContractModal} role="secondary" justifyContent="center">
                 {t('Deploy contract')}
               </Button>
-              <Button Icon={TerminalSquare} onClick={openCallContractModal} role="secondary">
+              <Button Icon={TerminalSquare} onClick={openCallContractModal} role="secondary" justifyContent="center">
                 {t('Call contract')}
               </Button>
             </ButtonsRow>