Skip to content
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.

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

feat: Integrate MetaMask links into Snaps Link component #27377

Merged
merged 13 commits into from
Oct 4, 2024
Merged
1 change: 1 addition & 0 deletions app/scripts/metamask-controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -1462,6 +1462,7 @@ export default class MetamaskController extends EventEmitter {
`${this.phishingController.name}:testOrigin`,
`${this.approvalController.name}:hasRequest`,
`${this.approvalController.name}:acceptRequest`,
`${this.snapController.name}:get`,
],
});

Expand Down
23 changes: 22 additions & 1 deletion ui/components/app/snaps/snap-ui-link/snap-ui-link.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,39 @@ import {
IconSize,
} from '../../../component-library';
import SnapLinkWarning from '../snap-link-warning';
import useNavigation from '../../../../hooks/snaps/useNavigation';

export const SnapUILink = ({ href, children }) => {
const [isOpen, setIsOpen] = useState(false);

const isMetaMaskUrl = href.startsWith('metamask:');
const { navigate } = useNavigation();

const handleLinkClick = () => {
setIsOpen(true);
if (isMetaMaskUrl) {
navigate(href);
} else {
setIsOpen(true);
}
};

const handleModalClose = () => {
setIsOpen(false);
};

if (isMetaMaskUrl) {
return (
<ButtonLink
as="a"
size={ButtonLinkSize.Inherit}
className="snap-ui-link"
onClick={handleLinkClick}
>
{children}
</ButtonLink>
);
}

return (
<>
<SnapLinkWarning isOpen={isOpen} onClose={handleModalClose} url={href} />
Expand Down
22 changes: 22 additions & 0 deletions ui/hooks/snaps/useNavigation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { useHistory } from 'react-router-dom';
import { parseMetaMaskUrl } from '@metamask/snaps-utils';
import { getSnapRoute } from '../../helpers/utils/util';

const useNavigation = () => {
hmalik88 marked this conversation as resolved.
Show resolved Hide resolved
const history = useHistory();
const navigate = (url) => {
let path;
const linkData = parseMetaMaskUrl(url);
if (linkData.snapId) {
path = getSnapRoute(linkData.snapId);
hmalik88 marked this conversation as resolved.
Show resolved Hide resolved
} else {
path = linkData.path;
}
history.push(path);
};
return {
navigate,
};
};

export default useNavigation;
Loading