Skip to content

release(runway): cherry-pick fix: added support link to unlock page cp-13.10.0 #37986

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 20, 2025
+66 −39
Merged

release(runway): cherry-pick fix: added support link to unlock page cp-13.10.0 #37986

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`Unlock Page should match snapshot 1`] = `
class="mm-box unlock-page__mascot-container mm-box--margin-bottom-0"
>
<svg
class="unlock-page__mascot-container__horizontal-logo"
class="unlock-page__mascot-container__horizontal-logo "
fill="none"
height="30"
viewBox="0 0 696 344"
Expand Down Expand Up @@ -58,12 +58,31 @@ exports[`Unlock Page should match snapshot 1`] = `
Unlock
</button>
<button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-bottom-6 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-bottom-4 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="unlock-forgot-password-button"
type="button"
>
Forgot password?
</button>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
<span>

Need help? Contact
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://support.metamask.io"
rel="noopener noreferrer"
target="_blank"
type="button"
>
MetaMask support
</a>


</span>
</p>
</div>
</form>
</div>
Expand Down
6 changes: 3 additions & 3 deletions ui/pages/unlock-page/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@
}

&__horizontal-logo {
margin-bottom: 60px;
margin-bottom: 24px;
width: 180px;
height: 180px;

@include design-system.screen-md-max {
margin-bottom: 48px;
&--popup {
margin-bottom: 0;
}
}

Expand Down
71 changes: 38 additions & 33 deletions ui/pages/unlock-page/unlock-page.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,10 @@ class UnlockPage extends Component {
* Reset Wallet
*/
resetWallet: PropTypes.func,
/**
* Indicates if the environment is a popup
*/
isPopup: PropTypes.bool,
};

state = {
Expand Down Expand Up @@ -529,7 +533,9 @@ class UnlockPage extends Component {
{isRehydrationFlow ? (
this.renderMascot()
) : (
<MetaFoxHorizontalLogo className="unlock-page__mascot-container__horizontal-logo" />
<MetaFoxHorizontalLogo
className={`unlock-page__mascot-container__horizontal-logo ${this.props.isPopup ? 'unlock-page__mascot-container__horizontal-logo--popup' : ''}`}
/>
)}
{isBeta() ? (
<Text
Expand Down Expand Up @@ -602,7 +608,7 @@ class UnlockPage extends Component {
key="import-account"
type="button"
onClick={this.onForgotPasswordOrLoginWithDiffMethods}
marginBottom={6}
marginBottom={4}
color={
isRehydrationFlow
? TextColor.textDefault
Expand All @@ -614,38 +620,37 @@ class UnlockPage extends Component {
: t('forgotPassword')}
</Button>

{isRehydrationFlow && (
<Text>
{t('needHelp', [
<Button
variant={ButtonVariant.Link}
href={SUPPORT_LINK}
type="button"
target="_blank"
rel="noopener noreferrer"
key="need-help-link"
onClick={() => {
this.context.trackEvent(
{
category: MetaMetricsEventCategory.Navigation,
event: MetaMetricsEventName.SupportLinkClicked,
properties: {
url: SUPPORT_LINK,
},
<Text variant={TextVariant.bodyMd} color={TextColor.textDefault}>
{t('needHelp', [
<Button
variant={ButtonVariant.Link}
color={TextColor.primaryDefault}
href={SUPPORT_LINK}
type="button"
target="_blank"
rel="noopener noreferrer"
key="need-help-link"
onClick={() => {
this.context.trackEvent(
{
category: MetaMetricsEventCategory.Navigation,
event: MetaMetricsEventName.SupportLinkClicked,
properties: {
url: SUPPORT_LINK,
},
{
contextPropsIntoEventProperties: [
MetaMetricsContextProp.PageTitle,
],
},
);
}}
>
{needHelpText}
</Button>,
])}
</Text>
)}
},
{
contextPropsIntoEventProperties: [
MetaMetricsContextProp.PageTitle,
],
},
);
}}
>
{needHelpText}
</Button>,
])}
</Text>
</Box>
</Box>
{!isTestEnvironment && !isRehydrationFlow && (
Expand Down
5 changes: 4 additions & 1 deletion ui/pages/unlock-page/unlock-page.container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,13 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
...restOwnProps
} = ownProps;

const isPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;

const onImport = async () => {
await propsMarkPasswordForgotten();
navigate(RESTORE_VAULT_ROUTE);

if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
if (isPopup) {
global.platform.openExtensionInBrowser?.(RESTORE_VAULT_ROUTE);
}
};
Expand All @@ -93,6 +95,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
navigate,
location,
navState,
isPopup,
};
};

Expand Down