Merge pull request #201 from secretkeylabs/release/v0.34.0

release: v0.34.0 to develop
secretkeylabs · Apr 22, 2024 · 299d9e8 · 299d9e8
2 parents 195e164 + a8872e8
commit 299d9e8
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 43 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.33.2",
+  "version": "0.34.0",
   "private": true,
   "engines": {
     "node": "^18.18.2"

diff --git a/src/app/components/confirmBtcTransaction/burnSection.tsx b/src/app/components/confirmBtcTransaction/burnSection.tsx
@@ -46,7 +46,11 @@ function BurnSection({ burns }: Props) {
       </Header>
       {burns.map((burn) => (
         <RowContainer key={burn.runeName}>
-          <RuneAmount tokenName={burn.runeName} amount={String(burn.amount)} />
+          <RuneAmount
+            tokenName={burn.runeName}
+            amount={String(burn.amount)}
+            divisibility={burn.divisibility}
+          />
         </RowContainer>
       ))}
     </Container>

diff --git a/src/app/components/confirmBtcTransaction/itemRow/runeAmount.tsx b/src/app/components/confirmBtcTransaction/itemRow/runeAmount.tsx
@@ -2,7 +2,7 @@ import { mapRuneNameToPlaceholder } from '@components/confirmBtcTransaction/util
 import TokenImage from '@components/tokenImage';
 import Avatar from '@ui-library/avatar';
 import { StyledP } from '@ui-library/common.styled';
-import { getTicker } from '@utils/helper';
+import { ftDecimals, getTicker } from '@utils/helper';
 import { useTranslation } from 'react-i18next';
 import { NumericFormat } from 'react-number-format';
 import styled from 'styled-components';
@@ -18,43 +18,42 @@ const AvatarContainer = styled.div`
   margin-right: ${(props) => props.theme.space.xs};
 `;
 
-const ColumnContainer = styled.div({
+const Row = styled.div({
   width: '100%',
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
-  alignItems: 'center',
   gap: '24px',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
 });
 
-const AmountDiv = styled.div`
-  flex: 3;
-  overflow: hidden;
-`;
-
-const NumberTypeContainer = styled.div`
-  flex: 1;
-  text-align: right;
+const Column = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
   overflow: hidden;
 `;
 
-const EllipsisStyledP = styled(StyledP)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+const StyledPRight = styled(StyledP)`
+  word-break: break-all;
+  text-align: end;
 `;
 
 type Props = {
   tokenName: string;
   amount: string;
+  divisibility: number;
   hasSufficientBalance?: boolean;
 };
 
-export default function RuneAmount({ tokenName, amount, hasSufficientBalance = true }: Props) {
+export default function RuneAmount({
+  tokenName,
+  amount,
+  divisibility,
+  hasSufficientBalance = true,
+}: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
-
+  const amountWithDecimals = ftDecimals(amount, divisibility);
   return (
     <Container>
       <AvatarContainer>
@@ -70,32 +69,30 @@ export default function RuneAmount({ tokenName, amount, hasSufficientBalance = t
           }
         />
       </AvatarContainer>
-      <ColumnContainer>
-        <AmountDiv>
+      <Column>
+        <Row>
           <StyledP typography="body_medium_m" color="white_200">
             {t('AMOUNT')}
           </StyledP>
-          <EllipsisStyledP typography="body_medium_s" color="white_400">
-            {tokenName}
-          </EllipsisStyledP>
-        </AmountDiv>
-        <NumberTypeContainer>
           <NumericFormat
-            value={amount}
+            value={amountWithDecimals}
             displayType="text"
             thousandSeparator
             suffix={` ${getTicker(tokenName)}`}
             renderText={(value: string) => (
-              <EllipsisStyledP
+              <StyledPRight
                 typography="body_medium_m"
                 color={hasSufficientBalance ? 'white_200' : 'danger_light'}
               >
                 {value}
-              </EllipsisStyledP>
+              </StyledPRight>
             )}
           />
-        </NumberTypeContainer>
-      </ColumnContainer>
+        </Row>
+        <StyledP typography="body_medium_s" color="white_400">
+          {tokenName}
+        </StyledP>
+      </Column>
     </Container>
   );
 }
diff --git a/src/app/components/confirmBtcTransaction/mintSection.tsx b/src/app/components/confirmBtcTransaction/mintSection.tsx
@@ -1,7 +1,9 @@
 import { ArrowRight } from '@phosphor-icons/react';
 import { RuneSummary } from '@secretkeylabs/xverse-core';
 import { StyledP } from '@ui-library/common.styled';
+import { ftDecimals } from '@utils/helper';
 import { useTranslation } from 'react-i18next';
+import { NumericFormat } from 'react-number-format';
 import styled from 'styled-components';
 import Theme from '../../../theme';
 
@@ -77,9 +79,16 @@ function MintSection({ mints }: Props) {
                 <StyledP typography="body_medium_m" color="white_200">
                   {t('AMOUNT')}
                 </StyledP>
-                <StyledP typography="body_medium_m" color="white_0">
-                  {mint?.amount.toString(10)}
-                </StyledP>
+                <NumericFormat
+                  value={ftDecimals(mint?.amount.toString(10), mint?.divisibility)}
+                  displayType="text"
+                  thousandSeparator
+                  renderText={(value: string) => (
+                    <StyledP typography="body_medium_m" color="white_0">
+                      {value}
+                    </StyledP>
+                  )}
+                />
               </Header>
             </Container>
           ),

diff --git a/src/app/components/confirmBtcTransaction/receiveSection.tsx b/src/app/components/confirmBtcTransaction/receiveSection.tsx
@@ -101,7 +101,11 @@ function ReceiveSection({ outputs, netAmount, onShowInscription, runeReceipts }:
           </Header>
           {ordinalRuneReceipts.map((receipt) => (
             <RowContainer key={receipt.runeName}>
-              <RuneAmount tokenName={receipt.runeName} amount={String(receipt.amount)} />
+              <RuneAmount
+                tokenName={receipt.runeName}
+                amount={String(receipt.amount)}
+                divisibility={receipt.divisibility}
+              />
             </RowContainer>
           ))}
           {areInscriptionRareSatsInOrdinal && (
@@ -137,7 +141,11 @@ function ReceiveSection({ outputs, netAmount, onShowInscription, runeReceipts }:
           </Header>
           {paymentRuneReceipts.map((receipt) => (
             <RowContainer key={receipt.runeName}>
-              <RuneAmount tokenName={receipt.runeName} amount={String(receipt.amount)} />
+              <RuneAmount
+                tokenName={receipt.runeName}
+                amount={String(receipt.amount)}
+                divisibility={receipt.divisibility}
+              />
             </RowContainer>
           ))}
           {amountIsBiggerThanZero && (

diff --git a/src/app/components/confirmBtcTransaction/transferSection.tsx b/src/app/components/confirmBtcTransaction/transferSection.tsx
@@ -95,6 +95,7 @@ function TransferSection({
           <RuneAmount
             tokenName={transfer.runeName}
             amount={String(transfer.amount)}
+            divisibility={transfer.divisibility}
             hasSufficientBalance={transfer.hasSufficientBalance}
           />
         </RowContainer>

diff --git a/src/app/screens/manageTokens/index.tsx b/src/app/screens/manageTokens/index.tsx
@@ -15,6 +15,7 @@ import {
   setRunesManageTokensAction,
   setSip10ManageTokensAction,
 } from '@stores/wallet/actions/actionCreators';
+import BigNumber from 'bignumber.js';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
@@ -162,21 +163,21 @@ function ManageTokens() {
       case 'stacks':
         coins = (sip10List ?? []).map((ft) => ({
           ...ft,
-          visible: sip10ManageTokens[ft.principal] ?? ft.visible,
+          visible: sip10ManageTokens[ft.principal] ?? new BigNumber(ft.balance).gt(0),
         }));
         error = sip10Error;
         break;
       case 'brc-20':
         coins = (brc20List ?? []).map((ft) => ({
           ...ft,
-          visible: brc20ManageTokens[ft.principal] ?? ft.visible,
+          visible: brc20ManageTokens[ft.principal] ?? new BigNumber(ft.balance).gt(0),
         }));
         error = brc20Error;
         break;
       case 'runes':
         coins = (runesList ?? []).map((ft) => ({
           ...ft,
-          visible: runesManageTokens[ft.principal] ?? ft.visible,
+          visible: runesManageTokens[ft.principal] ?? new BigNumber(ft.balance).gt(0),
         }));
         error = runeError;
         break;