Merge pull request #707 from secretkeylabs/release/v0.26.0

release: v0.26.0 to main

.github/workflows/create-release-pr.yml

@@ -0,0 +1,39 @@
+name: Create release PR
+
+on:
+  workflow_dispatch:
+    inputs:
+      bump:
+        description: 'Version bump level'
+        required: true
+        default: patch
+        type: choice
+        options:
+          - patch
+          - minor
+          - major
+
+jobs:
+  create-release-pr:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - id: run-create-release-pr-sh
+        env:
+          BUMP: ${{ inputs.bump }}
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          # git config
+          git config user.name "GitHub Actions Bot"
+          git config user.email "<>"
+          # run shell script
+          cd scripts
+          ./create-release-pr.sh

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "private": true,
   "engines": {
     "node": "^18.18.2"
@@ -10,7 +10,7 @@
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "5.0.0",
+    "@secretkeylabs/xverse-core": "5.2.0",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "6.1.1",

scripts/.gitignore

@@ -0,0 +1,3 @@
+release.json
+pr-*.json
+body.md

scripts/create-release-pr.sh

@@ -0,0 +1,74 @@
+#! /bin/bash
+
+if [[ -z "$BUMP" ]]; then
+  echo "BUMP is required. major|minor|patch"
+  exit 1
+fi
+
+echo -e "\n--- Prepare for $BUMP release branch ---"
+
+git fetch --all
+git checkout develop
+git pull
+
+npm version $BUMP --git-tag-version=false
+VERSION=$(npm pkg get version | sed 's/"//g')
+TAG="v$VERSION"
+BRANCH="release/$TAG"
+TITLE="release: $TAG"
+
+git checkout -B $BRANCH
+git commit -am "$TITLE"
+git merge origin/main -s ours
+
+git push --set-upstream origin $BRANCH
+
+echo -e "\n--- Create draft release for $TAG ---"
+
+gh api \
+  --method POST \
+  -H "Accept: application/vnd.github+json" \
+  -H "X-GitHub-Api-Version: 2022-11-28" \
+  /repos/{owner}/{repo}/releases \
+  -f tag_name=$TAG \
+  -f target_commitish="$BRANCH" \
+  -f name=$TAG \
+  -F draft=true \
+  -F prerelease=true \
+  -F generate_release_notes=true > release.json
+
+cat release.json | jq -r .body > body.md
+echo -e "\n\nDraft release: $(cat release.json | jq -r .html_url)" >> body.md
+
+for b in main develop; do
+  echo -e "\n--- Create PR to $b ---"
+
+  gh api \
+    --method POST \
+    -H "Accept: application/vnd.github+json" \
+    -H "X-GitHub-Api-Version: 2022-11-28" \
+    /repos/{owner}/{repo}/pulls \
+    -f title="$TITLE to $b" \
+    -f body="Created by GitHub Actions Bot" \
+    -f head="$BRANCH" \
+    -f base="$b" > pr-$b.json
+
+  echo -e "\n--- Update PR to $b with description ---"
+
+  PR_ID=$(cat pr-$b.json | jq -r .number)
+
+  gh api \
+    --method PATCH \
+    -H "Accept: application/vnd.github+json" \
+    -H "X-GitHub-Api-Version: 2022-11-28" \
+    /repos/{owner}/{repo}/pulls/$PR_ID \
+    -F 'body=@body.md'
+
+  # clean up temp files
+  # rm pr-$b.json
+done
+
+echo -e "\n--- Done ---"
+# clean up temp files
+# rm release.json
+# rm body.md

src/app/App.tsx

@@ -1,4 +1,5 @@
 import LoadingScreen from '@components/loadingScreen';
+import { CheckCircle } from '@phosphor-icons/react';
 import rootStore from '@stores/index';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -40,7 +41,23 @@ function App(): JSX.Element {
             <SessionGuard>
               <ThemeProvider theme={Theme}>
                 <RouterProvider router={router} />
-                <Toaster position="bottom-center" />
+                <Toaster
+                  position="bottom-center"
+                  containerStyle={{ bottom: 80 }}
+                  toastOptions={{
+                    success: {
+                      icon: <CheckCircle size={20} weight="bold" />,
+                      style: {
+                        ...Theme.typography.body_medium_m,
+                        backgroundColor: Theme.colors.success_medium,
+                        borderRadius: Theme.radius(2),
+                        padding: Theme.spacing(4),
+                        paddingLeft: Theme.spacing(6),
+                        color: Theme.colors.elevation0,
+                      },
+                    },
+                  }}
+                />
               </ThemeProvider>
             </SessionGuard>
           </PersistGate>

src/app/components/bottomModal/index.tsx

@@ -4,7 +4,7 @@ import Modal from 'react-modal';
 import styled, { useTheme } from 'styled-components';
 
 const BottomModalHeaderText = styled.h1((props) => ({
-  ...props.theme.body_bold_m,
+  ...props.theme.typography.body_bold_l,
   flex: 1,
 }));
 

src/app/components/button/index.tsx

@@ -81,7 +81,7 @@ interface Props {
   icon?: JSX.Element;
   iconPosition?: 'left' | 'right';
   text: string;
-  onPress: () => void;
+  onPress: (e: React.MouseEvent<HTMLButtonElement>) => void;
   processing?: boolean;
   disabled?: boolean;
   transparent?: boolean;
@@ -102,9 +102,9 @@ function ActionButton({
   warning,
   hoverDialogId,
 }: Props) {
-  const handleOnPress = () => {
+  const handleOnPress = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (!disabled) {
-      onPress();
+      onPress(e);
     }
   };
 

src/app/components/confirmBtcTransactionComponent/index.tsx

@@ -6,6 +6,7 @@ import RecipientComponent from '@components/recipientComponent';
 import TransactionSettingAlert from '@components/transactionSetting';
 import TransferFeeView from '@components/transferFeeView';
 import useNftDataSelector from '@hooks/stores/useNftDataSelector';
+import useBtcClient from '@hooks/useBtcClient';
 import useOrdinalsByAddress from '@hooks/useOrdinalsByAddress';
 import useSeedVault from '@hooks/useSeedVault';
 import useWalletSelector from '@hooks/useWalletSelector';
@@ -148,6 +149,7 @@ function ConfirmBtcTransactionComponent({
   const [signedTx, setSignedTx] = useState(signedTxHex);
   const [total, setTotal] = useState<BigNumber>(new BigNumber(0));
   const [showFeeWarning, setShowFeeWarning] = useState(false);
+  const btcClient = useBtcClient();
 
   const bundle = selectedSatBundle ?? ordinalBundle ?? undefined;
   const {
@@ -170,6 +172,7 @@ function ConfirmBtcTransactionComponent({
         btcAddress,
         selectedAccount?.id ?? 0,
         seedPhrase,
+        btcClient,
         network.type,
         new BigNumber(txFee),
       ),
@@ -221,6 +224,7 @@ function ConfirmBtcTransactionComponent({
         btcAddress,
         Number(selectedAccount?.id),
         seedPhrase,
+        btcClient,
         network.type,
         ordinalsUtxos,
         new BigNumber(txFee),

src/app/components/transactionSetting/editFee.tsx

@@ -1,3 +1,4 @@
+import useBtcClient from '@hooks/useBtcClient';
 import useDebounce from '@hooks/useDebounce';
 import useOrdinalsByAddress from '@hooks/useOrdinalsByAddress';
 import useWalletSelector from '@hooks/useWalletSelector';
@@ -57,10 +58,7 @@ const InputContainer = styled.div<InputContainerProps>((props) => ({
   }`,
   backgroundColor: props.theme.colors.elevation1,
   borderRadius: props.theme.radius(1),
-  paddingLeft: props.theme.spacing(5),
-  paddingRight: props.theme.spacing(5),
-  paddingTop: props.theme.spacing(5),
-  paddingBottom: props.theme.spacing(5),
+  padding: props.theme.spacing(5),
 }));
 
 const InputField = styled.input((props) => ({
@@ -102,7 +100,7 @@ const FeeButton = styled.button<ButtonProps>((props) => ({
   color: `${props.isSelected ? props.theme.colors.elevation2 : props.theme.colors.white_400}`,
   background: `${props.isSelected ? props.theme.colors.white : 'transparent'}`,
   border: `1px solid ${props.isSelected ? 'transparent' : props.theme.colors.elevation6}`,
-  borderRadius: 40,
+  borderRadius: props.theme.radius(9),
   width: props.isBtc ? 104 : 82,
   height: 40,
   display: 'flex',
@@ -111,13 +109,13 @@ const FeeButton = styled.button<ButtonProps>((props) => ({
   marginRight: props.isLastInRow ? 0 : 8,
 }));
 
-const ButtonContainer = styled.div({
+const ButtonContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
-  marginTop: 12,
-});
+  marginTop: props.theme.spacing(6),
+}));
 
 const FeeContainer = styled.div({
   display: 'flex',
@@ -190,6 +188,7 @@ function EditFee({
   const isStx = type === 'STX';
   const { ordinals } = useOrdinalsByAddress(btcAddress);
   const ordinalsUtxos = useMemo(() => ordinals?.map((ord) => ord.utxo), [ordinals]);
+  const btcClient = useBtcClient();
 
   const modifyStxFees = (mode: string) => {
     const currentFee = new BigNumber(fee);
@@ -237,6 +236,7 @@ function EditFee({
           const { fee: modifiedFee, selectedFeeRate } = await getBtcFees(
             btcRecipients,
             btcAddress,
+            btcClient,
             network.type,
             mode,
           );
@@ -248,6 +248,7 @@ function EditFee({
           btcRecipients[0].address,
           ordinalTxUtxo,
           btcAddress,
+          btcClient,
           network.type,
           ordinalsUtxos || [],
           mode,
@@ -297,6 +298,7 @@ function EditFee({
           const { fee: modifiedFee, selectedFeeRate } = await getBtcFees(
             btcRecipients,
             btcAddress,
+            btcClient,
             network.type,
             feeMode,
             feeRateInput,
@@ -322,6 +324,7 @@ function EditFee({
           btcRecipients[0].address,
           ordinalTxUtxo,
           btcAddress,
+          btcClient,
           network.type,
           ordinalsUtxos || [],
           feeMode,

src/app/components/transactionSetting/editNonce.tsx

@@ -51,6 +51,7 @@ interface Props {
 function EditNonce({ nonce, setNonce }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'TRANSACTION_SETTING' });
   const [nonceInput, setNonceInput] = useState(nonce);
+
   const onInputEditNonceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setNonceInput(e.target.value);
   };