Merge branch 'develop' of https://github.com/secretkeylabs/xverse-web-extension-private into jordankzf/fungibletoken-to-token

2026-04-29 05:05:45 +08:00 · 2024-11-21 15:51:10 +08:00
parent ab307387de e14183f035
commit d9af0cd208
6 changed files with 70 additions and 83 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
        "@sats-connect/core": "0.4.0",
        "@scure/base": "^1.1.9",
        "@scure/btc-signer": "1.2.1",
-        "@secretkeylabs/xverse-core": "27.2.1",
+        "@secretkeylabs/xverse-core": "27.3.1",
        "@stacks/connect": "7.4.1",
        "@stacks/stacks-blockchain-api-types": "6.1.1",
        "@stacks/transactions": "6.16.1",
@@ -1383,9 +1383,9 @@
      }
    },
    "node_modules/@secretkeylabs/xverse-core": {
-      "version": "27.2.1",
-      "resolved": "https://npm.pkg.github.com/download/@secretkeylabs/xverse-core/27.2.1/06ba895aae8ccf2d34a88a0c0bfaad470c950efb",
-      "integrity": "sha512-kymCzFDeOYIyRHv4x4FUzumfXE70wygQ/sy45gdxuZYWU8XN+pCGvxPtwyrIORDsxRu+bH1UYQ2TG0oooCW7hQ==",
+      "version": "27.3.1",
+      "resolved": "https://npm.pkg.github.com/download/@secretkeylabs/xverse-core/27.3.1/e338e4a08b90142fe4fd2f05702da9e16897dda5",
+      "integrity": "sha512-2myDpqRash2gzjv4Zyvmg/MU+ySBf+sQXKGzjfjCWTGxOFUMQu9h2Ws6wt8rRfRltIq9HpwZ/CDW+ONNng+Vfg==",
      "dependencies": {
        "@bitcoinerlab/secp256k1": "^1.0.2",
        "@noble/curves": "^1.2.0",
@@ -13873,9 +13873,9 @@
      }
    },
    "@secretkeylabs/xverse-core": {
-      "version": "27.2.1",
-      "resolved": "https://npm.pkg.github.com/download/@secretkeylabs/xverse-core/27.2.1/06ba895aae8ccf2d34a88a0c0bfaad470c950efb",
-      "integrity": "sha512-kymCzFDeOYIyRHv4x4FUzumfXE70wygQ/sy45gdxuZYWU8XN+pCGvxPtwyrIORDsxRu+bH1UYQ2TG0oooCW7hQ==",
+      "version": "27.3.1",
+      "resolved": "https://npm.pkg.github.com/download/@secretkeylabs/xverse-core/27.3.1/e338e4a08b90142fe4fd2f05702da9e16897dda5",
+      "integrity": "sha512-2myDpqRash2gzjv4Zyvmg/MU+ySBf+sQXKGzjfjCWTGxOFUMQu9h2Ws6wt8rRfRltIq9HpwZ/CDW+ONNng+Vfg==",
      "requires": {
        "@bitcoinerlab/secp256k1": "^1.0.2",
        "@noble/curves": "^1.2.0",
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
    "@sats-connect/core": "0.4.0",
    "@scure/base": "^1.1.9",
    "@scure/btc-signer": "1.2.1",
-    "@secretkeylabs/xverse-core": "27.2.1",
+    "@secretkeylabs/xverse-core": "27.3.1",
    "@stacks/connect": "7.4.1",
    "@stacks/stacks-blockchain-api-types": "6.1.1",
    "@stacks/transactions": "6.16.1",
--- a/src/app/components/tokenTile/index.tsx
+++ b/src/app/components/tokenTile/index.tsx
@@ -63,6 +63,7 @@ const CoinTickerText = styled.p((props) => ({
  color: props.theme.colors.white_0,
  lineHeight: '140%',
  minHeight: 20,
+  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
 }));
@@ -72,6 +73,7 @@ const CoinSubtitleText = styled.p((props) => ({
  color: props.theme.colors.white_200,
  lineHeight: '140%',
  minHeight: 20,
+  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
 }));
@@ -91,7 +93,6 @@ const TokenTitleContainer = styled.div((props) => ({
  flex: 1,
  justifyContent: 'flex-start',
  overflow: 'hidden',
-  textOverflow: 'ellipsis',
  marginBottom: props.theme.space.xxxs,
 }));

--- a/src/app/hooks/useWalletReducer.ts
+++ b/src/app/hooks/useWalletReducer.ts
@@ -399,7 +399,7 @@ const useWalletReducer = () => {
  const restoreWallet = async (seedPhrase: string, password: string) => {
    await initialiseSeedVault(seedPhrase, password);

-    trackMixPanel(AnalyticsEvents.RestoreWallet);
+    trackMixPanel(AnalyticsEvents.RestoreWallet, { backupType: 'manual' });
  };

  const createWallet = async (seedPhrase: string, password: string, hasBackedUpWallet: boolean) => {
--- a/src/app/screens/swap/quotesModal/quoteTile.tsx
+++ b/src/app/screens/swap/quotesModal/quoteTile.tsx
@@ -2,14 +2,14 @@ import TokenImage from '@components/tokenImage';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { CaretRight } from '@phosphor-icons/react';
 import type { FungibleToken } from '@secretkeylabs/xverse-core';
+import { formatBalance } from '@secretkeylabs/xverse-core';
 import { StyledP } from '@ui-library/common.styled';
 import type { CurrencyTypes } from '@utils/constants';
-import { formatNumber } from '@utils/helper';
 import { NumericFormat } from 'react-number-format';
 import styled, { useTheme } from 'styled-components';
 import type { Color } from 'theme';

-const Container = styled.button<{ clickable: boolean }>`
+const MainContainer = styled.button<{ clickable: boolean }>`
  display: flex;
  flex-direction: row;
  border: 1px solid ${({ theme }) => theme.colors.elevation6};
@@ -23,20 +23,33 @@ const Container = styled.button<{ clickable: boolean }>`
  justify-content: center;
 `;

-const RowCenter = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  flex: 1;
-`;
-
-const InfoContainer = styled.div`
+const RowContainers = styled.div`
  display: flex;
  flex-direction: column;
-  flex: 1;
+  width: 100%;
  margin-left: ${({ theme }) => theme.space.m};
  margin-right: ${({ theme }) => theme.space.s};
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const RowContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.space.m};
+`;
+
+const TruncatedP = styled(StyledP)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const PriceUnitContainer = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: flex-end;
 `;

 const GreenEllipse = styled.div`
@@ -65,14 +78,6 @@ interface Props {
  unit?: string;
 }

-const TruncatedP = styled(StyledP)<{ $textAlign: string }>`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 120px;
-  text-align: ${({ $textAlign }) => $textAlign};
-`;
-
 function QuoteTile({
  provider,
  price,
@@ -96,35 +101,27 @@ function QuoteTile({
  const subtitleColor = subtitleColorOverride ?? getSubtitleColor();

  return (
-    <Container data-testid="swap-place-button" onClick={onClick} clickable={Boolean(onClick)}>
+    <MainContainer data-testid="swap-place-button" onClick={onClick} clickable={Boolean(onClick)}>
      <TokenImage fungibleToken={token} imageUrl={image} size={32} />
-      <InfoContainer>
-        <RowCenter>
-          <TruncatedP
-            $textAlign="left"
-            data-testid="place-name"
-            typography="body_bold_m"
-            color="white_0"
-          >
+      <RowContainers>
+        <RowContainer>
+          <TruncatedP data-testid="place-name" typography="body_bold_m" color="white_0">
            {provider}
          </TruncatedP>
-          <NumericFormat
-            value={price}
-            displayType="text"
-            thousandSeparator
-            renderText={() => (
-              <TruncatedP
-                $textAlign="right"
-                data-testid="quote-label"
-                typography="body_bold_m"
-                color="white_0"
-              >
-                {formatNumber(price)} {unit}
-              </TruncatedP>
-            )}
-          />
-        </RowCenter>
-        <RowCenter>
+          <PriceUnitContainer>
+            <NumericFormat
+              value={price}
+              displayType="text"
+              thousandSeparator
+              renderText={() => (
+                <TruncatedP data-testid="quote-label" typography="body_bold_m" color="white_0">
+                  {formatBalance(price)} {unit}
+                </TruncatedP>
+              )}
+            />
+          </PriceUnitContainer>
+        </RowContainer>
+        <RowContainer>
          {subtitle && subtitleColor && (
            <StyledP data-testid="info-message" typography="body_medium_s" color={subtitleColor}>
              <SubtitleContainer>
@@ -152,10 +149,10 @@ function QuoteTile({
              {floorText}
            </StyledP>
          )}
-        </RowCenter>
-      </InfoContainer>
+        </RowContainer>
+      </RowContainers>
      {onClick && <CaretRight size={theme.space.m} color={theme.colors.white_0} />}
-    </Container>
+    </MainContainer>
  );
 }

--- a/src/app/screens/swap/utxoSelection/utxoItem.tsx
+++ b/src/app/screens/swap/utxoSelection/utxoItem.tsx
@@ -1,4 +1,9 @@
-import { satsToBtc, type FungibleToken, type MarketUtxo } from '@secretkeylabs/xverse-core';
+import {
+  formatBalance,
+  satsToBtc,
+  type FungibleToken,
+  type MarketUtxo,
+} from '@secretkeylabs/xverse-core';
 import Checkbox from '@ui-library/checkbox';
 import { StyledP } from '@ui-library/common.styled';
 import { getTruncatedAddress } from '@utils/helper';
@@ -27,6 +32,7 @@ const RuneTitle = styled(StyledP)`
  text-overflow: ellipsis;
  width: 100%;
  text-align: left;
+  line-height: 2;
 `;

 const CheckBoxContainer = styled.div((props) => ({
@@ -78,34 +84,17 @@ function UtxoItem({ utxo, selected, token, onSelect }: Props) {
      </CheckBoxContainer>
      <Row>
        <LeftColumn>
-          <NumericFormat
-            value={utxo.amount}
-            displayType="text"
-            suffix={` ${token?.runeSymbol}`}
-            thousandSeparator
-            renderText={(value: string) => (
-              <RuneTitle data-testid="utxo-title" typography="body_medium_m" color="white_0">
-                {value}
-              </RuneTitle>
-            )}
-          />
-
+          <RuneTitle data-testid="utxo-title" typography="body_medium_m" color="white_0">
+            {`${formatBalance(utxo.amount)} ${token?.runeSymbol}`}
+          </RuneTitle>
          <StyledP typography="body_medium_s" color="white_400">
            {`${getTruncatedAddress(utxo.identifier, 6)}`}
          </StyledP>
        </LeftColumn>
        <RightColumn>
-          <NumericFormat
-            value={satsToBtc(new BigNumber(utxo.price)).toString()}
-            displayType="text"
-            suffix=" BTC"
-            thousandSeparator
-            renderText={(value: string) => (
-              <StyledP typography="body_medium_m" color="white_0">
-                {value}
-              </StyledP>
-            )}
-          />
+          <StyledP typography="body_medium_m" color="white_0">
+            {formatBalance(satsToBtc(new BigNumber(utxo.price)).toString())} BTC
+          </StyledP>
          <NumericFormat
            value={satsPerRune.toFixed(2)}
            displayType="text"