diff --git a/.github/workflows/publish-npm.yml b/.github/workflows/publish-npm.yml index 4d522c9b4..672bb7da0 100644 --- a/.github/workflows/publish-npm.yml +++ b/.github/workflows/publish-npm.yml @@ -15,6 +15,7 @@ on: - types - utils - i18n + - wallet jobs: publish: diff --git a/apps/governance-e2e/.env b/apps/governance-e2e/.env index 347136e3a..2e6ff789a 100644 --- a/apps/governance-e2e/.env +++ b/apps/governance-e2e/.env @@ -20,6 +20,10 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72 NX_VEGA_REST_URL=http://localhost:3008/api/v2/ NX_SUCCESSOR_MARKETS=true +NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet + #Test configuration variables CYPRESS_FAIRGROUND=false CYPRESS_VEGA_URL=http://localhost:3008/graphql diff --git a/apps/governance/.env b/apps/governance/.env index cd2e19bdc..a6062b69a 100644 --- a/apps/governance/.env +++ b/apps/governance/.env @@ -22,6 +22,8 @@ NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/ NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet #Test configuration variables CYPRESS_FAIRGROUND=false diff --git a/apps/governance/src/app.tsx b/apps/governance/src/app.tsx index fa206fe4c..31d7be1a4 100644 --- a/apps/governance/src/app.tsx +++ b/apps/governance/src/app.tsx @@ -41,6 +41,7 @@ import { AppFailure, NodeSwitcherDialog, useNodeSwitcherStore, + DocsLinks, } from '@vegaprotocol/environment'; import { ENV } from './config'; import type { InMemoryCacheConfig } from '@apollo/client'; @@ -109,8 +110,17 @@ const Web3Container = ({ store.connectors, store.initialize, ]); - const { ETHEREUM_PROVIDER_URL, ETH_LOCAL_PROVIDER_URL, ETH_WALLET_MNEMONIC } = - useEnvironment(); + const { + ETHEREUM_PROVIDER_URL, + ETH_LOCAL_PROVIDER_URL, + ETH_WALLET_MNEMONIC, + VEGA_ENV, + VEGA_URL, + VEGA_EXPLORER_URL, + CHROME_EXTENSION_URL, + MOZILLA_EXTENSION_URL, + VEGA_WALLET_URL, + } = useEnvironment(); useEffect(() => { if (chainId) { return initializeConnectors( @@ -139,10 +149,33 @@ const Web3Container = ({ return ; } + if ( + !VEGA_URL || + !VEGA_WALLET_URL || + !VEGA_EXPLORER_URL || + !DocsLinks || + !CHROME_EXTENSION_URL || + !MOZILLA_EXTENSION_URL + ) { + return null; + } + return ( - + @@ -275,7 +308,7 @@ const AppContainer = () => { -
+
{t('Loading')}
} failure={ diff --git a/apps/governance/src/lib/vega-connectors.ts b/apps/governance/src/lib/vega-connectors.ts index c3007921e..262c1e680 100644 --- a/apps/governance/src/lib/vega-connectors.ts +++ b/apps/governance/src/lib/vega-connectors.ts @@ -1,4 +1,4 @@ -import { ENV } from '@vegaprotocol/environment'; +import { FLAGS } from '@vegaprotocol/environment'; import { JsonRpcConnector, ViewConnector, @@ -13,10 +13,9 @@ export const jsonRpc = new JsonRpcConnector(); export const injected = new InjectedConnector(); export const view = new ViewConnector(urlParams.get('address')); -export const snap = new SnapConnector( - ENV.VEGA_URL ? new URL(ENV.VEGA_URL).origin : undefined, - DEFAULT_SNAP_ID -); +export const snap = FLAGS.METAMASK_SNAPS + ? new SnapConnector(DEFAULT_SNAP_ID) + : undefined; export const Connectors = { injected, diff --git a/apps/governance/src/routes/proposals/components/proposal/proposal.spec.tsx b/apps/governance/src/routes/proposals/components/proposal/proposal.spec.tsx index 4d664b043..db81de7a8 100644 --- a/apps/governance/src/routes/proposals/components/proposal/proposal.spec.tsx +++ b/apps/governance/src/routes/proposals/components/proposal/proposal.spec.tsx @@ -1,6 +1,7 @@ import { MemoryRouter } from 'react-router-dom'; import { MockedProvider } from '@apollo/client/testing'; import { VegaWalletProvider } from '@vegaprotocol/wallet'; +import type { VegaWalletConfig } from '@vegaprotocol/wallet'; import { render, screen } from '@testing-library/react'; import { generateProposal } from '../../test-helpers/generate-proposals'; import { Proposal } from './proposal'; @@ -43,11 +44,23 @@ jest.mock('../list-asset', () => ({ ListAsset: () =>
, })); +const vegaWalletConfig: VegaWalletConfig = { + network: 'TESTNET', + vegaUrl: 'https://vega.xyz', + vegaWalletServiceUrl: 'https://wallet.vega.xyz', + links: { + explorer: 'explorer', + concepts: 'concepts', + chromeExtensionUrl: 'chrome', + mozillaExtensionUrl: 'mozilla', + }, +}; + const renderComponent = (proposal: ProposalQuery['proposal']) => { render( - + { disconnect: jest.fn(), selectPubKey: jest.fn(), connector: null, - }; + } as unknown as VegaWalletContextShape; render( diff --git a/apps/governance/src/routes/proposals/propose/raw/proposal-raw.spec.tsx b/apps/governance/src/routes/proposals/propose/raw/proposal-raw.spec.tsx index f9b65c8ca..18fcbaa9f 100644 --- a/apps/governance/src/routes/proposals/propose/raw/proposal-raw.spec.tsx +++ b/apps/governance/src/routes/proposals/propose/raw/proposal-raw.spec.tsx @@ -114,6 +114,7 @@ describe('Raw proposal form', () => { { pubKey, sendTx: mockSendTx, + links: { explorer: 'explorer' }, } as unknown as VegaWalletContextShape } > diff --git a/apps/governance/src/routes/proposals/test-helpers/mocks.ts b/apps/governance/src/routes/proposals/test-helpers/mocks.ts index 25e4e6230..229ae756b 100644 --- a/apps/governance/src/routes/proposals/test-helpers/mocks.ts +++ b/apps/governance/src/routes/proposals/test-helpers/mocks.ts @@ -1,7 +1,7 @@ import { NetworkParamsDocument } from '@vegaprotocol/network-parameters'; import type { MockedResponse } from '@apollo/client/testing'; import type { NetworkParamsQuery } from '@vegaprotocol/network-parameters'; -import type { PubKey } from '@vegaprotocol/wallet'; +import type { PubKey, VegaWalletContextShape } from '@vegaprotocol/wallet'; import type { VoteValue } from '@vegaprotocol/types'; import type { UserVoteQuery } from '../components/vote-details/__generated__/Vote'; import { UserVoteDocument } from '../components/vote-details/__generated__/Vote'; @@ -21,7 +21,7 @@ export const mockWalletContext = { disconnect: jest.fn(), selectPubKey: jest.fn(), connector: null, -}; +} as unknown as VegaWalletContextShape; const mockEthereumConfig = { network_id: '3', diff --git a/apps/trading/.env b/apps/trading/.env index 637a69b14..fbd2a537f 100644 --- a/apps/trading/.env +++ b/apps/trading/.env @@ -12,6 +12,8 @@ NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72 +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet # Cosmic elevator flags diff --git a/apps/trading/components/app-loader/app-loader.tsx b/apps/trading/components/app-loader/app-loader.tsx index dc08f4895..d2bc94930 100644 --- a/apps/trading/components/app-loader/app-loader.tsx +++ b/apps/trading/components/app-loader/app-loader.tsx @@ -1,6 +1,7 @@ import type { InMemoryCacheConfig } from '@apollo/client'; import { AppFailure, + DocsLinks, NetworkLoader, NodeGuard, useEnvironment, @@ -17,16 +18,32 @@ export const DynamicLoader = dynamic(() => import('../preloader/preloader'), { }); export const AppLoader = ({ children }: { children: ReactNode }) => { - const { error, VEGA_URL, MAINTENANCE_PAGE } = useEnvironment((store) => ({ - error: store.error, - VEGA_URL: store.VEGA_URL, - MAINTENANCE_PAGE: store.MAINTENANCE_PAGE, - })); + const { + error, + VEGA_URL, + VEGA_ENV, + VEGA_WALLET_URL, + VEGA_EXPLORER_URL, + MAINTENANCE_PAGE, + MOZILLA_EXTENSION_URL, + CHROME_EXTENSION_URL, + } = useEnvironment(); if (MAINTENANCE_PAGE) { return ; } + if ( + !VEGA_URL || + !VEGA_WALLET_URL || + !VEGA_EXPLORER_URL || + !CHROME_EXTENSION_URL || + !MOZILLA_EXTENSION_URL || + !DocsLinks + ) { + return null; + } + return ( { failure={} > - {children} + + {children} + diff --git a/apps/trading/components/sidebar/sidebar.spec.tsx b/apps/trading/components/sidebar/sidebar.spec.tsx index f9fe36511..5867d6525 100644 --- a/apps/trading/components/sidebar/sidebar.spec.tsx +++ b/apps/trading/components/sidebar/sidebar.spec.tsx @@ -9,7 +9,8 @@ import { } from './sidebar'; import { MemoryRouter, Route, Routes } from 'react-router-dom'; import { VegaIconNames } from '@vegaprotocol/ui-toolkit'; -import { VegaWalletProvider } from '@vegaprotocol/wallet'; +import type { VegaWalletContextShape } from '@vegaprotocol/wallet'; +import { VegaWalletContext } from '@vegaprotocol/wallet'; jest.mock('../node-health', () => ({ NodeHealthContainer: () => , @@ -31,16 +32,20 @@ jest.mock('../welcome-dialog', () => ({ GetStarted: () =>
, })); +const walletContext = { + pubKeys: [{ publicKey: 'pubkey' }], +} as VegaWalletContextShape; + describe('Sidebar', () => { it.each(['/markets/all', '/portfolio'])( 'does not render ticket and info', (path) => { render( - + - + ); expect(screen.getByTestId(ViewType.ViewAs)).toBeInTheDocument(); @@ -58,11 +63,11 @@ describe('Sidebar', () => { it('renders ticket and info on market pages', () => { render( - + - + ); expect(screen.getByTestId(ViewType.ViewAs)).toBeInTheDocument(); @@ -79,11 +84,11 @@ describe('Sidebar', () => { it('renders selected state', async () => { render( - + - + ); const settingsButton = screen.getByTestId(ViewType.Settings); @@ -107,13 +112,13 @@ describe('Sidebar', () => { describe('SidebarContent', () => { it('renders the correct content', () => { const { container } = render( - + } /> - + ); expect(container).toBeEmptyDOMElement(); @@ -133,13 +138,13 @@ describe('SidebarContent', () => { it('closes sidebar if market id is required but not present', () => { const { container } = render( - + } /> - + ); act(() => { diff --git a/apps/trading/components/welcome-dialog/get-started.tsx b/apps/trading/components/welcome-dialog/get-started.tsx index 6825e2ce6..59c0099ee 100644 --- a/apps/trading/components/welcome-dialog/get-started.tsx +++ b/apps/trading/components/welcome-dialog/get-started.tsx @@ -29,6 +29,7 @@ interface Props { } const GetStartedButton = ({ step }: { step: OnboardingStep }) => { + const { CHROME_EXTENSION_URL, MOZILLA_EXTENSION_URL } = useEnvironment(); const navigate = useNavigate(); const [, setOnboardingViewed] = useLocalStorage( constants.ONBOARDING_VIEWED_KEY @@ -46,7 +47,13 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => { openVegaWalletDialog(); }; if (step === OnboardingStep.ONBOARDING_WALLET_STEP) { - return ; + return ( + + ); } else if (step === OnboardingStep.ONBOARDING_CONNECT_STEP) { buttonText = t('Connect'); } else if (step === OnboardingStep.ONBOARDING_DEPOSIT_STEP) { diff --git a/apps/trading/lib/vega-connectors.ts b/apps/trading/lib/vega-connectors.ts index bf953d652..6793dd910 100644 --- a/apps/trading/lib/vega-connectors.ts +++ b/apps/trading/lib/vega-connectors.ts @@ -1,4 +1,4 @@ -import { ENV } from '@vegaprotocol/environment'; +import { FLAGS } from '@vegaprotocol/environment'; import { JsonRpcConnector, ViewConnector, @@ -18,10 +18,9 @@ if (typeof window !== 'undefined') { view = new ViewConnector(); } -export const snap = new SnapConnector( - ENV.VEGA_URL ? new URL(ENV.VEGA_URL).origin : undefined, - DEFAULT_SNAP_ID -); +export const snap = FLAGS.METAMASK_SNAPS + ? new SnapConnector(DEFAULT_SNAP_ID) + : undefined; export const Connectors = { injected, diff --git a/libs/wallet/package.json b/libs/wallet/package.json index 53b5de294..cbe3184e6 100644 --- a/libs/wallet/package.json +++ b/libs/wallet/package.json @@ -1,4 +1,8 @@ { "name": "@vegaprotocol/wallet", - "version": "0.0.1" + "version": "0.0.1", + "peerDependencies": { + "react": "18.2.0", + "react-dom": "18.2.0" + } } diff --git a/libs/wallet/project.json b/libs/wallet/project.json index 22bb3711f..9c5884f9d 100644 --- a/libs/wallet/project.json +++ b/libs/wallet/project.json @@ -13,9 +13,10 @@ "tsConfig": "libs/wallet/tsconfig.lib.json", "project": "libs/wallet/package.json", "entryFile": "libs/wallet/src/index.ts", - "external": ["react/jsx-runtime"], + "external": ["react", "react-dom", "react/jsx-runtime"], "rollupConfig": "@nx/react/plugins/bundle-rollup", "compiler": "babel", + "format": ["esm", "cjs"], "assets": [ { "glob": "libs/wallet/README.md", diff --git a/libs/wallet/src/connect-dialog/chrome-icon.tsx b/libs/wallet/src/connect-dialog/chrome-icon.tsx new file mode 100644 index 000000000..f51ec69c5 --- /dev/null +++ b/libs/wallet/src/connect-dialog/chrome-icon.tsx @@ -0,0 +1,77 @@ +export const ChromeIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx b/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx index 7f3ebd3cf..224e034fd 100644 --- a/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx +++ b/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx @@ -1,4 +1,3 @@ -import { ExternalLinks, useEnvironment } from '@vegaprotocol/environment'; import { t } from '@vegaprotocol/i18n'; import { ExternalLink, @@ -7,12 +6,15 @@ import { } from '@vegaprotocol/ui-toolkit'; import classNames from 'classnames'; import type { ReactNode } from 'react'; +import { MozillaIcon } from './mozilla-icon'; +import { ChromeIcon } from './chrome-icon'; +import { useVegaWallet } from '../use-vega-wallet'; export const ConnectDialogTitle = ({ children }: { children: ReactNode }) => { return (

{children}

@@ -24,6 +26,7 @@ export const ConnectDialogContent = ({ children }: { children: ReactNode }) => { }; export const ConnectDialogFooter = () => { + const { links } = useVegaWallet(); const wrapperClasses = classNames( 'flex justify-center gap-4 mt-4', 'px-4 md:px-8 pt-4 md:pt-6', @@ -32,335 +35,37 @@ export const ConnectDialogFooter = () => { ); return (
- + {t('About the Vega wallet')}{' '} - {ExternalLinks.VEGA_WALLET_BROWSER_LIST && ( - <> - {' | '} - - {t('Supported browsers')}{' '} - - - - )} + {' | '} + + {t('Supported browsers')}{' '} + +
); }; -export const ChromeIcon = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const MozillaIcon = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const BrowserIcon = () => { - const { MOZILLA_EXTENSION_URL, CHROME_EXTENSION_URL } = useEnvironment(); +export const BrowserIcon = ({ + chromeExtensionUrl, + mozillaExtensionUrl, +}: { + chromeExtensionUrl: string; + mozillaExtensionUrl: string; +}) => { const isItChrome = window.navigator.userAgent.includes('Chrome'); const isItMozilla = window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1; return ( -
+
{!isItChrome && !isItMozilla ? ( <> - + {' '} - + diff --git a/libs/wallet/src/connect-dialog/connect-dialog.spec.tsx b/libs/wallet/src/connect-dialog/connect-dialog.spec.tsx index 700d4a46b..68eb88b1c 100644 --- a/libs/wallet/src/connect-dialog/connect-dialog.spec.tsx +++ b/libs/wallet/src/connect-dialog/connect-dialog.spec.tsx @@ -1,12 +1,10 @@ import { act, fireEvent, render, screen } from '@testing-library/react'; import type { MockedResponse } from '@apollo/client/testing'; import { MockedProvider } from '@apollo/client/testing'; +import type { VegaWalletConfig } from '../provider'; import { VegaWalletProvider } from '../provider'; -import { - VegaConnectDialog, - CLOSE_DELAY, - useVegaWalletDialogStore, -} from './connect-dialog'; +import { VegaConnectDialog, CLOSE_DELAY } from './connect-dialog'; +import { useVegaWalletDialogStore } from './vega-wallet-dialog-store'; import type { VegaConnectDialogProps } from '..'; import { ClientErrors, @@ -15,7 +13,6 @@ import { ViewConnector, WalletError, } from '../connectors'; -import { useEnvironment } from '@vegaprotocol/environment'; import type { ChainIdQuery } from './__generated__/ChainId'; import { ChainIdDocument } from './__generated__/ChainId'; import { @@ -28,26 +25,14 @@ import { const mockUpdateDialogOpen = jest.fn(); const mockCloseVegaDialog = jest.fn(); -jest.mock('@vegaprotocol/environment'); let mockIsDesktopRunning = true; + jest.mock('../use-is-wallet-service-running', () => ({ useIsWalletServiceRunning: jest .fn() .mockImplementation(() => mockIsDesktopRunning), })); -// @ts-ignore ignore mock implementation -useEnvironment.mockImplementation(() => ({ - VEGA_ENV: 'TESTNET', - VEGA_URL: 'https://vega-node.url', - VEGA_NETWORKS: JSON.stringify({}), - VEGA_WALLET_URL: mockVegaWalletUrl, - GIT_BRANCH: 'test', - GIT_COMMIT_HASH: 'abcdef', - GIT_ORIGIN_URL: 'https://github.com/test/repo', - HOSTED_WALLET_URL: mockHostedWalletUrl, -})); - let defaultProps: VegaConnectDialogProps; const INITIAL_KEY = 'some-key'; @@ -59,7 +44,9 @@ const connectors = { jsonRpc, view, injected, + snap: undefined, }; + beforeEach(() => { jest.clearAllMocks(); defaultProps = { @@ -73,12 +60,24 @@ beforeEach(() => { }); }); -const mockVegaWalletUrl = 'http://mock.wallet.com'; -const mockHostedWalletUrl = 'http://mock.hosted.com'; - const mockChainId = 'chain-id'; -function generateJSX(props?: Partial) { +const defaultConfig: VegaWalletConfig = { + network: 'TESTNET', + vegaUrl: 'https://vega.xyz', + vegaWalletServiceUrl: 'https://vegaservice.xyz', + links: { + explorer: 'explorer-link', + concepts: 'concepts-link', + chromeExtensionUrl: 'chrome-link', + mozillaExtensionUrl: 'mozilla-link', + }, +}; + +function generateJSX( + props?: Partial, + config?: Partial +) { const chainIdMock: MockedResponse = { request: { query: ChainIdDocument, @@ -93,7 +92,7 @@ function generateJSX(props?: Partial) { }; return ( - + diff --git a/libs/wallet/src/connect-dialog/connect-dialog.tsx b/libs/wallet/src/connect-dialog/connect-dialog.tsx index 222de6265..7aa5c32e4 100644 --- a/libs/wallet/src/connect-dialog/connect-dialog.tsx +++ b/libs/wallet/src/connect-dialog/connect-dialog.tsx @@ -1,5 +1,4 @@ import classNames from 'classnames'; -import { create } from 'zustand'; import { Dialog, Intent, @@ -14,7 +13,7 @@ import type { ReactNode } from 'react'; import { useCallback, useState } from 'react'; import type { WalletClientError } from '@vegaprotocol/wallet-client'; import { t } from '@vegaprotocol/i18n'; -import type { VegaConnector } from '../connectors'; +import type { Connectors, VegaConnector } from '../connectors'; import { DEFAULT_SNAP_ID, InjectedConnector, @@ -25,7 +24,6 @@ import { } from '../connectors'; import { JsonRpcConnectorForm } from './json-rpc-connector-form'; import { ViewConnectorForm } from './view-connector-form'; -import { FLAGS, useEnvironment } from '@vegaprotocol/environment'; import { BrowserIcon, ConnectDialogContent, @@ -42,9 +40,10 @@ 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 { useVegaWalletDialogStore } from './vega-wallet-dialog-store'; export const CLOSE_DELAY = 1700; -type Connectors = { [key: string]: VegaConnector }; + export type WalletType = 'injected' | 'jsonRpc' | 'view' | 'snap'; export interface VegaConnectDialogProps { @@ -52,23 +51,6 @@ export interface VegaConnectDialogProps { riskMessage?: ReactNode; } -export interface VegaWalletDialogStore { - vegaWalletDialogOpen: boolean; - updateVegaWalletDialog: (open: boolean) => void; - openVegaWalletDialog: () => void; - closeVegaWalletDialog: () => void; -} - -export const useVegaWalletDialogStore = create()( - (set) => ({ - vegaWalletDialogOpen: false, - updateVegaWalletDialog: (open: boolean) => - set({ vegaWalletDialogOpen: open }), - openVegaWalletDialog: () => set({ vegaWalletDialogOpen: true }), - closeVegaWalletDialog: () => set({ vegaWalletDialogOpen: false }), - }) -); - export const VegaConnectDialog = ({ connectors, riskMessage, @@ -123,12 +105,12 @@ const ConnectDialogContainer = ({ appChainId: string; riskMessage?: ReactNode; }) => { - const { VEGA_WALLET_URL } = useEnvironment(); + const { vegaUrl, vegaWalletServiceUrl } = useVegaWallet(); const closeDialog = useVegaWalletDialogStore( (store) => store.closeVegaWalletDialog ); const [selectedConnector, setSelectedConnector] = useState(); - const [walletUrl, setWalletUrl] = useState(VEGA_WALLET_URL || ''); + const [walletUrl, setWalletUrl] = useState(vegaWalletServiceUrl); const reset = useCallback(() => { setSelectedConnector(undefined); @@ -147,7 +129,6 @@ const ConnectDialogContainer = ({ const handleSelect = (type: WalletType) => { const connector = connectors[type]; - connector.url = walletUrl; if (!connector) { // we should never get here unless connectors are not configured correctly @@ -159,21 +140,28 @@ const ConnectDialogContainer = ({ // Immediately connect on selection if jsonRpc is selected, we can't do this // for rest because we need to show an authentication form if (connector instanceof JsonRpcConnector) { + connector.url = walletUrl; jsonRpcConnect(connector, appChainId); - } else if ( - connector instanceof InjectedConnector || - connector instanceof SnapConnector - ) { + } else if (connector instanceof InjectedConnector) { + injectedConnect(connector, appChainId); + } else if (connector instanceof SnapConnector) { + // Set the nodeAddress to send tx's to, normally this is handled by + // the vega wallet + connector.nodeAddress = new URL(vegaUrl).origin; injectedConnect(connector, appChainId); } }; + const isDesktopWalletRunning = useIsWalletServiceRunning( walletUrl, - connectors, + connectors['jsonRpc'], appChainId ); - const isSnapRunning = useIsSnapRunning(DEFAULT_SNAP_ID); + const isSnapRunning = useIsSnapRunning( + DEFAULT_SNAP_ID, + Boolean(connectors['snap']) + ); return ( <> @@ -190,6 +178,7 @@ const ConnectDialogContainer = ({ /> ) : ( void; walletUrl: string; setWalletUrl: (value: string) => void; isDesktopWalletRunning: boolean | null; isSnapRunning: boolean | null; }) => { - const { pubKey } = useVegaWallet(); + const { pubKey, links } = useVegaWallet(); const title = isBrowserWalletInstalled() ? t('Connect Vega wallet') : t('Get a Vega wallet'); const extendedText = ( <> -
+
{t('Connect')}
- + ); @@ -247,20 +241,23 @@ const ConnectorList = ({ onClick={() => onSelect('injected')} /> ) : ( - + )}
- {FLAGS.METAMASK_SNAPS ? ( + {connectors['snap'] !== undefined ? (
{isSnapRunning ? ( -
+
{t('Connect via Vega MetaMask Snap')}
-
+
@@ -274,10 +271,10 @@ const ConnectorList = ({ type="snap" text={ <> -
+
{t('Install Vega MetaMask Snap')}
-
+
@@ -374,30 +371,43 @@ const SelectedForm = ({ throw new Error('No connector selected'); }; -export const GetWalletButton = ({ className }: { className?: string }) => { - const { MOZILLA_EXTENSION_URL, CHROME_EXTENSION_URL } = useEnvironment(); +export const GetWalletButton = ({ + chromeExtensionUrl, + mozillaExtensionUrl, + className, +}: { + chromeExtensionUrl?: string; + mozillaExtensionUrl?: string; + className?: string; +}) => { const isItChrome = window.navigator.userAgent.includes('Chrome'); const isItMozilla = window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1; + const onClick = () => { if (isItMozilla) { - window.open(MOZILLA_EXTENSION_URL, '_blank'); + window.open(mozillaExtensionUrl, '_blank'); return; } if (isItChrome) { - window.open(CHROME_EXTENSION_URL, '_blank'); + window.open(chromeExtensionUrl, '_blank'); } }; const buttonContent = ( <> -
+
{t('Get the Vega Wallet')} ALPHA
- + {chromeExtensionUrl && mozillaExtensionUrl && ( + + )} ); @@ -452,7 +462,7 @@ const ConnectionOption = ({ icon={icon} fill > - {text} + {text} ); }; @@ -508,7 +518,7 @@ const CustomUrlInput = ({ onClick={() => onSelect('jsonRpc')} /> {isDesktopWalletRunning !== null && ( -

+

{isDesktopWalletRunning ? (