Merge branch 'develop' into WALLET-388-cw-extension-input-field-is-wh…

…ite-after-selecting-suggested-option-on-dark-theme
make-software · Jul 24, 2024 · 7c9d14f · 7c9d14f
2 parents 5898568 + 07cdfbe
commit 7c9d14f
Show file tree

Hide file tree

Showing 20 changed files with 144 additions and 78 deletions.
diff --git a/src/apps/onboarding/pages/unlock-wallet/content.tsx b/src/apps/onboarding/pages/unlock-wallet/content.tsx
@@ -73,6 +73,7 @@ export function UnlockWalletPageContent({
             type={passwordInputType}
             placeholder={t('Password')}
             oneColoredIcons
+            autoFocus
             suffixIcon={
               <PasswordVisibilityIcon
                 passwordInputType={passwordInputType}

diff --git a/src/apps/popup/pages/account-settings/content.tsx b/src/apps/popup/pages/account-settings/content.tsx
@@ -1,8 +1,9 @@
+import { QRCodeCanvas } from 'qrcode.react';
 import React, { useCallback } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { RootState } from 'typesafe-actions';
 
 import { RouterPath, useTypedNavigate } from '@popup/router';
@@ -36,6 +37,7 @@ import {
 
 export function AccountSettingsPageContent() {
   const { t } = useTranslation();
+  const theme = useTheme();
 
   const { accountName } = useParams();
   const account = useSelector((state: RootState) =>
@@ -60,6 +62,16 @@ export function AccountSettingsPageContent() {
                 {accountInfoStandardName}
               </Typography>
             )}
+            <VerticalSpaceContainer top={SpacingSize.XL}>
+              <QRCodeCanvas
+                id="qrCode"
+                value={account.publicKey}
+                size={120}
+                fgColor={theme.color.contentPrimary}
+                bgColor={theme.color.backgroundPrimary}
+                level={'H'}
+              />
+            </VerticalSpaceContainer>
             <VerticalSpaceContainer top={SpacingSize.XL}>
               <FlexColumn gap={SpacingSize.Small}>
                 <Typography type="bodySemiBold">

diff --git a/src/apps/popup/pages/create-account/content.tsx b/src/apps/popup/pages/create-account/content.tsx
@@ -53,6 +53,7 @@ export function CreateAccountPageContent({
           error={!!errorMessage}
           validationText={errorMessage}
           autoComplete="off"
+          autoFocus
         />
       </InputsContainer>
     </ContentContainer>

diff --git a/src/apps/popup/pages/home/index.tsx b/src/apps/popup/pages/home/index.tsx
@@ -152,12 +152,12 @@ export function HomePageContent() {
           <Tab tabName={HomePageTabName.Tokens}>
             <TokensList />
           </Tab>
-          <Tab tabName={HomePageTabName.Deploys}>
-            <DeploysList />
-          </Tab>
           <Tab tabName={HomePageTabName.NFTs}>
             <NftList />
           </Tab>
+          <Tab tabName={HomePageTabName.Deploys}>
+            <DeploysList />
+          </Tab>
         </Tabs>
       </VerticalSpaceContainer>
     </ContentContainer>

diff --git a/src/apps/popup/pages/navigation-menu/index.tsx b/src/apps/popup/pages/navigation-menu/index.tsx
@@ -37,6 +37,7 @@ import {
   Modal,
   SvgIcon,
   ThemeSwitcher,
+  Tile,
   Typography
 } from '@libs/ui/components';
 
@@ -57,10 +58,15 @@ const ListItemClickableContainer = styled(
   }
 `;
 
-export const SpaceBetweenContainer = styled(SpaceBetweenFlexRow)`
+const SpaceBetweenContainer = styled(SpaceBetweenFlexRow)`
   align-items: center;
 `;
 
+const LogoContainer = styled.div`
+  padding: 24px 18px;
+  margin: 16px 0;
+`;
+
 interface MenuItem {
   id: number;
   title: string;
@@ -291,6 +297,13 @@ export function NavigationMenuPageContent() {
           },
           {
             id: 2,
+            title: t('User guides'),
+            iconPath: 'assets/icons/books.svg',
+            href: 'https://casperwallet.io/user-guide',
+            disabled: false
+          },
+          {
+            id: 3,
             title: t('About us'),
             iconPath: 'assets/icons/team.svg',
             href: 'https://make.services/',
@@ -380,6 +393,15 @@ export function NavigationMenuPageContent() {
           />
         )
       )}
+      <Tile>
+        <LogoContainer>
+          <SvgIcon
+            src="assets/icons/casper-wallet-text-logo.svg"
+            width={129}
+            height={32}
+          />
+        </LogoContainer>
+      </Tile>
     </ContentContainer>
   );
 }
diff --git a/src/apps/popup/pages/stakes/amount-step.tsx b/src/apps/popup/pages/stakes/amount-step.tsx
@@ -126,6 +126,7 @@ export const AmountStep = ({
           rightLabel={fiatAmount}
           type="number"
           monotype
+          autoFocus
           placeholder={t('0.00')}
           suffixText={'CSPR'}
           {...register('amount')}

diff --git a/src/apps/popup/pages/transfer/amount-step.tsx b/src/apps/popup/pages/transfer/amount-step.tsx
@@ -172,6 +172,7 @@ export const AmountStep = ({
           suffixText={selectedToken?.symbol}
           {...register('amount')}
           disabled={!isErc20Transfer && disabled}
+          autoFocus
           onChange={e => {
             onChangeCSPRAmount(e);
             setAmount(e.target.value);

diff --git a/src/assets/icons/books.svg b/src/assets/icons/books.svg
diff --git a/src/assets/icons/connected-dark.svg b/src/assets/icons/connected-dark.svg
diff --git a/src/assets/icons/connected-light.svg b/src/assets/icons/connected-light.svg
diff --git a/src/libs/layout/header/header-connection-status.tsx b/src/libs/layout/header/header-connection-status.tsx
@@ -7,16 +7,18 @@ import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
 import { AlignedFlexRow, SpacingSize } from '@libs/layout';
 import {
   AccountList,
+  Avatar,
   Hash,
   HashVariant,
   Modal,
   SvgIcon
 } from '@libs/ui/components';
+import { hexToRGBA } from '@libs/ui/utils';
 
 const ConnectionStatusContainer = styled(AlignedFlexRow)`
   width: fit-content;
 
-  background-color: rgb(0, 0, 0, 0.16);
+  background-color: ${({ theme }) => hexToRGBA(theme.color.black, '0.24')};
   padding: 6px 8px 6px 14px;
   border-top-right-radius: ${({ theme }) => theme.borderRadius.hundred}px;
   border-bottom-right-radius: ${({ theme }) => theme.borderRadius.hundred}px;
@@ -25,7 +27,15 @@ const ConnectionStatusContainer = styled(AlignedFlexRow)`
   left: -2px;
 `;
 
-export function HeaderConnectionStatus() {
+interface HeaderConnectionStatusProps {
+  publicKey: string;
+  isConnected: boolean;
+}
+
+export function HeaderConnectionStatus({
+  publicKey,
+  isConnected
+}: HeaderConnectionStatusProps) {
   const activeAccount = useSelector(selectVaultActiveAccount);
 
   return (
@@ -36,22 +46,31 @@ export function HeaderConnectionStatus() {
         <AccountList closeModal={closeModal} />
       )}
       children={({ isOpen }) => (
-        <ConnectionStatusContainer gap={SpacingSize.Tiny}>
-          <Hash
-            value={activeAccount?.publicKey!}
-            variant={HashVariant.ListSubtextHash}
-            truncated
-            withoutTooltip
-            color="contentOnFill"
-            withCopyOnSelfClick={false}
-          />
-          <SvgIcon
-            size={16}
-            src="assets/icons/chevron-up.svg"
-            flipByAxis={isOpen ? undefined : 'X'}
-            color="contentOnFill"
+        <>
+          <Avatar
+            size={32}
+            publicKey={publicKey}
+            withConnectedStatus
+            isConnected={isConnected}
+            displayContext="header"
           />
-        </ConnectionStatusContainer>
+          <ConnectionStatusContainer gap={SpacingSize.Tiny}>
+            <Hash
+              value={activeAccount?.publicKey!}
+              variant={HashVariant.ListSubtextHash}
+              truncated
+              withoutTooltip
+              color="contentOnFill"
+              withCopyOnSelfClick={false}
+            />
+            <SvgIcon
+              size={16}
+              src="assets/icons/chevron-up.svg"
+              flipByAxis={isOpen ? undefined : 'X'}
+              color="contentOnFill"
+            />
+          </ConnectionStatusContainer>
+        </>
       )}
     />
   );

diff --git a/src/libs/layout/header/header-network-switcher.tsx b/src/libs/layout/header/header-network-switcher.tsx
@@ -13,7 +13,7 @@ import { Modal, SvgIcon, Typography } from '@libs/ui/components';
 import { hexToRGBA } from '@libs/ui/utils';
 
 const NetworkSwitcherContainer = styled(AlignedFlexRow)`
-  background-color: ${({ theme }) => hexToRGBA(theme.color.black, '0.16')};
+  background-color: ${({ theme }) => hexToRGBA(theme.color.black, '0.24')};
   padding: 6px 8px;
   border-radius: ${({ theme }) => theme.borderRadius.hundred}px;
 `;
@@ -106,8 +106,12 @@ export const HeaderNetworkSwitcher = () => {
           <SvgIcon
             src="assets/icons/network.svg"
             size={16}
-            color="contentOnFill"
             dataTestId="network-switcher"
+            color={
+              activeNetwork === NetworkSetting.Testnet
+                ? 'contentLightBlue'
+                : 'contentLightRed'
+            }
           />
           <Typography type="listSubtext" color="contentOnFill">
             {activeNetwork}

diff --git a/src/libs/layout/header/header-popup.tsx b/src/libs/layout/header/header-popup.tsx
@@ -7,12 +7,8 @@ import {
   selectVaultActiveAccount
 } from '@background/redux/vault/selectors';
 
-import {
-  AlignedFlexRow,
-  AlignedSpaceBetweenFlexRow,
-  HeaderContainer
-} from '@libs/layout';
-import { Avatar, SvgIcon } from '@libs/ui/components';
+import { AlignedSpaceBetweenFlexRow, HeaderContainer } from '@libs/layout';
+import { SvgIcon } from '@libs/ui/components';
 
 import { HeaderActions } from './header-actions';
 import { HeaderConnectionStatus } from './header-connection-status';
@@ -51,16 +47,10 @@ export function HeaderPopup({
     <>
       <HeaderContainer>
         {withConnectionStatus && activeAccount?.publicKey ? (
-          <AlignedFlexRow>
-            <Avatar
-              size={32}
-              publicKey={activeAccount.publicKey}
-              withConnectedStatus
-              isConnected={isActiveAccountConnected}
-              displayContext="header"
-            />
-            <HeaderConnectionStatus />
-          </AlignedFlexRow>
+          <HeaderConnectionStatus
+            publicKey={activeAccount.publicKey}
+            isConnected={isActiveAccountConnected}
+          />
         ) : (
           <SvgIcon
             src="assets/icons/wallet-original-on-white.svg"

diff --git a/src/libs/layout/unlock-protected-page-content/index.tsx b/src/libs/layout/unlock-protected-page-content/index.tsx
@@ -78,6 +78,7 @@ export const UnlockProtectedPageContent = ({
           placeholder={t('Password')}
           error={!!errors.password}
           validationText={errors.password?.message}
+          autoFocus
           suffixIcon={
             <PasswordVisibilityIcon
               passwordInputType={passwordInputType}

diff --git a/src/libs/layout/unlock-vault/content.tsx b/src/libs/layout/unlock-vault/content.tsx
@@ -100,6 +100,7 @@ export function UnlockVaultPageContent({
           placeholder={t('Password')}
           error={!!errors.password}
           validationText={errors.password?.message}
+          autoFocus
           suffixIcon={
             <PasswordVisibilityIcon
               passwordInputType={passwordInputType}

diff --git a/src/libs/ui/components/avatar/avatar.tsx b/src/libs/ui/components/avatar/avatar.tsx
@@ -32,6 +32,34 @@ export const BackgroundWrapper = styled.div(
   })
 );
 
+const ConnectIcon = styled(SvgIcon)<{
+  displayContext?: 'header' | 'accountList';
+  isDarkMode: boolean;
+  color: string;
+}>`
+  position: absolute;
+  bottom: ${({ displayContext }) =>
+    displayContext === 'header'
+      ? '-4px'
+      : displayContext === 'accountList'
+        ? '-2px'
+        : '-5px'};
+  right: ${({ displayContext }) =>
+    displayContext === 'header'
+      ? '-4px'
+      : displayContext === 'accountList'
+        ? '-2px'
+        : '-5px'};
+  svg > circle {
+    stroke: ${({ isDarkMode, displayContext, theme }) =>
+      displayContext === 'header'
+        ? isDarkMode
+          ? '#A30D18'
+          : '#CF111F'
+        : theme.color.backgroundPrimary};
+  }
+`;
+
 interface AvatarTypes {
   publicKey: string;
   size: number;
@@ -78,28 +106,15 @@ export const Avatar = ({
           isConnected={isConnected}
           borderRadius={borderRadius}
         />
-        <SvgIcon
+        <ConnectIcon
           src={connectIcon}
           size={
             displayContext === 'header' || displayContext === 'accountList'
               ? 12
               : 16
           }
-          style={{
-            position: 'absolute',
-            bottom:
-              displayContext === 'header'
-                ? '-4px'
-                : displayContext === 'accountList'
-                  ? '-2px'
-                  : '-5px',
-            right:
-              displayContext === 'header'
-                ? '-4px'
-                : displayContext === 'accountList'
-                  ? '-2px'
-                  : '-5px'
-          }}
+          isDarkMode={isDarkMode}
+          displayContext={displayContext}
           color={isConnected ? 'contentPositive' : 'contentDisabled'}
         />
       </ConnectionStatusBadgeContainer>