kylefang/xverse-web-extension
1
0
Fork 0
mirror of https://github.com/zhigang1992/xverse-web-extension.git synced 2026-04-29 13:15:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

transactions bug fixes

Browse Source
This commit is contained in:
Mahmoud
2022-11-21 19:51:00 +02:00
parent 799cd4dbca
commit 9c06bf0ae3
14 changed files with 225 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@@ -126,3 +126,8 @@ dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
#editors
.idea
.vscode

120
package-lock.json generated
View File

@@ -71,7 +71,7 @@
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"eslint": "^8.23.1",
"eslint": "8.22.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
@@ -2450,27 +2450,24 @@
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
"integrity": "sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==",
"version": "0.10.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
"integrity": "sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==",
"dev": true,
"dependencies": {
"@humanwhocodes/object-schema": "^1.2.1",
"debug": "^4.1.1",
"minimatch": "^3.0.5"
"minimatch": "^3.0.4"
},
"engines": {
"node": ">=10.10.0"
}
},
"node_modules/@humanwhocodes/module-importer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
"integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
"node_modules/@humanwhocodes/gitignore-to-minimatch": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
"integrity": "sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==",
"dev": true,
"engines": {
"node": ">=12.22"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/nzakas"
@@ -10509,15 +10506,14 @@
}
},
"node_modules/eslint": {
"version": "8.27.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.27.0.tgz",
"integrity": "sha512-0y1bfG2ho7mty+SiILVf9PfuRA49ek4Nc60Wmmu62QlobNR+CeXa4xXIJgcuwSQgZiWaPH+5BDsctpIW0PR/wQ==",
"version": "8.22.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.22.0.tgz",
"integrity": "sha512-ci4t0sz6vSRKdmkOGmprBo6fmI4PrphDFMy5JEq/fNS0gQkJM3rLmrqcp8ipMcdobH3KtUP40KniAE9W19S4wA==",
"dev": true,
"dependencies": {
"@eslint/eslintrc": "^1.3.3",
"@humanwhocodes/config-array": "^0.11.6",
"@humanwhocodes/module-importer": "^1.0.1",
"@nodelib/fs.walk": "^1.2.8",
"@eslint/eslintrc": "^1.3.0",
"@humanwhocodes/config-array": "^0.10.4",
"@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
"ajv": "^6.10.0",
"chalk": "^4.0.0",
"cross-spawn": "^7.0.2",
@@ -10527,21 +10523,21 @@
"eslint-scope": "^7.1.1",
"eslint-utils": "^3.0.0",
"eslint-visitor-keys": "^3.3.0",
"espree": "^9.4.0",
"espree": "^9.3.3",
"esquery": "^1.4.0",
"esutils": "^2.0.2",
"fast-deep-equal": "^3.1.3",
"file-entry-cache": "^6.0.1",
"find-up": "^5.0.0",
"glob-parent": "^6.0.2",
"functional-red-black-tree": "^1.0.1",
"glob-parent": "^6.0.1",
"globals": "^13.15.0",
"globby": "^11.1.0",
"grapheme-splitter": "^1.0.4",
"ignore": "^5.2.0",
"import-fresh": "^3.0.0",
"imurmurhash": "^0.1.4",
"is-glob": "^4.0.0",
"is-path-inside": "^3.0.3",
"js-sdsl": "^4.1.4",
"js-yaml": "^4.1.0",
"json-stable-stringify-without-jsonify": "^1.0.1",
"levn": "^0.4.1",
@@ -10552,7 +10548,8 @@
"regexpp": "^3.2.0",
"strip-ansi": "^6.0.1",
"strip-json-comments": "^3.1.0",
"text-table": "^0.2.0"
"text-table": "^0.2.0",
"v8-compile-cache": "^2.0.3"
},
"bin": {
"eslint": "bin/eslint.js"
@@ -13918,15 +13915,6 @@
"node": ">=6"
}
},
"node_modules/is-path-inside": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
"integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/is-plain-obj": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
@@ -15297,12 +15285,6 @@
"url": "https://github.com/chalk/supports-color?sponsor=1"
}
},
"node_modules/js-sdsl": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
"integrity": "sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==",
"dev": true
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -27319,14 +27301,6 @@
"node": ">=6"
}
},
"node_modules/split-on-first": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
"integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
"engines": {
"node": ">=6"
}
},
"node_modules/split-string": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -32335,20 +32309,20 @@
}
},
"@humanwhocodes/config-array": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
"integrity": "sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==",
"version": "0.10.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
"integrity": "sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==",
"dev": true,
"requires": {
"@humanwhocodes/object-schema": "^1.2.1",
"debug": "^4.1.1",
"minimatch": "^3.0.5"
"minimatch": "^3.0.4"
}
},
"@humanwhocodes/module-importer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
"integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
"@humanwhocodes/gitignore-to-minimatch": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
"integrity": "sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==",
"dev": true
},
"@humanwhocodes/object-schema": {
@@ -38833,15 +38807,14 @@
}
},
"eslint": {
"version": "8.27.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.27.0.tgz",
"integrity": "sha512-0y1bfG2ho7mty+SiILVf9PfuRA49ek4Nc60Wmmu62QlobNR+CeXa4xXIJgcuwSQgZiWaPH+5BDsctpIW0PR/wQ==",
"version": "8.22.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.22.0.tgz",
"integrity": "sha512-ci4t0sz6vSRKdmkOGmprBo6fmI4PrphDFMy5JEq/fNS0gQkJM3rLmrqcp8ipMcdobH3KtUP40KniAE9W19S4wA==",
"dev": true,
"requires": {
"@eslint/eslintrc": "^1.3.3",
"@humanwhocodes/config-array": "^0.11.6",
"@humanwhocodes/module-importer": "^1.0.1",
"@nodelib/fs.walk": "^1.2.8",
"@eslint/eslintrc": "^1.3.0",
"@humanwhocodes/config-array": "^0.10.4",
"@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
"ajv": "^6.10.0",
"chalk": "^4.0.0",
"cross-spawn": "^7.0.2",
@@ -38851,21 +38824,21 @@
"eslint-scope": "^7.1.1",
"eslint-utils": "^3.0.0",
"eslint-visitor-keys": "^3.3.0",
"espree": "^9.4.0",
"espree": "^9.3.3",
"esquery": "^1.4.0",
"esutils": "^2.0.2",
"fast-deep-equal": "^3.1.3",
"file-entry-cache": "^6.0.1",
"find-up": "^5.0.0",
"glob-parent": "^6.0.2",
"functional-red-black-tree": "^1.0.1",
"glob-parent": "^6.0.1",
"globals": "^13.15.0",
"globby": "^11.1.0",
"grapheme-splitter": "^1.0.4",
"ignore": "^5.2.0",
"import-fresh": "^3.0.0",
"imurmurhash": "^0.1.4",
"is-glob": "^4.0.0",
"is-path-inside": "^3.0.3",
"js-sdsl": "^4.1.4",
"js-yaml": "^4.1.0",
"json-stable-stringify-without-jsonify": "^1.0.1",
"levn": "^0.4.1",
@@ -38876,7 +38849,8 @@
"regexpp": "^3.2.0",
"strip-ansi": "^6.0.1",
"strip-json-comments": "^3.1.0",
"text-table": "^0.2.0"
"text-table": "^0.2.0",
"v8-compile-cache": "^2.0.3"
},
"dependencies": {
"chalk": {
@@ -41364,12 +41338,6 @@
}
}
},
"is-path-inside": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
"integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
"dev": true
},
"is-plain-obj": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
@@ -42405,12 +42373,6 @@
}
}
},
"js-sdsl": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
"integrity": "sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==",
"dev": true
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

