Merge pull request #804 from secretkeylabs/release/v0.30.0

release: v0.30.0 to main
secretkeylabs · Feb 28, 2024 · 6a8671f · 6a8671f
2 parents 52e2f71 + be2db7c
commit 6a8671f
Show file tree

Hide file tree

Showing 108 changed files with 36,740 additions and 10,743 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.29.2",
+  "version": "0.30.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": "10.0.0",
+    "@secretkeylabs/xverse-core": "11.1.2",
     "@stacks/connect": "7.4.1",
     "@stacks/stacks-blockchain-api-types": "6.1.1",
     "@stacks/transactions": "6.9.0",
@@ -32,12 +32,14 @@
     "classnames": "^2.3.2",
     "crypto-browserify": "^3.12.0",
     "date-fns": "^2.29.3",
+    "i": "0.3.7",
     "i18next": "^21.9.1",
     "js-sha256": "^0.10.1",
     "jsontokens": "^4.0.1",
     "mixpanel-browser": "^2.47.0",
     "moment": "^2.29.4",
     "nanoid": "^4.0.0",
+    "npm": "10.4.0",
     "p-queue": "^7.3.4",
     "process": "^0.11.10",
     "qr-code-styling": "^1.5.0",
@@ -48,14 +50,14 @@
     "react-hot-toast": "^2.4.0",
     "react-i18next": "^11.18.6",
     "react-is-visible": "^1.2.0",
+    "react-lottie": "^1.2.4",
     "react-modal": "^3.15.1",
     "react-number-format": "^5.0.0",
     "react-qr-code": "^2.0.8",
     "react-redux": "^7.2.1",
     "react-router-dom": "^6.4.0",
     "react-select": "^5.4.0",
     "react-share": "^4.4.1",
-    "react-spinners": "^0.13.7",
     "react-switch": "^7.0.0",
     "react-tabs": "^6.0.2",
     "react-tooltip": "^5.4.0",
@@ -66,6 +68,7 @@
     "stream-browserify": "^3.0.0",
     "string-to-color": "^2.2.2",
     "styled-components": "^5.3.5",
+    "swiper": "11.0.6",
     "valid-url": "^1.0.9",
     "webextension-polyfill": "^0.10.0",
     "zxcvbn": "^4.4.2"
@@ -98,6 +101,7 @@
     "@types/chrome": "^0.0.237",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
+    "@types/react-lottie": "^1.2.10",
     "@types/react-modal": "^3.13.1",
     "@types/redux-state-sync": "^3.1.5",
     "@types/styled-components": "^5.1.26",

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -80,6 +80,16 @@ function App(): JSX.Element {
                         color: Theme.colors.white_0,
                       },
                     },
+                    blank: {
+                      style: {
+                        ...Theme.typography.body_medium_m,
+                        backgroundColor: Theme.colors.white_0,
+                        borderRadius: Theme.radius(2),
+                        padding: Theme.space.s,
+                        color: Theme.colors.elevation0,
+                      },
+                      duration: 2000,
+                    },
                   }}
                 />
               </ThemeProvider>

diff --git a/src/app/components/accountRow/index.tsx b/src/app/components/accountRow/index.tsx
@@ -8,13 +8,13 @@ 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 Spinner from '@ui-library/spinner';
 import { EMPTY_LABEL, LoaderSize, MAX_ACC_NAME_LENGTH } from '@utils/constants';
 import { getAccountGradient } from '@utils/gradient';
 import { isLedgerAccount, validateAccountName } from '@utils/helper';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NumericFormat } from 'react-number-format';
-import { MoonLoader } from 'react-spinners';
 import 'react-tooltip/dist/react-tooltip.css';
 import styled from 'styled-components';
 
@@ -330,7 +330,7 @@ function AccountRow({
               {isAccountListView && !totalBalance && (
                 <Balance isSelected={isSelected}>
                   {EMPTY_LABEL}
-                  <MoonLoader color="white" size={12} />
+                  <Spinner color="white" size={12} />
                 </Balance>
               )}
             </TransparentSpan>

diff --git a/src/app/components/alertMessage/index.tsx b/src/app/components/alertMessage/index.tsx
@@ -1,5 +1,6 @@
 import Cross from '@assets/img/dashboard/X.svg';
 import ActionButton from '@components/button';
+import Checkbox from '@ui-library/checkbox';
 import styled from 'styled-components';
 
 const Container = styled.div((props) => ({
@@ -17,81 +18,49 @@ const Container = styled.div((props) => ({
 }));
 
 const HeaderText = styled.h1((props) => ({
-  ...props.theme.body_bold_m,
+  ...props.theme.typography.body_bold_m,
   fontSize: 16,
   flex: 1,
 }));
 
 const DescriptionText = styled.h1((props) => ({
-  ...props.theme.body_m,
+  ...props.theme.typography.body_m,
   color: props.theme.colors.white_200,
-  margin: 16,
+  margin: props.theme.space.m,
   fontSize: 16,
 }));
 
 const RowContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
-  padding: '20px 16px 16px 16px',
+  padding: props.theme.space.m,
+  paddingTop: 20,
   alignItems: 'space-between',
   borderBottom: `1px solid ${props.theme.colors.elevation6}`,
 }));
 
 const TickMarkButtonContainer = styled.div((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  marginLeft: props.theme.spacing(8),
-  marginRight: props.theme.spacing(8),
+  marginLeft: props.theme.space.m,
+  marginRight: props.theme.space.m,
   marginBottom: props.theme.spacing(18),
 }));
 
-const TickMarkButtonText = styled.h1((props) => ({
-  ...props.theme.body_m,
-  color: props.theme.colors.white_0,
-  marginLeft: props.theme.spacing(4.25),
-}));
-
 const TransparentButtonContainer = styled.div((props) => ({
-  marginRight: props.theme.spacing(6),
+  marginRight: props.theme.space.s,
   width: '100%',
 }));
 
 const ButtonImage = styled.button({
   backgroundColor: 'transparent',
 });
 
-const TickButton = styled.input.attrs({ type: 'checkbox' })`
-  appearance: none;
-  border: 1.3px solid #ffffff;
-  width: 12px;
-  height: 12px;
-
-  &:checked {
-    position: relative;
-    &::before {
-      content: '\\2713';
-      font-size: 10px;
-      color: #fff;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  &:hover {
-    background-color: #303354;
-  }
-`;
-
 const ButtonContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
   marginBottom: props.theme.spacing(12),
-  marginTop: props.theme.spacing(4),
-  marginLeft: props.theme.spacing(8),
-  marginRight: props.theme.spacing(8),
+  marginTop: props.theme.space.xs,
+  marginLeft: props.theme.space.m,
+  marginRight: props.theme.space.m,
 }));
 
 const OuterContainer = styled.div((props) => ({
@@ -116,7 +85,7 @@ interface Props {
   tickMarkButtonText?: string;
   onButtonClick?: () => void;
   onSecondButtonClick?: () => void;
-  tickMarkButtonClick?: () => void;
+  tickMarkButtonClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 function AlertMessage({
@@ -161,14 +130,11 @@ function AlertMessage({
         )}
         {tickMarkButtonText && tickMarkButtonClick && (
           <TickMarkButtonContainer>
-            <TickButton
-              type="checkbox"
-              defaultChecked={false}
-              onChange={() => {
-                tickMarkButtonClick();
-              }}
+            <Checkbox
+              checkboxId={`${title}-ticker`}
+              text={tickMarkButtonText}
+              onChange={tickMarkButtonClick}
             />
-            <TickMarkButtonText>{tickMarkButtonText}</TickMarkButtonText>
           </TickMarkButtonContainer>
         )}
       </Container>

diff --git a/src/app/components/button/index.tsx b/src/app/components/button/index.tsx
@@ -1,4 +1,4 @@
-import { MoonLoader } from 'react-spinners';
+import Spinner from '@ui-library/spinner';
 import styled from 'styled-components';
 
 interface ButtonProps {
@@ -117,7 +117,7 @@ function ActionButton({
         disabled={disabled || processing}
       >
         {processing ? (
-          <MoonLoader color="white" size={10} />
+          <Spinner color="white" size={10} />
         ) : (
           <>
             {src && <ButtonImage src={src} />}
@@ -138,7 +138,7 @@ function ActionButton({
       warning={warning}
     >
       {processing ? (
-        <MoonLoader color="#12151E" size={12} />
+        <Spinner color="#12151E" size={12} />
       ) : (
         <>
           {src && <ButtonImage src={src} />}

diff --git a/src/app/components/checkBox/index.tsx b/src/app/components/checkBox/index.tsx
@@ -8,7 +8,7 @@ interface CheckBoxProps {
 }
 
 const CheckBoxWrapper = styled.div((props) => ({
-  ...props.theme.body_medium_m,
+  ...props.theme.typography.body_medium_m,
   color: props.theme.colors.white_0,
   label: {
     marginLeft: props.theme.spacing(5),

diff --git a/src/app/components/collectibleCollectionGridItem/index.tsx b/src/app/components/collectibleCollectionGridItem/index.tsx
@@ -1,3 +1,4 @@
+import { Inscription, NonFungibleToken } from '@secretkeylabs/xverse-core';
 import { StyledP } from '@ui-library/common.styled';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
@@ -48,12 +49,12 @@ const GridItemContainer = styled.button`
 `;
 
 interface Props {
-  item: any;
-  itemId: string;
+  item?: Inscription | NonFungibleToken;
+  itemId?: string;
   itemSubText?: string;
   itemSubTextColor?: Color;
   children: ReactNode;
-  onClick?: (collectible: any) => void;
+  onClick?: (item: Inscription | NonFungibleToken) => void;
 }
 export function CollectibleCollectionGridItem({
   item,
@@ -63,11 +64,12 @@ export function CollectibleCollectionGridItem({
   children,
   onClick,
 }: Props) {
-  const handleOnClick = onClick
-    ? () => {
-        onClick(item);
-      }
-    : undefined;
+  const handleOnClick =
+    onClick && item
+      ? () => {
+          onClick(item);
+        }
+      : undefined;
 
   return (
     <GridItemContainer onClick={handleOnClick}>

diff --git a/src/app/components/confirmBtcTransaction/index.tsx b/src/app/components/confirmBtcTransaction/index.tsx
@@ -9,10 +9,10 @@ import TransportFactory from '@ledgerhq/hw-transport-webusb';
 import { btcTransaction, Transport } from '@secretkeylabs/xverse-core';
 import Callout from '@ui-library/callout';
 import { StickyHorizontalSplitButtonContainer, StyledP } from '@ui-library/common.styled';
+import Spinner from '@ui-library/spinner';
 import { isLedgerAccount } from '@utils/helper';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MoonLoader } from 'react-spinners';
 import styled from 'styled-components';
 import SendLayout from '../../layouts/sendLayout';
 import TransactionSummary from './transactionSummary';
@@ -60,8 +60,12 @@ type Props = {
   onCancel: () => void;
   onBackClick?: () => void;
   confirmDisabled?: boolean;
-  getFeeForFeeRate?: (feeRate: number, useEffectiveFeeRate?: boolean) => Promise<number>;
+  getFeeForFeeRate?: (
+    feeRate: number,
+    useEffectiveFeeRate?: boolean,
+  ) => Promise<number | undefined>;
   onFeeRateSet?: (feeRate: number) => void;
+  feeRate?: number;
 };
 
 function ConfirmBtcTransaction({
@@ -82,6 +86,7 @@ function ConfirmBtcTransaction({
   confirmDisabled = false,
   getFeeForFeeRate,
   onFeeRateSet,
+  feeRate,
 }: Props) {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
@@ -146,7 +151,7 @@ function ConfirmBtcTransaction({
 
   return isLoading ? (
     <LoaderContainer>
-      <MoonLoader color="white" size={50} />
+      <Spinner size={50} />
     </LoaderContainer>
   ) : (
     <>
@@ -168,6 +173,7 @@ function ConfirmBtcTransaction({
           isPartialTransaction={isPartialTransaction}
           getFeeForFeeRate={getFeeForFeeRate}
           onFeeRateSet={onFeeRateSet}
+          feeRate={feeRate}
           isSubmitting={isSubmitting}
         />
         {!isLoading && (