Centrifuge App: improve clickability of copy address in receive tab (#…

…1841) * Clean up truncate usage and copyable address in receive tab * Add clickable state to wallet drop down (WIP) * Add hover effect and hide wallet menu when clicked * Use bluescale for buttons * Update toggle styles and menu item border radius * Add missing wallet icon * Update rest of toggles * Fix font color of WalletButton * Update chips
centrifuge · Jan 9, 2024 · 697553d · 697553d
1 parent 0577cfe
commit 697553d
Show file tree

Hide file tree

Showing 15 changed files with 89 additions and 74 deletions.
diff --git a/centrifuge-app/src/components/Menu/index.tsx b/centrifuge-app/src/components/Menu/index.tsx
@@ -4,8 +4,8 @@ import {
   IconGlobe,
   IconInvestments,
   IconNft,
-  IconPieChart,
   IconSwitch,
+  IconWallet,
   Menu as Panel,
   MenuItemGroup,
   Shelf,
@@ -44,7 +44,7 @@ export function Menu() {
       </PageLink>
 
       <PageLink to="/portfolio" stacked={!isLarge}>
-        <IconPieChart />
+        <IconWallet />
         Portfolio
       </PageLink>
 

diff --git a/centrifuge-app/src/components/Menu/styles.ts b/centrifuge-app/src/components/Menu/styles.ts
@@ -32,7 +32,8 @@ export const primaryButton = css<{ isActive?: boolean; stacked?: boolean }>`
   }
 
   @media (min-width: ${({ theme }) => theme.breakpoints['L']}) {
-    border-radius: 16px;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
   }
 
   svg {

diff --git a/centrifuge-app/src/components/MenuSwitch.tsx b/centrifuge-app/src/components/MenuSwitch.tsx
@@ -1,22 +1,9 @@
 import { SideNavigationContainer, SideNavigationItem } from '@centrifuge/fabric'
 import * as React from 'react'
-import { Link, useLocation, useRouteMatch } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
-export function MenuSwitch() {
+export function MenuSwitch({ links }: { links: { to: string; label: string }[] }) {
   const { pathname } = useLocation()
-  const basePath = useRouteMatch(['/pools', '/issuer'])?.path || ''
-
-  const links = [
-    {
-      to: `${basePath}`,
-      label: 'Pools',
-    },
-    {
-      to: `${basePath}/tokens`,
-      label: 'Tokens',
-    },
-  ]
-
   return (
     <SideNavigationContainer>
       {links.map(({ to, label }) => (

diff --git a/centrifuge-app/src/components/PoolCard/PoolStatus.tsx b/centrifuge-app/src/components/PoolCard/PoolStatus.tsx
@@ -4,8 +4,8 @@ import * as React from 'react'
 export type PoolStatusKey = 'Maker Pool' | 'Open for investments' | 'Closed' | 'Upcoming'
 
 const statusColor: { [key in PoolStatusKey]: StatusChipProps['status'] } = {
-  'Maker Pool': 'ok',
-  'Open for investments': 'info',
+  'Maker Pool': 'info',
+  'Open for investments': 'ok',
   Closed: 'default',
   Upcoming: 'default',
 }

diff --git a/centrifuge-app/src/components/PoolsTokensShared.tsx b/centrifuge-app/src/components/PoolsTokensShared.tsx
@@ -1,5 +1,6 @@
 import { Grid, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
+import { useRouteMatch } from 'react-router'
 import { config } from '../config'
 import { CardTotalValueLocked } from './CardTotalValueLocked'
 import { LayoutSection } from './LayoutBase/LayoutSection'
@@ -13,6 +14,18 @@ type PoolsTokensSharedProps = {
 }
 
 export function PoolsTokensShared({ title, children }: PoolsTokensSharedProps) {
+  const basePath = useRouteMatch(['/pools', '/issuer'])?.path || ''
+  const links = [
+    {
+      to: `${basePath}`,
+      label: 'Pools',
+    },
+    {
+      to: `${basePath}/tokens`,
+      label: 'Tokens',
+    },
+  ]
+
   return (
     <LayoutSection pt={5}>
       <Stack gap={4}>
@@ -35,7 +48,7 @@ export function PoolsTokensShared({ title, children }: PoolsTokensSharedProps) {
         </Grid>
 
         <Stack alignItems="end">
-          <MenuSwitch />
+          <MenuSwitch links={links} />
         </Stack>
         {children}
       </Stack>

diff --git a/centrifuge-app/src/components/Portfolio/TransferTokensDrawer.tsx b/centrifuge-app/src/components/Portfolio/TransferTokensDrawer.tsx
@@ -18,7 +18,6 @@ import {
   Tabs,
   TabsItem,
   Text,
-  truncate,
 } from '@centrifuge/fabric'
 import { isAddress as isEvmAddress } from '@ethersproject/address'
 import { isAddress as isSubstrateAddress } from '@polkadot/util-crypto'
@@ -34,6 +33,7 @@ import { Dec } from '../../utils/Decimal'
 import { formatBalance, formatBalanceAbbreviated } from '../../utils/formatting'
 import { useCFGTokenPrice, useDailyCFGPrice } from '../../utils/useCFGTokenPrice'
 import { useTransactionFeeEstimate } from '../../utils/useTransactionFeeEstimate'
+import { truncate } from '../../utils/web3'
 import { FilterOptions, PriceChart } from '../Charts/PriceChart'
 import { LabelValueStack } from '../LabelValueStack'
 import { Tooltips } from '../Tooltips'
@@ -266,14 +266,11 @@ const ReceiveToken = ({ address }: SendReceiveProps) => {
           <Container>
             <Box as="img" src={centrifugeLogo} width="100%" height="100%" alt="" />
           </Container>
-          <Text variant="label2" color="textSecondary">
-            Centrifuge native address:{' '}
-          </Text>
-          <Text variant="label1" fontSize="12px" textDecoration="underline" color="textPrimary">
-            {truncate(centAddress)}
-          </Text>
           <IconButton onClick={() => copyToClipboard(centAddress)} title="Copy address to clipboard">
-            <IconCopy />
+            <Shelf gap={1}>
+              {truncate(centAddress, 10, 10)}
+              <IconCopy />
+            </Shelf>
           </IconButton>
         </Shelf>
       </Stack>

diff --git a/centrifuge-app/src/components/Report/utils.tsx b/centrifuge-app/src/components/Report/utils.tsx
@@ -1,6 +1,7 @@
 import { BorrowerTransactionType, InvestorTransactionType } from '@centrifuge/centrifuge-js/dist/types/subquery'
 import { Text } from '@centrifuge/fabric'
 import { copyToClipboard } from '../../utils/copyToClipboard'
+import { truncate } from '../../utils/web3'
 
 const investorTransactionTypes: {
   [key in InvestorTransactionType]: (args: { trancheTokenSymbol: string; poolCurrencySymbol: string }) => string
@@ -90,13 +91,6 @@ function isBorrowerType(type: InvestorTransactionType | BorrowerTransactionType)
   return ['CREATED', 'PRICED', 'BORROWED', 'REPAID', 'CLOSED'].includes(type)
 }
 
-export function truncate(text: string) {
-  const first = text.slice(0, 5)
-  const last = text.slice(-5)
-
-  return `${first}...${last}`
-}
-
 export function copyable(text: string) {
   return (
     <Text

diff --git a/centrifuge-app/src/pages/IssuerPool/Investors/OnboardingSettings.tsx b/centrifuge-app/src/pages/IssuerPool/Investors/OnboardingSettings.tsx
@@ -261,11 +261,10 @@ export const OnboardingSettings = () => {
               {Object.entries(formik.values.openForOnboarding).map(([tId, open]) => (
                 <Shelf width="100%" justifyContent="space-between" gap={2} key={tId}>
                   <Text variant="body1">{(pool.tranches as Token[]).find((t) => t.id === tId)?.currency.name}</Text>
-                  <Shelf as="nav" bg="backgroundSecondary" borderRadius="20px" p="5px" width="fit-content">
+                  <Shelf as="nav" bg="backgroundTertiary" borderRadius="4px" p="5px" width="fit-content">
                     <ToggleButton
                       forwardedAs="button"
-                      variant="interactive2"
-                      isActive={open}
+                      $isActive={open}
                       disabled={!isEditing || formik.isSubmitting || isLoading}
                       type="button"
                       label={(pool.tranches as Token[]).find((t) => t.id === tId)?.currency.name}
@@ -280,9 +279,8 @@ export const OnboardingSettings = () => {
                     </ToggleButton>
                     <ToggleButton
                       forwardedAs="button"
-                      variant="interactive2"
                       type="button"
-                      isActive={!open}
+                      $isActive={!open}
                       disabled={!isEditing || formik.isSubmitting || isLoading}
                       onClick={() => {
                         formik.setFieldValue('openForOnboarding', {
@@ -482,12 +480,16 @@ const ToggleButton = styled(Text)<{ isActive: boolean }>`
   border: 0;
   cursor: pointer;
   display: block;
-  padding: 8px 16px;
-  border-radius: 20px;
+  padding: 7px 16px 8px 16px;
+  border-radius: 4px;
 
-  color: ${({ theme, isActive }) => (isActive ? theme.colors.textInteractive : theme.colors.textPrimary)};
-  box-shadow: ${({ theme, isActive }) => (isActive ? theme.shadows.cardInteractive : 'none')};
-  background: ${({ theme, isActive }) => (isActive ? theme.colors.backgroundPage : 'transparent')};
+  color: ${({ theme, $isActive }) => ($isActive ? theme.colors.textInteractive : theme.colors.textPrimary)};
+  font-size: ${({ theme }) => theme.typography.interactive2.fontSize}px;
+  line-height: ${({ theme }) => theme.typography.interactive2.lineHeight};
+  font-weight: ${({ theme }) => theme.typography.interactive2.fontWeight};
+
+  box-shadow: ${({ theme, $isActive }) => ($isActive ? theme.shadows.buttonSecondary : 'none')};
+  background: ${({ theme, $isActive }) => ($isActive ? theme.colors.backgroundPage : theme.colors.backgroundTertiary)};
 
   ${({ disabled, theme }) =>
     disabled &&

diff --git a/centrifuge-app/src/utils/web3.ts b/centrifuge-app/src/utils/web3.ts
@@ -18,10 +18,9 @@ export function isWhitelistedAccount(address: string) {
   return whitelistedAccounts.includes(addr)
 }
 
-export function truncate(string: string) {
-  const first = string.slice(0, 5)
-  const last = string.slice(-5)
-
+export function truncate(string: string, frontCount?: number, endCount?: number) {
+  const first = string.slice(0, frontCount ?? 5)
+  const last = string.slice(endCount ? -endCount : -5)
   return `${first}...${last}`
 }
 

diff --git a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx
@@ -17,6 +17,8 @@ import {
 } from '@centrifuge/fabric'
 import { getAddress } from '@ethersproject/address'
 import * as React from 'react'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
 import { useBalances } from '../../hooks/useBalances'
 import { useEns } from '../../hooks/useEns'
 import { copyToClipboard } from '../../utils/copyToClipboard'
@@ -160,9 +162,11 @@ function ConnectedMenu({ menuItems }: WalletMenuProps) {
                 <Text variant="label2" textAlign="center" color="textPrimary">
                   Balance
                 </Text>
-                <Text fontSize={22} fontWeight={500} textAlign="center">
-                  {balance && formatBalanceAbbreviated(balance, symbol)}
-                </Text>
+                <Link to={`/portfolio?send=${balances?.native.currency.symbol}`} onClick={() => state.close()}>
+                  <BalanceLink fontSize={22} fontWeight={500} textAlign="center">
+                    {balance && formatBalanceAbbreviated(balance, symbol)}
+                  </BalanceLink>
+                </Link>
               </Stack>
             </MenuItemGroup>
 
@@ -232,3 +236,9 @@ function ConnectedMenu({ menuItems }: WalletMenuProps) {
     />
   )
 }
+
+const BalanceLink = styled(Text)`
+  &:hover {
+    color: ${({ theme }) => theme.colors.textInteractive};
+  }
+`
diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx
@@ -74,7 +74,7 @@ export const WalletButton: React.VFC<WalletButtonProps> = ({
             <Shelf position="absolute" top="0" bottom="0" left="0" width="100%" m="auto" height="30px">
               <Text
                 fontSize={small ? 14 : 16}
-                color="textPrimary"
+                color="textInteractive"
                 fontWeight={500}
                 style={{
                   overflow: 'hidden',
@@ -88,15 +88,15 @@ export const WalletButton: React.VFC<WalletButtonProps> = ({
         ) : (
           <Text
             fontSize={small ? 14 : 16}
-            color="textPrimary"
+            color="textInteractive"
             fontWeight={500}
             style={{ margin: address ? 0 : 'auto' }}
           >
             {displayAddress ? truncate(displayAddress) : connectLabel}
           </Text>
         )}
         {address && balance && (
-          <Text variant="body3" color="textPrimary" style={{ marginLeft: 'auto' }}>
+          <Text variant="body3" color="textInteractive" style={{ marginLeft: 'auto' }}>
             {balance}
           </Text>
         )}

diff --git a/fabric/src/components/SideNavigation/index.tsx b/fabric/src/components/SideNavigation/index.tsx
@@ -24,7 +24,7 @@ export function SideNavigation({ items }: SideNavigationProps) {
 
 export function SideNavigationContainer({ children }: { children: React.ReactNode }) {
   return (
-    <Shelf as="nav" bg="backgroundSecondary" borderRadius="20px" p="5px">
+    <Shelf as="nav" bg="backgroundTertiary" borderRadius="4px" p="5px">
       {children}
     </Shelf>
   )
@@ -33,13 +33,13 @@ export function SideNavigationContainer({ children }: { children: React.ReactNod
 export const SideNavigationItem = styled.a<{ $isActive: boolean }>`
   display: block;
   padding: 7px 16px 8px 16px;
-  border-radius: 20px;
+  border-radius: 4px;
 
-  color: ${({ theme, $isActive }) => ($isActive ? theme.colors.textInverted : theme.colors.textPrimary)};
+  color: ${({ theme, $isActive }) => ($isActive ? theme.colors.textInteractive : theme.colors.textPrimary)};
   font-size: ${({ theme }) => theme.typography.interactive2.fontSize}px;
   line-height: ${({ theme }) => theme.typography.interactive2.lineHeight};
   font-weight: ${({ theme }) => theme.typography.interactive2.fontWeight};
 
-  box-shadow: ${({ theme, $isActive }) => ($isActive ? theme.shadows.cardInteractive : 'none')};
-  background: ${({ theme, $isActive }) => ($isActive ? theme.colors.textSelected : 'transparent')};
+  box-shadow: ${({ theme, $isActive }) => ($isActive ? theme.shadows.buttonSecondary : 'none')};
+  background: ${({ theme, $isActive }) => ($isActive ? theme.colors.backgroundPage : theme.colors.backgroundTertiary)};
 `
diff --git a/fabric/src/components/StatusChip/index.tsx b/fabric/src/components/StatusChip/index.tsx
@@ -7,7 +7,15 @@ export type StatusChipProps = React.PropsWithChildren<{
   status: 'default' | 'info' | 'ok' | 'warning' | 'critical'
 }>
 
-const colors = {
+const backgroundColor = {
+  default: 'statusDefault',
+  info: 'statusDefault',
+  ok: 'statusOk',
+  warning: 'statusWarning',
+  critical: 'statusCritical',
+}
+
+const textColor = {
   default: 'statusDefault',
   info: 'statusInfo',
   ok: 'statusOk',
@@ -19,18 +27,19 @@ const Chip = styled(Text)((props) =>
   css({
     display: 'inline-block',
     px: 1,
-    bg: `${props.color}Bg`,
+    bg: `${props.backgroundColor}Bg`,
     borderRadius: 'chip',
     whiteSpace: 'nowrap',
+    color: `${props.color}`,
   })
 )
 
 export function StatusChip({ status, children }: StatusChipProps) {
-  const color = colors[status]
-
   return (
-    <Chip forwardedAs="span" variant="label2" lineHeight="20px" color={color}>
-      {children}
+    <Chip forwardedAs="span" variant="label2" lineHeight="20px" backgroundColor={backgroundColor[status]}>
+      <Text fontWeight={500} variant="label2" color={textColor[status]}>
+        {children}
+      </Text>
     </Chip>
   )
 }
diff --git a/fabric/src/icon-svg/icon-wallet.svg b/fabric/src/icon-svg/icon-wallet.svg
diff --git a/fabric/src/theme/tokens/modeLight.ts b/fabric/src/theme/tokens/modeLight.ts
@@ -61,23 +61,23 @@ const lightColors = {
   borderButtonPrimaryDisabled: 'transparent',
   shadowButtonPrimary: '#0241E945',
 
-  backgroundButtonSecondary: grayScale[100],
-  backgroundButtonSecondaryFocus: grayScale[100],
-  backgroundButtonSecondaryHover: grayScale[100],
-  backgroundButtonSecondaryPressed: grayScale[200],
-  backgroundButtonSecondaryDisabled: grayScale[300],
+  backgroundButtonSecondary: blueScale[100],
+  backgroundButtonSecondaryFocus: blueScale[100],
+  backgroundButtonSecondaryHover: blueScale[100],
+  backgroundButtonSecondaryPressed: blueScale[200],
+  backgroundButtonSecondaryDisabled: blueScale[300],
   textButtonSecondary: centrifugeBlue,
   textButtonSecondaryFocus: centrifugeBlue,
   textButtonSecondaryHover: centrifugeBlue,
   textButtonSecondaryPressed: centrifugeBlue,
-  textButtonSecondaryDisabled: grayScale[600],
+  textButtonSecondaryDisabled: blueScale[600],
 
   borderButtonSecondary: grayScale[200],
   borderButtonSecondaryFocus: centrifugeBlue,
   borderButtonSecondaryHover: centrifugeBlue,
   borderButtonSecondaryPressed: centrifugeBlue,
   borderButtonSecondaryDisabled: 'transparent',
-  shadowButtonSecondary: '#d8d8d866',
+  shadowButtonSecondary: '#A8BFFD35',
 
   backgroundButtonTertiary: 'transparent',
   backgroundButtonTertiaryFocus: 'transparent',