chore: release v1.778.0

.env.base

@@ -26,7 +26,6 @@ REACT_APP_FEATURE_THORCHAIN_LENDING_BORROW=false
 REACT_APP_FEATURE_THORCHAIN_LENDING_REPAY=false
 REACT_APP_FEATURE_THORCHAINSWAP_LONGTAIL=true
 REACT_APP_FEATURE_THORCHAINSWAP_L1_TO_LONGTAIL=true
-REACT_APP_FEATURE_SHAPESHIFT_MOBILE_WALLET=false
 REACT_APP_FEATURE_THORCHAIN_LP=true
 REACT_APP_FEATURE_THORCHAIN_LP_DEPOSIT=true
 REACT_APP_FEATURE_THORCHAIN_LP_WITHDRAW=true

src/Routes/RoutesCommon.tsx

@@ -168,74 +168,16 @@ export const routes: Route[] = [
       })),
     ],
   },
-  {
-    path: '/rfox',
-    label: 'navBar.rFOX',
-    icon: <RFOXIcon />,
-    mobileNav: false,
-    priority: 3,
-    main: RFOX,
-    category: RouteCategory.Featured,
-    disable: !getConfig().REACT_APP_FEATURE_RFOX,
-  },
-  {
-    path: '/fox',
-    label: 'navBar.foxBenefits',
-    icon: <FoxIcon />,
-    main: FoxPage,
-    category: RouteCategory.Featured,
-    priority: 4,
-    mobileNav: false,
-    disable: !getConfig().REACT_APP_FEATURE_FOX_PAGE,
-  },
-  {
-    path: '/explore',
-    label: 'navBar.explore',
-    icon: <ExploreIcon />,
-    main: Explore,
-    mobileNav: true,
-    hideDesktop: true,
-    priority: 6,
-  },
-  {
-    path: '/pools',
-    label: 'navBar.pools',
-    icon: <PoolsIcon />,
-    main: PoolsPage,
-    category: RouteCategory.Featured,
-    priority: 4,
-    mobileNav: false,
-    disable: !getConfig().REACT_APP_FEATURE_THORCHAIN_LP,
-  },
   {
     path: '/markets',
     label: 'navBar.markets',
     icon: <TbGraph />,
     main: MarketsPage,
     category: RouteCategory.Featured,
-    priority: 4,
+    priority: 3,
     mobileNav: false,
     disable: !getConfig().REACT_APP_FEATURE_MARKETS,
   },
