release: v0.31.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "private": true,
   "engines": {
     "node": "^18.18.2"
@@ -11,7 +11,7 @@
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
     "@scure/btc-signer": "1.2.1",
-    "@secretkeylabs/xverse-core": "11.1.2",
+    "@secretkeylabs/xverse-core": "11.2.0",
     "@stacks/connect": "7.4.1",
     "@stacks/stacks-blockchain-api-types": "6.1.1",
     "@stacks/transactions": "6.9.0",
@@ -64,13 +64,16 @@
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-state-sync": "^3.1.4",
-    "sats-connect": "1.4.0",
+    "sats-connect": "2",
     "stream-browserify": "^3.0.0",
     "string-to-color": "^2.2.2",
     "styled-components": "^5.3.5",
+    "superjson": "2.2.1",
     "swiper": "11.0.6",
+    "ts-transformer-keys": "0.4.4",
     "valid-url": "^1.0.9",
     "webextension-polyfill": "^0.10.0",
+    "zod": "3.22.4",
     "zxcvbn": "^4.4.2"
   },
   "scripts": {

src/app/components/accountRow/index.tsx

@@ -1,13 +1,13 @@
 import LedgerBadge from '@assets/img/ledger/ledger_badge.svg';
 import BarLoader from '@components/barLoader';
 import BottomModal from '@components/bottomModal';
-import ActionButton from '@components/button';
 import OptionsDialog, { OPTIONS_DIALOG_WIDTH } from '@components/optionsDialog/optionsDialog';
 import useWalletReducer from '@hooks/useWalletReducer';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { CaretDown, DotsThreeVertical } from '@phosphor-icons/react';
 import { Account, currencySymbolMap } from '@secretkeylabs/xverse-core';
-import InputFeedback from '@ui-library/inputFeedback';
+import Button from '@ui-library/button';
+import Input from '@ui-library/input';
 import Spinner from '@ui-library/spinner';
 import { EMPTY_LABEL, LoaderSize, MAX_ACC_NAME_LENGTH } from '@utils/constants';
 import { getAccountGradient } from '@utils/gradient';
@@ -48,7 +48,7 @@
 const CurrentAcountContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'column',
-  paddingLeft: props.theme.spacing(6),
+  paddingLeft: props.theme.space.s,
 }));
 
 const CurrentAccountTextContainer = styled.div((props) => ({
@@ -81,21 +81,23 @@
   background: 'transparent',
 });
 
-const ModalContent = styled.div((props) => ({
-  padding: props.theme.spacing(8),
-  paddingTop: props.theme.spacing(12),
-  paddingBottom: props.theme.spacing(20),
+const ModalContent = styled.form((props) => ({
+  padding: props.theme.space.m,
+  paddingTop: props.theme.space.m,
+  paddingBottom: props.theme.space.xxl,
 }));
 
 const ModalDescription = styled.div((props) => ({
-  fontSize: '0.875rem',
+  ...props.theme.typography.body_m,
   color: props.theme.colors.white_200,
 }));
 
-const ModalControlsContainer = styled.div((props) => ({
+const ModalControlsContainer = styled.div<{
+  $bigSpacing?: boolean;
+}>((props) => ({
   display: 'flex',
   columnGap: props.theme.space.s,
-  marginTop: props.theme.space.xl,
+  marginTop: props.$bigSpacing ? props.theme.space.l : props.theme.space.m,
 }));
 
 const ModalButtonContainer = styled.div({
@@ -123,41 +125,12 @@
 
 const InputLabel = styled.div((props) => ({
   ...props.theme.typography.body_medium_m,
-  color: props.theme.colors.white_200,
-  marginBottom: props.theme.space.xs,
-}));
-
-const InputContainer = styled.div<{ withError?: boolean }>((props) => ({
   display: 'flex',
-  flexDirection: 'row',
+  justifyContent: 'space-between',
   alignItems: 'center',
-  marginTop: props.theme.spacing(4),
-  marginBottom: props.theme.spacing(6),
-  border: `1px solid ${
-    props.withError ? props.theme.colors.danger_dark_200 : props.theme.colors.white_800
-  }`,
-  backgroundColor: props.theme.colors.elevation1,
-  borderRadius: props.theme.radius(1),
-  padding: props.theme.spacing(5),
-}));
-
-const InputField = styled.input((props) => ({
-  ...props.theme.typography.body_m,
-  backgroundColor: 'transparent',
-  color: props.theme.colors.white_0,
-  border: 'transparent',
-  width: '100%',
-  '&::-webkit-outer-spin-button': {
-    '-webkit-appearance': 'none',
-    margin: 0,
-  },
-  '&::-webkit-inner-spin-button': {
-    '-webkit-appearance': 'none',
-    margin: 0,
-  },
-  '&[type=number]': {
-    '-moz-appearance': 'textfield',
-  },
+  color: props.theme.colors.white_200,
+  marginTop: props.theme.space.m,
+  marginBottom: props.theme.space.xs,
 }));
 
 const Balance = styled.div<{ isSelected?: boolean }>((props) => ({
@@ -169,6 +142,21 @@
   columnGap: props.theme.space.xs,
 }));
 
+const StyledButton = styled(Button)((props) => ({
+  padding: 0,
+  width: 'auto',
+  transition: 'opacity 0.1s ease',
+  div: {
+    color: props.theme.colors.tangerine,
+  },
+  ':hover:enabled': {
+    opacity: 0.8,
+  },
+  ':active:enabled': {
+    opacity: 0.6,
+  },
+}));
+
 function AccountRow({
   account,
   isSelected,
@@ -210,6 +198,20 @@
     [],
   );
 
+  useEffect(() => {
+    const validationError = validateAccountName(
+      accountName,
+      optionsDialogTranslation,
+      accountsList,
+      ledgerAccountsList,
+    );
+    if (validationError) {
+      setAccountNameError(validationError);
+    } else {
+      setAccountNameError(null);
+    }
+  }, [accountName]);
+
   const getName = () => {
     const name =
       account?.accountName ??
@@ -293,12 +295,33 @@
       }
       handleRenameAccountModalClose();
     } catch (err) {
       console.error(err);
     } finally {
       setIsAccountNameChangeLoading(false);
     }
   };
 
+  const handleResetAccountName = () => {
+    if (!account) {
+      return;
+    }
+
+    try {
+      setIsAccountNameChangeLoading(true);
+      if (isLedgerAccount(account)) {
+        updateLedgerAccounts({ ...account, accountName: undefined });
+      } else {
+        renameAccount({ ...account, accountName: undefined });
+      }
+      setAccountName('');
+      handleRenameAccountModalClose();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsAccountNameChangeLoading(false);
+    }
+  };
+
   return (
     <TopSectionContainer disableClick={disabledAccountSelect}>
       <AccountInfoContainer onClick={handleClick}>
@@ -372,19 +395,19 @@
         >
           <ModalContent>
             <ModalDescription>{t('REMOVE_FROM_LIST_DESCRIPTION')}</ModalDescription>
-            <ModalControlsContainer>
+            <ModalControlsContainer $bigSpacing>
               <ModalButtonContainer>
-                <ActionButton
-                  transparent
-                  text={t('CANCEL')}
-                  onPress={handleRemoveAccountModalClose}
+                <Button
+                  variant="secondary"
+                  title={t('CANCEL')}
+                  onClick={handleRemoveAccountModalClose}
                 />
               </ModalButtonContainer>
               <ModalButtonContainer>
-                <ActionButton
-                  warning
-                  text={t('REMOVE_WALLET')}
-                  onPress={handleRemoveLedgerAccount}
+                <Button
+                  variant="danger"
+                  title={t('REMOVE_WALLET')}
+                  onClick={handleRemoveLedgerAccount}
                 />
               </ModalButtonContainer>
             </ModalControlsContainer>
@@ -399,21 +422,36 @@
           onClose={handleRenameAccountModalClose}
         >
           <ModalContent>
-            <InputLabel>{optionsDialogTranslation('RENAME_ACCOUNT_MODAL.LABEL')}</InputLabel>
-            <InputContainer withError={!!accountNameError}>
-              <InputField
-                value={accountName}
-                onChange={(e) => setAccountName(e.target.value)}
-                autoFocus
+            <ModalDescription>
+              {optionsDialogTranslation('RENAME_ACCOUNT_MODAL.NAME_RULES')}
+            </ModalDescription>
+            <InputLabel>
+              {optionsDialogTranslation('RENAME_ACCOUNT_MODAL.LABEL')}
+              <StyledButton
+                variant="tertiary"
+                onClick={handleResetAccountName}
+                title={optionsDialogTranslation('RENAME_ACCOUNT_MODAL.RESET_NAME')}
+                type="reset"
               />
-            </InputContainer>
-            {accountNameError && <InputFeedback variant="danger" message={accountNameError} />}
+            </InputLabel>
+            <Input
+              value={accountName}
+              onChange={(e) => setAccountName(e.target.value)}
+              feedback={[
+                {
+                  message: accountNameError || '',
+                  variant: accountNameError ? 'danger' : undefined,
+                },
+              ]}
+              autoFocus
+            />
             <ModalControlsContainer>
               <ModalButtonContainer>
-                <ActionButton
-                  text={t('SAVE')}
-                  onPress={handleRenameAccount}
-                  processing={isAccountNameChangeLoading}
+                <Button
+                  title={t('CONFIRM')}
+                  onClick={handleRenameAccount}
+                  disabled={!accountName || !!accountNameError}
+                  loading={isAccountNameChangeLoading}
                 />
               </ModalButtonContainer>
             </ModalControlsContainer>

src/app/components/bottomModal/index.tsx

@@ -1,4 +1,3 @@
-import Separator from '@components/separator';
 import { XCircle } from '@phosphor-icons/react';
 import Modal from 'react-modal';
 import styled, { useTheme } from 'styled-components';
@@ -14,6 +13,7 @@ const RowContainer = styled.div((props) => ({
   alignItems: 'center',
   justifyContent: 'space-between',
   margin: props.theme.space.m,
+  marginBottom: 0,
 }));
 
 const ButtonImage = styled.button({
@@ -90,7 +90,6 @@ function BottomModal({
           <XCircle color={theme.colors.white_200} weight="fill" size="28" />
         </ButtonImage>
       </RowContainer>
-      {header && <Separator />}
       {children}
     </CustomisedModal>
   );

src/app/components/button/index.tsx

@@ -87,8 +87,12 @@ interface Props {
   transparent?: boolean;
   warning?: boolean;
   hoverDialogId?: string;
+  type?: 'button' | 'submit' | 'reset';
 }
 
+/**
+ * @deprecated use ui-library/button
+ */
 function ActionButton({
   className,
   src,
@@ -101,6 +105,7 @@ function ActionButton({
   transparent,
   warning,
   hoverDialogId,
+  type,
 }: Props) {
   const handleOnPress = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (!disabled) {
@@ -115,6 +120,7 @@ function ActionButton({
         className={className}
         onClick={handleOnPress}
         disabled={disabled || processing}
+        type={type}
       >
         {processing ? (
           <Spinner color="white" size={10} />
@@ -136,6 +142,7 @@ function ActionButton({
       onClick={handleOnPress}
       disabled={disabled || processing}
       warning={warning}
+      type={type}
     >
       {processing ? (
         <Spinner color="#12151E" size={12} />

src/app/components/rareSatIcon/rareSatIcon.tsx

@@ -42,7 +42,7 @@ interface Props {
 }
 
 function RareSatIcon({ type, size }: Props) {
-  const src = {
+  const sourceByType: Record<RareSatsType, string> = {
     EPIC: Epic,
     LEGENDARY: Legendary,
     MYTHIC: Mythic,
@@ -61,7 +61,7 @@ function RareSatIcon({ type, size }: Props) {
     PERFECT_PALINCEPTION: Palinception,
     PALIBLOCK_PALINDROME: BlockPali,
     PALINDROME: Palindrome,
-    NAME_PALINDROME: Palindrome,
+    // NAME_PALINDROME: Palindrome,
     ALPHA: Alpha,
     OMEGA: Omega,
     FIRST_TRANSACTION: FirstTx,
@@ -73,7 +73,8 @@ function RareSatIcon({ type, size }: Props) {
     JPEG: Jpeg,
     HITMAN: Hitman,
     SILK_ROAD: SilkRoad,
-  }[type];
+  };
+  const src = sourceByType[type];
   if (!src) {
     return null;
   }