From f1426fcd4f4a26be60a936fc0691d558701fa657 Mon Sep 17 00:00:00 2001 From: asiaznik Date: Fri, 25 Aug 2023 14:45:59 +0200 Subject: [PATCH] chore: added icon, added feature flag --- apps/governance/.env | 1 + apps/governance/.env.capsule | 1 + apps/governance/.env.devnet | 1 + apps/governance/.env.mainnet | 1 + apps/governance/.env.mainnet-mirror | 1 + apps/governance/.env.stagnet1 | 1 + apps/governance/.env.testnet | 1 + apps/governance/.env.validators-testnet | 1 + apps/governance/src/lib/vega-connectors.ts | 11 +- apps/trading/.env | 1 + apps/trading/.env.capsule | 1 + apps/trading/.env.devnet | 1 + apps/trading/.env.mainnet | 1 + apps/trading/.env.mainnet-mirror | 1 + apps/trading/.env.stagnet1 | 1 + apps/trading/.env.testnet | 1 + apps/trading/.env.validators-testnet | 1 + apps/trading/lib/vega-connectors.ts | 10 +- libs/environment/src/hooks/use-environment.ts | 6 + libs/environment/src/types.ts | 6 +- .../src/utils/validate-environment.ts | 1 + .../vega-icons/svg-icons/icon-metamask.tsx | 102 ++++++++++++++ .../icon/vega-icons/vega-icon-record.ts | 33 ++--- .../src/connect-dialog/connect-dialog.tsx | 64 +++++---- libs/wallet/src/use-injected-connector.ts | 2 - libs/web3/src/lib/web3-connect-dialog.tsx | 124 ++---------------- 26 files changed, 214 insertions(+), 161 deletions(-) create mode 100644 libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-metamask.tsx diff --git a/apps/governance/.env b/apps/governance/.env index 367b8fcda..cd2e19bdc 100644 --- a/apps/governance/.env +++ b/apps/governance/.env @@ -29,3 +29,4 @@ LC_ALL="en_US.UTF-8" # Cosmic elevator flags NX_SUCCESSOR_MARKETS=true +NX_METAMASK_SNAPS=true \ No newline at end of file diff --git a/apps/governance/.env.capsule b/apps/governance/.env.capsule index 4c371f3e2..780e7394f 100644 --- a/apps/governance/.env.capsule +++ b/apps/governance/.env.capsule @@ -30,3 +30,4 @@ CYPRESS_FAIRGROUND=false # Cosmic elevator flags NX_SUCCESSOR_MARKETS=false +NX_METAMASK_SNAPS=false \ No newline at end of file diff --git a/apps/governance/.env.devnet b/apps/governance/.env.devnet index 71625ea77..7f9908cc0 100644 --- a/apps/governance/.env.devnet +++ b/apps/governance/.env.devnet @@ -22,3 +22,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket # Cosmic elevator flags NX_SUCCESSOR_MARKETS=true +NX_METAMASK_SNAPS=true \ No newline at end of file diff --git a/apps/governance/.env.mainnet b/apps/governance/.env.mainnet index 7a2e15d5c..982a605bf 100644 --- a/apps/governance/.env.mainnet +++ b/apps/governance/.env.mainnet @@ -22,3 +22,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket # Cosmic elevator flags NX_SUCCESSOR_MARKETS=false +NX_METAMASK_SNAPS=false diff --git a/apps/governance/.env.mainnet-mirror b/apps/governance/.env.mainnet-mirror index a847576e3..0ef3d4076 100644 --- a/apps/governance/.env.mainnet-mirror +++ b/apps/governance/.env.mainnet-mirror @@ -21,3 +21,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket # Cosmic elevator flags NX_SUCCESSOR_MARKETS=false +NX_METAMASK_SNAPS=false diff --git a/apps/governance/.env.stagnet1 b/apps/governance/.env.stagnet1 index a83edd54e..70cb17afe 100644 --- a/apps/governance/.env.stagnet1 +++ b/apps/governance/.env.stagnet1 @@ -18,3 +18,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket # Cosmic elevator flags NX_SUCCESSOR_MARKETS=true +NX_METAMASK_SNAPS=true diff --git a/apps/governance/.env.testnet b/apps/governance/.env.testnet index 2e64b5662..2135c6f19 100644 --- a/apps/governance/.env.testnet +++ b/apps/governance/.env.testnet @@ -23,3 +23,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket # Cosmic elevator flags NX_SUCCESSOR_MARKETS=true +NX_METAMASK_SNAPS=true diff --git a/apps/governance/.env.validators-testnet b/apps/governance/.env.validators-testnet index 17e335022..5ca68a594 100644 --- a/apps/governance/.env.validators-testnet +++ b/apps/governance/.env.validators-testnet @@ -20,3 +20,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega. # Cosmic elevator flags NX_SUCCESSOR_MARKETS=false +NX_METAMASK_SNAPS=false diff --git a/apps/governance/src/lib/vega-connectors.ts b/apps/governance/src/lib/vega-connectors.ts index 32b305f55..c3007921e 100644 --- a/apps/governance/src/lib/vega-connectors.ts +++ b/apps/governance/src/lib/vega-connectors.ts @@ -1,17 +1,26 @@ +import { ENV } from '@vegaprotocol/environment'; import { JsonRpcConnector, ViewConnector, InjectedConnector, + SnapConnector, + DEFAULT_SNAP_ID, } from '@vegaprotocol/wallet'; const urlParams = new URLSearchParams(window.location.search); -export const injected = new InjectedConnector(); 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 Connectors = { injected, jsonRpc, view, + snap, }; diff --git a/apps/trading/.env b/apps/trading/.env index 21058b8bb..637a69b14 100644 --- a/apps/trading/.env +++ b/apps/trading/.env @@ -19,6 +19,7 @@ NX_SUCCESSOR_MARKETS=true NX_STOP_ORDERS=true # NX_ICEBERG_ORDERS # NX_PRODUCT_PERPETUALS +NX_METAMASK_SNAPS=true NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket diff --git a/apps/trading/.env.capsule b/apps/trading/.env.capsule index 149f153bd..4638a051a 100644 --- a/apps/trading/.env.capsule +++ b/apps/trading/.env.capsule @@ -23,6 +23,7 @@ NX_SUCCESSOR_MARKETS=false NX_STOP_ORDERS=false # NX_ICEBERG_ORDERS # NX_PRODUCT_PERPETUALS +NX_METAMASK_SNAPS=false NX_TENDERMINT_URL=http://localhost:26617 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket diff --git a/apps/trading/.env.devnet b/apps/trading/.env.devnet index e4c6958a0..9462cb56c 100644 --- a/apps/trading/.env.devnet +++ b/apps/trading/.env.devnet @@ -21,6 +21,7 @@ NX_SUCCESSOR_MARKETS=true NX_STOP_ORDERS=true # NX_ICEBERG_ORDERS # NX_PRODUCT_PERPETUALS +NX_METAMASK_SNAPS=true NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/ NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket diff --git a/apps/trading/.env.mainnet b/apps/trading/.env.mainnet index 708a34153..44e6c8447 100644 --- a/apps/trading/.env.mainnet +++ b/apps/trading/.env.mainnet @@ -23,6 +23,7 @@ NX_SUCCESSOR_MARKETS=false NX_STOP_ORDERS=false # NX_ICEBERG_ORDERS # NX_PRODUCT_PERPETUALS +NX_METAMASK_SNAPS=false NX_TENDERMINT_URL=https://be.vega.community NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket diff --git a/apps/trading/.env.mainnet-mirror b/apps/trading/.env.mainnet-mirror index e28f506fe..aebcf5e35 100644 --- a/apps/trading/.env.mainnet-mirror +++ b/apps/trading/.env.mainnet-mirror @@ -23,6 +23,7 @@ NX_SUCCESSOR_MARKETS=false NX_STOP_ORDERS=false # NX_ICEBERG_ORDERS # NX_PRODUCT_PERPETUALS +NX_METAMASK_SNAPS=false NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket diff --git a/apps/trading/.env.stagnet1 b/apps/trading/.env.stagnet1 index 91425161b..0294d0d0b 100644 --- a/apps/trading/.env.stagnet1 +++ b/apps/trading/.env.stagnet1 @@ -21,3 +21,4 @@ NX_SUCCESSOR_MARKETS=true NX_STOP_ORDERS=true # NX_ICEBERG_ORDERS # NX_PRODUCT_PERPETUALS +NX_METAMASK_SNAPS=true diff --git a/apps/trading/.env.testnet b/apps/trading/.env.testnet index bf23f97a2..a50c8876c 100644 --- a/apps/trading/.env.testnet +++ b/apps/trading/.env.testnet @@ -22,6 +22,7 @@ NX_SUCCESSOR_MARKETS=true NX_STOP_ORDERS=true NX_ICEBERG_ORDERS=true # NX_PRODUCT_PERPETUALS +NX_METAMASK_SNAPS=true NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket diff --git a/apps/trading/.env.validators-testnet b/apps/trading/.env.validators-testnet index 11f5f217e..c31b364b1 100644 --- a/apps/trading/.env.validators-testnet +++ b/apps/trading/.env.validators-testnet @@ -23,6 +23,7 @@ NX_SUCCESSOR_MARKETS=false NX_STOP_ORDERS=false # NX_ICEBERG_ORDERS # NX_PRODUCT_PERPETUALS +NX_METAMASK_SNAPS=false NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.xyz/websocket diff --git a/apps/trading/lib/vega-connectors.ts b/apps/trading/lib/vega-connectors.ts index fa19adcad..bf953d652 100644 --- a/apps/trading/lib/vega-connectors.ts +++ b/apps/trading/lib/vega-connectors.ts @@ -10,11 +10,6 @@ import { export const jsonRpc = new JsonRpcConnector(); export const injected = new InjectedConnector(); -export const snap = new SnapConnector( - ENV.VEGA_URL ? new URL(ENV.VEGA_URL).origin : undefined, - DEFAULT_SNAP_ID -); - let view: ViewConnector; if (typeof window !== 'undefined') { const urlParams = new URLSearchParams(window.location.hash.split('?')[1]); @@ -23,6 +18,11 @@ 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 Connectors = { injected, jsonRpc, diff --git a/libs/environment/src/hooks/use-environment.ts b/libs/environment/src/hooks/use-environment.ts index 2a39c6625..deb5b4b2b 100644 --- a/libs/environment/src/hooks/use-environment.ts +++ b/libs/environment/src/hooks/use-environment.ts @@ -408,6 +408,12 @@ function compileFeatureFlags(): FeatureFlags { process.env['NX_PRODUCT_PERPETUALS'] ) as string ), + METAMASK_SNAPS: TRUTHY.includes( + windowOrDefault( + 'NX_METAMASK_SNAPS', + process.env['NX_METAMASK_SNAPS'] + ) as string + ), }; const EXPLORER_FLAGS = { EXPLORER_ASSETS: TRUTHY.includes( diff --git a/libs/environment/src/types.ts b/libs/environment/src/types.ts index 2c5437ed4..b1b971888 100644 --- a/libs/environment/src/types.ts +++ b/libs/environment/src/types.ts @@ -18,7 +18,11 @@ export type Environment = z.infer; export type FeatureFlags = z.infer; export type CosmicElevatorFlags = Pick< FeatureFlags, - 'ICEBERG_ORDERS' | 'STOP_ORDERS' | 'SUCCESSOR_MARKETS' | 'PRODUCT_PERPETUALS' + | 'ICEBERG_ORDERS' + | 'STOP_ORDERS' + | 'SUCCESSOR_MARKETS' + | 'PRODUCT_PERPETUALS' + | 'METAMASK_SNAPS' >; export type Configuration = z.infer; export const CUSTOM_NODE_KEY = 'custom' as const; diff --git a/libs/environment/src/utils/validate-environment.ts b/libs/environment/src/utils/validate-environment.ts index baf102b14..c0589e73f 100644 --- a/libs/environment/src/utils/validate-environment.ts +++ b/libs/environment/src/utils/validate-environment.ts @@ -77,6 +77,7 @@ const COSMIC_ELEVATOR_FLAGS = { STOP_ORDERS: z.optional(z.boolean()), ICEBERG_ORDERS: z.optional(z.boolean()), PRODUCT_PERPETUALS: z.optional(z.boolean()), + METAMASK_SNAPS: z.optional(z.boolean()), }; const EXPLORER_FLAGS = { diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-metamask.tsx b/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-metamask.tsx new file mode 100644 index 000000000..e3976cf43 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-metamask.tsx @@ -0,0 +1,102 @@ +export const IconMetaMask = ({ size = 16 }: { size: number }) => ( + + + + + + + + + + + + + + + + +); diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts index 60ee1f1ad..e8069b90f 100644 --- a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts +++ b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts @@ -1,8 +1,8 @@ import { IconArrowDown } from './svg-icons/icon-arrow-down'; import { IconArrowLeft } from './svg-icons/icon-arrow-left'; -import { IconArrowUp } from './svg-icons/icon-arrow-up'; import { IconArrowRight } from './svg-icons/icon-arrow-right'; import { IconArrowTopRight } from './svg-icons/icon-arrow-top-right'; +import { IconArrowUp } from './svg-icons/icon-arrow-up'; import { IconBreakdown } from './svg-icons/icon-breakdown'; import { IconBullet } from './svg-icons/icon-bullet'; import { IconChevronDown } from './svg-icons/icon-chevron-down'; @@ -20,28 +20,29 @@ import { IconGlobe } from './svg-icons/icon-globe'; import { IconInfo } from './svg-icons/icon-info'; import { IconKebab } from './svg-icons/icon-kebab'; import { IconLinkedIn } from './svg-icons/icon-linkedin'; +import { IconMetaMask } from './svg-icons/icon-metamask'; import { IconMinus } from './svg-icons/icon-minus'; import { IconMoon } from './svg-icons/icon-moon'; import { IconOpenExternal } from './svg-icons/icon-open-external'; -import { IconQuestionMark } from './svg-icons/icon-question-mark'; import { IconPlus } from './svg-icons/icon-plus'; +import { IconQuestionMark } from './svg-icons/icon-question-mark'; +import { IconSearch } from './svg-icons/icon-search'; import { IconStar } from './svg-icons/icon-star'; import { IconTick } from './svg-icons/icon-tick'; import { IconTicket } from './svg-icons/icon-ticket'; import { IconTransfer } from './svg-icons/icon-transfer'; -import { IconTrendUp } from './svg-icons/icon-trend-up'; import { IconTrendDown } from './svg-icons/icon-trend-down'; +import { IconTrendUp } from './svg-icons/icon-trend-up'; import { IconTwitter } from './svg-icons/icon-twitter'; import { IconVote } from './svg-icons/icon-vote'; import { IconWithdraw } from './svg-icons/icon-withdraw'; -import { IconSearch } from './svg-icons/icon-search'; export enum VegaIconNames { ARROW_DOWN = 'arrow-down', ARROW_LEFT = 'arrow-left', - ARROW_UP = 'arrow-up', ARROW_RIGHT = 'arrow-right', ARROW_TOP_RIGHT = 'arrow-top-right', + ARROW_UP = 'arrow-up', BREAKDOWN = 'breakdown', BULLET = 'bullet', CHEVRON_DOWN = 'chevron-down', @@ -59,18 +60,19 @@ export enum VegaIconNames { INFO = 'info', KEBAB = 'kebab', LINKEDIN = 'linkedin', + METAMASK = 'metamask', MINUS = 'minus', MOON = 'moon', OPEN_EXTERNAL = 'open-external', - QUESTION_MARK = 'question-mark', PLUS = 'plus', + QUESTION_MARK = 'question-mark', SEARCH = 'search', STAR = 'star', TICK = 'tick', TICKET = 'ticket', TRANSFER = 'transfer', - TREND_UP = 'trend-up', TREND_DOWN = 'trend-down', + TREND_UP = 'trend-up', TWITTER = 'twitter', VOTE = 'vote', WITHDRAW = 'withdraw', @@ -82,38 +84,39 @@ export const VegaIconNameMap: Record< > = { 'arrow-down': IconArrowDown, 'arrow-left': IconArrowLeft, - 'arrow-up': IconArrowUp, 'arrow-right': IconArrowRight, 'arrow-top-right': IconArrowTopRight, - breakdown: IconBreakdown, - bullet: IconBullet, + 'arrow-up': IconArrowUp, 'chevron-down': IconChevronDown, 'chevron-left': IconChevronLeft, 'chevron-up': IconChevronUp, + 'exclaimation-mark': IconExclaimationMark, + 'open-external': IconOpenExternal, + 'question-mark': IconQuestionMark, + 'trend-down': IconTrendDown, + 'trend-up': IconTrendUp, + breakdown: IconBreakdown, + bullet: IconBullet, cog: IconCog, copy: IconCopy, cross: IconCross, deposit: IconDeposit, edit: IconEdit, - 'exclaimation-mark': IconExclaimationMark, eye: IconEye, forum: IconForum, globe: IconGlobe, info: IconInfo, kebab: IconKebab, linkedin: IconLinkedIn, + metamask: IconMetaMask, minus: IconMinus, moon: IconMoon, - 'open-external': IconOpenExternal, plus: IconPlus, - 'question-mark': IconQuestionMark, search: IconSearch, star: IconStar, tick: IconTick, ticket: IconTicket, transfer: IconTransfer, - 'trend-up': IconTrendUp, - 'trend-down': IconTrendDown, twitter: IconTwitter, vote: IconVote, withdraw: IconWithdraw, diff --git a/libs/wallet/src/connect-dialog/connect-dialog.tsx b/libs/wallet/src/connect-dialog/connect-dialog.tsx index a53de4c21..222de6265 100644 --- a/libs/wallet/src/connect-dialog/connect-dialog.tsx +++ b/libs/wallet/src/connect-dialog/connect-dialog.tsx @@ -11,7 +11,7 @@ import { VegaIconNames, } from '@vegaprotocol/ui-toolkit'; import type { ReactNode } from 'react'; -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useState } from 'react'; import type { WalletClientError } from '@vegaprotocol/wallet-client'; import { t } from '@vegaprotocol/i18n'; import type { VegaConnector } from '../connectors'; @@ -21,13 +21,11 @@ import { JsonRpcConnector, SnapConnector, ViewConnector, - getSnap, - getSnaps, requestSnap, } from '../connectors'; import { JsonRpcConnectorForm } from './json-rpc-connector-form'; import { ViewConnectorForm } from './view-connector-form'; -import { useEnvironment } from '@vegaprotocol/environment'; +import { FLAGS, useEnvironment } from '@vegaprotocol/environment'; import { BrowserIcon, ConnectDialogContent, @@ -252,25 +250,45 @@ const ConnectorList = ({ )} -
- {isSnapRunning ? ( - { - onSelect('snap'); - }} - /> - ) : ( - { - requestSnap(DEFAULT_SNAP_ID); - }} - /> - )} -
+ {FLAGS.METAMASK_SNAPS ? ( +
+ {isSnapRunning ? ( + +
+ {t('Connect via Vega MetaMask Snap')} +
+
+ +
+ + } + onClick={() => { + onSelect('snap'); + }} + /> + ) : ( + +
+ {t('Install Vega MetaMask Snap')} +
+
+ +
+ + } + onClick={() => { + requestSnap(DEFAULT_SNAP_ID); + }} + /> + )} +
+ ) : null}
void) => { const { connect, acknowledgeNeeded } = useVegaWallet(); const [status, setStatus] = useState(Status.Idle); @@ -45,7 +44,6 @@ export const useInjectedConnector = (onConnect: () => void) => { setStatus(Status.GettingChainId); const { chainID } = await connector.getChainId(); - if (chainID !== appChainId) { throw ERR_INVALID_CHAIN; } diff --git a/libs/web3/src/lib/web3-connect-dialog.tsx b/libs/web3/src/lib/web3-connect-dialog.tsx index bee86e392..ae62c226f 100644 --- a/libs/web3/src/lib/web3-connect-dialog.tsx +++ b/libs/web3/src/lib/web3-connect-dialog.tsx @@ -1,6 +1,11 @@ import { t } from '@vegaprotocol/i18n'; import { useLocalStorage } from '@vegaprotocol/react-helpers'; -import { Dialog, Intent } from '@vegaprotocol/ui-toolkit'; +import { + Dialog, + Intent, + VegaIcon, + VegaIconNames, +} from '@vegaprotocol/ui-toolkit'; import { MetaMask } from '@web3-react/metamask'; import { WalletConnect } from '@web3-react/walletconnect-v2'; import { WalletConnect as WalletConnectLegacy } from '@web3-react/walletconnect'; @@ -118,7 +123,7 @@ export const Web3ConnectUncontrolledDialog = () => { function getConnectorInfo(connector: Connector) { if (connector instanceof MetaMask) { return { - icon: , + icon: , name: 'MetaMask', text: t('MetaMask'), alt: t('MetaMask, Brave or other injected web wallet'), @@ -126,14 +131,14 @@ function getConnectorInfo(connector: Connector) { } if (connector instanceof CoinbaseWallet) { return { - icon: , + icon: , name: 'CoinbaseWallet', text: t('Coinbase'), }; } if (connector instanceof WalletConnect) { return { - icon: , + icon: , name: 'WalletConnect', text: t('WalletConnect'), alt: t('WalletConnect v2'), @@ -143,7 +148,7 @@ function getConnectorInfo(connector: Connector) { return { icon: ( ), @@ -160,115 +165,6 @@ type IconProps = { height?: number; }; -const MetaMaskIcon = ({ width, height }: IconProps) => ( - - - - - - - - - - - - - - - - -); - const CoinbaseWalletIcon = ({ width, height }: IconProps) => (