Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
F
frontend
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
vicotor
frontend
Commits
3c6cb6f9
Commit
3c6cb6f9
authored
May 17, 2023
by
tom
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add token icon url
parent
0195da4e
Changes
27
Hide whitespace changes
Inline
Side-by-side
Showing
27 changed files
with
166 additions
and
69 deletions
+166
-69
tokenInfo.ts
mocks/tokens/tokenInfo.ts
+13
-0
tokenTransfer.ts
mocks/tokens/tokenTransfer.ts
+3
-0
state.ts
mocks/txs/state.ts
+2
-0
token.ts
stubs/token.ts
+1
-0
token.ts
types/api/token.ts
+1
-0
AddressTokenTransfers.tsx
ui/address/AddressTokenTransfers.tsx
+7
-1
AddressBalance.tsx
ui/address/details/AddressBalance.tsx
+7
-2
TokenSelectItem.tsx
ui/address/tokenSelect/TokenSelectItem.tsx
+1
-1
ERC20TokensListItem.tsx
ui/address/tokens/ERC20TokensListItem.tsx
+1
-1
ERC20TokensTableItem.tsx
ui/address/tokens/ERC20TokensTableItem.tsx
+1
-1
ERC721TokensListItem.tsx
ui/address/tokens/ERC721TokensListItem.tsx
+1
-1
ERC721TokensTableItem.tsx
ui/address/tokens/ERC721TokensTableItem.tsx
+1
-1
NFTItem.tsx
ui/address/tokens/NFTItem.tsx
+1
-1
indicators.tsx
ui/home/indicators/utils/indicators.tsx
+7
-1
Token.tsx
ui/pages/Token.tsx
+1
-1
TokenLogo.tsx
ui/shared/TokenLogo.tsx
+21
-12
TokenSnippet.pw.tsx
ui/shared/TokenSnippet/TokenSnippet.pw.tsx
+41
-6
TokenSnippet.tsx
ui/shared/TokenSnippet/TokenSnippet.tsx
+8
-7
TokenTransferListItem.tsx
ui/shared/TokenTransfer/TokenTransferListItem.tsx
+1
-1
TokenTransferTableItem.tsx
ui/shared/TokenTransfer/TokenTransferTableItem.tsx
+1
-1
TokenInstanceDetails.tsx
ui/tokenInstance/TokenInstanceDetails.tsx
+1
-1
TokensListItem.tsx
ui/tokens/TokensListItem.tsx
+1
-1
TokensTableItem.tsx
ui/tokens/TokensTableItem.tsx
+1
-1
NftTokenTransferSnippet.tsx
ui/tx/NftTokenTransferSnippet.tsx
+8
-8
TxDetailsAction.tsx
ui/tx/details/TxDetailsAction.tsx
+25
-8
TxDetailsTokenTransfer.tsx
ui/tx/details/TxDetailsTokenTransfer.tsx
+3
-10
WatchListAddressItem.tsx
ui/watchlist/WatchlistTable/WatchListAddressItem.tsx
+7
-2
No files found.
mocks/tokens/tokenInfo.ts
View file @
3c6cb6f9
...
@@ -9,6 +9,7 @@ export const tokenInfo: TokenInfo = {
...
@@ -9,6 +9,7 @@ export const tokenInfo: TokenInfo = {
symbol
:
'
ARIA
'
,
symbol
:
'
ARIA
'
,
type
:
'
ERC-20
'
,
type
:
'
ERC-20
'
,
total_supply
:
'
1235
'
,
total_supply
:
'
1235
'
,
icon_url
:
null
,
};
};
export
const
tokenCounters
:
TokenCounters
=
{
export
const
tokenCounters
:
TokenCounters
=
{
...
@@ -25,6 +26,7 @@ export const tokenInfoERC20a: TokenInfo = {
...
@@ -25,6 +26,7 @@ export const tokenInfoERC20a: TokenInfo = {
symbol
:
'
HyFi
'
,
symbol
:
'
HyFi
'
,
total_supply
:
'
369000000000000000000000000
'
,
total_supply
:
'
369000000000000000000000000
'
,
type
:
'
ERC-20
'
,
type
:
'
ERC-20
'
,
icon_url
:
null
,
};
};
export
const
tokenInfoERC20b
:
TokenInfo
=
{
export
const
tokenInfoERC20b
:
TokenInfo
=
{
...
@@ -36,6 +38,7 @@ export const tokenInfoERC20b: TokenInfo = {
...
@@ -36,6 +38,7 @@ export const tokenInfoERC20b: TokenInfo = {
symbol
:
'
USDC
'
,
symbol
:
'
USDC
'
,
total_supply
:
'
900000000000000000000000000
'
,
total_supply
:
'
900000000000000000000000000
'
,
type
:
'
ERC-20
'
,
type
:
'
ERC-20
'
,
icon_url
:
null
,
};
};
export
const
tokenInfoERC20c
:
TokenInfo
=
{
export
const
tokenInfoERC20c
:
TokenInfo
=
{
...
@@ -47,6 +50,7 @@ export const tokenInfoERC20c: TokenInfo = {
...
@@ -47,6 +50,7 @@ export const tokenInfoERC20c: TokenInfo = {
symbol
:
'
ETH
'
,
symbol
:
'
ETH
'
,
total_supply
:
'
1000000000000000000000000
'
,
total_supply
:
'
1000000000000000000000000
'
,
type
:
'
ERC-20
'
,
type
:
'
ERC-20
'
,
icon_url
:
null
,
};
};
export
const
tokenInfoERC20d
:
TokenInfo
=
{
export
const
tokenInfoERC20d
:
TokenInfo
=
{
...
@@ -58,6 +62,7 @@ export const tokenInfoERC20d: TokenInfo = {
...
@@ -58,6 +62,7 @@ export const tokenInfoERC20d: TokenInfo = {
symbol
:
'
ZETA
'
,
symbol
:
'
ZETA
'
,
total_supply
:
'
2100000000000000000000000000
'
,
total_supply
:
'
2100000000000000000000000000
'
,
type
:
'
ERC-20
'
,
type
:
'
ERC-20
'
,
icon_url
:
null
,
};
};
export
const
tokenInfoERC20LongSymbol
:
TokenInfo
=
{
export
const
tokenInfoERC20LongSymbol
:
TokenInfo
=
{
...
@@ -69,6 +74,7 @@ export const tokenInfoERC20LongSymbol: TokenInfo = {
...
@@ -69,6 +74,7 @@ export const tokenInfoERC20LongSymbol: TokenInfo = {
symbol
:
'
ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY
'
,
symbol
:
'
ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY
'
,
total_supply
:
'
2100000000000000000000000000
'
,
total_supply
:
'
2100000000000000000000000000
'
,
type
:
'
ERC-20
'
,
type
:
'
ERC-20
'
,
icon_url
:
null
,
};
};
export
const
tokenInfoERC721a
:
TokenInfo
=
{
export
const
tokenInfoERC721a
:
TokenInfo
=
{
...
@@ -80,6 +86,7 @@ export const tokenInfoERC721a: TokenInfo = {
...
@@ -80,6 +86,7 @@ export const tokenInfoERC721a: TokenInfo = {
symbol
:
'
HYFI_ATHENA
'
,
symbol
:
'
HYFI_ATHENA
'
,
total_supply
:
'
105
'
,
total_supply
:
'
105
'
,
type
:
'
ERC-721
'
,
type
:
'
ERC-721
'
,
icon_url
:
null
,
};
};
export
const
tokenInfoERC721b
:
TokenInfo
=
{
export
const
tokenInfoERC721b
:
TokenInfo
=
{
...
@@ -91,6 +98,7 @@ export const tokenInfoERC721b: TokenInfo = {
...
@@ -91,6 +98,7 @@ export const tokenInfoERC721b: TokenInfo = {
symbol
:
'
WOWG
'
,
symbol
:
'
WOWG
'
,
total_supply
:
null
,
total_supply
:
null
,
type
:
'
ERC-721
'
,
type
:
'
ERC-721
'
,
icon_url
:
null
,
};
};
export
const
tokenInfoERC721c
:
TokenInfo
=
{
export
const
tokenInfoERC721c
:
TokenInfo
=
{
...
@@ -102,6 +110,7 @@ export const tokenInfoERC721c: TokenInfo = {
...
@@ -102,6 +110,7 @@ export const tokenInfoERC721c: TokenInfo = {
symbol
:
'
PUMA
'
,
symbol
:
'
PUMA
'
,
total_supply
:
null
,
total_supply
:
null
,
type
:
'
ERC-721
'
,
type
:
'
ERC-721
'
,
icon_url
:
null
,
};
};
export
const
tokenInfoERC721LongSymbol
:
TokenInfo
=
{
export
const
tokenInfoERC721LongSymbol
:
TokenInfo
=
{
...
@@ -113,6 +122,7 @@ export const tokenInfoERC721LongSymbol: TokenInfo = {
...
@@ -113,6 +122,7 @@ export const tokenInfoERC721LongSymbol: TokenInfo = {
symbol
:
'
ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY
'
,
symbol
:
'
ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY
'
,
total_supply
:
null
,
total_supply
:
null
,
type
:
'
ERC-721
'
,
type
:
'
ERC-721
'
,
icon_url
:
null
,
};
};
export
const
tokenInfoERC1155a
:
TokenInfo
=
{
export
const
tokenInfoERC1155a
:
TokenInfo
=
{
...
@@ -124,6 +134,7 @@ export const tokenInfoERC1155a: TokenInfo = {
...
@@ -124,6 +134,7 @@ export const tokenInfoERC1155a: TokenInfo = {
symbol
:
'
HYFI_MEMBERSHIP
'
,
symbol
:
'
HYFI_MEMBERSHIP
'
,
total_supply
:
'
482
'
,
total_supply
:
'
482
'
,
type
:
'
ERC-1155
'
,
type
:
'
ERC-1155
'
,
icon_url
:
null
,
};
};
export
const
tokenInfoERC1155b
:
TokenInfo
=
{
export
const
tokenInfoERC1155b
:
TokenInfo
=
{
...
@@ -135,6 +146,7 @@ export const tokenInfoERC1155b: TokenInfo = {
...
@@ -135,6 +146,7 @@ export const tokenInfoERC1155b: TokenInfo = {
symbol
:
'
WVC
'
,
symbol
:
'
WVC
'
,
total_supply
:
'
4943
'
,
total_supply
:
'
4943
'
,
type
:
'
ERC-1155
'
,
type
:
'
ERC-1155
'
,
icon_url
:
null
,
};
};
export
const
tokenInfoERC1155WithoutName
:
TokenInfo
=
{
export
const
tokenInfoERC1155WithoutName
:
TokenInfo
=
{
...
@@ -146,4 +158,5 @@ export const tokenInfoERC1155WithoutName: TokenInfo = {
...
@@ -146,4 +158,5 @@ export const tokenInfoERC1155WithoutName: TokenInfo = {
symbol
:
null
,
symbol
:
null
,
total_supply
:
'
482
'
,
total_supply
:
'
482
'
,
type
:
'
ERC-1155
'
,
type
:
'
ERC-1155
'
,
icon_url
:
null
,
};
};
mocks/tokens/tokenTransfer.ts
View file @
3c6cb6f9
...
@@ -30,6 +30,7 @@ export const erc20: TokenTransfer = {
...
@@ -30,6 +30,7 @@ export const erc20: TokenTransfer = {
symbol
:
'
ARIA
'
,
symbol
:
'
ARIA
'
,
type
:
'
ERC-20
'
,
type
:
'
ERC-20
'
,
total_supply
:
'
0
'
,
total_supply
:
'
0
'
,
icon_url
:
null
,
},
},
total
:
{
total
:
{
decimals
:
'
18
'
,
decimals
:
'
18
'
,
...
@@ -73,6 +74,7 @@ export const erc721: TokenTransfer = {
...
@@ -73,6 +74,7 @@ export const erc721: TokenTransfer = {
symbol
:
'
AriaSA
'
,
symbol
:
'
AriaSA
'
,
type
:
'
ERC-721
'
,
type
:
'
ERC-721
'
,
total_supply
:
'
0
'
,
total_supply
:
'
0
'
,
icon_url
:
null
,
},
},
total
:
{
total
:
{
token_id
:
'
875879856
'
,
token_id
:
'
875879856
'
,
...
@@ -115,6 +117,7 @@ export const erc1155A: TokenTransfer = {
...
@@ -115,6 +117,7 @@ export const erc1155A: TokenTransfer = {
symbol
:
'
MY_SYMBOL_IS_VERY_LONG
'
,
symbol
:
'
MY_SYMBOL_IS_VERY_LONG
'
,
type
:
'
ERC-1155
'
,
type
:
'
ERC-1155
'
,
total_supply
:
'
0
'
,
total_supply
:
'
0
'
,
icon_url
:
null
,
},
},
total
:
{
total
:
{
token_id
:
'
123
'
,
token_id
:
'
123
'
,
...
...
mocks/txs/state.ts
View file @
3c6cb6f9
...
@@ -31,6 +31,7 @@ export const mintToken: TxStateChange = {
...
@@ -31,6 +31,7 @@ export const mintToken: TxStateChange = {
symbol
:
'
nMOONBIRD
'
,
symbol
:
'
nMOONBIRD
'
,
total_supply
:
'
10645
'
,
total_supply
:
'
10645
'
,
type
:
'
ERC-721
'
,
type
:
'
ERC-721
'
,
icon_url
:
null
,
},
},
type
:
'
token
'
,
type
:
'
token
'
,
};
};
...
@@ -66,6 +67,7 @@ export const receiveMintedToken: TxStateChange = {
...
@@ -66,6 +67,7 @@ export const receiveMintedToken: TxStateChange = {
symbol
:
'
nMOONBIRD
'
,
symbol
:
'
nMOONBIRD
'
,
total_supply
:
'
10645
'
,
total_supply
:
'
10645
'
,
type
:
'
ERC-721
'
,
type
:
'
ERC-721
'
,
icon_url
:
null
,
},
},
type
:
'
token
'
,
type
:
'
token
'
,
};
};
...
...
stubs/token.ts
View file @
3c6cb6f9
...
@@ -14,6 +14,7 @@ export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
...
@@ -14,6 +14,7 @@ export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
symbol
:
'
STUB
'
,
symbol
:
'
STUB
'
,
total_supply
:
'
6000000000000000000
'
,
total_supply
:
'
6000000000000000000
'
,
type
:
'
ERC-20
'
,
type
:
'
ERC-20
'
,
icon_url
:
null
,
};
};
export
const
TOKEN_INFO_ERC_721
:
TokenInfo
<
'
ERC-721
'
>
=
{
export
const
TOKEN_INFO_ERC_721
:
TokenInfo
<
'
ERC-721
'
>
=
{
...
...
types/api/token.ts
View file @
3c6cb6f9
...
@@ -12,6 +12,7 @@ export interface TokenInfo<T extends TokenType = TokenType> {
...
@@ -12,6 +12,7 @@ export interface TokenInfo<T extends TokenType = TokenType> {
holders
:
string
|
null
;
holders
:
string
|
null
;
exchange_rate
:
string
|
null
;
exchange_rate
:
string
|
null
;
total_supply
:
string
|
null
;
total_supply
:
string
|
null
;
icon_url
:
string
|
null
;
}
}
export
interface
TokenCounters
{
export
interface
TokenCounters
{
...
...
ui/address/AddressTokenTransfers.tsx
View file @
3c6cb6f9
...
@@ -194,11 +194,17 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
...
@@ -194,11 +194,17 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
</>
</>
)
:
null
;
)
:
null
;
const
tokenData
=
React
.
useMemo
(()
=>
({
address
:
tokenFilter
||
''
,
name
:
''
,
icon_url
:
''
,
}),
[
tokenFilter
]);
const
tokenFilterComponent
=
tokenFilter
&&
(
const
tokenFilterComponent
=
tokenFilter
&&
(
<
Flex
alignItems=
"center"
flexWrap=
"wrap"
mb=
{
{
base
:
isActionBarHidden
?
3
:
6
,
lg
:
0
}
}
mr=
{
4
}
>
<
Flex
alignItems=
"center"
flexWrap=
"wrap"
mb=
{
{
base
:
isActionBarHidden
?
3
:
6
,
lg
:
0
}
}
mr=
{
4
}
>
<
Text
whiteSpace=
"nowrap"
mr=
{
2
}
py=
{
1
}
>
Filtered by token
</
Text
>
<
Text
whiteSpace=
"nowrap"
mr=
{
2
}
py=
{
1
}
>
Filtered by token
</
Text
>
<
Flex
alignItems=
"center"
py=
{
1
}
>
<
Flex
alignItems=
"center"
py=
{
1
}
>
<
TokenLogo
hash=
{
tokenFilter
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
TokenLogo
data=
{
tokenData
}
boxSize=
{
6
}
mr=
{
2
}
/>
{
isMobile
?
<
HashStringShorten
hash=
{
tokenFilter
}
/>
:
tokenFilter
}
{
isMobile
?
<
HashStringShorten
hash=
{
tokenFilter
}
/>
:
tokenFilter
}
<
Tooltip
label=
"Reset filter"
>
<
Tooltip
label=
"Reset filter"
>
<
Flex
>
<
Flex
>
...
...
ui/address/details/AddressBalance.tsx
View file @
3c6cb6f9
...
@@ -63,6 +63,12 @@ const AddressBalance = ({ data }: Props) => {
...
@@ -63,6 +63,12 @@ const AddressBalance = ({ data }: Props) => {
handler
:
handleNewCoinBalanceMessage
,
handler
:
handleNewCoinBalanceMessage
,
});
});
const
tokenData
=
React
.
useMemo
(()
=>
({
address
:
appConfig
.
network
.
currency
.
address
||
''
,
name
:
appConfig
.
network
.
currency
.
name
||
''
,
icon_url
:
''
,
}),
[
]);
return
(
return
(
<
DetailsInfoItem
<
DetailsInfoItem
title=
"Balance"
title=
"Balance"
...
@@ -71,8 +77,7 @@ const AddressBalance = ({ data }: Props) => {
...
@@ -71,8 +77,7 @@ const AddressBalance = ({ data }: Props) => {
alignItems=
"flex-start"
alignItems=
"flex-start"
>
>
<
TokenLogo
<
TokenLogo
hash=
{
appConfig
.
network
.
currency
.
address
}
data=
{
tokenData
}
name=
{
appConfig
.
network
.
currency
.
name
}
boxSize=
{
5
}
boxSize=
{
5
}
mr=
{
2
}
mr=
{
2
}
fontSize=
"sm"
fontSize=
"sm"
...
...
ui/address/tokenSelect/TokenSelectItem.tsx
View file @
3c6cb6f9
...
@@ -65,7 +65,7 @@ const TokenSelectItem = ({ data }: Props) => {
...
@@ -65,7 +65,7 @@ const TokenSelectItem = ({ data }: Props) => {
href=
{
url
}
href=
{
url
}
>
>
<
Flex
alignItems=
"center"
w=
"100%"
>
<
Flex
alignItems=
"center"
w=
"100%"
>
<
TokenLogo
hash=
{
data
.
token
.
address
}
name=
{
data
.
token
.
name
}
boxSize=
{
6
}
/>
<
TokenLogo
data=
{
data
.
token
}
boxSize=
{
6
}
/>
<
Text
fontWeight=
{
700
}
ml=
{
2
}
>
{
data
.
token
.
name
||
<
HashStringShorten
hash=
{
data
.
token
.
address
}
/>
}
</
Text
>
<
Text
fontWeight=
{
700
}
ml=
{
2
}
>
{
data
.
token
.
name
||
<
HashStringShorten
hash=
{
data
.
token
.
address
}
/>
}
</
Text
>
{
data
.
usd
&&
<
Text
fontWeight=
{
700
}
ml=
"auto"
>
$
{
data
.
usd
.
toFormat
(
2
)
}
</
Text
>
}
{
data
.
usd
&&
<
Text
fontWeight=
{
700
}
ml=
"auto"
>
$
{
data
.
usd
.
toFormat
(
2
)
}
</
Text
>
}
</
Flex
>
</
Flex
>
...
...
ui/address/tokens/ERC20TokensListItem.tsx
View file @
3c6cb6f9
...
@@ -24,7 +24,7 @@ const ERC20TokensListItem = ({ token, value }: Props) => {
...
@@ -24,7 +24,7 @@ const ERC20TokensListItem = ({ token, value }: Props) => {
return
(
return
(
<
ListItemMobile
rowGap=
{
2
}
>
<
ListItemMobile
rowGap=
{
2
}
>
<
Flex
alignItems=
"center"
width=
"100%"
>
<
Flex
alignItems=
"center"
width=
"100%"
>
<
TokenLogo
hash=
{
token
.
address
}
name=
{
token
.
name
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
TokenLogo
data=
{
token
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
AddressLink
fontWeight=
"700"
hash=
{
token
.
address
}
type=
"token"
alias=
{
tokenString
}
/>
<
AddressLink
fontWeight=
"700"
hash=
{
token
.
address
}
type=
"token"
alias=
{
tokenString
}
/>
</
Flex
>
</
Flex
>
<
Flex
alignItems=
"center"
pl=
{
8
}
>
<
Flex
alignItems=
"center"
pl=
{
8
}
>
...
...
ui/address/tokens/ERC20TokensTableItem.tsx
View file @
3c6cb6f9
...
@@ -27,7 +27,7 @@ const ERC20TokensTableItem = ({
...
@@ -27,7 +27,7 @@ const ERC20TokensTableItem = ({
<
Tr
>
<
Tr
>
<
Td
verticalAlign=
"middle"
>
<
Td
verticalAlign=
"middle"
>
<
Flex
alignItems=
"center"
>
<
Flex
alignItems=
"center"
>
<
TokenLogo
hash=
{
token
.
address
}
name=
{
token
.
name
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
TokenLogo
data=
{
token
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
AddressLink
fontWeight=
"700"
hash=
{
token
.
address
}
type=
"token"
alias=
{
tokenString
}
/>
<
AddressLink
fontWeight=
"700"
hash=
{
token
.
address
}
type=
"token"
alias=
{
tokenString
}
/>
</
Flex
>
</
Flex
>
</
Td
>
</
Td
>
...
...
ui/address/tokens/ERC721TokensListItem.tsx
View file @
3c6cb6f9
...
@@ -18,7 +18,7 @@ const ERC721TokensListItem = ({ token, value }: Props) => {
...
@@ -18,7 +18,7 @@ const ERC721TokensListItem = ({ token, value }: Props) => {
return
(
return
(
<
ListItemMobile
rowGap=
{
2
}
>
<
ListItemMobile
rowGap=
{
2
}
>
<
Flex
alignItems=
"center"
width=
"100%"
>
<
Flex
alignItems=
"center"
width=
"100%"
>
<
TokenLogo
hash=
{
token
.
address
}
name=
{
token
.
name
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
TokenLogo
data=
{
token
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
AddressLink
fontWeight=
"700"
hash=
{
token
.
address
}
type=
"token"
alias=
{
tokenString
}
/>
<
AddressLink
fontWeight=
"700"
hash=
{
token
.
address
}
type=
"token"
alias=
{
tokenString
}
/>
</
Flex
>
</
Flex
>
<
Flex
alignItems=
"center"
pl=
{
8
}
>
<
Flex
alignItems=
"center"
pl=
{
8
}
>
...
...
ui/address/tokens/ERC721TokensTableItem.tsx
View file @
3c6cb6f9
...
@@ -21,7 +21,7 @@ const ERC721TokensTableItem = ({
...
@@ -21,7 +21,7 @@ const ERC721TokensTableItem = ({
<
Tr
>
<
Tr
>
<
Td
verticalAlign=
"middle"
>
<
Td
verticalAlign=
"middle"
>
<
Flex
alignItems=
"center"
>
<
Flex
alignItems=
"center"
>
<
TokenLogo
hash=
{
token
.
address
}
name=
{
token
.
name
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
TokenLogo
data=
{
token
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
AddressLink
fontWeight=
"700"
hash=
{
token
.
address
}
type=
"token"
alias=
{
tokenString
}
/>
<
AddressLink
fontWeight=
"700"
hash=
{
token
.
address
}
type=
"token"
alias=
{
tokenString
}
/>
</
Flex
>
</
Flex
>
</
Td
>
</
Td
>
...
...
ui/address/tokens/NFTItem.tsx
View file @
3c6cb6f9
...
@@ -49,7 +49,7 @@ const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance }: Pr
...
@@ -49,7 +49,7 @@ const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance }: Pr
)
}
)
}
{
token
.
name
&&
(
{
token
.
name
&&
(
<
Flex
alignItems=
"center"
>
<
Flex
alignItems=
"center"
>
<
TokenLogo
hash=
{
token
.
address
}
name=
{
token
.
name
}
boxSize=
{
6
}
ml=
{
1
}
mr=
{
1
}
/>
<
TokenLogo
data=
{
token
}
boxSize=
{
6
}
ml=
{
1
}
mr=
{
1
}
/>
<
TruncatedTextTooltip
label=
{
token
.
name
}
>
<
TruncatedTextTooltip
label=
{
token
.
name
}
>
<
Text
variant=
"secondary"
overflow=
"hidden"
whiteSpace=
"nowrap"
textOverflow=
"ellipsis"
>
{
token
.
name
}
</
Text
>
<
Text
variant=
"secondary"
overflow=
"hidden"
whiteSpace=
"nowrap"
textOverflow=
"ellipsis"
>
{
token
.
name
}
</
Text
>
</
TruncatedTextTooltip
>
</
TruncatedTextTooltip
>
...
...
ui/home/indicators/utils/indicators.tsx
View file @
3c6cb6f9
...
@@ -27,11 +27,17 @@ const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
...
@@ -27,11 +27,17 @@ const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
},
},
};
};
const
nativeTokenData
=
{
address
:
appConfig
.
network
.
currency
.
address
||
''
,
name
:
appConfig
.
network
.
currency
.
name
||
''
,
icon_url
:
''
,
};
const
coinPriceIndicator
:
TChainIndicator
<
'
homepage_chart_market
'
>
=
{
const
coinPriceIndicator
:
TChainIndicator
<
'
homepage_chart_market
'
>
=
{
id
:
'
coin_price
'
,
id
:
'
coin_price
'
,
title
:
`
${
appConfig
.
network
.
currency
.
symbol
}
price`
,
title
:
`
${
appConfig
.
network
.
currency
.
symbol
}
price`
,
value
:
(
stats
)
=>
'
$
'
+
Number
(
stats
.
coin_price
).
toLocaleString
(
undefined
,
{
minimumFractionDigits
:
2
,
maximumFractionDigits
:
6
}),
value
:
(
stats
)
=>
'
$
'
+
Number
(
stats
.
coin_price
).
toLocaleString
(
undefined
,
{
minimumFractionDigits
:
2
,
maximumFractionDigits
:
6
}),
icon
:
<
TokenLogo
hash=
{
appConfig
.
network
.
currency
.
address
||
''
}
name=
{
appConfig
.
network
.
currency
.
name
}
boxSize=
{
6
}
/>,
icon
:
<
TokenLogo
data=
{
nativeTokenData
}
boxSize=
{
6
}
/>,
hint
:
`
${
appConfig
.
network
.
currency
.
symbol
}
token daily price in USD.`
,
hint
:
`
${
appConfig
.
network
.
currency
.
symbol
}
token daily price in USD.`
,
api
:
{
api
:
{
resourceName
:
'
homepage_chart_market
'
,
resourceName
:
'
homepage_chart_market
'
,
...
...
ui/pages/Token.tsx
View file @
3c6cb6f9
...
@@ -245,7 +245,7 @@ const TokenPageContent = () => {
...
@@ -245,7 +245,7 @@ const TokenPageContent = () => {
text={ `
$
{
tokenQuery
.
data
?.
name
||
'
Unnamed
'
}
$
{
tokenSymbolText
}
token
` }
text={ `
$
{
tokenQuery
.
data
?.
name
||
'
Unnamed
'
}
$
{
tokenSymbolText
}
token
` }
backLink={ backLink }
backLink={ backLink }
additionalsLeft={ (
additionalsLeft={ (
<TokenLogo
hash={ tokenQuery.data?.address } name={ tokenQuery.data?.name
} boxSize={ 6 } isLoading={ tokenQuery.isPlaceholderData }/>
<TokenLogo
data={ tokenQuery.data
} boxSize={ 6 } isLoading={ tokenQuery.isPlaceholderData }/>
) }
) }
additionalsRight={ tagsNode }
additionalsRight={ tagsNode }
afterTitle={
afterTitle={
...
...
ui/shared/TokenLogo.tsx
View file @
3c6cb6f9
import
{
Image
,
chakra
,
Skeleton
}
from
'
@chakra-ui/react
'
;
import
{
Image
,
chakra
,
Skeleton
}
from
'
@chakra-ui/react
'
;
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
type
{
TokenInfo
}
from
'
types/api/token
'
;
import
appConfig
from
'
configs/app/config
'
;
import
appConfig
from
'
configs/app/config
'
;
import
TokenLogoPlaceholder
from
'
ui/shared/TokenLogoPlaceholder
'
;
import
TokenLogoPlaceholder
from
'
ui/shared/TokenLogoPlaceholder
'
;
interface
Props
{
export
interface
Props
{
hash
?:
string
;
data
?:
Pick
<
TokenInfo
,
'
address
'
|
'
icon_url
'
|
'
name
'
>
;
name
?:
string
|
null
;
className
?:
string
;
className
?:
string
;
isLoading
?:
boolean
;
isLoading
?:
boolean
;
}
}
const
TokenLogo
=
({
hash
,
name
,
className
,
isLoading
}:
Props
)
=>
{
const
TokenLogo
=
({
className
,
isLoading
,
data
}:
Props
)
=>
{
if
(
isLoading
)
{
if
(
isLoading
)
{
return
<
Skeleton
className=
{
className
}
borderRadius=
"base"
/>;
return
<
Skeleton
className=
{
className
}
borderRadius=
"base"
/>;
}
}
const
logoSrc
=
appConfig
.
network
.
assetsPathname
&&
hash
?
[
const
logoSrc
=
(()
=>
{
'
https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/
'
,
if
(
data
?.
icon_url
)
{
appConfig
.
network
.
assetsPathname
,
return
data
.
icon_url
;
'
/assets/
'
,
}
hash
,
'
/logo.png
'
,
if
(
appConfig
.
network
.
assetsPathname
&&
data
?.
address
)
{
].
join
(
''
)
:
undefined
;
return
[
'
https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/
'
,
appConfig
.
network
.
assetsPathname
,
'
/assets/
'
,
data
.
address
,
'
/logo.png
'
,
].
join
(
''
);
}
})();
return
(
return
(
<
Image
<
Image
borderRadius=
"base"
borderRadius=
"base"
className=
{
className
}
className=
{
className
}
src=
{
logoSrc
}
src=
{
logoSrc
}
alt=
{
`${ name || 'token' } logo`
}
alt=
{
`${
data?.
name || 'token' } logo`
}
fallback=
{
<
TokenLogoPlaceholder
className=
{
className
}
/>
}
fallback=
{
<
TokenLogoPlaceholder
className=
{
className
}
/>
}
/>
/>
);
);
...
...
ui/shared/TokenSnippet/TokenSnippet.pw.tsx
View file @
3c6cb6f9
import
{
test
,
expect
,
devices
}
from
'
@playwright/experimental-ct-react
'
;
import
{
test
,
expect
,
devices
}
from
'
@playwright/experimental-ct-react
'
;
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
type
{
TokenInfo
}
from
'
types/api/token
'
;
import
TestApp
from
'
playwright/TestApp
'
;
import
TestApp
from
'
playwright/TestApp
'
;
import
TokenSnippet
from
'
./TokenSnippet
'
;
import
TokenSnippet
from
'
./TokenSnippet
'
;
const
API_URL
=
'
https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0x363574E6C5C71c343d7348093D84320c76d5Dd29/logo.png
'
;
test
.
use
(
devices
[
'
iPhone 13 Pro
'
]);
test
.
use
(
devices
[
'
iPhone 13 Pro
'
]);
test
(
'
unnamed
'
,
async
({
mount
})
=>
{
test
(
'
unnamed
'
,
async
({
mount
})
=>
{
const
data
:
TokenInfo
=
{
address
:
'
0x363574E6C5C71c343d7348093D84320c76d5Dd29
'
,
type
:
'
ERC-20
'
,
symbol
:
'
xDAI
'
,
name
:
null
,
decimals
:
'
18
'
,
holders
:
'
1
'
,
exchange_rate
:
null
,
total_supply
:
null
,
icon_url
:
null
,
};
const
component
=
await
mount
(
const
component
=
await
mount
(
<
TestApp
>
<
TestApp
>
<
TokenSnippet
hash=
"0x363574E6C5C71c343d7348093D84320c76d5Dd29"
symbol=
"xDAI"
/>
<
TokenSnippet
data=
{
data
}
/>
</
TestApp
>,
</
TestApp
>,
);
);
...
@@ -20,16 +31,40 @@ test('unnamed', async({ mount }) => {
...
@@ -20,16 +31,40 @@ test('unnamed', async({ mount }) => {
});
});
test
(
'
named
'
,
async
({
mount
})
=>
{
test
(
'
named
'
,
async
({
mount
})
=>
{
const
data
:
TokenInfo
=
{
address
:
'
0x363574E6C5C71c343d7348093D84320c76d5Dd29
'
,
type
:
'
ERC-20
'
,
symbol
:
'
SHA
'
,
name
:
'
Shavuha token
'
,
decimals
:
'
18
'
,
holders
:
'
1
'
,
exchange_rate
:
null
,
total_supply
:
null
,
icon_url
:
null
,
};
const
component
=
await
mount
(
const
component
=
await
mount
(
<
TestApp
>
<
TestApp
>
<
TokenSnippet
hash=
"0x363574E6C5C71c343d7348093D84320c76d5Dd29"
name=
"Shavuha token"
symbol=
"SHA"
/>
<
TokenSnippet
data=
{
data
}
/>
</
TestApp
>,
</
TestApp
>,
);
);
await
expect
(
component
).
toHaveScreenshot
();
await
expect
(
component
).
toHaveScreenshot
();
});
});
test
(
'
with logo
'
,
async
({
mount
,
page
})
=>
{
test
(
'
with logo and long symbol
'
,
async
({
mount
,
page
})
=>
{
const
API_URL
=
'
https://example.com/logo.png
'
;
const
data
:
TokenInfo
=
{
address
:
'
0x363574E6C5C71c343d7348093D84320c76d5Dd29
'
,
type
:
'
ERC-20
'
,
symbol
:
'
SHAAAAAAAAAAAAA
'
,
name
:
null
,
decimals
:
'
18
'
,
holders
:
'
1
'
,
exchange_rate
:
null
,
total_supply
:
null
,
icon_url
:
API_URL
,
};
await
page
.
route
(
API_URL
,
(
route
)
=>
{
await
page
.
route
(
API_URL
,
(
route
)
=>
{
return
route
.
fulfill
({
return
route
.
fulfill
({
status
:
200
,
status
:
200
,
...
@@ -39,7 +74,7 @@ test('with logo', async({ mount, page }) => {
...
@@ -39,7 +74,7 @@ test('with logo', async({ mount, page }) => {
const
component
=
await
mount
(
const
component
=
await
mount
(
<
TestApp
>
<
TestApp
>
<
TokenSnippet
hash=
"0x363574E6C5C71c343d7348093D84320c76d5Dd29"
/>
<
TokenSnippet
data=
{
data
}
/>
</
TestApp
>,
</
TestApp
>,
);
);
...
...
ui/shared/TokenSnippet/TokenSnippet.tsx
View file @
3c6cb6f9
import
{
Flex
,
Text
,
chakra
}
from
'
@chakra-ui/react
'
;
import
{
Flex
,
Text
,
chakra
}
from
'
@chakra-ui/react
'
;
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
type
{
TokenInfo
}
from
'
types/api/token
'
;
import
trimTokenSymbol
from
'
lib/token/trimTokenSymbol
'
;
import
AddressLink
from
'
ui/shared/address/AddressLink
'
;
import
AddressLink
from
'
ui/shared/address/AddressLink
'
;
import
TokenLogo
from
'
ui/shared/TokenLogo
'
;
import
TokenLogo
from
'
ui/shared/TokenLogo
'
;
interface
Props
{
interface
Props
{
symbol
?:
string
|
null
;
data
?:
Pick
<
TokenInfo
,
'
address
'
|
'
icon_url
'
|
'
name
'
|
'
symbol
'
>
;
hash
:
string
;
name
?:
string
|
null
;
className
?:
string
;
className
?:
string
;
logoSize
?:
number
;
logoSize
?:
number
;
isDisabled
?:
boolean
;
isDisabled
?:
boolean
;
}
}
const
TokenSnippet
=
({
symbol
,
hash
,
name
,
className
,
logoSize
=
6
,
isDisabled
}:
Props
)
=>
{
const
TokenSnippet
=
({
data
,
className
,
logoSize
=
6
,
isDisabled
}:
Props
)
=>
{
return
(
return
(
<
Flex
className=
{
className
}
alignItems=
"center"
columnGap=
{
2
}
w=
"100%"
>
<
Flex
className=
{
className
}
alignItems=
"center"
columnGap=
{
2
}
w=
"100%"
>
<
TokenLogo
boxSize=
{
logoSize
}
hash=
{
hash
}
name=
{
name
}
/>
<
TokenLogo
boxSize=
{
logoSize
}
data=
{
data
}
/>
<
AddressLink
hash=
{
hash
}
alias=
{
name
}
type=
"token"
isDisabled=
{
isDisabled
}
/>
<
AddressLink
hash=
{
data
?.
address
||
''
}
alias=
{
data
?.
name
||
'
Unnamed token
'
}
type=
"token"
isDisabled=
{
isDisabled
}
/>
{
symbol
&&
<
Text
variant=
"secondary"
>
(
{
symbol
}
)
</
Text
>
}
{
data
?.
symbol
&&
<
Text
variant=
"secondary"
>
(
{
trimTokenSymbol
(
data
.
symbol
)
}
)
</
Text
>
}
</
Flex
>
</
Flex
>
);
);
};
};
...
...
ui/shared/TokenTransfer/TokenTransferListItem.tsx
View file @
3c6cb6f9
...
@@ -52,7 +52,7 @@ const TokenTransferListItem = ({
...
@@ -52,7 +52,7 @@ const TokenTransferListItem = ({
<
ListItemMobile
rowGap=
{
3
}
isAnimated
>
<
ListItemMobile
rowGap=
{
3
}
isAnimated
>
<
Flex
w=
"100%"
justifyContent=
"space-between"
>
<
Flex
w=
"100%"
justifyContent=
"space-between"
>
<
Flex
flexWrap=
"wrap"
rowGap=
{
1
}
mr=
{
showTxInfo
&&
txHash
?
2
:
0
}
>
<
Flex
flexWrap=
"wrap"
rowGap=
{
1
}
mr=
{
showTxInfo
&&
txHash
?
2
:
0
}
>
<
TokenSnippet
hash=
{
token
.
address
}
w=
"auto"
maxW=
"calc(100% - 140px)"
name=
{
token
.
name
||
'
Unnamed token
'
}
/>
<
TokenSnippet
data=
{
token
}
w=
"auto"
maxW=
"calc(100% - 140px)"
/>
<
Tag
flexShrink=
{
0
}
ml=
{
2
}
mr=
{
2
}
>
{
token
.
type
}
</
Tag
>
<
Tag
flexShrink=
{
0
}
ml=
{
2
}
mr=
{
2
}
>
{
token
.
type
}
</
Tag
>
<
Tag
colorScheme=
"orange"
>
{
getTokenTransferTypeText
(
type
)
}
</
Tag
>
<
Tag
colorScheme=
"orange"
>
{
getTokenTransferTypeText
(
type
)
}
</
Tag
>
</
Flex
>
</
Flex
>
...
...
ui/shared/TokenTransfer/TokenTransferTableItem.tsx
View file @
3c6cb6f9
...
@@ -45,7 +45,7 @@ const TokenTransferTableItem = ({
...
@@ -45,7 +45,7 @@ const TokenTransferTableItem = ({
)
}
)
}
<
Td
>
<
Td
>
<
Flex
flexDir=
"column"
alignItems=
"flex-start"
>
<
Flex
flexDir=
"column"
alignItems=
"flex-start"
>
<
TokenSnippet
hash=
{
token
.
address
}
name=
{
token
.
name
||
'
Unnamed token
'
}
lineHeight=
"30px"
/>
<
TokenSnippet
data=
{
token
}
lineHeight=
"30px"
/>
<
Tag
mt=
{
1
}
>
{
token
.
type
}
</
Tag
>
<
Tag
mt=
{
1
}
>
{
token
.
type
}
</
Tag
>
<
Tag
colorScheme=
"orange"
mt=
{
2
}
>
{
getTokenTransferTypeText
(
type
)
}
</
Tag
>
<
Tag
colorScheme=
"orange"
mt=
{
2
}
>
{
getTokenTransferTypeText
(
type
)
}
</
Tag
>
</
Flex
>
</
Flex
>
...
...
ui/tokenInstance/TokenInstanceDetails.tsx
View file @
3c6cb6f9
...
@@ -58,7 +58,7 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => {
...
@@ -58,7 +58,7 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => {
title=
"Token"
title=
"Token"
hint=
"Token name"
hint=
"Token name"
>
>
<
TokenSnippet
hash=
{
data
.
token
.
address
}
name=
{
data
.
token
.
name
}
/>
<
TokenSnippet
data=
{
data
.
token
}
/>
</
DetailsInfoItem
>
</
DetailsInfoItem
>
{
data
.
is_unique
&&
data
.
owner
&&
(
{
data
.
is_unique
&&
data
.
owner
&&
(
<
DetailsInfoItem
<
DetailsInfoItem
...
...
ui/tokens/TokensListItem.tsx
View file @
3c6cb6f9
...
@@ -47,7 +47,7 @@ const TokensTableItem = ({
...
@@ -47,7 +47,7 @@ const TokensTableItem = ({
>
>
<
GridItem
display=
"flex"
>
<
GridItem
display=
"flex"
>
<
Flex
overflow=
"hidden"
mr=
{
3
}
alignItems=
"center"
>
<
Flex
overflow=
"hidden"
mr=
{
3
}
alignItems=
"center"
>
<
TokenLogo
hash=
{
address
}
name=
{
name
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
TokenLogo
data=
{
token
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
AddressLink
fontSize=
"sm"
fontWeight=
"700"
hash=
{
address
}
type=
"token"
alias=
{
tokenString
}
/>
<
AddressLink
fontSize=
"sm"
fontWeight=
"700"
hash=
{
address
}
type=
"token"
alias=
{
tokenString
}
/>
<
Tag
flexShrink=
{
0
}
ml=
{
3
}
>
{
type
}
</
Tag
>
<
Tag
flexShrink=
{
0
}
ml=
{
3
}
>
{
type
}
</
Tag
>
</
Flex
>
</
Flex
>
...
...
ui/tokens/TokensTableItem.tsx
View file @
3c6cb6f9
...
@@ -53,7 +53,7 @@ const TokensTableItem = ({
...
@@ -53,7 +53,7 @@ const TokensTableItem = ({
</
Text
>
</
Text
>
<
Box
>
<
Box
>
<
Flex
alignItems=
"center"
>
<
Flex
alignItems=
"center"
>
<
TokenLogo
hash=
{
address
}
name=
{
name
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
TokenLogo
data=
{
token
}
boxSize=
{
6
}
mr=
{
2
}
/>
<
AddressLink
fontSize=
"sm"
fontWeight=
"700"
hash=
{
address
}
type=
"token"
alias=
{
tokenString
}
/>
<
AddressLink
fontSize=
"sm"
fontWeight=
"700"
hash=
{
address
}
type=
"token"
alias=
{
tokenString
}
/>
</
Flex
>
</
Flex
>
<
Flex
alignItems=
"center"
width=
"136px"
justifyContent=
"space-between"
ml=
{
8
}
mt=
{
2
}
>
<
Flex
alignItems=
"center"
width=
"136px"
justifyContent=
"space-between"
ml=
{
8
}
mt=
{
2
}
>
...
...
ui/tx/NftTokenTransferSnippet.tsx
View file @
3c6cb6f9
...
@@ -2,22 +2,22 @@ import { Flex, Link, Text, Icon, Box } from '@chakra-ui/react';
...
@@ -2,22 +2,22 @@ import { Flex, Link, Text, Icon, Box } from '@chakra-ui/react';
import
{
route
}
from
'
nextjs-routes
'
;
import
{
route
}
from
'
nextjs-routes
'
;
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
type
{
TokenInfo
}
from
'
types/api/token
'
;
import
nftIcon
from
'
icons/nft_shield.svg
'
;
import
nftIcon
from
'
icons/nft_shield.svg
'
;
import
AddressLink
from
'
ui/shared/address/AddressLink
'
;
import
AddressLink
from
'
ui/shared/address/AddressLink
'
;
import
HashStringShorten
from
'
ui/shared/HashStringShorten
'
;
import
HashStringShorten
from
'
ui/shared/HashStringShorten
'
;
import
TokenSnippet
from
'
ui/shared/TokenSnippet/TokenSnippet
'
;
import
TokenSnippet
from
'
ui/shared/TokenSnippet/TokenSnippet
'
;
interface
Props
{
interface
Props
{
token
:
TokenInfo
;
value
:
string
;
value
:
string
;
tokenId
:
string
;
tokenId
:
string
;
hash
:
string
;
name
?:
string
|
null
;
symbol
?:
string
|
null
;
}
}
const
NftTokenTransferSnippet
=
({
value
,
name
,
hash
,
symbol
,
tokenId
}:
Props
)
=>
{
const
NftTokenTransferSnippet
=
({
value
,
token
,
tokenId
}:
Props
)
=>
{
const
num
=
value
===
'
1
'
?
''
:
value
;
const
num
=
value
===
'
1
'
?
''
:
value
;
const
url
=
route
({
pathname
:
'
/token/[hash]/instance/[id]
'
,
query
:
{
hash
:
hash
,
id
:
tokenId
}
});
const
url
=
route
({
pathname
:
'
/token/[hash]/instance/[id]
'
,
query
:
{
hash
:
token
.
address
,
id
:
tokenId
}
});
return
(
return
(
<
Flex
alignItems=
"center"
columnGap=
{
3
}
rowGap=
{
2
}
flexWrap=
"wrap"
>
<
Flex
alignItems=
"center"
columnGap=
{
3
}
rowGap=
{
2
}
flexWrap=
"wrap"
>
...
@@ -28,10 +28,10 @@ const NftTokenTransferSnippet = ({ value, name, hash, symbol, tokenId }: Props)
...
@@ -28,10 +28,10 @@ const NftTokenTransferSnippet = ({ value, name, hash, symbol, tokenId }: Props)
{
tokenId
.
length
>
8
?
<
HashStringShorten
hash=
{
tokenId
}
/>
:
tokenId
}
{
tokenId
.
length
>
8
?
<
HashStringShorten
hash=
{
tokenId
}
/>
:
tokenId
}
</
Link
>
</
Link
>
</
Box
>
</
Box
>
{
name
?
(
{
token
.
name
?
(
<
TokenSnippet
symbol=
{
symbol
}
hash=
{
hash
}
name=
{
name
}
w=
"auto"
logoSize=
{
5
}
columnGap=
{
1
}
/>
<
TokenSnippet
data=
{
token
}
w=
"auto"
logoSize=
{
5
}
columnGap=
{
1
}
/>
)
:
(
)
:
(
<
AddressLink
hash=
{
hash
}
truncation=
"constant"
type=
"token"
/>
<
AddressLink
hash=
{
token
.
address
}
truncation=
"constant"
type=
"token"
/>
)
}
)
}
</
Flex
>
</
Flex
>
);
);
...
...
ui/tx/details/TxDetailsAction.tsx
View file @
3c6cb6f9
...
@@ -7,7 +7,6 @@ import type { TxAction, TxActionGeneral } from 'types/api/txAction';
...
@@ -7,7 +7,6 @@ import type { TxAction, TxActionGeneral } from 'types/api/txAction';
import
appConfig
from
'
configs/app/config
'
;
import
appConfig
from
'
configs/app/config
'
;
import
uniswapIcon
from
'
icons/uniswap.svg
'
;
import
uniswapIcon
from
'
icons/uniswap.svg
'
;
import
trimTokenSymbol
from
'
lib/token/trimTokenSymbol
'
;
import
AddressLink
from
'
ui/shared/address/AddressLink
'
;
import
AddressLink
from
'
ui/shared/address/AddressLink
'
;
import
TokenSnippet
from
'
ui/shared/TokenSnippet/TokenSnippet
'
;
import
TokenSnippet
from
'
ui/shared/TokenSnippet/TokenSnippet
'
;
...
@@ -39,6 +38,20 @@ const TxDetailsAction = ({ action }: Props) => {
...
@@ -39,6 +38,20 @@ const TxDetailsAction = ({ action }: Props) => {
const
amount0
=
BigNumber
(
data
.
amount0
).
toFormat
();
const
amount0
=
BigNumber
(
data
.
amount0
).
toFormat
();
const
amount1
=
BigNumber
(
data
.
amount1
).
toFormat
();
const
amount1
=
BigNumber
(
data
.
amount1
).
toFormat
();
const
[
text0
,
text1
]
=
getActionText
(
type
);
const
[
text0
,
text1
]
=
getActionText
(
type
);
const
token0
=
{
address
:
data
.
symbol0
===
'
Ether
'
?
appConfig
.
network
.
currency
.
address
||
''
:
data
.
address0
,
name
:
data
.
symbol0
===
'
Ether
'
?
appConfig
.
network
.
currency
.
symbol
||
null
:
data
.
symbol0
,
type
:
'
ERC-20
'
,
symbol
:
null
,
icon_url
:
null
,
};
const
token1
=
{
address
:
data
.
symbol0
===
'
Ether
'
?
appConfig
.
network
.
currency
.
address
||
''
:
data
.
address1
,
name
:
data
.
symbol0
===
'
Ether
'
?
appConfig
.
network
.
currency
.
symbol
||
null
:
data
.
symbol1
,
type
:
'
ERC-20
'
,
symbol
:
null
,
icon_url
:
null
,
};
return
(
return
(
<
Flex
flexWrap=
"wrap"
columnGap=
{
1
}
rowGap=
{
2
}
alignItems=
"center"
>
<
Flex
flexWrap=
"wrap"
columnGap=
{
1
}
rowGap=
{
2
}
alignItems=
"center"
>
...
@@ -46,8 +59,7 @@ const TxDetailsAction = ({ action }: Props) => {
...
@@ -46,8 +59,7 @@ const TxDetailsAction = ({ action }: Props) => {
<
chakra
.
span
fontWeight=
{
600
}
>
{
amount0
}
</
chakra
.
span
>
<
chakra
.
span
fontWeight=
{
600
}
>
{
amount0
}
</
chakra
.
span
>
<
TokenSnippet
<
TokenSnippet
name=
{
data
.
symbol0
===
'
Ether
'
?
appConfig
.
network
.
currency
.
symbol
:
data
.
symbol0
}
data=
{
token0
}
hash=
{
data
.
symbol0
===
'
Ether
'
?
appConfig
.
network
.
currency
.
address
||
''
:
data
.
address1
}
w=
"auto"
w=
"auto"
columnGap=
{
1
}
columnGap=
{
1
}
logoSize=
{
5
}
logoSize=
{
5
}
...
@@ -58,8 +70,7 @@ const TxDetailsAction = ({ action }: Props) => {
...
@@ -58,8 +70,7 @@ const TxDetailsAction = ({ action }: Props) => {
<
chakra
.
span
fontWeight=
{
600
}
>
{
amount1
}
</
chakra
.
span
>
<
chakra
.
span
fontWeight=
{
600
}
>
{
amount1
}
</
chakra
.
span
>
<
TokenSnippet
<
TokenSnippet
name=
{
data
.
symbol1
===
'
Ether
'
?
appConfig
.
network
.
currency
.
symbol
:
data
.
symbol1
}
data=
{
token1
}
hash=
{
data
.
symbol1
===
'
Ether
'
?
appConfig
.
network
.
currency
.
address
||
''
:
data
.
address1
}
w=
"auto"
w=
"auto"
columnGap=
{
1
}
columnGap=
{
1
}
logoSize=
{
5
}
logoSize=
{
5
}
...
@@ -76,14 +87,20 @@ const TxDetailsAction = ({ action }: Props) => {
...
@@ -76,14 +87,20 @@ const TxDetailsAction = ({ action }: Props) => {
}
}
case
'
mint_nft
'
:
{
case
'
mint_nft
'
:
{
const
token
=
{
address
:
data
.
address
,
name
:
data
.
name
,
type
:
'
ERC-20
'
,
symbol
:
null
,
icon_url
:
null
,
};
return
(
return
(
<
div
>
<
div
>
<
Flex
rowGap=
{
2
}
flexWrap=
"wrap"
alignItems=
"center"
whiteSpace=
"pre-wrap"
>
<
Flex
rowGap=
{
2
}
flexWrap=
"wrap"
alignItems=
"center"
whiteSpace=
"pre-wrap"
>
<
chakra
.
span
>
Mint of
</
chakra
.
span
>
<
chakra
.
span
>
Mint of
</
chakra
.
span
>
<
TokenSnippet
<
TokenSnippet
name=
{
data
.
name
}
data=
{
token
}
hash=
{
data
.
address
}
symbol=
{
trimTokenSymbol
(
data
.
symbol
)
}
w=
"auto"
w=
"auto"
columnGap=
{
1
}
columnGap=
{
1
}
logoSize=
{
5
}
logoSize=
{
5
}
...
...
ui/tx/details/TxDetailsTokenTransfer.tsx
View file @
3c6cb6f9
...
@@ -5,7 +5,6 @@ import type { TokenTransfer as TTokenTransfer, Erc20TotalPayload, Erc721TotalPay
...
@@ -5,7 +5,6 @@ import type { TokenTransfer as TTokenTransfer, Erc20TotalPayload, Erc721TotalPay
import
rightArrowIcon
from
'
icons/arrows/east.svg
'
;
import
rightArrowIcon
from
'
icons/arrows/east.svg
'
;
import
{
space
}
from
'
lib/html-entities
'
;
import
{
space
}
from
'
lib/html-entities
'
;
import
trimTokenSymbol
from
'
lib/token/trimTokenSymbol
'
;
import
AddressLink
from
'
ui/shared/address/AddressLink
'
;
import
AddressLink
from
'
ui/shared/address/AddressLink
'
;
import
CurrencyValue
from
'
ui/shared/CurrencyValue
'
;
import
CurrencyValue
from
'
ui/shared/CurrencyValue
'
;
import
TokenSnippet
from
'
ui/shared/TokenSnippet/TokenSnippet
'
;
import
TokenSnippet
from
'
ui/shared/TokenSnippet/TokenSnippet
'
;
...
@@ -27,9 +26,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
...
@@ -27,9 +26,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
<
CurrencyValue
value=
{
total
.
value
}
exchangeRate=
{
data
.
token
.
exchange_rate
}
fontWeight=
{
600
}
decimals=
{
total
.
decimals
}
/>
<
CurrencyValue
value=
{
total
.
value
}
exchangeRate=
{
data
.
token
.
exchange_rate
}
fontWeight=
{
600
}
decimals=
{
total
.
decimals
}
/>
</
Text
>
</
Text
>
<
TokenSnippet
<
TokenSnippet
symbol=
{
trimTokenSymbol
(
data
.
token
.
symbol
)
}
data=
{
data
.
token
}
hash=
{
data
.
token
.
address
}
name=
{
data
.
token
.
name
}
w=
"auto"
w=
"auto"
flexGrow=
"1"
flexGrow=
"1"
columnGap=
{
1
}
columnGap=
{
1
}
...
@@ -43,11 +40,9 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
...
@@ -43,11 +40,9 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
const
total
=
data
.
total
as
Erc721TotalPayload
;
const
total
=
data
.
total
as
Erc721TotalPayload
;
return
(
return
(
<
NftTokenTransferSnippet
<
NftTokenTransferSnippet
name=
{
data
.
token
.
name
}
token=
{
data
.
token
}
tokenId=
{
total
.
token_id
}
tokenId=
{
total
.
token_id
}
value=
"1"
value=
"1"
hash=
{
data
.
token
.
address
}
symbol=
{
trimTokenSymbol
(
data
.
token
.
symbol
)
}
/>
/>
);
);
}
}
...
@@ -56,12 +51,10 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
...
@@ -56,12 +51,10 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
const
total
=
data
.
total
as
Erc1155TotalPayload
;
const
total
=
data
.
total
as
Erc1155TotalPayload
;
return
(
return
(
<
NftTokenTransferSnippet
<
NftTokenTransferSnippet
name=
{
data
.
token
.
name
}
key=
{
total
.
token_id
}
key=
{
total
.
token_id
}
token=
{
data
.
token
}
tokenId=
{
total
.
token_id
}
tokenId=
{
total
.
token_id
}
value=
{
total
.
value
}
value=
{
total
.
value
}
hash=
{
data
.
token
.
address
}
symbol=
{
trimTokenSymbol
(
data
.
token
.
symbol
)
}
/>
/>
);
);
}
}
...
...
ui/watchlist/WatchlistTable/WatchListAddressItem.tsx
View file @
3c6cb6f9
...
@@ -14,14 +14,19 @@ import TokenLogo from 'ui/shared/TokenLogo';
...
@@ -14,14 +14,19 @@ import TokenLogo from 'ui/shared/TokenLogo';
const
WatchListAddressItem
=
({
item
}:
{
item
:
TWatchlistItem
})
=>
{
const
WatchListAddressItem
=
({
item
}:
{
item
:
TWatchlistItem
})
=>
{
const
infoItemsPaddingLeft
=
{
base
:
1
,
lg
:
8
};
const
infoItemsPaddingLeft
=
{
base
:
1
,
lg
:
8
};
const
nativeTokenData
=
React
.
useMemo
(()
=>
({
address
:
appConfig
.
network
.
currency
.
address
||
''
,
name
:
appConfig
.
network
.
currency
.
name
||
''
,
icon_url
:
''
,
}),
[
]);
return
(
return
(
<
VStack
spacing=
{
2
}
align=
"stretch"
fontWeight=
{
500
}
>
<
VStack
spacing=
{
2
}
align=
"stretch"
fontWeight=
{
500
}
>
<
AddressSnippet
address=
{
item
.
address
}
/>
<
AddressSnippet
address=
{
item
.
address
}
/>
<
Flex
fontSize=
"sm"
h=
{
6
}
pl=
{
infoItemsPaddingLeft
}
flexWrap=
"wrap"
alignItems=
"center"
rowGap=
{
1
}
>
<
Flex
fontSize=
"sm"
h=
{
6
}
pl=
{
infoItemsPaddingLeft
}
flexWrap=
"wrap"
alignItems=
"center"
rowGap=
{
1
}
>
{
appConfig
.
network
.
currency
.
address
&&
(
{
appConfig
.
network
.
currency
.
address
&&
(
<
TokenLogo
<
TokenLogo
hash=
{
appConfig
.
network
.
currency
.
address
}
data=
{
nativeTokenData
}
name=
{
appConfig
.
network
.
name
}
boxSize=
{
4
}
boxSize=
{
4
}
borderRadius=
"sm"
borderRadius=
"sm"
mr=
{
2
}
mr=
{
2
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment