Merge pull request #4356 from leather-wallet/release/brand-audit

release: brand audit
leather-io · Oct 13, 2023 · ab6964e · ab6964e
2 parents eaa1b12 + 1a86b85
commit ab6964e
Show file tree

Hide file tree

Showing 18 changed files with 122 additions and 45 deletions.
diff --git a/.github/workflows/create-version.yml b/.github/workflows/create-version.yml
@@ -66,3 +66,12 @@ jobs:
         with:
           name: release-notes
           path: release-notes.txt
+
+      - name: Merge main -> dev
+        uses: devmasx/merge-branch@master
+        continue-on-error: true
+        with:
+          type: now
+          from_branch: main
+          target_branch: dev
+          github_token: ${{ secrets.SEMANTIC_RELEASE_TOKEN }}
diff --git a/src/app/components/address-displayer/address-displayer.layout.tsx b/src/app/components/address-displayer/address-displayer.layout.tsx
@@ -7,7 +7,7 @@ interface AddressDisplayerLayoutProps {
 export function AddressDisplayerLayout({ isEven, ...props }: AddressDisplayerLayoutProps) {
   return (
     <styled.span
-      color={isEven ? 'accent.text-primary' : 'accent.border-hover'}
+      color={isEven ? 'accent.text-primary' : 'accent.text-subdued'}
       fontFamily="Fira Code"
       mr="tight"
       lineHeight="24px"

diff --git a/src/app/components/drawer/components/drawer-header.tsx b/src/app/components/drawer/components/drawer-header.tsx
@@ -1,5 +1,4 @@
-import { Box, Flex } from '@stacks/ui';
-import { styled } from 'leather-styles/jsx';
+import { Box, Flex, styled } from 'leather-styles/jsx';
 import { useHover } from 'use-events';
 
 import { ArrowLeftIcon } from '@app/components/icons/arrow-left-icon';
@@ -29,22 +28,15 @@ export function DrawerHeader({
   const [isHovered, bind] = useHover();
 
   return (
-    <Flex
-      pb="base"
-      justifyContent="space-between"
-      alignItems="center"
-      pt="loose"
-      px="loose"
-      {...bind}
-    >
+    <Flex justifyContent="space-between" alignItems="center" p="space.04" {...bind}>
       {enableGoBack ? (
         <HeaderActionButton
           icon={<ArrowLeftIcon />}
           isWaitingOnPerformedAction={isWaitingOnPerformedAction}
           onAction={onGoBack}
         />
       ) : (
-        <Box size="36px" />
+        <Box width="36px" height="36px" />
       )}
       {icon && icon}
       {title && <styled.h1 textStyle="heading.05">{title}</styled.h1>}

diff --git a/src/app/components/drawer/controlled-drawer.tsx b/src/app/components/drawer/controlled-drawer.tsx
@@ -17,6 +17,9 @@ export function ControlledDrawer(props: ControlledDrawerProps) {
 
   return (
     <BaseDrawer
+      height="100vh"
+      position={['absolute', 'fixed']}
+      top={['-24px', 0]}
       enableGoBack={enableGoBack}
       icon={icon}
       isShowing={isShowing}

diff --git a/src/app/features/activity-list/activity-list.tsx b/src/app/features/activity-list/activity-list.tsx
@@ -16,6 +16,7 @@ import { convertBitcoinTxsToListType, convertStacksTxsToListType } from './activ
 import { NoAccountActivity } from './components/no-account-activity';
 import { PendingTransactionList } from './components/pending-transaction-list/pending-transaction-list';
 import { SubmittedTransactionList } from './components/submitted-transaction-list/submitted-transaction-list';
+import { ActivityListTabWrapper } from './components/tab-wrapper';
 import { TransactionList } from './components/transaction-list/transaction-list';
 
 // TODO: temporary really ugly fix while we address conditional data problem of
@@ -94,12 +95,22 @@ export function ActivityList() {
 
   const hasTxs = hasSubmittedTransactions || hasPendingTransactions || hasTransactions;
 
-  if (isInitialLoading) return <LoadingSpinner />;
+  if (isInitialLoading)
+    return (
+      <ActivityListTabWrapper padContent>
+        <LoadingSpinner />
+      </ActivityListTabWrapper>
+    );
 
-  if (!hasTxs) return <NoAccountActivity />;
+  if (!hasTxs)
+    return (
+      <ActivityListTabWrapper padContent>
+        <NoAccountActivity />
+      </ActivityListTabWrapper>
+    );
 
   return (
-    <>
+    <ActivityListTabWrapper>
       {hasSubmittedTransactions && <SubmittedTransactionList txs={submittedTransactions} />}
       {hasPendingTransactions && (
         <PendingTransactionList
@@ -114,6 +125,6 @@ export function ActivityList() {
           currentBitcoinAddress={nsBitcoinAddress}
         />
       )}
-    </>
+    </ActivityListTabWrapper>
   );
 }
diff --git a/src/app/features/activity-list/components/no-account-activity.tsx b/src/app/features/activity-list/components/no-account-activity.tsx
@@ -1,11 +1,11 @@
 import NoActivity from '@assets/images/no-activity.png';
-import { Stack } from '@stacks/ui';
+import { Stack } from 'leather-styles/jsx';
 
 import { Caption } from '@app/components/typography';
 
 export function NoAccountActivity() {
   return (
-    <Stack py="extra-loose" spacing="extra-loose" justifyContent="center" alignItems="center">
+    <Stack gap="space.06" justifyContent="center" alignItems="center">
       <img src={NoActivity} width="120px" />
       <Caption maxWidth="23ch" textAlign="center">
         No activity yet

diff --git a/src/app/features/activity-list/components/tab-wrapper.tsx b/src/app/features/activity-list/components/tab-wrapper.tsx
@@ -0,0 +1,18 @@
+import { Box } from 'leather-styles/jsx';
+
+interface ActivityListTabWrapperProps {
+  children: React.ReactNode;
+  padContent?: boolean;
+}
+
+export function ActivityListTabWrapper({
+  children,
+  padContent = false,
+}: ActivityListTabWrapperProps) {
+  return (
+    // Height set based on the height of the empty assets screen
+    <Box minHeight="477px" py={padContent ? 'space.11' : undefined}>
+      {children}
+    </Box>
+  );
+}
diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx
@@ -1,8 +1,8 @@
 import { Outlet } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 
-import { Box, Stack } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
+import { Stack } from 'leather-styles/jsx';
 
 import { LEDGER_BITCOIN_ENABLED } from '@shared/environment';
 
@@ -27,22 +27,22 @@ export function AssetsList() {
   const navigate = useNavigate();
 
   return (
-    <Stack pb="extra-loose" spacing="loose" data-testid={HomePageSelectors.BalancesList}>
+    <Stack pb="space.06" gap="space.05" data-testid={HomePageSelectors.BalancesList}>
       {/* Temporary duplication during Ledger Bitcoin feature dev */}
       {whenWallet({
         software: (
           <CryptoCurrencyAssetItem
             assetBalance={btcAvailableAssetBalance}
             usdBalance={btcAvailableUsdBalance}
-            icon={<Box as={BtcIcon} />}
+            icon={<BtcIcon />}
             address={btcAddress}
           />
         ),
         ledger: LEDGER_BITCOIN_ENABLED ? (
           <CryptoCurrencyAssetItem
             assetBalance={btcAvailableAssetBalance}
             usdBalance={btcAvailableUsdBalance}
-            icon={<Box as={BtcIcon} />}
+            icon={<BtcIcon />}
             address={btcAddress}
             // add conditionally if not bitcoin keys
             isPressable={!btcAddress}

diff --git a/src/app/features/collectibles/components/collectibes.layout.tsx b/src/app/features/collectibles/components/collectibes.layout.tsx
@@ -1,8 +1,9 @@
-import { Flex, Grid, Spinner, color } from '@stacks/ui';
+import { Spinner } from '@stacks/ui';
+import { Flex, Grid, HStack, styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { RefreshIcon } from '@app/components/icons/refresh-icon';
 import { LoadingSpinner } from '@app/components/loading-spinner';
-import { Caption } from '@app/components/typography';
 
 interface CollectiblesLayoutProps {
   title: string;
@@ -17,20 +18,20 @@ export function CollectiblesLayout(props: CollectiblesLayoutProps) {
   return (
     <>
       <Flex flexDirection="row" justifyContent="space-between" flex={1}>
-        <Flex columnGap="8px">
-          <Caption>{title}</Caption>
+        <HStack columnGap="space.02">
+          <styled.span textStyle="label.01">{title}</styled.span>
           {isLoading ? (
-            <Spinner color={color('text-caption')} opacity={0.5} size="16px" />
+            <Spinner color={token('colors.accent.text-primary')} opacity={0.5} size="16px" />
           ) : (
             <RefreshIcon cursor="pointer" onClick={() => onRefresh()} />
           )}
-        </Flex>
+        </HStack>
         {subHeader}
       </Flex>
       <Grid
-        gap="base"
-        rowGap="extra-loose"
-        templateColumns={[
+        gap="space.04"
+        rowGap="space.06"
+        gridTemplateColumns={[
           'repeat(auto-fill, minmax(164px, 1fr))',
           'repeat(auto-fill, minmax(184px, 1fr))',
         ]}

diff --git a/src/app/features/switch-account-drawer/components/create-account-action.tsx b/src/app/features/switch-account-drawer/components/create-account-action.tsx
@@ -7,7 +7,15 @@ interface CreateAccountActionProps {
 }
 export function CreateAccountAction({ onCreateAccount }: CreateAccountActionProps) {
   return (
-    <Flex py="space.05" px="space.05" flexGrow="1">
+    <Flex
+      mt="100px"
+      py="space.05"
+      px="space.05"
+      flexGrow="1"
+      position="fixed"
+      bottom={0}
+      width="100%"
+    >
       <LeatherButton fullWidth onClick={() => onCreateAccount()}>
         Create new account
       </LeatherButton>

diff --git a/src/app/features/switch-account-drawer/components/switch-account-list.tsx b/src/app/features/switch-account-drawer/components/switch-account-list.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { Box } from '@stacks/ui';
+import { Box } from 'leather-styles/jsx';
 
 import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
 
@@ -21,7 +21,7 @@ export const SwitchAccountList = memo(
         style={{ paddingTop: '24px', height: '70vh' }}
         totalCount={accounts.length}
         itemContent={index => (
-          <Box mx={['base-loose', 'extra-loose']} key={accounts[index].address ?? index}>
+          <Box mx={['space.05', 'space.06']} key={accounts[index].address ?? index}>
             <SwitchAccountListItem handleClose={handleClose} account={accounts[index]} />
           </Box>
         )}

diff --git a/src/app/features/switch-account-drawer/switch-account-drawer.tsx b/src/app/features/switch-account-drawer/switch-account-drawer.tsx
@@ -33,7 +33,11 @@ export const SwitchAccountDrawer = memo(() => {
 
   return isShowing && accounts ? (
     <ControlledDrawer title="Select account" isShowing={isShowing} onClose={onClose}>
-      <Box mb={whenWallet({ ledger: 'base', software: '' })}>
+      <Box
+        mb={whenWallet({ ledger: 'base', software: '' })}
+        height={['100vh', '100%']}
+        maxHeight={['110vh', 'inherit']}
+      >
         <SwitchAccountList
           accounts={accounts}
           currentAccountIndex={currentAccountIndex}

diff --git a/src/app/pages/onboarding/sign-in/sign-in.tsx b/src/app/pages/onboarding/sign-in/sign-in.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { RouteUrls } from '@shared/route-urls';
@@ -15,19 +15,23 @@ export function SignIn() {
   const navigate = useNavigate();
 
   const [twentyFourWordMode, setTwentyFourWordMode] = useState(true);
-  const [mnemonic, setMnemonic] = useState<(string | null)[]>(() => createNullArrayOfLength(24));
+  const [mnemonic, setMnemonic] = useState<(string | null)[]>([]);
 
   useRouteHeader(<Header onClose={() => navigate(RouteUrls.Onboarding)} hideActions />);
 
+  useEffect(() => {
+    const emptyMnemonicArray = twentyFourWordMode
+      ? createNullArrayOfLength(24)
+      : createNullArrayOfLength(12);
+    setMnemonic(emptyMnemonicArray);
+  }, [twentyFourWordMode]);
+
   return (
     <>
       <TwoColumnLayout
         leftColumn={
           <SignInContent
-            onClick={() => {
-              setTwentyFourWordMode(!twentyFourWordMode);
-              setMnemonic(createNullArrayOfLength(twentyFourWordMode ? 24 : 12));
-            }}
+            onClick={() => setTwentyFourWordMode(!twentyFourWordMode)}
             twentyFourWordMode={twentyFourWordMode}
           />
         }

diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx
@@ -4,6 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useClipboard } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
 import { Box, styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 import get from 'lodash.get';
 
 import { RouteUrls } from '@shared/route-urls';
@@ -62,7 +63,13 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) {
     );
 
   return (
-    <BaseDrawer title="" isShowing onClose={() => navigate('../')}>
+    <BaseDrawer
+      position={['absolute', 'fixed']}
+      top={[token('spacing.space.07'), 0]}
+      title=""
+      isShowing
+      onClose={() => navigate('../')}
+    >
       <Box mx="space.06">
         <styled.h1 mb="space.05" textStyle="heading.03">
           {title}

diff --git a/src/shared/constants.ts b/src/shared/constants.ts
@@ -33,6 +33,7 @@ export enum WalletDefaultNetworkConfigurationIds {
   mainnet = 'mainnet',
   testnet = 'testnet',
   signet = 'signet',
+  sbtcDevenv = 'sbtcDevenv',
   devnet = 'devnet',
 }
 
@@ -137,6 +138,23 @@ const networkSignet: NetworkConfiguration = {
   },
 };
 
+const networkSbtcDevenv: NetworkConfiguration = {
+  id: WalletDefaultNetworkConfigurationIds.sbtcDevenv,
+  name: 'sBTC Devenv',
+  chain: {
+    stacks: {
+      blockchain: 'stacks',
+      chainId: ChainID.Testnet,
+      url: 'http://localhost:3999',
+    },
+    bitcoin: {
+      blockchain: 'bitcoin',
+      network: 'regtest',
+      url: 'http://localhost:8999/api',
+    },
+  },
+};
+
 const networkDevnet: NetworkConfiguration = {
   id: WalletDefaultNetworkConfigurationIds.devnet,
   name: 'Devnet',
@@ -163,6 +181,7 @@ export const defaultNetworksKeyedById: Record<
   [WalletDefaultNetworkConfigurationIds.mainnet]: networkMainnet,
   [WalletDefaultNetworkConfigurationIds.testnet]: networkTestnet,
   [WalletDefaultNetworkConfigurationIds.signet]: networkSignet,
+  [WalletDefaultNetworkConfigurationIds.sbtcDevenv]: networkSbtcDevenv,
   [WalletDefaultNetworkConfigurationIds.devnet]: networkDevnet,
 };
 

diff --git a/tests/specs/onboarding/onboarding.spec.ts b/tests/specs/onboarding/onboarding.spec.ts
@@ -55,12 +55,10 @@ test.describe('Onboarding an existing user', () => {
     // enter some key partial
     const validPartialKey = 'shoulder any pencil';
     await onboardingPage.signInMnemonicKey(validPartialKey);
-    const signInButton = await onboardingPage.page.getByTestId(OnboardingSelectors.SignInBtn);
     const signInSeedError = await onboardingPage.page.getByTestId(
       OnboardingSelectors.SignInSeedError
     );
     await test.expect(signInSeedError).not.toBeVisible();
-    await test.expect(signInButton).toBeDisabled();
   });
 
   test('Activity tab', async ({ extensionId, globalPage, onboardingPage, homePage }) => {

diff --git a/tests/specs/settings/settings-menu.spec.ts b/tests/specs/settings/settings-menu.spec.ts
@@ -66,6 +66,6 @@ test.describe('Settings menu', () => {
     await page.getByTestId(SettingsSelectors.ChangeNetworkAction).click();
     await page.waitForTimeout(850);
     const networkListItems = await page.getByTestId(SettingsSelectors.NetworkListItem).all();
-    test.expect(networkListItems).toHaveLength(4);
+    test.expect(networkListItems).toHaveLength(5);
   });
 });
diff --git a/theme/global/radix-styles.ts b/theme/global/radix-styles.ts
@@ -91,6 +91,9 @@ export const radixTabStyles = {
   },
   '.rt-TabsTrigger': {
     flex: 1,
+    '& :hover::before': {
+      backgroundColor: 'accent.component-background-hover',
+    },
   },
   '.rt-TabsTriggerInner': {
     width: '100%',