diff --git a/app/scripts/controllers/mmi-controller.js b/app/scripts/controllers/mmi-controller.js
index 8923487b5..0ed4deaae 100644
--- a/app/scripts/controllers/mmi-controller.js
+++ b/app/scripts/controllers/mmi-controller.js
@@ -442,25 +442,8 @@ export default class MMIController extends EventEmitter {
return keyring.getTransactionDeepLink(from, custodyTxId);
}
- async getCustodianToken(custodianType) {
- let currentCustodyType;
-
- const address = this.preferencesController.getSelectedAddress();
-
- if (!custodianType) {
- const resultCustody = this.custodyController.getCustodyTypeByAddress(
- toChecksumHexAddress(address),
- );
- currentCustodyType = resultCustody;
- }
- let keyring = await this.keyringController.getKeyringsByType(
- currentCustodyType || `Custody - ${custodianType}`,
- )[0];
- if (!keyring) {
- keyring = await this.keyringController.addNewKeyring(
- currentCustodyType || `Custody - ${custodianType}`,
- );
- }
+ async getCustodianToken(address) {
+ const keyring = await this.keyringController.getKeyringForAccount(address);
const { authDetails } = keyring.getAccountDetails(address);
return keyring ? authDetails.jwt || authDetails.refreshToken : '';
}
diff --git a/ui/components/component-library/checkbox/__snapshots__/checkbox.test.tsx.snap b/ui/components/component-library/checkbox/__snapshots__/checkbox.test.tsx.snap
index 5df6da8de..90c0f27f5 100644
--- a/ui/components/component-library/checkbox/__snapshots__/checkbox.test.tsx.snap
+++ b/ui/components/component-library/checkbox/__snapshots__/checkbox.test.tsx.snap
@@ -3,7 +3,7 @@
exports[`Checkbox should render the Checkbox without crashing 1`] = `
-`;
+exports[`Confirm Remove JWT should render correctly 1`] = ``;
diff --git a/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js b/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js
index 1f82c384a..aa0439b39 100644
--- a/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js
+++ b/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js
@@ -1,16 +1,24 @@
import React, { memo, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
-import Modal from '../../app/modal';
import CustodyAccountList from '../../../pages/institutional/connect-custody/account-list';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { removeAccount } from '../../../store/actions';
import withModalProps from '../../../helpers/higher-order-components/with-modal-props';
-import { Text } from '../../component-library/text/deprecated';
-import Box from '../../ui/box';
+import {
+ Box,
+ Text,
+ Modal,
+ ModalContent,
+ ModalHeader,
+ ModalOverlay,
+ Button,
+ BUTTON_VARIANT,
+ BUTTON_SIZES,
+} from '../../component-library';
import {
BorderRadius,
- DISPLAY,
+ Display,
TextAlign,
TextColor,
TextVariant,
@@ -19,16 +27,25 @@ import {
const ConfirmRemoveJWT = ({
custodyAccountDetails,
accounts,
- token,
+ token: propsToken,
hideModal,
}) => {
const t = useI18nContext();
const dispatch = useDispatch();
const [showMore, setShowMore] = useState(false);
const [tokenAccounts, setTokenAccounts] = useState([]);
+ let token = null;
+
+ if (propsToken) {
+ if (typeof propsToken === 'object') {
+ token = propsToken.address;
+ } else {
+ token = propsToken;
+ }
+ }
useEffect(() => {
- const lowercasedTokenAddress = token.address.toLowerCase();
+ const lowercasedTokenAddress = token.toLowerCase();
const filteredAccounts = custodyAccountDetails.filter((item) => {
const addressLower = item.address.toLowerCase();
@@ -72,52 +89,60 @@ const ConfirmRemoveJWT = ({
};
return (
-
-
- {showMore && token ? token.address : `...${token.address.slice(-9)}`}
-
- {!showMore && (
-
+
+
+ {t('removeJWT')}
+
-
- {t('showMore')}
-
+
+ {showMore && token ? token : `...${token.slice(-9)}`}
+
+
+ {!showMore && (
+
+
+ {t('showMore')}
+
+
+ )}
+
+ {t('removeJWTDescription')}
- )}
-
- {t('removeJWTDescription')}
-
-
-
-
+
+
+
+
+
+
+
);
};
ConfirmRemoveJWT.propTypes = {
hideModal: PropTypes.func.isRequired,
- token: PropTypes.object.isRequired,
+ token: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
custodyAccountDetails: PropTypes.array.isRequired,
accounts: PropTypes.array.isRequired,
};
diff --git a/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.stories.js b/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.stories.js
index ae5590c14..440541fcb 100644
--- a/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.stories.js
+++ b/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.stories.js
@@ -11,7 +11,7 @@ export default {
removeAccount: () => {
/**/
},
- token: { address: '0xaD6D458402F60fD3Bd25163575031ACDce07538D' },
+ token: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
custodyAccountDetails: [
{
address: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
diff --git a/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.test.js b/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.test.js
index 4416ede93..822303f19 100644
--- a/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.test.js
+++ b/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.test.js
@@ -3,7 +3,7 @@ import { fireEvent, waitFor } from '@testing-library/react';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { renderWithProvider } from '../../../../test/lib/render-helpers';
-import testData from '../../../../.storybook/test-data';
+import mockState from '../../../../test/data/mock-state.json';
import ConfirmRemoveJwt from '.';
const mockedRemoveAccount = jest.fn();
@@ -18,7 +18,7 @@ const address = '0xaD6D458402F60fD3Bd25163575031ACDce07538D';
const props = {
hideModal: mockedHideModal,
- token: { address },
+ token: address,
custodyAccountDetails: [
{
address,
@@ -30,13 +30,8 @@ const props = {
accounts: [{ address, balance: '0x0' }],
};
-const mockStore = {
- ...testData,
- metamask: {},
-};
-
const middleware = [thunk];
-const store = configureMockStore(middleware)(mockStore);
+const store = configureMockStore(middleware)(mockState);
const render = () => {
return renderWithProvider(, store);
diff --git a/ui/components/institutional/confirm-remove-jwt-modal/index.scss b/ui/components/institutional/confirm-remove-jwt-modal/index.scss
index 1aff21359..666ec5cad 100644
--- a/ui/components/institutional/confirm-remove-jwt-modal/index.scss
+++ b/ui/components/institutional/confirm-remove-jwt-modal/index.scss
@@ -9,5 +9,6 @@
&__accounts-list {
margin-left: -5%;
+ overflow: hidden;
}
}
diff --git a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js
index 4a17f7c77..babbecd1a 100644
--- a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js
+++ b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js
@@ -53,7 +53,7 @@ const InteractiveReplacementTokenNotification = ({ isVisible }) => {
return;
}
- const token = await dispatch(mmiActions.getCustodianToken());
+ const token = await dispatch(mmiActions.getCustodianToken(address));
const custodyAccountDetails = await dispatch(
mmiActions.getAllCustodianAccountsWithToken(
keyring.type.split(' - ')[1],
diff --git a/ui/components/multichain/account-list-item-menu/account-list-item-menu.js b/ui/components/multichain/account-list-item-menu/account-list-item-menu.js
index ec69a70be..68bb478fd 100644
--- a/ui/components/multichain/account-list-item-menu/account-list-item-menu.js
+++ b/ui/components/multichain/account-list-item-menu/account-list-item-menu.js
@@ -233,7 +233,9 @@ export const AccountListItemMenu = ({
ref={removeJWTItemRef}
data-testid="account-options-menu__remove-jwt"
onClick={async () => {
- const token = await dispatch(mmiActions.getCustodianToken());
+ const token = await dispatch(
+ mmiActions.getCustodianToken(identity.address),
+ );
const custodyAccountDetails = await dispatch(
mmiActions.getAllCustodianAccountsWithToken(
keyring.type.split(' - ')[1],
diff --git a/ui/pages/institutional/custody/custody.js b/ui/pages/institutional/custody/custody.js
index 0261eec90..d9825ead9 100644
--- a/ui/pages/institutional/custody/custody.js
+++ b/ui/pages/institutional/custody/custody.js
@@ -40,7 +40,7 @@ import {
CUSTODY_ACCOUNT_DONE_ROUTE,
DEFAULT_ROUTE,
} from '../../../helpers/constants/routes';
-import { getCurrentChainId } from '../../../selectors';
+import { getCurrentChainId, getSelectedAddress } from '../../../selectors';
import { getMMIConfiguration } from '../../../selectors/institutional/selectors';
import CustodyAccountList from '../connect-custody/account-list';
import JwtUrlForm from '../../../components/institutional/jwt-url-form';
@@ -72,6 +72,7 @@ const CustodyPage = () => {
const [chainId, setChainId] = useState(0);
const [connectRequest, setConnectRequest] = useState(undefined);
const [accounts, setAccounts] = useState();
+ const address = useSelector(getSelectedAddress);
const custodianButtons = useMemo(() => {
const custodianItems = [];
@@ -259,7 +260,8 @@ const CustodyPage = () => {
if (Object.keys(connectRequestValue).length) {
setConnectRequest(connectRequestValue);
setCurrentJwt(
- connectRequestValue.token || dispatch(mmiActions.getCustodianToken()),
+ connectRequestValue.token ||
+ (await dispatch(mmiActions.getCustodianToken(address))),
);
setSelectedCustodianType(connectRequestValue.custodianType);
setSelectedCustodianName(connectRequestValue.custodianName);