diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 882de250d..c9669541e 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -103,6 +103,9 @@ "SIWEWarningTitle": { "message": "Are you sure?" }, + "ShowMore": { + "message": "Show more" + }, "about": { "message": "About" }, @@ -348,6 +351,9 @@ "amount": { "message": "Amount" }, + "apiUrl": { + "message": "API URL" + }, "appDescription": { "message": "An Ethereum Wallet in your Browser", "description": "The description of the application" @@ -908,6 +914,12 @@ "curveMediumGasEstimate": { "message": "Market gas estimate graph" }, + "custodian": { + "message": "Custodian" + }, + "custodianAccount": { + "message": "Custodian account" + }, "custom": { "message": "Advanced" }, @@ -2118,6 +2130,9 @@ "missingToken": { "message": "Don't see your token?" }, + "mmiAddToken": { + "message": "The page at $1 would like to authorise the following custodian token in MetaMask Institutional" + }, "mobileSyncWarning": { "message": "The 'Sync with extension' feature is temporarily disabled. If you want to use your extension wallet on MetaMask mobile, then on your mobile app: go back to the wallet setup options and select the 'Import with Secret Recovery Phrase' option. Use your extension wallet's secret phrase to then import your wallet into mobile." }, diff --git a/ui/components/institutional/jwt-url-form/__snapshots__/jwt-url-form.test.js.snap b/ui/components/institutional/jwt-url-form/__snapshots__/jwt-url-form.test.js.snap index 6c15c0327..cdf419d89 100644 --- a/ui/components/institutional/jwt-url-form/__snapshots__/jwt-url-form.test.js.snap +++ b/ui/components/institutional/jwt-url-form/__snapshots__/jwt-url-form.test.js.snap @@ -3,16 +3,16 @@ exports[`JwtUrlForm shows JWT text area when no jwt token exists 1`] = `

input text

@@ -25,10 +25,10 @@ exports[`JwtUrlForm shows JWT text area when no jwt token exists 1`] = `

{ const showJwtDropdown = props.jwtList.length >= 1; return ( - + {showJwtDropdown && ( { )} {showJwtDropdown && !showAddNewToken && ( {t('or')} + + + )} + + + ); +}; + +export default ConfirmAddCustodianToken; diff --git a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.stories.js b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.stories.js new file mode 100644 index 000000000..01055b785 --- /dev/null +++ b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.stories.js @@ -0,0 +1,43 @@ +import React from 'react'; +import { Provider } from 'react-redux'; +import configureStore from '../../../store/store'; +import testData from '../../../../.storybook/test-data'; +import ConfirmAddCustodianToken from '.'; + +const customData = { + ...testData, + metamask: { + ...testData.metamask, + institutionalFeatures: { + complianceProjectId: '', + connectRequests: [ + { + labels: [ + { + key: 'service', + value: 'test', + }, + ], + origin: 'origin', + token: 'awesomeTestToken', + feature: 'custodian', + service: 'Saturn', + apiUrl: 'https://www.apiurl.net/v1', + chainId: 1, + }, + ], + }, + }, +}; + +const store = configureStore(customData); + +export default { + title: 'Pages/Institutional/ConfirmAddCustodianToken', + decorators: [(story) => {story()}], + component: ConfirmAddCustodianToken, +}; + +export const DefaultStory = () => ; + +DefaultStory.storyName = 'ConfirmAddCustodianToken'; diff --git a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.test.js b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.test.js new file mode 100644 index 000000000..37660c0da --- /dev/null +++ b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.test.js @@ -0,0 +1,126 @@ +import React from 'react'; +import { screen, fireEvent } from '@testing-library/react'; +import configureMockStore from 'redux-mock-store'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; +import ConfirmAddCustodianToken from './confirm-add-custodian-token'; + +describe('Confirm Add Custodian Token', () => { + const mockStore = { + metamask: { + provider: { + type: 'test', + }, + preferences: { + useNativeCurrencyAsPrimaryCurrency: true, + }, + institutionalFeatures: { + complianceProjectId: '', + connectRequests: [ + { + labels: [ + { + key: 'service', + value: 'test', + }, + ], + origin: 'origin', + token: 'testToken', + feature: 'custodian', + service: 'Jupiter', + apiUrl: 'https://', + chainId: 1, + }, + ], + }, + }, + history: { + push: '/', + mostRecentOverviewPage: '/', + }, + }; + + const store = configureMockStore()(mockStore); + + it('opens confirm add custodian token with correct token', () => { + renderWithProvider(, store); + + const tokenContainer = screen.getByText('...testToken'); + expect(tokenContainer).toBeInTheDocument(); + }); + + it('shows the custodian on cancel click', () => { + renderWithProvider(, store); + + const cancelButton = screen.getByTestId('cancel-btn'); + + fireEvent.click(cancelButton); + + expect(screen.getByText('Custodian')).toBeInTheDocument(); + }); + + it('tries to connect to custodian with empty token', async () => { + const customMockedStore = { + metamask: { + provider: { + type: 'test', + }, + preferences: { + useNativeCurrencyAsPrimaryCurrency: true, + }, + institutionalFeatures: { + complianceProjectId: '', + connectRequests: [ + { + labels: [ + { + key: 'service', + value: 'test', + }, + ], + origin: 'origin', + token: '', + feature: 'custodian', + service: 'Jupiter', + apiUrl: 'https://', + chainId: 1, + }, + ], + }, + }, + history: { + push: '/', + mostRecentOverviewPage: '/', + }, + }; + + const customStore = configureMockStore()(customMockedStore); + + renderWithProvider(, customStore); + + const confirmButton = screen.getByTestId('confirm-btn'); + fireEvent.click(confirmButton); + + const errorMessage = screen.getByTestId('connect-custodian-token-error'); + + expect(errorMessage).toBeVisible(); + }); + + it('clicks the confirm button and shows the test value', async () => { + renderWithProvider(, store); + + const confirmButton = screen.getByTestId('confirm-btn'); + fireEvent.click(confirmButton); + + expect(screen.getByText('test')).toBeInTheDocument(); + }); + + it('shows the error area', () => { + renderWithProvider(, store); + + const confirmButton = screen.getByTestId('confirm-btn'); + + fireEvent.click(confirmButton); + + expect(screen.getByTestId('error-message')).toBeVisible(); + }); +}); diff --git a/ui/pages/institutional/confirm-add-custodian-token/index.js b/ui/pages/institutional/confirm-add-custodian-token/index.js new file mode 100644 index 000000000..39b01e55e --- /dev/null +++ b/ui/pages/institutional/confirm-add-custodian-token/index.js @@ -0,0 +1 @@ +export { default } from './confirm-add-custodian-token'; diff --git a/ui/pages/institutional/confirm-add-custodian-token/index.scss b/ui/pages/institutional/confirm-add-custodian-token/index.scss new file mode 100644 index 000000000..17845c049 --- /dev/null +++ b/ui/pages/institutional/confirm-add-custodian-token/index.scss @@ -0,0 +1,8 @@ +.add_custodian_token_confirm { + &__token, + &__url { + height: auto; + overflow-wrap: break-word; + opacity: 0.8; + } +}