release: v0.28.0 to develop

.github/workflows/build-rc.yml

@@ -39,7 +39,7 @@ jobs:
     needs: test
     runs-on: ubuntu-latest
     permissions:
-      contents: read
+      contents: write
       pull-requests: write
       issues: write
     env:
@@ -55,16 +55,16 @@ jobs:
           SOURCE_BRANCH: ${{ github.head_ref }}
           TARGET_COMMITISH: ${{ github.event.pull_request.head.sha }}
         run: |
+          cd scripts
           # find the next rc tag
           gh api \
             -H "Accept: application/vnd.github+json" \
             -H "X-GitHub-Api-Version: 2022-11-28" \
             /repos/{owner}/{repo}/releases > releases.json
           # get $TAG from branch name, e.g. v0.25.0
-          TAG=$(echo $SOURCE_BRANCH | sed 's/release\/\(.*\)/\1/')
+          export TAG=$(echo $SOURCE_BRANCH | sed 's/release\/\(.*\)/\1/')
           # export $NEXT_TAG using releases.json and $TAG, e.g. v0.25.0-rc.0
-          cd scripts
-          ./find-tag.sh
+          source ./find-tag.sh
           # publish the release as prerelease rc
           gh api \
             --method POST \
@@ -126,7 +126,7 @@ jobs:
           UPLOAD_URL: ${{needs.publish-rc.outputs.upload_url}}
           FILENAME: ${{needs.publish-rc.outputs.filename}}
         with:
-          upload_url: $UPLOAD_URL
+          upload_url: ${{ env.UPLOAD_URL}}
           asset_path: build.zip
-          asset_name: $FILENAME
+          asset_name: ${{ env.FILENAME }}
           asset_content_type: application/zip

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
     if: ${{ github.event.pull_request.merged == true && startsWith(github.head_ref, 'release/')}}
     runs-on: ubuntu-latest
     permissions:
