From a2c570100169d53bc90f16b6458aaf53cee6a735 Mon Sep 17 00:00:00 2001
From: Septs <github@septs.pw>
Date: Wed, 13 Apr 2022 15:15:40 +0800
Subject: [PATCH 1/2] fix: jsx-key

---
 .../components/shared/ApplicationBoard.tsx    | 12 +++---
 .../CollectibleList/index.tsx                 |  8 ++--
 .../RequestPermission/RequestPermission.tsx   | 12 +++---
 .../ThirdPartyRequestPermission.tsx           |  4 +-
 .../Collectible/SNSAdaptor/TokenTab.tsx       | 40 +++++++++----------
 5 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx
index 9d3608d5aa9c..eb848f1d9734 100644
--- a/packages/mask/src/components/shared/ApplicationBoard.tsx
+++ b/packages/mask/src/components/shared/ApplicationBoard.tsx
@@ -66,13 +66,11 @@ export function ApplicationBoard() {
                         [],
                     )
                     .sort((a, b) => a.entry.defaultSortingPriority - b.entry.defaultSortingPriority)
-                    .map((X, i) => {
-                        return (
-                            <Fragment key={i + X.pluginId}>
-                                <X.entry.RenderEntryComponent disabled={!X.enabled} />
-                            </Fragment>
-                        )
-                    })}
+                    .map(({ entry, enabled }, index) => (
+                        <Fragment key={index}>
+                            <entry.RenderEntryComponent disabled={!enabled} />
+                        </Fragment>
+                    ))}
             </section>
         </>
     )
diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
index 0f68abfd3a21..5ce0d2948847 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
@@ -190,14 +190,14 @@ function CollectibleListUI(props: CollectibleListUIProps) {
                     </Box>
                 ) : (
                     <Box className={classes.root}>
-                        {collectibles.map((x, i) => (
+                        {collectibles.map((token, index) => (
                             <CollectibleItem
-                                renderOrder={i}
-                                token={x}
+                                renderOrder={index}
+                                token={token}
                                 provider={provider}
                                 wallet={wallet}
                                 readonly={readonly}
-                                key={x.tokenId + x.contractDetailed.address}
+                                key={index}
                             />
                         ))}
                     </Box>
diff --git a/packages/mask/src/extension/popups/RequestPermission/RequestPermission.tsx b/packages/mask/src/extension/popups/RequestPermission/RequestPermission.tsx
index 53a521d4c8f1..5d59c8f5ac58 100644
--- a/packages/mask/src/extension/popups/RequestPermission/RequestPermission.tsx
+++ b/packages/mask/src/extension/popups/RequestPermission/RequestPermission.tsx
@@ -23,18 +23,18 @@ export function RequestPermission(props: RequestPermissionProps) {
             <DialogContent>
                 {origins?.length ? (
                     <List dense subheader={<ListSubheader>{t('popups_sites')}</ListSubheader>}>
-                        {origins?.map((x) => (
-                            <ListItem key={x}>
-                                <ListItemText primary={x} />
+                        {origins?.map((origin, key) => (
+                            <ListItem key={key}>
+                                <ListItemText primary={origin} />
                             </ListItem>
                         ))}
                     </List>
                 ) : null}
                 {permissions?.length ? (
                     <List dense subheader={<ListSubheader>{t('popups_permissions')}</ListSubheader>}>
-                        {permissions?.map((x) => (
-                            <ListItem key={x}>
-                                <ListItemText primary={x} />
+                        {permissions?.map((permission, key) => (
+                            <ListItem key={key}>
+                                <ListItemText primary={permission} />
                             </ListItem>
                         ))}
                     </List>
diff --git a/packages/mask/src/extension/popups/ThirdPartyRequestPermission/ThirdPartyRequestPermission.tsx b/packages/mask/src/extension/popups/ThirdPartyRequestPermission/ThirdPartyRequestPermission.tsx
index 7eaa3b0b226b..aabd4e175e41 100644
--- a/packages/mask/src/extension/popups/ThirdPartyRequestPermission/ThirdPartyRequestPermission.tsx
+++ b/packages/mask/src/extension/popups/ThirdPartyRequestPermission/ThirdPartyRequestPermission.tsx
@@ -16,8 +16,8 @@ export function ThirdPartyRequestPermission(props: ThirdPartyRequestPermissionPr
                 values={{ pluginName: props.pluginName, pluginURL: props.pluginURL }}
             />
             <ul>
-                {props.permissions.map((x) => (
-                    <li key={x}>{ThirdPartyPluginPermission[x]}</li>
+                {props.permissions.map((x, key) => (
+                    <li key={key}>{ThirdPartyPluginPermission[x]}</li>
                 ))}
             </ul>
             <button onClick={() => window.close()}>{t('cancel')}</button>
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/TokenTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/TokenTab.tsx
index 91cce2768001..25215939a860 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/TokenTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/TokenTab.tsx
@@ -123,27 +123,25 @@ export function TokenTab(props: TokenTabProps) {
                     </Typography>
 
                     <Box className={classes.trait_content}>
-                        {asset.value.traits.map(({ trait_type, value }) => {
-                            return (
-                                <Link
-                                    underline="none"
-                                    key={trait_type + value}
-                                    href={
-                                        asset.value?.slug
-                                            ? resolveTraitLinkOnOpenSea(chainId, asset.value.slug, trait_type, value)
-                                            : ''
-                                    }
-                                    target="_blank"
-                                    rel="noopener noreferrer">
-                                    <Paper className={classes.trait} variant="outlined">
-                                        <Typography variant="body2" color="primary">
-                                            {trait_type}
-                                        </Typography>
-                                        <Typography variant="body2">{value}</Typography>
-                                    </Paper>
-                                </Link>
-                            )
-                        })}
+                        {asset.value.traits.map(({ trait_type, value }, key) => (
+                            <Link
+                                underline="none"
+                                key={key}
+                                href={
+                                    asset.value?.slug
+                                        ? resolveTraitLinkOnOpenSea(chainId, asset.value.slug, trait_type, value)
+                                        : ''
+                                }
+                                target="_blank"
+                                rel="noopener noreferrer">
+                                <Paper className={classes.trait} variant="outlined">
+                                    <Typography variant="body2" color="primary">
+                                        {trait_type}
+                                    </Typography>
+                                    <Typography variant="body2">{value}</Typography>
+                                </Paper>
+                            </Link>
+                        ))}
                     </Box>
                 </Box>
             ) : null}

From 510ef16dbfa2942e9607732f70b4d7d33538748f Mon Sep 17 00:00:00 2001
From: Septs <github@septs.pw>
Date: Wed, 13 Apr 2022 15:17:09 +0800
Subject: [PATCH 2/2] fix: human readable variable name

---
 .../ThirdPartyRequestPermission.tsx                           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mask/src/extension/popups/ThirdPartyRequestPermission/ThirdPartyRequestPermission.tsx b/packages/mask/src/extension/popups/ThirdPartyRequestPermission/ThirdPartyRequestPermission.tsx
index aabd4e175e41..63e2862ce274 100644
--- a/packages/mask/src/extension/popups/ThirdPartyRequestPermission/ThirdPartyRequestPermission.tsx
+++ b/packages/mask/src/extension/popups/ThirdPartyRequestPermission/ThirdPartyRequestPermission.tsx
@@ -16,8 +16,8 @@ export function ThirdPartyRequestPermission(props: ThirdPartyRequestPermissionPr
                 values={{ pluginName: props.pluginName, pluginURL: props.pluginURL }}
             />
             <ul>
-                {props.permissions.map((x, key) => (
-                    <li key={key}>{ThirdPartyPluginPermission[x]}</li>
+                {props.permissions.map((permission, key) => (
+                    <li key={key}>{ThirdPartyPluginPermission[permission]}</li>
                 ))}
             </ul>
             <button onClick={() => window.close()}>{t('cancel')}</button>