-  {
-    path: '/earn',
-    label: 'defi.earn',
-    icon: <DefiIcon />,
-    main: StakingVaults,
-    category: RouteCategory.Featured,
-    mobileNav: true,
-    priority: 4,
-  },
-  {
-    path: '/lending',
-    label: 'navBar.lending',
-    icon: <RiExchangeFundsLine />,
-    main: LendingPage,
-    category: RouteCategory.Featured,
-    priority: 4,
-    mobileNav: false,
-    disable: !getConfig().REACT_APP_FEATURE_THORCHAIN_LENDING,
-  },
   {
     path: '/buy-crypto',
     label: 'navBar.buyCrypto',
@@ -244,7 +186,7 @@ export const routes: Route[] = [
     main: Buy,
     category: RouteCategory.Featured,
     mobileNav: false,
-    priority: 5,
+    priority: 4,
     routes: assetIdPaths.map(assetIdPath => ({
       label: 'Buy Asset',
       path: assetIdPath,
@@ -257,19 +199,77 @@ export const routes: Route[] = [
     shortLabel: 'navBar.wallet',
     icon: <WalletIcon />,
     main: Dashboard,
-    category: RouteCategory.Wallet,
+    category: RouteCategory.Featured,
     mobileNav: true,
-    priority: 1,
+    priority: 5,
     routes: [
       {
         path: '/transaction-history',
         label: 'navBar.transactionHistory',
         icon: <TxHistoryIcon />,
         main: TransactionHistory,
-        category: RouteCategory.Wallet,
       },
     ],
   },
+  {
+    path: '/earn',
+    label: 'defi.earn',
+    icon: <DefiIcon />,
+    main: StakingVaults,
+    category: RouteCategory.Featured,
+    mobileNav: true,
+    priority: 6,
+  },
+  {
+    path: '/explore',
+    label: 'navBar.explore',
+    icon: <ExploreIcon />,
+    main: Explore,
+    mobileNav: true,
+    hideDesktop: true,
+    priority: 7,
+  },
+  {
+    path: '/rfox',
+    label: 'navBar.rFOX',
+    icon: <RFOXIcon />,
+    mobileNav: false,
+    priority: 1,
+    main: RFOX,
+    category: RouteCategory.Fox,
+    disable: !getConfig().REACT_APP_FEATURE_RFOX,
+  },
+  {
+    path: '/fox',
+    label: 'navBar.foxEcosystem',
+    icon: <FoxIcon />,
+    main: FoxPage,
+    category: RouteCategory.Fox,
+    priority: 2,
+    mobileNav: false,
+    disable: !getConfig().REACT_APP_FEATURE_FOX_PAGE,
+  },
+  {
+    path: '/pools',
+    label: 'navBar.pools',
+    icon: <PoolsIcon />,
+    main: PoolsPage,
+    category: RouteCategory.Thorchain,
+    priority: 1,
+    mobileNav: false,
+    disable: !getConfig().REACT_APP_FEATURE_THORCHAIN_LP,
+  },
+  {
+    path: '/lending',
+    label: 'navBar.lending',
+    icon: <RiExchangeFundsLine />,
+    main: LendingPage,
+    category: RouteCategory.Thorchain,
+    priority: 2,
+    mobileNav: false,
+    disable: !getConfig().REACT_APP_FEATURE_THORCHAIN_LENDING,
+    isViewOnly: true,
+  },
   {
     path: '/assets',
     label: 'navBar.assets',

src/Routes/helpers.ts

@@ -14,8 +14,9 @@ import type React from 'react'
 
 export enum RouteCategory {
   Featured = 'featured',
-  Wallet = 'wallet',
   Explore = 'explore',
+  Fox = 'fox',
+  Thorchain = 'thorchain',
 }
 
 export type Route = {
@@ -31,6 +32,7 @@ export type Route = {
   hideDesktop?: boolean
   breadcrumb?: string | React.ReactNode
   isNew?: boolean
+  isViewOnly?: boolean
   category?: RouteCategory
 } & (
   | {

src/assets/translations/en/main.json

@@ -141,6 +141,7 @@
     "buyNow": "Buy Now",
     "manage": "Manage",
     "view": "View",
+    "viewOnly": "View-Only",
     "selectedAccount": "Selected Account",
     "allChains": "All Chains",
     "wallet": "Wallet",
@@ -193,7 +194,8 @@
     "tbd": "TBD",
     "installed": "Installed",
     "others": "Others",
-    "hardwareWallets": "Hardware Wallets"
+    "hardwareWallets": "Hardware Wallets",
+    "viewOnly": "View-Only"
   },
   "consentBanner": {
     "body": {
@@ -589,6 +591,8 @@
     "assetStakingBalance": "%{assetSymbol} Staking Balance"
   },
   "navBar": {
+    "thorchain": "THORChain",
+    "fox": "fox",
     "home": "Home",
     "activity": "Activity",
     "myWallet": "My Wallet",
@@ -623,7 +627,7 @@
     "lending": "Lending",
     "pools": "Pools",
     "rFOX": "rFOX",
-    "foxBenefits": "FOX Benefits",
+    "foxEcosystem": "FOX Ecosystem",
     "markets": "Markets",
     "actionMenu": {
       "send": {

src/components/AccountDropdown/AccountChildOption.tsx

@@ -17,10 +17,11 @@ export const AccountChildOption = forwardRef<AccountChildRowProps, 'button'>(
   ({ accountId, title, cryptoBalance, symbol, children, onOptionClick, ...props }, ref) => {
     const color = useColorModeValue('black', 'white')
     const handleClick = useCallback(() => onOptionClick(accountId), [accountId, onOptionClick])
+
     return (
       <MenuItemOption ref={ref} color={color} onClick={handleClick} {...props}>
-        <Stack direction='row' justifyContent='space-between' fontSize='sm' spacing={4}>
-          <RawText fontWeight='bold' whiteSpace='nowrap'>
+        <Stack direction='row' fontSize='sm' spacing={4} width='full'>
+          <RawText fontWeight='bold' whiteSpace='nowrap' flex={1}>
             {title}
           </RawText>
           <Amount.Crypto

src/components/AccountDropdown/AccountDropdown.tsx

@@ -22,9 +22,11 @@ import type { FC } from 'react'
 import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useSelector } from 'react-redux'
+import { InlineCopyButton } from 'components/InlineCopyButton'
 import { bnOrZero } from 'lib/bignumber/bignumber'
 import { fromBaseUnit } from 'lib/math'
 import { isValidAccountNumber } from 'lib/utils/accounts'
+import { isUtxoAccountId } from 'lib/utils/utxo'
 import type { ReduxState } from 'state/reducer'
 import { accountIdToLabel } from 'state/slices/portfolioSlice/utils'
 import {
@@ -93,7 +95,6 @@ const MenuOptions = ({
   onClick,
 }: MenuOptionsProps) => {
   const { assetId, chainId } = asset
-
   const translate = useTranslate()
   const accountBalances = useSelector(selectPortfolioAccountBalancesBaseUnit)
   const accountMetadata = useSelector(selectPortfolioAccountMetadata)
@@ -149,14 +150,17 @@ const MenuOptions = ({
         // the account sub title uses an account id which is then converted to a chainId and pubkey
         // so for convenience and simplicity we can safely use the first account id here
         const [firstAccountId] = accountIds
-        const subtitle = accountIdToLabel(firstAccountId)
+        const isUtxo = isUtxoAccountId(firstAccountId)
 
         return (
           <React.Fragment key={accountNumber}>
-            <AccountSegment
-              title={translate('accounts.accountNumber', { accountNumber })}
-              subtitle={subtitle}
-            />
+            <Flex px={2} py={2}>
+              <AccountSegment
+                title={translate('accounts.accountNumber', { accountNumber })}
+                subtitle={isUtxo ? asset.name : accountIdToLabel(firstAccountId)}
+              />
+              {!isUtxo && <InlineCopyButton value={fromAccountId(firstAccountId).account} />}
+            </Flex>
             {sortedAccountIds.map((iterAccountId, index) => (
               <AccountChildOption
                 accountId={iterAccountId}

src/components/AccountDropdown/AccountSegement.tsx

@@ -10,12 +10,11 @@ type AccountGroupProps = {
 export const AccountSegment: FC<AccountGroupProps> = ({ title, subtitle }) => (
   <Stack
     direction='row'
-    px={4}
-    py={2}
     color='text.subtle'
     fontSize='sm'
     alignItems='center'
     justifyContent='space-between'
+    width='full'
   >
     <RawText>{title}</RawText>
     {subtitle && (

src/components/InlineCopyButton.tsx

@@ -1,7 +1,7 @@
 import { CheckIcon, CopyIcon } from '@chakra-ui/icons'
 import { Flex, IconButton } from '@chakra-ui/react'
 import type { MouseEvent, PropsWithChildren } from 'react'
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useCopyToClipboard } from 'hooks/useCopyToClipboard'
 
@@ -31,6 +31,19 @@ export const InlineCopyButton: React.FC<InlineCopyButtonProps> = ({
     [copyToClipboard, value],
   )
 
+  const buttonProps = useMemo(
+    () => ({
+      icon: isCopied ? checkIcon : copyIcon,
+      colorScheme: isCopied ? 'green' : 'gray',
+      size: 'xs',
+      variant: 'ghost',
+      fontSize: 'sm',
+      'aria-label': 'Copy value',
+      onClick: handleCopyClick,
+    }),
+    [handleCopyClick, isCopied],
+  )
+
   // Hide the copy button if it is disabled
   if (isDisabled) return <>{children}</>
 
@@ -39,26 +52,10 @@ export const InlineCopyButton: React.FC<InlineCopyButtonProps> = ({
       {children}
       {translate ? (
         <TooltipWithTouch label={translate(isCopied ? 'common.copied' : 'common.copy')}>
-          <IconButton
-            icon={isCopied ? checkIcon : copyIcon}
-            colorScheme={isCopied ? 'green' : 'gray'}
-            size='sm'
-            variant='ghost'
-            fontSize='xl'
-            aria-label='Copy value'
-            onClick={handleCopyClick}
-          />
+          <IconButton {...buttonProps} />
         </TooltipWithTouch>
       ) : (
-        <IconButton
-          icon={isCopied ? checkIcon : copyIcon}
-          colorScheme={isCopied ? 'green' : 'gray'}
-          size='sm'
-          variant='ghost'
-          fontSize='xl'
-          aria-label='Copy value'
-          onClick={handleCopyClick}
-        />
+        <IconButton {...buttonProps} />
       )}
     </Flex>
   )

src/components/Layout/Header/NavBar/MainNavLink.tsx

@@ -13,6 +13,7 @@ type SidebarLinkProps = {
   to?: NavLinkProps['to']
   isCompact?: boolean
   isNew?: boolean
+  isViewOnly?: boolean
   isActive?: boolean
 } & ButtonProps
 
@@ -25,9 +26,9 @@ const activeProp = {
 }
 
 export const MainNavLink = memo((props: SidebarLinkProps) => {
-  const { isCompact, onClick, isNew, label, isActive, buttonProps } = useMemo(() => {
-    const { isCompact, onClick, isNew, label, isActive, ...buttonProps } = props
-    return { isCompact, onClick, isNew, label, isActive, buttonProps }
+  const { isCompact, onClick, isNew, isViewOnly, label, isActive, buttonProps } = useMemo(() => {
+    const { isCompact, onClick, isNew, isViewOnly, label, isActive, ...buttonProps } = props
+    return { isCompact, onClick, isNew, isViewOnly, label, isActive, buttonProps }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, Object.values(props))
 
@@ -89,6 +90,11 @@ export const MainNavLink = memo((props: SidebarLinkProps) => {
             />
           </>
         )}
+        {isViewOnly && (
+          <Tag ml='auto' size='sm' colorScheme='blue' display={displayProp1}>
+            {translate('common.viewOnly')}
+          </Tag>
+        )}
       </Button>
     </Tooltip>
   )