feat(ng): dapp connection screen (#480)

Author: meeh0w

apps/next/src/components/WalletCard/Styled.tsx

@@ -0,0 +1,70 @@
+import {
+  accordionSummaryClasses,
+  Accordion as K2Accordion,
+  AccordionDetails as K2AccordionDetails,
+  AccordionSummary as K2AccordionSummary,
+  styled,
+  typographyClasses,
+} from '@avalabs/k2-alpine';
+import { MdError } from 'react-icons/md';
+
+export const Accordion = styled(K2Accordion)(({ theme }) => ({
+  marginBottom: theme.spacing(0),
+  borderRadius: theme.shape.mediumBorderRadius,
+  boxShadow: '0px 5px 30px 0px rgba(0, 0, 0, 0.15)',
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.surface.primary
+      : theme.palette.background.paper,
+}));
+
+export const AccordionSummary = styled(K2AccordionSummary)(({ theme }) => ({
+  [`&.${accordionSummaryClasses.root}`]: {
+    minHeight: 42,
+    height: 42,
+    paddingBlock: theme.spacing(1),
+    paddingInline: theme.spacing(1.5),
+    justifyContent: 'unset',
+  },
+  '& .accordion-header-container': {
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    [`& > .${typographyClasses.root}`]: {
+      width: '100%',
+    },
+  },
+  '& .accordion-header-icon': {
+    display: 'flex',
+    margin: 0,
+    lineHeight: 1,
+  },
+  [`& .${accordionSummaryClasses.content}`]: {
+    margin: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  [`& .${accordionSummaryClasses.expandIconWrapper}`]: {
+    color: theme.palette.text.disabled,
+  },
+}));
+
+export const AccordionDetails = styled(K2AccordionDetails)(({ theme }) => ({
+  paddingInline: theme.spacing(1.5),
+}));
+
+export const ErrorIcon = styled(MdError)(({ theme }) => ({
+  color: theme.palette.error.main,
+  flexShrink: 0,
+}));
+
+export const Shrinkable = styled('span')(({ theme }) => ({
+  width: '100%',
+  opacity: 1,
+  transition: theme.transitions.create(['width', 'opacity']),
+
+  [`.${accordionSummaryClasses.root}:hover &`]: {
+    width: '0%',
+    opacity: 0,
+  },
+}));

apps/next/src/pages/AccountManagement/components/Wallets/components/WalletCard.tsx renamed to apps/next/src/components/WalletCard/WalletCard.tsx

@@ -1,17 +1,30 @@
-import { CircularProgress, Stack, Typography } from '@avalabs/k2-alpine';
+import {
+  CircularProgress,
+  Stack,
+  Typography,
+  TypographyProps,
+} from '@avalabs/k2-alpine';
 import { WalletDetails } from '@core/types';
 import { useSettingsContext, useWalletTotalBalance } from '@core/ui';
-import { cloneElement, FC, ReactElement, useState } from 'react';
+import {
+  cloneElement,
+  FC,
+  MouseEventHandler,
+  PropsWithChildren,
+  ReactElement,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
-import { RenamableTitle } from '../../RenamableTitle';
+import { RenamableTitle } from '../../pages/AccountManagement/components/RenamableTitle';
 import * as Styled from './Styled';
 import { WalletIconProps } from '@/components/WalletIcon';
-interface WalletCardProps {
+import { useHistory } from 'react-router-dom';
+import { URL_SEARCH_TOKENS } from '@/pages/AccountManagement/utils/searchParams';
+interface WalletCardProps extends PropsWithChildren {
   id: WalletDetails['id'];
   name: WalletDetails['name'];
   icon: ReactElement<WalletIconProps>;
   initialExpanded: boolean;
-  children: ReactElement[];
   disableRename?: boolean;
 }
 
@@ -24,12 +37,30 @@ export const WalletCard: FC<WalletCardProps> = ({
   name,
 }) => {
   const { t } = useTranslation();
+  const { push } = useHistory();
   const { isLoading, hasErrorOccurred, totalBalanceInCurrency } =
     useWalletTotalBalance(id);
   const { currencyFormatter } = useSettingsContext();
 
   const [isExpanded, setIsExpanded] = useState(initialExpanded);
-  const Title = disableRename ? Typography : RenamableTitle;
+  const sharedTitleProps: TypographyProps = {
+    width: 1,
+    variant: 'subtitle3',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  };
+
+  const handleRename: MouseEventHandler<HTMLButtonElement> = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    push({
+      pathname: '/account-management/rename',
+      search: new URLSearchParams({
+        [URL_SEARCH_TOKENS.wallet]: id,
+      }).toString(),
+    });
+  };
 
   return (
     <>
@@ -48,17 +79,13 @@ export const WalletCard: FC<WalletCardProps> = ({
             gap={0.5}
             width="calc(100% - 32px)"
           >
-            <Title
-              type="wallet"
-              tokenId={id}
-              width={1}
-              variant="subtitle3"
-              whiteSpace="nowrap"
-              overflow="hidden"
-              textOverflow="ellipsis"
-            >
-              {name}
-            </Title>
+            {disableRename ? (
+              <Typography {...sharedTitleProps}>{name}</Typography>
+            ) : (
+              <RenamableTitle {...sharedTitleProps} onRename={handleRename}>
+                {name}
+              </RenamableTitle>
+            )}
             {isLoading && <CircularProgress size={14} />}
             {!isLoading && !hasErrorOccurred && (
               <Typography variant="body3" color="text.disabled">

apps/next/src/components/WalletCard/index.ts

@@ -0,0 +1 @@
+export { WalletCard } from './WalletCard';

apps/next/src/localization/locales/en/translation.json

@@ -25,6 +25,7 @@
   "Accounts deleted": "Accounts deleted",
   "Accounts updated": "Accounts updated",
   "Action was not approved. Please try again.": "Action was not approved. Please try again.",
+  "Active account is accessible by default": "Active account is accessible by default",
   "Activity": "Activity",
   "Add Avalanche C-Chain Address": "Add Avalanche C-Chain Address",
   "Add Avalanche X/P-Chain Address": "Add Avalanche X/P-Chain Address",
@@ -33,6 +34,7 @@
   "Add RPC URL": "Add RPC URL",
   "Add Solana": "Add Solana",
   "Add Solana Address": "Add Solana Address",
+  "Add Solana accounts first to use the Solana network": "Add Solana accounts first to use the Solana network",
   "Add Token": "Add Token",
   "Add a display name for your wallet. You can change it at any time in the settings.": "Add a display name for your wallet. You can change it at any time in the settings.",
   "Add a name so that it is easier to find later.": "Add a name so that it is easier to find later.",
@@ -66,7 +68,6 @@
   "Approval transaction failed": "Approval transaction failed",
   "Approve": "Approve",
   "Approves all {{token}}": "Approves all {{token}}",
-  "Approving will give this dApp access to your active account.": "Approving will give this dApp access to your active account.",
   "Are you sure that you want to cancel this request?": "Are you sure that you want to cancel this request?",
   "Are you sure you want to delete selected accounts?": "Are you sure you want to delete selected accounts?",
   "Are you sure you want to delete this contact?": "Are you sure you want to delete this contact?",
@@ -130,11 +131,15 @@
   "Confirm addresses": "Confirm addresses",
   "Confirm new password": "Confirm new password",
   "Confirm password": "Confirm password",
+  "Connect": "Connect",
+  "Connect 1 account": "Connect 1 account",
   "Connect the Ledger device to your computer": "Connect the Ledger device to your computer",
   "Connect with WalletConnect": "Connect with WalletConnect",
   "Connect your Keystone": "Connect your Keystone",
   "Connect your Ledger": "Connect your Ledger",
   "Connect your Ledger device and open the Avalanche app": "Connect your Ledger device and open the Avalanche app",
+  "Connect {{count}} accounts": "Connect {{count}} accounts",
+  "Connect {{count}} accounts_plural": "Connect {{count}} accounts",
   "Connected": "Connected",
   "Connected sites": "Connected sites",
   "Contact created": "Contact created",
@@ -160,6 +165,7 @@
   "Could not connect.": "Could not connect.",
   "Could not swap {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}": "Could not swap {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}",
   "Create new account": "Create new account",
+  "Creating Solana addresses...": "Creating Solana addresses...",
   "Currency": "Currency",
   "Current password": "Current password",
   "Current password is incorrect": "Current password is incorrect",
@@ -187,6 +193,7 @@
   "Do not share this phrase with anyone! These words can be used to steal all your accounts.": "Do not share this phrase with anyone! These words can be used to steal all your accounts.",
   "Do you really want to save?": "Do you really want to save?",
   "Do you want to add Solana to your wallet?": "Do you want to add Solana to your wallet?",
+  "Do you want to allow <b>{{dappUrl}}</b> to access your wallet?": "Do you want to allow <b>{{dappUrl}}</b> to access your wallet?",
   "Do you want to sign this message?": "Do you want to sign this message?",
   "Done": "Done",
   "Download Ledger Live to update": "Download Ledger Live to update",
@@ -533,6 +540,7 @@
   "Sending this token is not supported yet.": "Sending this token is not supported yet.",
   "Sending this type of token is not supported by Core": "Sending this type of token is not supported by Core",
   "Set a limit that you will allow to automatically spend.": "Set a limit that you will allow to automatically spend.",
+  "Set up": "Set up",
   "Settings": "Settings",
   "Show me Trending Tokens": "Show me Trending Tokens",
   "Show password": "Show password",
@@ -545,6 +553,7 @@
   "Slippage tolerance exceeded, increase the slippage and try again.": "Slippage tolerance exceeded, increase the slippage and try again.",
   "Slow": "Slow",
   "Solana": "Solana",
+  "Solana is not supported by this wallet": "Solana is not supported by this wallet",
   "Some of the required parameters are invalid.": "Some of the required parameters are invalid.",
   "Some of the required parameters are missing.": "Some of the required parameters are missing.",
   "Something bad happened please try again later!": "Something bad happened please try again later!",
@@ -603,6 +612,7 @@
   "This token contract is missing a required method.": "This token contract is missing a required method.",
   "This transaction has been flagged as malicious. <span>I understand the risk and want to proceed anyway.</span>": "This transaction has been flagged as malicious. <span>I understand the risk and want to proceed anyway.</span>",
   "This transaction would likely fail": "This transaction would likely fail",
+  "This wallet does not support the requested network": "This wallet does not support the requested network",
   "This wallet is already imported": "This wallet is already imported",
   "This wallet is already imported.": "This wallet is already imported.",
   "To proceed, please retry.": "To proceed, please retry.",

apps/next/src/pages/AccountManagement/components/RenamableTitle.tsx

@@ -9,12 +9,9 @@ import {
 } from '@avalabs/k2-alpine';
 import { FC, MouseEventHandler } from 'react';
 import { MdModeEdit } from 'react-icons/md';
-import { useHistory } from 'react-router-dom';
-import { URL_SEARCH_TOKENS } from '../utils/searchParams';
 
 type Props = TypographyProps & {
-  type: 'account' | 'wallet';
-  tokenId: string;
+  onRename: MouseEventHandler<HTMLButtonElement>;
 };
 
 const RenameButton = styled(IconButton)(({ theme }) => ({
@@ -33,24 +30,10 @@ const RenameButton = styled(IconButton)(({ theme }) => ({
 
 export const RenamableTitle: FC<Props> = ({
   children,
-  type,
-  tokenId,
+  onRename,
   width,
   ...props
 }) => {
-  const { push } = useHistory();
-
-  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    push({
-      pathname: '/account-management/rename',
-      search: new URLSearchParams({
-        [URL_SEARCH_TOKENS[type]]: tokenId,
-      }).toString(),
-    });
-  };
-
   return (
     <Box
       display="flex"
@@ -66,7 +49,7 @@ export const RenamableTitle: FC<Props> = ({
       >
         {children}
       </Typography>
-      <RenameButton onClick={handleClick} size="small">
+      <RenameButton onClick={onRename} size="small">
         <MdModeEdit size={12} color={props.color} />
       </RenameButton>
     </Box>

apps/next/src/pages/AccountManagement/components/Wallets/components/AccountListItem/AccountListItem.tsx

@@ -70,6 +70,17 @@ export const AccountListItem: FC<Props> = ({ account, active, onSelect }) => {
         },
       };
 
+  const handleRename: MouseEventHandler<HTMLButtonElement> = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    history.push({
+      pathname: '/account-management/rename',
+      search: new URLSearchParams({
+        [URL_SEARCH_TOKENS.account]: account.id,
+      }).toString(),
+    });
+  };
+
   return (
     <ListItem disablePadding>
       <Styled.ListItemButton
@@ -83,9 +94,8 @@ export const AccountListItem: FC<Props> = ({ account, active, onSelect }) => {
         <ListItemText
           primary={
             <RenamableTitle
+              onRename={handleRename}
               variant="subtitle3"
-              type="account"
-              tokenId={account.id}
               component="span"
             >
               {account.name}

apps/next/src/pages/AccountManagement/components/Wallets/components/Styled.tsx

@@ -1,59 +1,10 @@
 import {
-  accordionSummaryClasses,
-  Accordion as K2Accordion,
-  AccordionDetails as K2AccordionDetails,
-  AccordionSummary as K2AccordionSummary,
   ListItemButton as K2ListItemButton,
   listItemButtonClasses,
   styled,
-  typographyClasses,
 } from '@avalabs/k2-alpine';
 import { MdError } from 'react-icons/md';
 
-export const Accordion = styled(K2Accordion)(({ theme }) => ({
-  marginBottom: theme.spacing(0),
-  borderRadius: theme.shape.mediumBorderRadius,
-  boxShadow: '0px 5px 30px 0px rgba(0, 0, 0, 0.15)',
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.surface.primary
-      : theme.palette.background.paper,
-}));
-
-export const AccordionSummary = styled(K2AccordionSummary)(({ theme }) => ({
-  [`&.${accordionSummaryClasses.root}`]: {
-    minHeight: 42,
-    height: 42,
-    paddingBlock: theme.spacing(1),
-    paddingInline: theme.spacing(1.5),
-    justifyContent: 'unset',
-  },
-  '& .accordion-header-container': {
-    alignItems: 'end',
-    gap: theme.spacing(1),
-    [`& > .${typographyClasses.root}`]: {
-      width: '100%',
-    },
-  },
-  '& .accordion-header-icon': {
-    display: 'block',
-    margin: 0,
-  },
-  [`& .${accordionSummaryClasses.content}`]: {
-    margin: 0,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-  [`& .${accordionSummaryClasses.expandIconWrapper}`]: {
-    color: theme.palette.text.disabled,
-  },
-}));
-
-export const AccordionDetails = styled(K2AccordionDetails)(({ theme }) => ({
-  paddingInline: theme.spacing(1.5),
-}));
-
 export const ErrorIcon = styled(MdError)(({ theme }) => ({
   color: theme.palette.error.main,
   flexShrink: 0,
@@ -71,14 +22,3 @@ export const ListItemButton = styled(K2ListItemButton)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
   },
 }));
-
-export const Shrinkable = styled('span')(({ theme }) => ({
-  width: '100%',
-  opacity: 1,
-  transition: theme.transitions.create(['width', 'opacity']),
-
-  [`.${accordionSummaryClasses.root}:hover &`]: {
-    width: '0%',
-    opacity: 0,
-  },
-}));