LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix(wallet): check if snaps are supported (#4671)

Browse Source
This commit is contained in:
Art 2023-09-01 13:22:13 +02:00 committed by GitHub
parent 85a4981700
commit 39e5836edb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 76 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
libs/wallet/src/connect-dialog/connect-dialog.tsx
View File

@ -1,6 +1,7 @@
import classNames from 'classnames';
import {
Dialog,
ExternalLink,
Intent,
Pill,
TradingButton,
@ -39,7 +40,7 @@ import { useVegaWallet } from '../use-vega-wallet';
import { InjectedConnectorForm } from './injected-connector-form';
import { isBrowserWalletInstalled } from '../utils';
import { useIsWalletServiceRunning } from '../use-is-wallet-service-running';
import { useIsSnapRunning } from '../use-is-snap-running';
import { SnapStatus, useSnapStatus } from '../use-snap-status';
import { useVegaWalletDialogStore } from './vega-wallet-dialog-store';
export const CLOSE_DELAY = 1700;
@ -158,7 +159,7 @@ const ConnectDialogContainer = ({
appChainId
);
const isSnapRunning = useIsSnapRunning(
const snapStatus = useSnapStatus(
DEFAULT_SNAP_ID,
Boolean(connectors['snap'])
);
@ -183,7 +184,7 @@ const ConnectDialogContainer = ({
setWalletUrl={setWalletUrl}
onSelect={handleSelect}
isDesktopWalletRunning={isDesktopWalletRunning}
isSnapRunning={isSnapRunning}
snapStatus={snapStatus}
/>
)}
</ConnectDialogContent>
@ -198,14 +199,14 @@ const ConnectorList = ({
walletUrl,
setWalletUrl,
isDesktopWalletRunning,
isSnapRunning,
snapStatus,
}: {
connectors: Connectors;
onSelect: (type: WalletType) => void;
walletUrl: string;
setWalletUrl: (value: string) => void;
isDesktopWalletRunning: boolean | null;
isSnapRunning: boolean | null;
snapStatus: SnapStatus;
}) => {
const { pubKey, links } = useVegaWallet();
const title = isBrowserWalletInstalled()
@ -249,7 +250,7 @@ const ConnectorList = ({
</div>
{connectors['snap'] !== undefined ? (
<div>
{isSnapRunning ? (
{snapStatus === SnapStatus.INSTALLED ? (
<ConnectionOption
type="snap"
text={
@ -267,22 +268,34 @@ const ConnectorList = ({
}}
/>
) : (
<ConnectionOption
type="snap"
text={
<>
<div className="flex items-center justify-center w-full h-full text-base gap-1">
{t('Install Vega MetaMask Snap')}
</div>
<div className="absolute top-0 flex items-center h-8 right-1">
<VegaIcon name={VegaIconNames.METAMASK} size={24} />
</div>
</>
}
onClick={() => {
requestSnap(DEFAULT_SNAP_ID);
}}
/>
<>
<ConnectionOption
type="snap"
disabled={snapStatus === SnapStatus.NOT_SUPPORTED}
text={
<>
<div className="flex items-center justify-center w-full h-full text-base gap-1">
{t('Install Vega MetaMask Snap')}
</div>
<div className="absolute top-0 flex items-center h-8 right-1">
<VegaIcon name={VegaIconNames.METAMASK} size={24} />
</div>
</>
}
onClick={() => {
requestSnap(DEFAULT_SNAP_ID);
}}
/>
{snapStatus === SnapStatus.NOT_SUPPORTED ? (
<p className="pt-2 text-sm text-default">
{t('No MetaMask version that supports snaps detected.')}{' '}
{t('Learn more about')}{' '}
<ExternalLink href="https://metamask.io/snaps/">
MetaMask Snaps
</ExternalLink>
</p>
) : null}
</>
)}
</div>
) : null}

12
libs/wallet/src/connectors/snap-connector.ts
View File

@ -118,14 +118,10 @@ export const getSnap = async (
snapId: string,
version?: string
): Promise<Snap | undefined> => {
try {
const snaps = await getSnaps();
return Object.values(snaps).find(
(snap) => snap.id === snapId && (!version || snap.version === version)
);
} catch (e) {
return undefined;
}
const snaps = await getSnaps();
return Object.values(snaps).find(
(snap) => snap.id === snapId && (!version || snap.version === version)
);
};
export const invokeSnap = async <T>(

27
libs/wallet/src/use-is-snap-running.ts
View File

@ -1,27 +0,0 @@
import { useEffect, useState } from 'react';
import { getSnap } from './connectors';
const INTERVAL = 2_000;
export const useIsSnapRunning = (snapId: string, shouldCheck: boolean) => {
const [running, setRunning] = useState(false);
useEffect(() => {
if (!shouldCheck) return;
const checkState = async () => {
const snap = await getSnap(snapId);
setRunning(!!snap);
};
const i = setInterval(() => {
checkState();
}, INTERVAL);
checkState();
return () => {
clearInterval(i);
};
}, [snapId, shouldCheck]);
return running;
};

37
libs/wallet/src/use-snap-status.ts Normal file
View File

@ -0,0 +1,37 @@
import { useEffect, useState } from 'react';
import { getSnap } from './connectors';
const INTERVAL = 2_000;
export enum SnapStatus {
NOT_SUPPORTED,
INSTALLED,
NOT_INSTALLED,
}
export const useSnapStatus = (snapId: string, shouldCheck: boolean) => {
const [status, setStatus] = useState<SnapStatus>(SnapStatus.NOT_INSTALLED);
useEffect(() => {
if (!shouldCheck) return;
const checkState = async () => {
try {
const snap = await getSnap(snapId);
setStatus(snap ? SnapStatus.INSTALLED : SnapStatus.NOT_INSTALLED);
} catch (err) {
setStatus(SnapStatus.NOT_SUPPORTED);
}
};
const i = setInterval(() => {
checkState();
}, INTERVAL);
checkState();
return () => {
clearInterval(i);
};
}, [snapId, shouldCheck]);
return status;
};