m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

NFT UX cleanup grab-bag (#13352)

Browse Source 
* NFT UX cleanup
This commit is contained in:
Alex Donesky 2022-01-20 11:49:49 -06:00 committed by GitHub
parent e2a8886a05
commit db0230f23a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 106 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/scripts/metamask-controller.js
View File

@ -243,6 +243,8 @@ export default class MetamaskController extends EventEmitter {
initState.CollectiblesController,
);
this.collectiblesController.setApiKey(process.env.OPENSEA_KEY);
process.env.COLLECTIBLES_V1 &&
(this.collectibleDetectionController = new CollectibleDetectionController(
{
@ -648,8 +650,7 @@ export default class MetamaskController extends EventEmitter {
this.collectiblesController.checkAndUpdateSingleCollectibleOwnershipStatus(
knownCollectible,
false,
// TODO add this when checkAndUpdateSingleCollectibleOwnershipStatus is updated
// { userAddress, chainId },
{ userAddress, chainId },
);
}
}

24
ui/components/app/collectible-details/collectible-details.js
View File

@ -130,6 +130,7 @@ export default function CollectibleDetails({ collectible }) {
<Box
display={DISPLAY.FLEX}
width={inPopUp ? BLOCK_SIZES.FULL : BLOCK_SIZES.HALF}
margin={inPopUp ? [4, 0] : null}
>
<Button
type="primary"
@ -185,19 +186,20 @@ export default function CollectibleDetails({ collectible }) {
color={COLORS.BLACK}
variant={TYPOGRAPHY.H4}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ margin: 0, marginBottom: 4 }}
boxProps={{ margin: 0, marginBottom: 2 }}
>
{name}
</Typography>
<Typography
color={COLORS.UI3}
variant={TYPOGRAPHY.H5}
boxProps={{ margin: 0 }}
boxProps={{ margin: 0, marginBottom: 4 }}
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
>
#{tokenId}
</Typography>
</div>
{description ? (
<div>
<Typography
color={COLORS.BLACK}
@ -216,6 +218,7 @@ export default function CollectibleDetails({ collectible }) {
{description}
</Typography>
</div>
) : null}
{inPopUp ? null : renderSendButton()}
</Box>
</div>
@ -241,13 +244,13 @@ export default function CollectibleDetails({ collectible }) {
margin: 0,
marginBottom: 4,
}}
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
className="collectible-details__image-link"
>
<a
target="_blank"
href={collectibleImageURL}
rel="noopener noreferrer"
className="collectible-details__image-link"
href={collectibleImageURL}
title={collectibleImageURL}
>
{image}
</a>
@ -268,17 +271,18 @@ export default function CollectibleDetails({ collectible }) {
{t('contractAddress')}
</Typography>
<Typography
color={COLORS.UI3}
color={COLORS.PRIMARY1}
variant={TYPOGRAPHY.H6}
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
boxProps={{
margin: 0,
marginBottom: 4,
}}
className="collectible-details__contract-link"
>
<a
target="_blank"
className="collectible-details__contract-link"
rel="noopener noreferrer"
href={getTokenTrackerLink(
address,
currentNetwork,
@ -286,11 +290,9 @@ export default function CollectibleDetails({ collectible }) {
null,
rpcPrefs,
)}
rel="noopener noreferrer"
title={address}
>
{getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
? shortenAddress(address)
: address}
{inPopUp ? shortenAddress(address) : address}
</a>
</Typography>
</Box>

10
ui/components/app/collectible-details/index.scss
View File

@ -55,13 +55,13 @@ $spacer-break-small: 16px;
&__contract-link,
&__image-link {
color: var(--primary-1);
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
&:hover {
color: var(--primary-3);
@media screen and (max-width: $break-small) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90%;
}
}

8
ui/components/app/collectibles-tab/collectibles-tab.js
View File

@ -117,6 +117,7 @@ export default function CollectiblesTab({ onAddNFT }) {
marginBottom={12}
justifyContent={JUSTIFY_CONTENT.CENTER}
flexDirection={FLEX_DIRECTION.COLUMN}
className="collectibles-tab__link"
>
<Typography
color={COLORS.UI3}
@ -131,7 +132,6 @@ export default function CollectiblesTab({ onAddNFT }) {
target="_blank"
rel="noopener noreferrer"
href="https://metamask.zendesk.com/hc/en-us/articles/360058238591-NFT-tokens-in-MetaMask-wallet"
style={{ padding: 0, fontSize: '1rem' }}
>
{t('learnMoreUpperCase')}
</Button>
@ -154,6 +154,8 @@ export default function CollectiblesTab({ onAddNFT }) {
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.CENTER}
>
{!isMainnet && Object.keys(collections).length < 1 ? null : (
<>
<Box
className="collectibles-tab__link"
justifyContent={JUSTIFY_CONTENT.FLEX_END}
@ -170,11 +172,13 @@ export default function CollectiblesTab({ onAddNFT }) {
</Box>
<Typography
color={COLORS.UI3}
variant={TYPOGRAPHY.H4}
variant={TYPOGRAPHY.H6}
align={TEXT_ALIGN.CENTER}
>
{t('or')}
</Typography>
</>
)}
<Box
justifyContent={JUSTIFY_CONTENT.FLEX_START}
className="collectibles-tab__link"

2
ui/components/app/collectibles-tab/index.scss
View File

@ -2,7 +2,7 @@
&__link {
a {
padding: 4px;
font-size: 1rem;
font-size: 0.875rem;
}
}
}

2
ui/components/app/wallet-overview/token-overview.js
View File

@ -62,7 +62,7 @@ const TokenOverview = ({ className, token }) => {
});
useEffect(() => {
if (token.isERC721) {
if (token.isERC721 && process.env.COLLECTIBLES_V1) {
dispatch(
showModal({
name: 'CONVERT_TOKEN_TO_NFT',

2
ui/components/app/wallet-overview/token-overview.test.js
View File

@ -54,6 +54,7 @@ describe('TokenOverview', () => {
});
it('should show ConvertTokenToNFT modal when token passed in props is an ERC721', () => {
process.env.COLLECTIBLES_V1 = true;
const token = {
name: 'test',
isERC721: true,
@ -69,6 +70,7 @@ describe('TokenOverview', () => {
name: 'CONVERT_TOKEN_TO_NFT',
tokenAddress: '0x01',
});
process.env.COLLECTIBLES_V1 = false;
});
});
});

17
ui/css/itcss/components/send.scss
View File

@ -203,12 +203,12 @@
box-shadow: 2px 2px 2px var(--alto);
}
.customize-gas-tooltip-container input[type="number"]::-webkit-inner-spin-button {
.customize-gas-tooltip-container input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
.customize-gas-tooltip-container input[type="number"]:hover::-webkit-inner-spin-button {
.customize-gas-tooltip-container input[type='number']:hover::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
@ -684,10 +684,19 @@
flex-grow: 1;
}
@media screen and (max-width: $break-small) {
&__asset-data {
width: 60%;
}
}
&__symbol {
@include Paragraph;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&__name {
@ -1061,12 +1070,12 @@
justify-content: center;
}
input[type="number"]::-webkit-inner-spin-button {
input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
input[type="number"]:hover::-webkit-inner-spin-button {
input[type='number']:hover::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}

5
ui/ducks/send/send.js
View File

@ -1438,7 +1438,10 @@ export function updateSendAsset({ type, details }) {
details.address,
userAddress,
);
if (standard === ERC721 || standard === ERC1155) {
if (
process.env.COLLECTIBLES_V1 &&
(standard === ERC721 || standard === ERC1155)
) {
await dispatch(hideLoadingIndication());
dispatch(
showModal({

2
ui/ducks/send/send.test.js
View File

@ -1524,6 +1524,7 @@ describe('Send Slice', () => {
});
it('should show ConvertTokenToNFT modal and throw "invalidAssetType" error when token passed in props is an ERC721 or ERC1155', async () => {
process.env.COLLECTIBLES_V1 = true;
getTokenStandardAndDetailsStub.mockImplementation(() =>
Promise.resolve({ standard: 'ERC1155' }),
);
@ -1552,6 +1553,7 @@ describe('Send Slice', () => {
},
type: 'UI_MODAL_OPEN',
});
process.env.COLLECTIBLES_V1 = false;
});
});

23
ui/store/actions.js
View File

@ -2767,13 +2767,26 @@ export function loadingTokenParamsFinished() {
};
}
export function getTokenParams(tokenAddress) {
export function getTokenParams(address) {
return (dispatch, getState) => {
const tokenList = getTokenList(getState());
const existingTokens = getState().metamask.tokens;
const existingToken = existingTokens.find(({ address }) =>
isEqualCaseInsensitive(tokenAddress, address),
const { selectedAddress } = getState().metamask;
const { chainId } = getState().metamask.provider;
const existingCollectibles = getState().metamask?.allCollectibles?.[
selectedAddress
]?.[chainId];
const existingToken = existingTokens.find(({ address: tokenAddress }) =>
isEqualCaseInsensitive(address, tokenAddress),
);
const existingCollectible = existingCollectibles?.find(
({ address: collectibleAddress }) =>
isEqualCaseInsensitive(address, collectibleAddress),
);
if (existingCollectible) {
return null;
}
if (existingToken) {
return Promise.resolve({
@ -2785,9 +2798,9 @@ export function getTokenParams(tokenAddress) {
dispatch(loadingTokenParamsStarted());
log.debug(`loadingTokenParams`);
return getSymbolAndDecimals(tokenAddress, tokenList).then(
return getSymbolAndDecimals(address, tokenList).then(
({ symbol, decimals }) => {
dispatch(addToken(tokenAddress, symbol, Number(decimals)));
dispatch(addToken(address, symbol, Number(decimals)));
dispatch(loadingTokenParamsFinished());
},
);