-      contents: read
+      contents: write
       pull-requests: write
       issues: write
     env:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "private": true,
   "engines": {
     "node": "^18.18.2"

scripts/find-tag.sh

@@ -12,13 +12,14 @@ fi
 
 if cat releases.json | jq '.[].tag_name' | grep $TAG; then
   echo found releases matching $TAG
-  LATEST_TAG=$(cat releases.json | jq '.[].tag_name' | grep $TAG | head -1)
-  LATEST_RC=$(echo $LATEST_TAG | grep rc | sed 's/.*-rc\(.*\)/\1/')
+  LATEST_TAG=$(cat releases.json | jq -r '.[].tag_name' | grep $TAG | head -1)
+  LATEST_RC=$(echo $LATEST_TAG | grep rc | sed 's/.*-rc.\(.*\)/\1/')
   if [[ -z "$LATEST_RC" ]]; then
     echo $TAG was already released
     exit 1;
   elif [[ -n "$LATEST_RC" ]]; then
-    NEXT_TAG="$TAG-rc.$($LATEST_RC +1)"
+    ((LATEST_RC++))
+    NEXT_TAG="$TAG-rc.$LATEST_RC"
   fi
 else
   echo no releases matching $TAG yet

src/app/App.tsx

@@ -1,5 +1,5 @@
 import LoadingScreen from '@components/loadingScreen';
-import { CheckCircle } from '@phosphor-icons/react';
+import { CheckCircle, XCircle } from '@phosphor-icons/react';
 import rootStore from '@stores/index';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -11,13 +11,20 @@ import { Toaster } from 'react-hot-toast';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
 import { PersistGate } from 'redux-persist/integration/react';
-import { ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 import '../locales';
 import Theme from '../theme';
 import GlobalStyle from '../theme/global';
 import SessionGuard from './components/guards/session';
 import router from './routes';
 
+// needed to keep the svg icon scale for toasts over multiple lines
+const StyledIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 function App(): JSX.Element {
   useEffect(() => {
     if (!MIX_PANEL_TOKEN) {
@@ -46,16 +53,33 @@ function App(): JSX.Element {
                   containerStyle={{ bottom: 80 }}
                   toastOptions={{
                     success: {
-                      icon: <CheckCircle size={20} weight="bold" />,
+                      icon: (
+                        <StyledIcon>
+                          <CheckCircle size={20} weight="bold" />
+                        </StyledIcon>
+                      ),
                       style: {
                         ...Theme.typography.body_medium_m,
                         backgroundColor: Theme.colors.success_medium,
                         borderRadius: Theme.radius(2),
-                        padding: Theme.spacing(4),
-                        paddingLeft: Theme.spacing(6),
+                        padding: Theme.space.s,
                         color: Theme.colors.elevation0,
                       },
                     },
+                    error: {
+                      icon: (
+                        <StyledIcon>
+                          <XCircle size={20} weight="bold" />
+                        </StyledIcon>
+                      ),
+                      style: {
+                        ...Theme.typography.body_medium_m,
+                        backgroundColor: Theme.colors.danger_dark,
+                        borderRadius: Theme.radius(2),
+                        padding: Theme.space.s,
+                        color: Theme.colors.white_0,
+                      },
+                    },
                   }}
                 />
               </ThemeProvider>

src/app/components/transactionSetting/editBtcFee.tsx

@@ -55,7 +55,7 @@ const InputContainer = styled.div<InputContainerProps>((props) => ({
 }));
 
 const InputField = styled.input((props) => ({
-  ...props.theme.body_m,
+  ...props.theme.typography.body_m,
   backgroundColor: 'transparent',
   color: props.theme.colors.white_0,
   border: 'transparent',
@@ -187,7 +187,7 @@ function EditBtcFee({
   const { ordinals } = useOrdinalsByAddress(btcAddress);
   const ordinalsUtxos = useMemo(() => ordinals?.map((ord) => ord.utxo), [ordinals]);
   const btcClient = useBtcClient();
-  const feeData = useBtcFees({
+  const { feeData, highFeeError, mediumFeeError } = useBtcFees({
     isRestoreFlow: !!isRestoreFlow,
     nonOrdinalUtxos,
     btcRecipients,
@@ -341,6 +341,7 @@ function EditBtcFee({
               setFeeMode('high');
             }}
             selected={feeMode === 'high'}
+            error={highFeeError}
           />
           <FeeItem
             priority="medium"
@@ -358,6 +359,7 @@ function EditBtcFee({
               setFeeMode('medium');
             }}
             selected={feeMode === 'medium'}
+            error={mediumFeeError}
           />
           <FeeItemContainer
             isSelected={feeMode === 'custom'}

src/app/components/transactionSetting/feeItem.tsx

@@ -1,4 +1,5 @@
 import { Bicycle, CarProfile, RocketLaunch } from '@phosphor-icons/react';
+import { ErrorCodes } from '@secretkeylabs/xverse-core';
 import { StyledP } from '@ui-library/common.styled';
 import { useTranslation } from 'react-i18next';
 import { MoonLoader } from 'react-spinners';
@@ -54,7 +55,6 @@ const StyledHeading = styled(StyledP)`
 `;
 
 const StyledSubText = styled(StyledP)`
-  color: ${(props) => props.theme.colors.white_200};
   margin-bottom: ${(props) => props.theme.space.xxs};
 `;
 
@@ -75,9 +75,19 @@ interface FeeItemProps {
   fiat: string | JSX.Element;
   selected: boolean;
   onClick?: () => void;
+  error?: string;
 }
 
-function FeeItem({ priority, time, feeRate, totalFee, fiat, selected, onClick }: FeeItemProps) {
+function FeeItem({
+  priority,
+  time,
+  feeRate,
+  totalFee,
+  fiat,
+  selected,
+  error,
+  onClick,
+}: FeeItemProps) {
   const { t } = useTranslation('translation');
   const getIcon = () => {
     switch (priority) {
@@ -105,25 +115,50 @@ function FeeItem({ priority, time, feeRate, totalFee, fiat, selected, onClick }:
     }
   };
 
+  const getErrorMessage = (btcError: string) => {
+    if (
+      Number(btcError) === ErrorCodes.InSufficientBalance ||
+      Number(btcError) === ErrorCodes.InSufficientBalanceWithTxFee
+    ) {
+      return t('SEND.ERRORS.INSUFFICIENT_BALANCE');
+    }
+    return btcError;
+  };
+
   return (
-    <FeeItemContainer onClick={onClick} isSelected={selected} disabled={!totalFee}>
+    <FeeItemContainer onClick={onClick} isSelected={selected} disabled={!totalFee || !!error}>
       <IconContainer>{getIcon()}</IconContainer>
       <TextsContainer>
         <ColumnsTexts>
           <StyledHeading typography="body_medium_m" color="white_0">
             {getLabel()}
           </StyledHeading>
-          <StyledSubText typography="body_medium_s">{time}</StyledSubText>
-          <StyledSubText typography="body_medium_s">{`${feeRate} Sats/ vByte`}</StyledSubText>
+          <StyledSubText typography="body_medium_s" color="white_200">
+            {time}
+          </StyledSubText>
+          <StyledSubText
+            typography="body_medium_s"
+            color="white_200"
+          >{`${feeRate} Sats/ vByte`}</StyledSubText>
         </ColumnsTexts>
-        {totalFee ? (
-          <EndColumnTexts>
+
+        <EndColumnTexts>
+          {totalFee && (
             <StyledHeading typography="body_medium_m" color="white_0">
               {`${totalFee} Sats`}
             </StyledHeading>
-            <StyledSubText typography="body_medium_s">{fiat}</StyledSubText>
-          </EndColumnTexts>
-        ) : (
+          )}
+          <StyledSubText typography="body_medium_s" color="white_200">
+            {fiat}
+          </StyledSubText>
+          {error && (
+            <StyledSubText typography="body_medium_s" color="danger_medium">
+              {getErrorMessage(error)}
+            </StyledSubText>
+          )}
+        </EndColumnTexts>
+
+        {!totalFee && !error && (
           <LoaderContainer>
             <MoonLoader color="white" size={20} />
           </LoaderContainer>

src/app/hooks/useBtcFees.ts

@@ -31,31 +31,35 @@ const useBtcFees = ({
   btcRecipients,
   type,
   ordinalTxUtxo,
-}: Params): FeeData => {
+}: Params): { feeData: FeeData; highFeeError?: string; mediumFeeError?: string } => {
   const [feeData, setFeeData] = useState<FeeData>({
     standardFeeRate: '',
     standardTotalFee: '',
     highFeeRate: '',
     highTotalFee: '',
   });
-  const { network, btcAddress, selectedAccount, ordinalsAddress } = useWalletSelector();
+  const [highFeeError, setHighFeeError] = useState<string>('');
+  const [standardFeeError, setStandardFeeError] = useState<string>('');
+  const { network, btcAddress, ordinalsAddress } = useWalletSelector();
   const btcClient = useBtcClient();
   const { ordinals } = useOrdinalsByAddress(btcAddress);
   const ordinalsUtxos = useMemo(() => ordinals?.map((ord) => ord.utxo), [ordinals]);
 
   useEffect(() => {
     async function fetchFees(mode: 'standard' | 'high') {
       try {
+        setStandardFeeError('');
+        setHighFeeError('');
         let feeInfo;
         if (isRestoreFlow) {
           feeInfo = await getBtcFeesForNonOrdinalBtcSend(
             btcAddress,
-            nonOrdinalUtxos!,
+            nonOrdinalUtxos || [],
             ordinalsAddress,
             network.type,
             mode,
           );
-        } else if (btcRecipients && selectedAccount) {
+        } else if (type === 'BTC' && btcRecipients) {
           feeInfo = await getBtcFees(btcRecipients, btcAddress, btcClient, network.type, mode);
         } else if (type === 'Ordinals' && btcRecipients && ordinalTxUtxo) {
           feeInfo = await getBtcFeesForOrdinalSend(
@@ -68,12 +72,13 @@ const useBtcFees = ({
             mode,
           );
         }
-
         return {
           fee: feeInfo?.fee.toString() || '',
           feeRate: feeInfo?.selectedFeeRate.toString() || '',
         };
-      } catch (error) {
+      } catch (error: any) {
+        if (mode === 'standard') setStandardFeeError(error.toString());
+        else if (mode === 'high') setHighFeeError(error.toString());
         return { fee: '', feeRate: '' };
       }
     }
@@ -102,10 +107,8 @@ const useBtcFees = ({
     network,
     ordinalsUtxos,
     ordinalsAddress,
-    selectedAccount,
   ]);
-
-  return feeData;
+  return { feeData, highFeeError, mediumFeeError: standardFeeError };
 };
 
 export default useBtcFees;

src/app/hooks/useRbfTransactionData.ts

@@ -208,7 +208,6 @@ const useRbfTransactionData = (transaction?: BtcTransactionData | StxTransaction
 
   const fetchRbfData = useCallback(async () => {
     if (!selectedAccount || !transaction) {
-      setIsLoading(false);
       return;
     }
 

src/app/screens/settings/changeNetwork/index.tsx

@@ -70,6 +70,9 @@ function ChangeNetworkScreen() {
   };
 
   const onNetworkSelected = (networkSelected: SettingsNetwork) => {
+    if (networkSelected.type === formInputs.type) {
+      return;
+    }
     setFormInputs(networkSelected);
     setFormErrors(initialNodeErrors);
   };
@@ -111,6 +114,8 @@ function ChangeNetworkScreen() {
   const onSubmit = async () => {
     setIsChangingNetwork(true);
 
+    // TODO use formik/yup for all validation if form gets more complex
+    // validate required fields
     if (!formInputs.address) {
       setFormErrors((prevErrors) => ({
         ...prevErrors,
@@ -129,10 +134,17 @@ function ChangeNetworkScreen() {
       return;
     }
 
+    const isChangedStacksUrl = formInputs.address !== network.address;
+    const isChangedBtcApiUrl = formInputs.btcApiUrl !== network.btcApiUrl;
+    const isChangedFallbackBtcApiUrl = formInputs.fallbackBtcApiUrl !== network.fallbackBtcApiUrl;
+
+    // validate against server if inputs were changed
     const [isValidStacksUrl, isValidBtcApiUrl, isValidFallbackBtcApiUrl] = await Promise.all([
-      isValidStacksApi(formInputs.address, formInputs.type),
-      isValidBtcApi(formInputs.btcApiUrl, formInputs.type),
-      !formInputs.fallbackBtcApiUrl || isValidBtcApi(formInputs.fallbackBtcApiUrl, formInputs.type),
+      !isChangedStacksUrl || isValidStacksApi(formInputs.address, formInputs.type),
+      !isChangedBtcApiUrl || isValidBtcApi(formInputs.btcApiUrl, formInputs.type),
+      !formInputs.fallbackBtcApiUrl ||
+        !isChangedFallbackBtcApiUrl ||
+        isValidBtcApi(formInputs.fallbackBtcApiUrl, formInputs.type),
     ]);
 
     if (isValidStacksUrl && isValidBtcApiUrl && isValidFallbackBtcApiUrl) {