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

feat: improve flow of risk disclaimer presentation - make draft for parametrization vega wallet

Browse Source
This commit is contained in:
maciek
2023-05-18 18:28:47 +02:00
parent 5b8754365e
commit 2423cfb4cc
14 changed files with 286 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/governance/src/components/vega-wallet-dialogs/vega-wallet-dialogs.tsx
+53
View File
@@ -1,12 +1,61 @@
import { useCallback } from 'react';
import { useLocalStorage } from '@vegaprotocol/react-helpers';
import { VegaConnectDialog, VegaManageDialog } from '@vegaprotocol/wallet';
import {
AppStateActionType,
useAppState,
} from '../../contexts/app-state/app-state-context';
import { Connectors } from '../../lib/vega-connectors';
import { t } from '@vegaprotocol/i18n';
import { ExternalLink, Icon } from '@vegaprotocol/ui-toolkit';
import Routes from '../../routes/routes';
export const RISK_ACCEPTED_KEY = 'vega_risk_accepted';
const RiskMessage = () => {
return (
<>
<div className="bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 p-6 mb-6">
<ul className="list-disc ml-6 text-lg">
<li>
{t(
'No party hosts or operates this IFPS website or offers any financial advice.'
)}
</li>
<li>
{t(
'You may encounter bugs, loss of functionality or loss of assets.'
)}
</li>
<li>
{t('No party accepts any liability for any losses whatsoever.')}
</li>
</ul>
</div>
<p className="mb-8">
{t(
'By using the Vega Console, you acknowledge that you have read and understood the'
)}{' '}
<ExternalLink href={Routes.DISCLAIMER} className="underline">
<span className="flex items-center gap-2">
<span>{t('Vega Console Disclaimer')}</span>
<Icon name="arrow-top-right" size={3} />
</span>
</ExternalLink>
.
</p>
</>
);
};
export const VegaWalletDialogs = () => {
const { appState, appDispatch } = useAppState();
const [riskAcceptedValue, setValue] = useLocalStorage(RISK_ACCEPTED_KEY);
const onRiskAcknowledge = useCallback(() => {
setValue('true');
}, [setValue]);
return (
<>
<VegaConnectDialog
@@ -17,6 +66,10 @@ export const VegaWalletDialogs = () => {
isOpen: open,
})
}
riskMessage={riskAcceptedValue === 'true' ? undefined : <RiskMessage />}
onRiskAcknowledge={
riskAcceptedValue === 'true' ? undefined : onRiskAcknowledge
}
/>
<VegaManageDialog
apps/governance/src/routes/disclaimer/index.tsx
+38
View File
@@ -0,0 +1,38 @@
import { t } from '@vegaprotocol/i18n';
import type { RouteChildProps } from '..';
import { useDocumentTitle } from '../../hooks/use-document-title';
const Disclaimer = ({ name }: RouteChildProps) => {
useDocumentTitle(name);
return (
<div className="py-16 px-8 flex w-full justify-center">
<div className="lg:min-w-[700px] min-w-[300px] max-w-[700px]">
<h1 className="text-4xl xl:text-5xl uppercase font-alpha calt">
{t('Disclaimer')}
</h1>
<p className="mb-6 mt-10">
{t(
'Vega is a decentralised peer-to-peer protocol that can be used to create liquidity and trade derivatives of cryptocurrencies. The Vega Protocol is an implementation layer (layer one) protocol made of free, public, open-source or source-available software. Use of the Vega Protocol involves various risks, including but not limited to, losses while digital assets are being supplied to the Vega Protocol and losses due to the fluctuation of prices of assets. Before using the Vega Protocol, you should review the relevant documentation to make sure that you understand how it works. dditionally, just as you can access email protocols such as SMTP through multiple email clients, ou can potentially access the Vega Protocol through dozens of web or mobile interfaces. You are responsible for doing your own diligence on those interfaces to understand the associated risks and any fees.'
)}
</p>
<p className="mb-6">
{t(
'As described in the Vega Protocol core license, the Vega Protocol is provided "as is", at your own risk, and without warranties of any kind. Although Gobalsky Labs Limited developed much of the initial code for the Vega Protocol, it does not provide or control the Vega Protocol, which is run by third parties deploying it on a bespoke blockchain. Upgrades and modifications to the Vega Protocol are managed in a community-driven way by holders of the VEGA governance token.'
)}
</p>
<p className="mb-6">
{t(
'No developer or entity involved in creating the Vega Protocol will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the Vega Protocol, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or legal costs, or loss of profits, cryptocurrencies, tokens or anything else of value.'
)}
</p>
<p className="mb-8">
{t(
'This website is not located on the world wide web and its data is not stored on servers - physical or virtual. It is located on a decentralised network, the Interplanetary File System ("IPFS"). The IPFS decentralised web is made up of all the computers (nodes) connected to it. Data is therefore stored on many different computers. No party is the operator or hoster of this website. The information provided on this website does not constitute investment advice, financial advice, trading advice, or any other sort of advice and you should not treat any of the website\'s content as such. No party recommends that any cryptocurrency asset should be bought, sold, or held by you via this website. Do conduct your own due diligence and consult our financial advisor before making any investment decisions.'
)}
</p>
</div>
</div>
);
};
export default Disclaimer;
apps/governance/src/routes/router-config.tsx
+11
View File
@@ -207,6 +207,13 @@ const LazyWithdrawals = React.lazy(
)
);
const LazyDisclaimer = React.lazy(
() =>
import(
/* webpackChunkName: "route-disclaimer", webpackPrefetch: true */ './disclaimer'
)
);
const redirects = [
{
path: Routes.VALIDATORS,
@@ -345,6 +352,10 @@ const routerConfig = [
path: Routes.CONTRACTS,
element: <LazyContracts name="Contracts" />,
},
{
path: Routes.DISCLAIMER,
element: <LazyDisclaimer name="Disclaimer" />,
},
{
path: '*',
// Not lazy as loaded when a user first hits the site
apps/governance/src/routes/routes.ts
+1
View File
@@ -14,6 +14,7 @@ const Routes = {
SUPPLY: '/token/tranches',
ASSOCIATE: '/token/associate',
DISASSOCIATE: '/token/disassociate',
DISCLAIMER: '/disclaimer',
};
export default Routes;
apps/trading/client-pages/disclaimer/disclaimer.tsx
+33
View File
@@ -0,0 +1,33 @@
import { t } from '@vegaprotocol/i18n';
export const Disclaimer = () => {
return (
<div className="py-16 px-8 flex w-full justify-center">
<div className="lg:min-w-[700px] min-w-[300px] max-w-[700px]">
<h1 className="text-4xl xl:text-5xl uppercase font-alpha calt">
{t('Disclaimer')}
</h1>
<p className="mb-6 mt-10">
{t(
'Vega is a decentralised peer-to-peer protocol that can be used to create liquidity and trade derivatives of cryptocurrencies. The Vega Protocol is an implementation layer (layer one) protocol made of free, public, open-source or source-available software. Use of the Vega Protocol involves various risks, including but not limited to, losses while digital assets are being supplied to the Vega Protocol and losses due to the fluctuation of prices of assets. Before using the Vega Protocol, you should review the relevant documentation to make sure that you understand how it works. dditionally, just as you can access email protocols such as SMTP through multiple email clients, ou can potentially access the Vega Protocol through dozens of web or mobile interfaces. You are responsible for doing your own diligence on those interfaces to understand the associated risks and any fees.'
)}
</p>
<p className="mb-6">
{t(
'As described in the Vega Protocol core license, the Vega Protocol is provided "as is", at your own risk, and without warranties of any kind. Although Gobalsky Labs Limited developed much of the initial code for the Vega Protocol, it does not provide or control the Vega Protocol, which is run by third parties deploying it on a bespoke blockchain. Upgrades and modifications to the Vega Protocol are managed in a community-driven way by holders of the VEGA governance token.'
)}
</p>
<p className="mb-6">
{t(
'No developer or entity involved in creating the Vega Protocol will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the Vega Protocol, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or legal costs, or loss of profits, cryptocurrencies, tokens or anything else of value.'
)}
</p>
<p className="mb-8">
{t(
'This website is not located on the world wide web and its data is not stored on servers - physical or virtual. It is located on a decentralised network, the Interplanetary File System ("IPFS"). The IPFS decentralised web is made up of all the computers (nodes) connected to it. Data is therefore stored on many different computers. No party is the operator or hoster of this website. The information provided on this website does not constitute investment advice, financial advice, trading advice, or any other sort of advice and you should not treat any of the website\'s content as such. No party recommends that any cryptocurrency asset should be bought, sold, or held by you via this website. Do conduct your own due diligence and consult our financial advisor before making any investment decisions.'
)}
</p>
</div>
</div>
);
};
apps/trading/client-pages/disclaimer/index.ts
+3
View File
@@ -0,0 +1,3 @@
import { Disclaimer } from './disclaimer';
export default Disclaimer;
apps/trading/components/navbar/navbar.tsx
+2 -7
View File
@@ -38,10 +38,7 @@ export const Navbar = ({
const { GITHUB_FEEDBACK_URL } = useEnvironment();
const tokenLink = useLinks(DApp.Token);
const marketId = useGlobalStore((store) => store.marketId);
const update = useGlobalStore((store) => store.update);
const showDisclaimer = useCallback(() => {
update({ shouldDisplayDisclaimerDialog: true });
}, [update]);
const tradingPath = marketId
? Links[Routes.MARKET](marketId)
: Links[Routes.MARKET]();
@@ -113,9 +110,7 @@ export const Navbar = ({
<NavigationItem>
<NavigationLink
data-testid="Disclaimer"
to="/#"
onClick={showDisclaimer}
end
to={Links[Routes.DISCLAIMER]()}
>
{t('Disclaimer')}
</NavigationLink>
apps/trading/components/welcome-dialog/disclaimer.tsx
-28
View File
@@ -1,28 +0,0 @@
import { t } from '@vegaprotocol/i18n';
export const Disclaimer = () => {
return (
<>
<p className="mb-6 mt-4">
{t(
'Vega is a decentralised peer-to-peer protocol that can be used to create liquidity and trade derivatives of cryptocurrencies. The Vega Protocol is an implementation layer (layer one) protocol made of free, public, open-source or source-available software. Use of the Vega Protocol involves various risks, including but not limited to, losses while digital assets are being supplied to the Vega Protocol and losses due to the fluctuation of prices of assets. Before using the Vega Protocol, you should review the relevant documentation to make sure that you understand how it works. dditionally, just as you can access email protocols such as SMTP through multiple email clients, ou can potentially access the Vega Protocol through dozens of web or mobile interfaces. You are responsible for doing your own diligence on those interfaces to understand the associated risks and any fees.'
)}
</p>
<p className="mb-6">
{t(
'As described in the Vega Protocol core license, the Vega Protocol is provided "as is", at your own risk, and without warranties of any kind. Although Gobalsky Labs Limited developed much of the initial code for the Vega Protocol, it does not provide or control the Vega Protocol, which is run by third parties deploying it on a bespoke blockchain. Upgrades and modifications to the Vega Protocol are managed in a community-driven way by holders of the VEGA governance token.'
)}
</p>
<p className="mb-6">
{t(
'No developer or entity involved in creating the Vega Protocol will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the Vega Protocol, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or legal costs, or loss of profits, cryptocurrencies, tokens or anything else of value.'
)}
</p>
<p className="mb-8">
{t(
'This website is not located on the world wide web and its data is not stored on servers - physical or virtual. It is located on a decentralised network, the Interplanetary File System ("IPFS"). The IPFS decentralised web is made up of all the computers (nodes) connected to it. Data is therefore stored on many different computers. No party is the operator or hoster of this website. The information provided on this website does not constitute investment advice, financial advice, trading advice, or any other sort of advice and you should not treat any of the website\'s content as such. No party recommends that any cryptocurrency asset should be bought, sold, or held by you via this website. Do conduct your own due diligence and consult our financial advisor before making any investment decisions.'
)}
</p>
</>
);
};
apps/trading/components/welcome-dialog/welcome-dialog.tsx
+3 -14
View File
@@ -9,7 +9,6 @@ import * as constants from '../constants';
import { RiskNoticeDialog } from './risk-notice-dialog';
import { WelcomeNoticeDialog } from './welcome-notice-dialog';
import { WelcomeLandingDialog } from './welcome-landing-dialog';
import { Disclaimer } from './disclaimer';
import { useGlobalStore } from '../../stores';
import { useEnvironment } from '@vegaprotocol/environment';
import { Networks } from '@vegaprotocol/environment';
@@ -31,15 +30,10 @@ export const WelcomeDialog = () => {
const shouldDisplayWelcomeDialog = useGlobalStore(
(store) => store.shouldDisplayWelcomeDialog
);
const shouldDisplayDisclaimerDialog = useGlobalStore(
(store) => store.shouldDisplayDisclaimerDialog
);
const shouldDisplayMainnetRiskDialog = useGlobalStore(
(store) => store.shouldDisplayMainnetRiskDialog
);
const isRiskDialogNeeded =
riskAccepted !== 'true' &&
(VEGA_ENV !== Networks.MAINNET || shouldDisplayMainnetRiskDialog) &&
VEGA_ENV !== Networks.MAINNET &&
!('Cypress' in window);
const isWelcomeDialogNeeded = pathname === '/' || shouldDisplayWelcomeDialog;
@@ -50,12 +44,7 @@ export const WelcomeDialog = () => {
isRiskDialogNeeded && VEGA_ENV !== Networks.MAINNET,
});
}, [update, isRiskDialogNeeded, VEGA_ENV]);
if (shouldDisplayDisclaimerDialog) {
title = t('Disclaimer');
dialogContent = <Disclaimer />;
size = 'medium';
onClose = () => update({ shouldDisplayDisclaimerDialog: false });
} else if (isRiskDialogNeeded) {
if (isRiskDialogNeeded) {
dialogContent = (
<RiskNoticeDialog onClose={onCloseDialog} network={VEGA_ENV} />
);
apps/trading/pages/client-router.tsx
+10
View File
@@ -30,6 +30,10 @@ const LazySettings = dynamic(() => import('../client-pages/settings'), {
ssr: false,
});
const LazyDisclaimer = dynamic(() => import('../client-pages/disclaimer'), {
ssr: false,
});
export enum Routes {
HOME = '/',
MARKET = '/markets',
@@ -37,6 +41,7 @@ export enum Routes {
PORTFOLIO = '/portfolio',
LIQUIDITY = 'liquidity/:marketId',
SETTINGS = 'settings',
DISCLAIMER = 'disclaimer',
}
type ConsoleLinks = { [r in Routes]: (...args: string[]) => string };
@@ -51,6 +56,7 @@ export const Links: ConsoleLinks = {
? trimEnd(`${Routes.LIQUIDITY}/${marketId}`, '/')
: Routes.LIQUIDITY,
[Routes.SETTINGS]: () => Routes.SETTINGS,
[Routes.DISCLAIMER]: () => Routes.DISCLAIMER,
};
const routerConfig: RouteObject[] = [
@@ -97,6 +103,10 @@ const routerConfig: RouteObject[] = [
path: Routes.SETTINGS,
element: <LazySettings />,
},
{
path: Routes.DISCLAIMER,
element: <LazyDisclaimer />,
},
{
path: '*',
element: (
apps/trading/pages/dialogs-container.tsx
+48 -10
View File
@@ -9,25 +9,63 @@ import { DepositDialog } from '@vegaprotocol/deposits';
import { Web3ConnectUncontrolledDialog } from '@vegaprotocol/web3';
import { WelcomeDialog } from '../components/welcome-dialog';
import { TransferDialog } from '@vegaprotocol/accounts';
import { useGlobalStore } from '../stores';
import { useCallback } from 'react';
import { useLocalStorage } from '@vegaprotocol/react-helpers';
import * as constants from '../components/constants';
import { t } from '@vegaprotocol/i18n';
import { ExternalLink, Icon } from '@vegaprotocol/ui-toolkit';
import { RISK_ACCEPTED_KEY } from '../components/constants';
import { Links, Routes } from './client-router';
const RiskMessage = () => {
return (
<>
<div className="bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 p-6 mb-6">
<ul className="list-disc ml-6 text-lg">
<li>
{t(
'No party hosts or operates this IFPS website or offers any financial advice.'
)}
</li>
<li>
{t(
'You may encounter bugs, loss of functionality or loss of assets.'
)}
</li>
<li>
{t('No party accepts any liability for any losses whatsoever.')}
</li>
</ul>
</div>
<p className="mb-8">
{t(
'By using the Vega Console, you acknowledge that you have read and understood the'
)}{' '}
<ExternalLink href={Links[Routes.DISCLAIMER]()} className="underline">
<span className="flex items-center gap-2">
<span>{t('Vega Console Disclaimer')}</span>
<Icon name="arrow-top-right" size={3} />
</span>
</ExternalLink>
.
</p>
</>
);
};
const DialogsContainer = () => {
const { isOpen, id, trigger, setOpen } = useAssetDetailsDialogStore();
const [riskAccepted] = useLocalStorage(constants.RISK_ACCEPTED_KEY);
const update = useGlobalStore((store) => store.update);
const openRiskDialog = useCallback(() => {
if (riskAccepted !== 'true') {
update({ shouldDisplayMainnetRiskDialog: true });
}
}, [update, riskAccepted]);
const [riskAcceptedValue, setValue] = useLocalStorage(RISK_ACCEPTED_KEY);
const onRiskAcknowledge = useCallback(() => {
setValue('true');
}, [setValue]);
return (
<>
<VegaConnectDialog
connectors={Connectors}
onChangeOpen={openRiskDialog}
riskMessage={riskAcceptedValue === 'true' ? undefined : <RiskMessage />}
onRiskAcknowledge={
riskAcceptedValue === 'true' ? undefined : onRiskAcknowledge
}
/>
<AssetDetailsDialog
assetId={id}
libs/wallet/src/connect-dialog/connect-dialog.tsx
+36 -19
View File
@@ -38,6 +38,8 @@ type WalletType = 'jsonRpc' | 'hosted' | 'view';
export interface VegaConnectDialogProps {
connectors: Connectors;
onChangeOpen?: (open: boolean) => void;
riskMessage?: React.ReactNode;
onRiskAcknowledge?: () => void;
}
export const useVegaWalletDialogStore = create<VegaWalletDialogStore>()(
@@ -60,26 +62,22 @@ export interface VegaWalletDialogStore {
export const VegaConnectDialog = ({
connectors,
onChangeOpen,
riskMessage,
onRiskAcknowledge,
}: VegaConnectDialogProps) => {
const vegaWalletDialogOpen = useVegaWalletDialogStore(
(store) => store.vegaWalletDialogOpen
);
const updateVegaWalletDialog = useVegaWalletDialogStore((store) =>
onChangeOpen
? (open: boolean) => {
store.updateVegaWalletDialog(open);
onChangeOpen(open);
}
: store.updateVegaWalletDialog
);
const closeVegaWalletDialog = useVegaWalletDialogStore((store) =>
onChangeOpen
? () => {
store.closeVegaWalletDialog();
onChangeOpen(false);
}
: store.closeVegaWalletDialog
const updateVegaWalletDialog = useVegaWalletDialogStore(
(store) => (open: boolean) => {
store.updateVegaWalletDialog(open);
onChangeOpen?.(open);
}
);
const closeVegaWalletDialog = useVegaWalletDialogStore((store) => () => {
store.closeVegaWalletDialog();
onChangeOpen?.(false);
});
const { data, error, loading } = useChainIdQuery();
@@ -112,6 +110,8 @@ export const VegaConnectDialog = ({
connectors={connectors}
closeDialog={closeVegaWalletDialog}
appChainId={data.statistics.chainId}
riskMessage={riskMessage}
onRiskAcknowledge={onRiskAcknowledge}
/>
);
};
@@ -131,16 +131,20 @@ const ConnectDialogContainer = ({
connectors,
closeDialog,
appChainId,
riskMessage,
onRiskAcknowledge,
}: {
connectors: Connectors;
closeDialog: () => void;
appChainId: string;
riskMessage?: React.ReactNode;
onRiskAcknowledge?: () => void;
}) => {
const { VEGA_WALLET_URL, VEGA_ENV, HOSTED_WALLET_URL } = useEnvironment();
const [selectedConnector, setSelectedConnector] = useState<VegaConnector>();
const [walletUrl, setWalletUrl] = useState(VEGA_WALLET_URL || '');
const [walletType, setWalletType] = useState<WalletType>();
const isMainnet = VEGA_ENV === Networks.MAINNET;
const reset = useCallback(() => {
setSelectedConnector(undefined);
setWalletType(undefined);
@@ -151,8 +155,13 @@ const ConnectDialogContainer = ({
closeDialog();
}, CLOSE_DELAY);
}, [closeDialog]);
const { connect, ...jsonRpcState } = useJsonRpcConnect(delayedOnConnect);
const needsAcknowledge = Boolean(
isMainnet && riskMessage && onRiskAcknowledge
);
const { connect, ...jsonRpcState } = useJsonRpcConnect(
delayedOnConnect,
needsAcknowledge
);
const handleSelect = (type: WalletType, isHosted = false) => {
let connector;
@@ -189,13 +198,15 @@ const ConnectDialogContainer = ({
onConnect={closeDialog}
appChainId={appChainId}
reset={reset}
riskMessage={riskMessage}
onRiskAcknowledge={onRiskAcknowledge}
/>
) : (
<ConnectorList
walletUrl={walletUrl}
setWalletUrl={setWalletUrl}
onSelect={handleSelect}
isMainnet={VEGA_ENV === Networks.MAINNET}
isMainnet={isMainnet}
/>
);
};
@@ -255,6 +266,8 @@ const SelectedForm = ({
jsonRpcState,
reset,
onConnect,
riskMessage,
onRiskAcknowledge,
}: {
type: WalletType;
connector: VegaConnector;
@@ -265,6 +278,8 @@ const SelectedForm = ({
};
reset: () => void;
onConnect: () => void;
riskMessage?: React.ReactNode;
onRiskAcknowledge?: () => void;
}) => {
if (connector instanceof RestConnector) {
return (
@@ -317,6 +332,8 @@ const SelectedForm = ({
onConnect={onConnect}
appChainId={appChainId}
reset={reset}
riskMessage={riskMessage}
onRiskAcknowledge={onRiskAcknowledge}
/>
</ConnectDialogContent>
<ConnectDialogFooter />
libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx
+36 -24
View File
@@ -1,6 +1,7 @@
import capitalize from 'lodash/capitalize';
import { t } from '@vegaprotocol/i18n';
import {
Button,
ButtonLink,
Diamond,
Link,
@@ -14,6 +15,7 @@ import { ClientErrors } from '../connectors';
import { ConnectDialogTitle } from './connect-dialog-elements';
import { Status } from '../use-json-rpc-connect';
import { DocsLinks } from '@vegaprotocol/environment';
import { useVegaWallet } from '../use-vega-wallet';
export const ServiceErrors = {
NO_HEALTHY_NODE: 1000,
@@ -26,6 +28,9 @@ export const JsonRpcConnectorForm = ({
status,
error,
reset,
onConnect,
riskMessage,
onRiskAcknowledge,
}: {
connector: JsonRpcConnector;
appChainId: string;
@@ -33,35 +38,14 @@ export const JsonRpcConnectorForm = ({
error: WalletClientError | null;
onConnect: () => void;
reset: () => void;
riskMessage?: React.ReactNode;
onRiskAcknowledge?: () => void;
}) => {
const { disconnect } = useVegaWallet();
if (status === Status.Idle) {
return null;
}
return (
<Connecting
status={status}
error={error}
connector={connector}
appChainId={appChainId}
reset={reset}
/>
);
};
const Connecting = ({
status,
error,
connector,
appChainId,
reset,
}: {
status: Status;
error: WalletClientError | null;
connector: JsonRpcConnector;
appChainId: string;
reset: () => void;
}) => {
if (status === Status.Error) {
return (
<Error
@@ -125,6 +109,34 @@ const Connecting = ({
);
}
if (status === Status.NeedsAcknowledge) {
const setConnection = () => {
onRiskAcknowledge?.();
onConnect();
};
const handleDisagree = () => {
disconnect();
onConnect();
};
return (
<>
<ConnectDialogTitle>{t('Understand the risk')}</ConnectDialogTitle>
{riskMessage}
<div className="grid grid-cols-2 gap-5">
<div>
<Button onClick={handleDisagree} fill>
{t('Cancel')}
</Button>
</div>
<div>
<Button onClick={setConnection} variant="primary" fill>
{t('I agree')}
</Button>
</div>
</div>
</>
);
}
return null;
};
libs/wallet/src/use-json-rpc-connect.ts
+12 -5
View File
@@ -13,9 +13,13 @@ export enum Status {
ListingKeys = 'ListingKeys',
Connected = 'Connected',
Error = 'Error',
NeedsAcknowledge = 'NeedAcknowledge',
}
export const useJsonRpcConnect = (onConnect: () => void) => {
export const useJsonRpcConnect = (
onConnect: () => void,
needsAcknowledge?: boolean
) => {
const { connect } = useVegaWallet();
const [status, setStatus] = useState(Status.Idle);
const [error, setError] = useState<WalletClientError | null>(null);
@@ -52,9 +56,12 @@ export const useJsonRpcConnect = (onConnect: () => void) => {
// Call connect in the wallet provider. The connector will be stored for
// future actions such as sending transactions
await connect(connector);
setStatus(Status.Connected);
onConnect();
if (needsAcknowledge) {
setStatus(Status.NeedsAcknowledge);
} else {
setStatus(Status.Connected);
onConnect();
}
} catch (err) {
if (err instanceof WalletClientError) {
setError(err);
@@ -62,7 +69,7 @@ export const useJsonRpcConnect = (onConnect: () => void) => {
setStatus(Status.Error);
}
},
[onConnect, connect]
[onConnect, connect, needsAcknowledge]
);
return {