2
package.json
View File

@@ -84,7 +84,7 @@
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"eslint": "^8.23.1",
"eslint": "8.22.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-plugin-import": "^2.26.0",

1
src/app/components/topRow/index.tsx
View File

@@ -10,6 +10,7 @@ const TopSectionContainer = styled.div({
const HeaderText = styled.h1((props) => ({
...props.theme.body_bold_m,
paddingRight: props.theme.spacing(10),
}));
const BackButton = styled.button({

94
src/app/components/transactions/stxTransaction.tsx
View File

@@ -1,55 +1,32 @@
import { CurrencyTypes } from '@utils/constants';
import { AddressTransactionWithTransfers } from '@stacks/stacks-blockchain-api-types';
import styled from 'styled-components';
import { isAddressTransactionWithTransfers, Tx } from '@utils/transactions/transactions';
import { StxTransactionData } from '@secretkeylabs/xverse-core';
import { parseStxTransactionData } from '@secretkeylabs/xverse-core/api/helper';
import useWalletSelector from '@hooks/useWalletSelector';
import TransactionAmount from './transactionAmount';
import TransactionRecipient from './transactionRecipient';
import TransactionStatusIcon from './transactionStatusIcon';
import TransactionTitle from './transactionTitle';
import IncreaseFeeIcon from '@assets/img/transactions/increaseFee.svg';
import TxTransfers from './txTransfers';
import StxTransferTransaction from './stxTransferTransaction';
import styled from 'styled-components';
import { useTranslation } from 'react-i18next';
const TransactionContainer = styled.div((props) => ({
display: 'flex',
marginBottom: props.theme.spacing(10),
}));
const TransactionInfoContainer = styled.div((props) => ({
display: 'flex',
flexDirection: 'column',
marginLeft: props.theme.spacing(6),
flex: 1,
}));
const TransactionRow = styled.div((props) => ({
const IncreaseFeeButton = styled.button((props) => ({
...props.theme.body_xs,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
justifyContent: 'space-between',
...props.theme.body_bold_m,
alignSelf: 'flex-start',
background: 'none',
paddingLeft: props.theme.spacing(8),
paddingRight: props.theme.spacing(8),
color: props.theme.colors.white[0],
border: `0.5px solid ${props.theme.colors.background.elevation3}`,
height: 34,
borderRadius: props.theme.radius(3),
img: {
marginRight: props.theme.spacing(3),
},
}));
interface StxTransferTransactionProps {
transaction: StxTransactionData;
transactionCoin: CurrencyTypes;
}
function StxTransferTransaction(props: StxTransferTransactionProps) {
const { transaction, transactionCoin } = props;
return (
<TransactionContainer>
<TransactionStatusIcon transaction={transaction} currency="STX" />
<TransactionInfoContainer>
<TransactionRow>
<TransactionTitle transaction={transaction} />
<TransactionAmount transaction={transaction} coin={transactionCoin} />
</TransactionRow>
<TransactionRecipient transaction={transaction} />
</TransactionInfoContainer>
</TransactionContainer>
);
}
interface TransactionHistoryItemProps {
transaction: AddressTransactionWithTransfers | Tx;
transactionCoin: CurrencyTypes;
@@ -58,28 +35,35 @@ interface TransactionHistoryItemProps {
export default function StxTransactionHistoryItem(props: TransactionHistoryItemProps) {
const { transaction, transactionCoin } = props;
const { selectedAccount } = useWalletSelector();
const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
if (!isAddressTransactionWithTransfers(transaction)) {
return (
<StxTransferTransaction
transaction={parseStxTransactionData({
responseTx: transaction,
stxAddress: selectedAccount?.stxAddress as string,
})}
transactionCoin={transactionCoin}
/>
<>
<StxTransferTransaction
transaction={parseStxTransactionData({
responseTx: transaction,
stxAddress: selectedAccount?.stxAddress as string,
})}
transactionCoin={transactionCoin}
/>
<IncreaseFeeButton>
<img src={IncreaseFeeIcon} alt="fee" />
{t('INCREASE_FEE_BUTTON')}
</IncreaseFeeButton>
</>
);
} // This is a normal Transaction or MempoolTransaction
// Show transfer only for contract calls
if (transaction.tx.tx_type !== 'contract_call') {
return (
<StxTransferTransaction
transaction={parseStxTransactionData({
responseTx: transaction.tx,
stxAddress: selectedAccount?.stxAddress as string,
})}
transactionCoin={transactionCoin}
/>
<StxTransferTransaction
transaction={parseStxTransactionData({
responseTx: transaction.tx,
stxAddress: selectedAccount?.stxAddress as string,
})}
transactionCoin={transactionCoin}
/>
);
}
return (

52
src/app/components/transactions/stxTransferTransaction.tsx Normal file
View File

@@ -0,0 +1,52 @@
import styled from 'styled-components';
import { StxTransactionData } from '@secretkeylabs/xverse-core';
import { CurrencyTypes } from '@utils/constants';
import TransactionStatusIcon from '@components/transactions/transactionStatusIcon';
import TransactionTitle from '@components/transactions/transactionTitle';
import TransactionAmount from '@components/transactions/transactionAmount';
import TransactionRecipient from '@components/transactions/transactionRecipient';
const TransactionContainer = styled.button((props) => ({
display: 'flex',
marginBottom: props.theme.spacing(10),
background: 'none',
}));
const TransactionInfoContainer = styled.div((props) => ({
display: 'flex',
flexDirection: 'column',
marginLeft: props.theme.spacing(6),
flex: 1,
}));
const TransactionRow = styled.div((props) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
...props.theme.body_bold_m,
}));
interface StxTransferTransactionProps {
transaction: StxTransactionData;
transactionCoin: CurrencyTypes;
}
export default function StxTransferTransaction(props: StxTransferTransactionProps) {
const { transaction, transactionCoin } = props;
const openContractDeployment = () => {
window.open(`https://explorer.stacks.co/txid/${transaction.txid}?chain=mainnet`, '_blank');
};
return (
<TransactionContainer onClick={openContractDeployment}>
<TransactionStatusIcon transaction={transaction} currency="STX" />
<TransactionInfoContainer>
<TransactionRow>
<TransactionTitle transaction={transaction} />
<TransactionAmount transaction={transaction} coin={transactionCoin} />
</TransactionRow>
<TransactionRecipient transaction={transaction} />
</TransactionInfoContainer>
</TransactionContainer>
);
}

2
src/app/components/transactions/transactionAmount.tsx
View File

@@ -50,7 +50,7 @@ export default function TransactionAmount(props: TransactionAmountProps): JSX.El
thousandSeparator
prefix={prefix}
renderText={(value: string) => (
<p>{`${value} ${getFtTicker(token as FungibleToken)?.toUpperCase()}`}</p>
<TransactionValue>{`${value} ${getFtTicker(token as FungibleToken)?.toUpperCase()}`}</TransactionValue>
)}
/>
);

1
src/app/components/transactions/transactionRecipient.tsx
View File

@@ -4,6 +4,7 @@ import styled from 'styled-components';
const RecipientAddress = styled.p((props) => ({
...props.theme.body_xs,
color: props.theme.colors.white[400],
textAlign: 'left',
}));
interface TransactionRecipientProps {

11
src/app/components/transactions/txTransfers.tsx
View File

@@ -1,5 +1,4 @@
import useWalletSelector from '@hooks/useWalletSelector';
import { Transfer } from '@secretkeylabs/xverse-core/types/api/stacks/transaction';
import { AddressTransactionWithTransfers } from '@stacks/stacks-blockchain-api-types';
import ReceiveIcon from '@assets/img/transactions/received.svg';
import SendIcon from '@assets/img/transactions/sent.svg';
@@ -38,6 +37,7 @@ const TransactionTitleText = styled.p((props) => ({
const RecipientAddress = styled.p((props) => ({
...props.theme.body_xs,
color: props.theme.colors.white[400],
textAlign: 'left',
}));
const TransactionValue = styled.p((props) => ({
@@ -52,16 +52,9 @@ interface TxTransfersProps {
export default function TxTransfers(props: TxTransfersProps) {
const { transaction, coin } = props;
const { selectedAccount, coins } = useWalletSelector();
const { selectedAccount } = useWalletSelector();
const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
const getFtName = (tx: any): string => {
const coinDisplayName = coins?.find(
(ftCoins) => `${ftCoins.contract}::${ftCoins.name}` === tx.asset_identifier,
)?.name;
return coinDisplayName ?? '';
};
function formatAddress(addr: string): string {
return `${addr.substring(0, 4)}...${addr.substring(addr.length - 4, addr.length)}`;
}

1
src/app/hooks/useTransactions.ts
View File

@@ -33,5 +33,6 @@ export default function useTransactions(coinType: CurrencyTypes) {
return useQuery({
queryKey: [`transactions-${coinType}`],
queryFn: fetchTransactions,
refetchInterval: 10000,
});
}

71
src/app/screens/coinDashboard/coinHeader.tsx
View File

@@ -19,6 +19,7 @@ import { getFtBalance, getFtTicker } from '@utils/tokens';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useState } from 'react';
import { getExplorerUrl } from '@utils/helper';
interface CoinBalanceProps {
coin: CurrencyTypes;
@@ -172,6 +173,7 @@ export default function CoinHeader(props: CoinBalanceProps) {
btcFiatRate,
stxLockedBalance,
stxAvailableBalance,
loadingWalletData,
} = useWalletSelector();
const navigate = useNavigate();
const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
@@ -228,10 +230,7 @@ export default function CoinHeader(props: CoinBalanceProps) {
}
const openContractDeployment = () => {
window.open(
`https://explorer.stacks.co/txid/${fungibleToken?.principal}?chain=mainnet`,
'_blank'
);
window.open(getExplorerUrl(fungibleToken?.principal as string), '_blank');
};
const handleCopyContractAddress = () => {
@@ -252,7 +251,9 @@ export default function CoinHeader(props: CoinBalanceProps) {
<TokenContractContainer>
<h1>{t('FT_CONTRACT_PREFIX')}</h1>
<ContractAddressCopyButton onClick={handleCopyContractAddress}>
<TokenContractAddress>{formatAddress(fungibleToken?.principal as string)}</TokenContractAddress>
<TokenContractAddress>
{formatAddress(fungibleToken?.principal as string)}
</TokenContractAddress>
<img src={CopyIcon} alt="copy" />
</ContractAddressCopyButton>
<ContractDeploymentButton onClick={openContractDeployment}>
@@ -265,29 +266,36 @@ export default function CoinHeader(props: CoinBalanceProps) {
</>
);
const renderStackingBalances = () => (
<Container>
<LockedStxContainer>
<img src={Lock} alt="locked" />
<span>{t('STX_LOCKED_BALANCE_PREFIX')}</span>
<NumericFormat
value={microstacksToStx(stxLockedBalance).toString()}
displayType="text"
thousandSeparator
renderText={(value: string) => <StxLockedText>{`${value} STX`}</StxLockedText>}
/>
</LockedStxContainer>
<AvailableStxContainer>
<span>{t('STX_AVAILABLE_BALANCE_PREFIX')}</span>
<NumericFormat
value={microstacksToStx(stxAvailableBalance).toString()}
displayType="text"
thousandSeparator
renderText={(value: string) => <StxLockedText>{`${value} STX`}</StxLockedText>}
/>
</AvailableStxContainer>
</Container>
);
const renderStackingBalances = () => {
if (!loadingWalletData && !stxLockedBalance.eq(0, 10) && coin === 'STX') {
return (
<>
<HeaderSeparator />
<Container>
<LockedStxContainer>
<img src={Lock} alt="locked" />
<span>{t('STX_LOCKED_BALANCE_PREFIX')}</span>
<NumericFormat
value={microstacksToStx(stxLockedBalance).toString()}
displayType="text"
thousandSeparator
renderText={(value: string) => <StxLockedText>{`${value} STX`}</StxLockedText>}
/>
</LockedStxContainer>
<AvailableStxContainer>
<span>{t('STX_AVAILABLE_BALANCE_PREFIX')}</span>
<NumericFormat
value={microstacksToStx(stxAvailableBalance).toString()}
displayType="text"
thousandSeparator
renderText={(value: string) => <StxLockedText>{`${value} STX`}</StxLockedText>}
/>
</AvailableStxContainer>
</Container>
</>
);
}
};
return (
<Container>
@@ -317,12 +325,7 @@ export default function CoinHeader(props: CoinBalanceProps) {
</BalanceValuesContainer>
</BalanceInfoContainer>
{fungibleToken ? renderFtInfo() : null}
{stxLockedBalance && coin === 'STX' && (
<>
<HeaderSeparator />
{renderStackingBalances()}
</>
)}
{renderStackingBalances()}
<RowButtonContainer>
<ButtonContainer>
<ActionButton src={ArrowUpRight} text="Send" onPress={() => navigate(`/send-${coin}`)} />

68
src/app/screens/coinDashboard/transactionsHistoryList.tsx
View File

@@ -41,6 +41,7 @@ const LoadingContainer = styled.div({
const NoTransactionsContainer = styled.div((props) => ({
...props.theme.body_m,
display: 'flex',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
color: props.theme.colors.white[400],
@@ -69,46 +70,45 @@ interface TransactionsHistoryListProps {
}
const groupBtcTxsByDate = (
transactions: BtcTransactionData[],
): { [x: string]: BtcTransactionData[] } => transactions.reduce(
(all: { [x: string]: BtcTransactionData[] }, transaction: BtcTransactionData) => {
const txDate = formatDate(transaction.seenTime);
if (!all[txDate]) {
if (transaction.txStatus === 'pending') {
all.Pending = [transaction];
transactions: BtcTransactionData[]
): { [x: string]: BtcTransactionData[] } =>
transactions.reduce(
(all: { [x: string]: BtcTransactionData[] }, transaction: BtcTransactionData) => {
const txDate = formatDate(transaction.seenTime);
if (!all[txDate]) {
if (transaction.txStatus === 'pending') {
all.Pending = [transaction];
} else {
all[txDate] = [transaction];
}
} else {
all[txDate] = [transaction];
all[txDate].push(transaction);
}
} else {
all[txDate].push(transaction);
}
return all;
},
{},
);
return all;
},
{}
);
const groupedTxsByDateMap = (txs: (AddressTransactionWithTransfers | MempoolTransaction)[]) => txs.reduce(
(
all: { [x: string]: (AddressTransactionWithTransfers | Tx)[] },
transaction: AddressTransactionWithTransfers | Tx,
) => {
if (isAddressTransactionWithTransfers(transaction)) {
const date = formatDate(new Date(transaction.tx.burn_block_time_iso));
const groupedTxsByDateMap = (txs: (AddressTransactionWithTransfers | MempoolTransaction)[]) =>
txs.reduce(
(
all: { [x: string]: (AddressTransactionWithTransfers | Tx)[] },
transaction: AddressTransactionWithTransfers | Tx
) => {
const date = formatDate(
new Date(
transaction.tx?.burn_block_time_iso ? transaction.tx.burn_block_time_iso : Date.now()
)
);
if (!all[date]) {
all[date] = [transaction];
} else {
all[date].push(transaction);
}
}
if (!all.pending) {
all.pending = [transaction];
} else {
all.pending.push(transaction);
}
return all;
},
{},
);
return all;
},
{}
);
const filterTxs = (
txs: (AddressTransactionWithTransfers | MempoolTransaction)[],
@@ -129,7 +129,7 @@ const filterTxs = (
export default function TransactionsHistoryList(props: TransactionsHistoryListProps) {
const { coin, txFilter } = props;
const { data, isLoading } = useTransactions((coin as CurrencyTypes) || 'STX');
const { data, isLoading, isFetching } = useTransactions((coin as CurrencyTypes) || 'STX');
const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
@@ -144,7 +144,7 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr
}
return groupedTxsByDateMap(data);
}
}, [data, isLoading]);
}, [data, isLoading, isFetching]);
return (
<ListItemsContainer>

8
src/assets/img/transactions/increaseFee.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.875 8.06216L2.375 8.06218" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.625 8.06218L8.375 8.06216" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.875 3.93721L2.375 3.93713" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.625 3.93713L5.375 3.93721" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.375 2.81216V5.06216" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.375 9.18716V6.93716" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 825 B

3
src/locales/en.json
View File

@@ -298,6 +298,7 @@
"LESS_FT_INFO_BUTTON": "Show less info",
"FT_CONTRACT_PREFIX": "Token Contract",
"OPEN_FT_CONTRACT_DEPLOYMENT": "View the contract on",
"STACKS_EXPLORER": "Stacks Explorer"
"STACKS_EXPLORER": "Stacks Explorer",
"INCREASE_FEE_BUTTON": "Increase fee"
}
}