1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00

[MMI] connect custodial with incorrect styles (#19820)

* updates the custody-keyring package and sorts the order of custodians

* updates the styles

* snapshots update

* lint

* run dedupe

* clean up
This commit is contained in:
António Regadas 2023-06-29 15:42:37 +01:00 committed by GitHub
parent af2c87d777
commit 48465432d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 197 additions and 160 deletions

View File

@ -215,7 +215,7 @@
"@lavamoat/snow": "^1.5.0",
"@material-ui/core": "^4.11.0",
"@metamask-institutional/custody-controller": "0.2.6",
"@metamask-institutional/custody-keyring": "0.0.23",
"@metamask-institutional/custody-keyring": "^0.0.25",
"@metamask-institutional/extension": "^0.1.3",
"@metamask-institutional/institutional-features": "^1.1.8",
"@metamask-institutional/portfolio-dashboard": "^1.1.3",

View File

@ -2,13 +2,14 @@
exports[`CustodyPage renders CustodyPage 1`] = `
<div>
<div
class="mm-box"
class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--background-color-background-default"
style="box-shadow: var(--shadow-size-xs) var(--color-shadow-default);"
>
<div
class="mm-box mm-box--padding-0 mm-box--sm:padding-7 mm-box--md:padding-2 mm-box--display-flex mm-box--flex-direction-column"
class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--display-flex mm-box--align-items-center"
>
<button
aria-label="Back"
@ -19,100 +20,102 @@ exports[`CustodyPage renders CustodyPage 1`] = `
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
</button>
<h4
class="box mm-text mm-text--body-lg-medium box--margin-top-4 box--flex-direction-row box--color-text-default"
<p
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
Custodial Accounts
</h4>
<h6
class="box mm-text mm-text--body-md box--margin-top-2 box--margin-bottom-5 box--flex-direction-row box--color-text-default"
Back
</p>
</div>
<h4
class="box mm-text mm-text--body-lg-medium box--margin-top-4 box--flex-direction-row box--color-text-default"
>
Custodial Accounts
</h4>
<h6
class="box mm-text mm-text--body-md box--margin-top-2 box--margin-bottom-5 box--flex-direction-row box--color-text-default"
>
Please choose the custodian you want to connect in order to add or refresh a token.
</h6>
<div
class="mm-box"
>
<ul
width="full"
>
Please choose the custodian you want to connect in order to add or refresh a token.
</h6>
<div
class="mm-box"
>
<ul
width="full"
<div
class="mm-box mm-box--margin-bottom-4 mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--rounded-sm mm-box--border-color-border-default box--border-style-solid box--border-width-1"
>
<div
class="mm-box mm-box--padding-3 mm-box--sm:padding-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--rounded-sm mm-box--border-color-border-default box--border-style-solid box--border-width-1"
class="mm-box mm-box--display-flex mm-box--align-items-center"
>
<div
class="mm-box mm-box--align-items-center"
<img
alt="Saturn Custody"
height="32"
src="https://saturn-custody-ui.dev.metamask-institutional.io/saturn.svg"
width="32"
/>
<p
class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
>
<img
alt="Saturn Custody"
height="32"
src="https://saturn-custody-ui.dev.metamask-institutional.io/saturn.svg"
width="32"
/>
<p
class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
>
Saturn Custody
</p>
</div>
<button
class="box mm-text mm-button-base mm-button-base--size-sm mm-button-primary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
data-testid="custody-connect-button"
>
Select
</button>
Saturn Custody
</p>
</div>
</ul>
</div>
<button
class="box mm-text mm-button-base mm-button-base--size-sm mm-button-primary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
data-testid="custody-connect-button"
>
Select
</button>
</div>
</ul>
</div>
</div>
</div>
`;
exports[`CustodyPage renders CustodyPage 2`] = `
<div>
<div
class="mm-box"
class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--background-color-background-default"
style="box-shadow: var(--shadow-size-xs) var(--color-shadow-default);"
>
<div
class="mm-box mm-box--padding-0 mm-box--display-flex mm-box--flex-direction-column"
class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--display-flex mm-box--align-items-center"
>
<div
class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--display-flex mm-box--align-items-center"
<button
aria-label="Back"
class="box mm-button-icon mm-button-icon--size-sm box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
>
<button
aria-label="Back"
class="box mm-button-icon mm-button-icon--size-sm box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-alternative box--background-color-transparent box--rounded-lg"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
</button>
<p
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
Back
</p>
</div>
<h4
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
</button>
<p
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
<div
class="mm-box mm-box--display-flex mm-box--align-items-center"
>
<p
class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
/>
</div>
</h4>
<p
class="box mm-text mm-text--body-md box--margin-top-4 box--flex-direction-row box--color-text-default"
>
Enter your token or add a new token
Back
</p>
</div>
<h4
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
<div
class="mm-box mm-box--display-flex mm-box--align-items-center"
>
<p
class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
/>
</div>
</h4>
<p
class="box mm-text mm-text--body-md box--margin-top-4 box--flex-direction-row box--color-text-default"
>
Enter your token or add a new token
</p>
<div
class="mm-box mm-box--padding-bottom-7"
>

View File

@ -73,7 +73,21 @@ const CustodyPage = () => {
const custodianButtons = useMemo(() => {
const custodianItems = [];
custodians.forEach((custodian) => {
const sortedCustodians = custodians.sort(function (a, b) {
const nameA = a.name.toLowerCase();
const nameB = b.name.toLowerCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0;
});
sortedCustodians.forEach((custodian) => {
if (
(!custodian.production &&
process.env.METAMASK_ENVIRONMENT === 'production') ||
@ -88,15 +102,16 @@ const CustodyPage = () => {
custodianItems.push(
<Box
key={uuidv4()}
display={Display.FLEX}
flexDirection={FlexDirection.ROW}
display={Display.Flex}
flexDirection={FlexDirection.Row}
justifyContent={JustifyContent.spaceBetween}
alignItems={AlignItems.center}
borderColor={BorderColor.borderDefault}
borderRadius={BorderRadius.SM}
padding={[3, 4]}
padding={4}
marginBottom={4}
>
<Box display={Display.FLEX} alignItems={AlignItems.center}>
<Box display={Display.Flex} alignItems={AlignItems.center}>
{custodian.iconUrl && (
<img
width={32}
@ -327,7 +342,7 @@ const CustodyPage = () => {
};
return (
<Box>
<>
{connectError && (
<Text textAlign={TextAlign.Center} marginTop={3} padding={[2, 7, 5]}>
{connectError}
@ -342,18 +357,30 @@ const CustodyPage = () => {
{!accounts && !selectedCustodianType ? (
<Box
padding={[0, 7, 2]}
padding={4}
display={Display.Flex}
flexDirection={FlexDirection.Column}
backgroundColor={Color.backgroundDefault}
style={{
boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
}}
>
<ButtonIcon
ariaLabel={t('back')}
iconName={IconName.ArrowLeft}
size={IconSize.Sm}
color={Color.iconDefault}
onClick={() => history.push(DEFAULT_ROUTE)}
<Box
display={Display.Flex}
/>
alignItems={AlignItems.center}
marginBottom={4}
marginTop={4}
>
<ButtonIcon
ariaLabel={t('back')}
iconName={IconName.ArrowLeft}
size={IconSize.Sm}
color={Color.iconDefault}
onClick={() => history.push(DEFAULT_ROUTE)}
display={Display.Flex}
/>
<Text>{t('back')}</Text>
</Box>
<Text as="h4" variant={TextVariant.bodyLgMedium} marginTop={4}>
{t('connectCustodialAccountTitle')}
</Text>
@ -374,9 +401,13 @@ const CustodyPage = () => {
{!accounts && selectedCustodianType && (
<>
<Box
padding={0}
padding={4}
display={Display.Flex}
flexDirection={FlexDirection.Column}
backgroundColor={Color.backgroundDefault}
style={{
boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
}}
>
<Box
display={Display.Flex}
@ -388,7 +419,7 @@ const CustodyPage = () => {
ariaLabel={t('back')}
iconName={IconName.ArrowLeft}
size={IconSize.Sm}
color={Color.iconAlternative}
color={Color.iconDefault}
onClick={() => cancelConnectCustodianToken()}
display={[Display.Flex]}
/>
@ -410,43 +441,46 @@ const CustodyPage = () => {
<Text marginTop={4}>
{t('enterCustodianToken', [selectedCustodianDisplayName])}
</Text>
</Box>
<Box paddingBottom={7}>
<JwtUrlForm
jwtList={jwtList}
currentJwt={currentJwt}
onJwtChange={(jwt) => setCurrentJwt(jwt)}
jwtInputText={t('pasteJWTToken')}
apiUrl={apiUrl}
urlInputText={t('custodyApiUrl', [selectedCustodianDisplayName])}
onUrlChange={(url) => setApiUrl(url)}
/>
<Box
display={Display.Flex}
flexDirection={FlexDirection.Row}
justifyContent={JustifyContent.center}
padding={0}
>
<Button
variant={BUTTON_VARIANT.SECONDARY}
marginRight={4}
onClick={() => {
cancelConnectCustodianToken();
}}
block
<Box paddingBottom={7}>
<JwtUrlForm
jwtList={jwtList}
currentJwt={currentJwt}
onJwtChange={(jwt) => setCurrentJwt(jwt)}
jwtInputText={t('pasteJWTToken')}
apiUrl={apiUrl}
urlInputText={t('custodyApiUrl', [
selectedCustodianDisplayName,
])}
onUrlChange={(url) => setApiUrl(url)}
/>
<Box
display={Display.Flex}
flexDirection={FlexDirection.Row}
justifyContent={JustifyContent.center}
padding={0}
>
{t('cancel')}
</Button>
<Button
data-testid="jwt-form-connect-button"
onClick={connect}
disabled={
!selectedCustodianName || (addNewTokenClicked && !currentJwt)
}
block
>
{t('connect')}
</Button>
<Button
variant={BUTTON_VARIANT.SECONDARY}
marginRight={4}
onClick={() => {
cancelConnectCustodianToken();
}}
block
>
{t('cancel')}
</Button>
<Button
data-testid="jwt-form-connect-button"
onClick={connect}
disabled={
!selectedCustodianName ||
(addNewTokenClicked && !currentJwt)
}
block
>
{t('connect')}
</Button>
</Box>
</Box>
</Box>
</>
@ -598,7 +632,7 @@ const CustodyPage = () => {
</Box>
</Box>
)}
</Box>
</>
);
};

View File

@ -3699,22 +3699,6 @@ __metadata:
languageName: node
linkType: hard
"@metamask-institutional/custody-keyring@npm:0.0.23":
version: 0.0.23
resolution: "@metamask-institutional/custody-keyring@npm:0.0.23"
dependencies:
"@ethereumjs/tx": ^4.1.1
"@ethereumjs/util": ^8.0.5
"@metamask-institutional/configuration-client": ^1.0.6
"@metamask-institutional/sdk": ^0.1.15
"@metamask-institutional/types": ^1.0.2
"@metamask/obs-store": ^8.0.0
crypto: ^1.0.1
lodash.clonedeep: ^4.5.0
checksum: eae1003ddfd262526d28c23d6dbdfbc6d42879bb989c9bcf97416d3964aaa6ce202a0803c46256fb1afc1399592176ba2fdfcbd2043c4f1275f5079e067c3a78
languageName: node
linkType: hard
"@metamask-institutional/custody-keyring@npm:^0.0.22":
version: 0.0.22
resolution: "@metamask-institutional/custody-keyring@npm:0.0.22"
@ -3731,6 +3715,22 @@ __metadata:
languageName: node
linkType: hard
"@metamask-institutional/custody-keyring@npm:^0.0.25":
version: 0.0.25
resolution: "@metamask-institutional/custody-keyring@npm:0.0.25"
dependencies:
"@ethereumjs/tx": ^4.1.1
"@ethereumjs/util": ^8.0.5
"@metamask-institutional/configuration-client": ^1.0.6
"@metamask-institutional/sdk": ^0.1.18
"@metamask-institutional/types": ^1.0.3
"@metamask/obs-store": ^8.0.0
crypto: ^1.0.1
lodash.clonedeep: ^4.5.0
checksum: 9e6405e69be3f96f686b611e7c0c513da70115f78a9731f0960a1480706f7498e4b69154ce9c78967e886558b0a6c06aaf23e89713408b3f74f175176fcd790c
languageName: node
linkType: hard
"@metamask-institutional/extension@npm:^0.1.3":
version: 0.1.3
resolution: "@metamask-institutional/extension@npm:0.1.3"
@ -3773,24 +3773,24 @@ __metadata:
languageName: node
linkType: hard
"@metamask-institutional/sdk@npm:^0.1.14, @metamask-institutional/sdk@npm:^0.1.15, @metamask-institutional/sdk@npm:^0.1.16, @metamask-institutional/sdk@npm:^0.1.17":
version: 0.1.17
resolution: "@metamask-institutional/sdk@npm:0.1.17"
"@metamask-institutional/sdk@npm:^0.1.14, @metamask-institutional/sdk@npm:^0.1.15, @metamask-institutional/sdk@npm:^0.1.16, @metamask-institutional/sdk@npm:^0.1.17, @metamask-institutional/sdk@npm:^0.1.18":
version: 0.1.18
resolution: "@metamask-institutional/sdk@npm:0.1.18"
dependencies:
"@metamask-institutional/simplecache": ^1.0.2
"@metamask-institutional/types": ^1.0.2
"@metamask-institutional/simplecache": ^1.1.0
"@metamask-institutional/types": ^1.0.3
"@types/jsonwebtoken": ^9.0.1
"@types/node": ^18.15.11
bignumber.js: ^9.1.1
jsonwebtoken: ^9.0.0
checksum: 82b3a8038fdf96983846fa884c867ec9497ac4a2a287d8bb2ce4ffde39b6127ce3af8d2adccab5cedf4ed6b1980488f3cc83347237c085f44ed3a0c004f8a183
checksum: c9093f4d6495d35f540b25e6dae70ab69ee9c1ce6e18f6164e9aeae5194318a34dfb471791f4f83cec68059456740bd66a5e6368115431d1029a04524f500067
languageName: node
linkType: hard
"@metamask-institutional/simplecache@npm:^1.0.2":
version: 1.0.2
resolution: "@metamask-institutional/simplecache@npm:1.0.2"
checksum: 65444d49478e14956f884e5423992ad7069c9e8979cdc012db3f8f6f207147816b8f3b45be33007772a9628560b5f054ea52b0eb8a9ee25066abc199260d30b6
"@metamask-institutional/simplecache@npm:^1.1.0":
version: 1.1.0
resolution: "@metamask-institutional/simplecache@npm:1.1.0"
checksum: 6011c8cafe4f1ca4736a668cac764dfbb2759f887cfbc76c869491e28a4ed5a206bd0635474c31585852eb39e2b6d0081b778c0c55ec4003ed52abfe2e474ad3
languageName: node
linkType: hard
@ -3808,10 +3808,10 @@ __metadata:
languageName: node
linkType: hard
"@metamask-institutional/types@npm:^1.0.1, @metamask-institutional/types@npm:^1.0.2":
version: 1.0.2
resolution: "@metamask-institutional/types@npm:1.0.2"
checksum: 27bee2dc32a1a8869a2918863d60e4c59b350ad5fcf2d3fbc3fd52b9db2e2af33eb3af568726b72cb7accd7aba2639e9e707522989cc5db9ee8d8f1239f9d6f9
"@metamask-institutional/types@npm:^1.0.1, @metamask-institutional/types@npm:^1.0.2, @metamask-institutional/types@npm:^1.0.3":
version: 1.0.3
resolution: "@metamask-institutional/types@npm:1.0.3"
checksum: ce22762d43c8438104df32a91b115c6e99d5f17745fd0e747141730a91b0affd2d92cd1c7dabe34dad8cc59d6dccc70019aa07bd2039c3da68b9987ab7bcf81b
languageName: node
linkType: hard
@ -24473,7 +24473,7 @@ __metadata:
"@lavamoat/snow": ^1.5.0
"@material-ui/core": ^4.11.0
"@metamask-institutional/custody-controller": 0.2.6
"@metamask-institutional/custody-keyring": 0.0.23
"@metamask-institutional/custody-keyring": ^0.0.25
"@metamask-institutional/extension": ^0.1.3
"@metamask-institutional/institutional-features": ^1.1.8
"@metamask-institutional/portfolio-dashboard": ^1.1.3