chore: added icon, added feature flag

This commit is contained in:
asiaznik
2023-08-25 14:45:59 +02:00
parent 10b2b36946
commit f1426fcd4f
26 changed files with 214 additions and 161 deletions
+1
View File
@@ -29,3 +29,4 @@ LC_ALL="en_US.UTF-8"
# Cosmic elevator flags
NX_SUCCESSOR_MARKETS=true
NX_METAMASK_SNAPS=true
+1
View File
@@ -30,3 +30,4 @@ CYPRESS_FAIRGROUND=false
# Cosmic elevator flags
NX_SUCCESSOR_MARKETS=false
NX_METAMASK_SNAPS=false
+1
View File
@@ -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
+1
View File
@@ -22,3 +22,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
# Cosmic elevator flags
NX_SUCCESSOR_MARKETS=false
NX_METAMASK_SNAPS=false
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -20,3 +20,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.
# Cosmic elevator flags
NX_SUCCESSOR_MARKETS=false
NX_METAMASK_SNAPS=false
+10 -1
View File
@@ -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,
};
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -21,3 +21,4 @@ NX_SUCCESSOR_MARKETS=true
NX_STOP_ORDERS=true
# NX_ICEBERG_ORDERS
# NX_PRODUCT_PERPETUALS
NX_METAMASK_SNAPS=true
+1
View File
@@ -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
+1
View File
@@ -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
+5 -5
View File
@@ -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,
@@ -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(
+5 -1
View File
@@ -18,7 +18,11 @@ export type Environment = z.infer<typeof envSchema>;
export type FeatureFlags = z.infer<typeof featureFlagsSchema>;
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<typeof tomlConfigSchema>;
export const CUSTOM_NODE_KEY = 'custom' as const;
@@ -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 = {
@@ -0,0 +1,102 @@
export const IconMetaMask = ({ size = 16 }: { size: number }) => (
<svg viewBox="0 0 47 47" fill="none" height={size}>
<g>
<path
d="m40.632 6.969-14.136 10.62 2.628-6.259L40.632 6.97Z"
fill="#E17726"
stroke="#E17726"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m8.024 6.969 14.01 10.72-2.502-6.359L8.024 6.97ZM35.542 31.594l-3.761 5.834 8.054 2.251 2.307-7.958-6.6-.127ZM6.528 31.721 8.82 39.68l8.04-2.251-3.747-5.834-6.586.127Z"
fill="#E27625"
stroke="#E27625"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m16.428 21.738-2.237 3.427 7.97.368-.266-8.709-5.467 4.914ZM32.229 21.738l-5.552-5.012-.181 8.807 7.97-.368-2.237-3.427ZM16.861 37.428l4.824-2.365-4.152-3.285-.672 5.65ZM26.971 35.063l4.81 2.365-.657-5.65-4.153 3.285Z"
fill="#E27625"
stroke="#E27625"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m31.78 37.428-4.81-2.365.392 3.172-.042 1.345 4.46-2.152ZM16.861 37.428l4.475 2.152-.028-1.345.377-3.172-4.824 2.365Z"
fill="#D5BFB2"
stroke="#D5BFB2"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m21.42 29.682-4-1.19 2.825-1.316 1.174 2.506ZM27.236 29.682l1.175-2.506 2.838 1.317-4.013 1.19Z"
fill="#233447"
stroke="#233447"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m16.861 37.427.7-5.834-4.447.128 3.747 5.706ZM31.096 31.593l.685 5.834 3.761-5.706-4.446-.128ZM34.465 25.165l-7.97.368.741 4.15 1.175-2.507 2.838 1.317 3.216-3.328ZM17.42 28.493l2.825-1.317 1.175 2.506.74-4.149-7.97-.368 3.23 3.328Z"
fill="#CC6228"
stroke="#CC6228"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m14.19 25.165 3.343 6.613-.112-3.285-3.23-3.328ZM31.25 28.493l-.126 3.285 3.342-6.613-3.216 3.328ZM22.161 25.533l-.741 4.149.937 4.9.21-6.458-.406-2.591ZM26.495 25.533l-.391 2.577.196 6.471.937-4.9-.741-4.148Z"
fill="#E27525"
stroke="#E27525"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m27.237 29.682-.937 4.9.671.481 4.153-3.285.126-3.285-4.013 1.19ZM17.42 28.493l.112 3.285 4.153 3.285.671-.481-.937-4.9-3.999-1.19Z"
fill="#F5841F"
stroke="#F5841F"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m27.32 39.58.042-1.345-.363-.312h-5.342l-.35.312.029 1.345-4.475-2.152 1.566 1.303 3.175 2.223h5.439l3.188-2.224 1.552-1.302-4.46 2.152Z"
fill="#C0AC9D"
stroke="#C0AC9D"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m26.97 35.063-.67-.482h-3.944l-.67.482-.378 3.172.35-.312h5.34l.364.312-.391-3.172Z"
fill="#161616"
stroke="#161616"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m41.234 18.283 1.188-5.863-1.79-5.451-13.66 10.266 5.257 4.503 7.425 2.195 1.636-1.94-.713-.524 1.132-1.048-.867-.68 1.133-.878-.741-.58ZM6.234 12.42l1.203 5.863-.77.58 1.147.878-.867.68L8.08 21.47l-.713.524 1.636 1.94 7.425-2.195 5.257-4.503L8.025 6.97l-1.79 5.452Z"
fill="#763E1A"
stroke="#763E1A"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m39.654 23.933-7.425-2.195 2.237 3.427-3.342 6.613 4.419-.057h6.6l-2.49-7.788ZM16.428 21.738l-7.425 2.195-2.475 7.788h6.586l4.418.056-3.342-6.612 2.238-3.427ZM26.495 25.533l.476-8.298 2.153-5.905h-9.592l2.153 5.905.476 8.298.181 2.605.014 6.443H26.3l.014-6.443.182-2.605Z"
fill="#F5841F"
stroke="#F5841F"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</g>
</svg>
);
@@ -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,
@@ -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 = ({
<GetWalletButton />
)}
</div>
<div>
{isSnapRunning ? (
<ConnectionOption
type="snap"
text={t('Connect via Vega MetaMask Snap')}
onClick={() => {
onSelect('snap');
}}
/>
) : (
<ConnectionOption
type="snap"
text={t('Install Vega MetaMask Snap')}
onClick={() => {
requestSnap(DEFAULT_SNAP_ID);
}}
/>
)}
</div>
{FLAGS.METAMASK_SNAPS ? (
<div>
{isSnapRunning ? (
<ConnectionOption
type="snap"
text={
<>
<div className="w-full h-full flex justify-center items-center gap-1 text-base">
{t('Connect via Vega MetaMask Snap')}
</div>
<div className="absolute right-1 top-0 h-8 flex items-center">
<VegaIcon name={VegaIconNames.METAMASK} size={24} />
</div>
</>
}
onClick={() => {
onSelect('snap');
}}
/>
) : (
<ConnectionOption
type="snap"
text={
<>
<div className="w-full h-full flex justify-center items-center gap-1 text-base">
{t('Install Vega MetaMask Snap')}
</div>
<div className="absolute right-1 top-0 h-8 flex items-center">
<VegaIcon name={VegaIconNames.METAMASK} size={24} />
</div>
</>
}
onClick={() => {
requestSnap(DEFAULT_SNAP_ID);
}}
/>
)}
</div>
) : null}
<div>
<ConnectionOption
type="view"
@@ -20,7 +20,6 @@ export enum Status {
export const ERR_VEGA_UNDEFINED = new Error('window.vega not found');
export const ERR_INVALID_CHAIN = new Error('Invalid chain');
// TODO: Rename to useConnector?
export const useInjectedConnector = (onConnect: () => 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;
}
+10 -114
View File
@@ -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: <MetaMaskIcon width={40} />,
icon: <VegaIcon name={VegaIconNames.METAMASK} size={32} />,
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: <CoinbaseWalletIcon width={40} />,
icon: <CoinbaseWalletIcon width={32} />,
name: 'CoinbaseWallet',
text: t('Coinbase'),
};
}
if (connector instanceof WalletConnect) {
return {
icon: <WalletConnectIcon width={40} />,
icon: <WalletConnectIcon width={32} />,
name: 'WalletConnect',
text: t('WalletConnect'),
alt: t('WalletConnect v2'),
@@ -143,7 +148,7 @@ function getConnectorInfo(connector: Connector) {
return {
icon: (
<WalletConnectIcon
width={40}
width={32}
fillColor={theme.colors.vega.light[200]}
/>
),
@@ -160,115 +165,6 @@ type IconProps = {
height?: number;
};
const MetaMaskIcon = ({ width, height }: IconProps) => (
<svg
viewBox="0 0 47 47"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
>
<g>
<path
d="m40.632 6.969-14.136 10.62 2.628-6.259L40.632 6.97Z"
fill="#E17726"
stroke="#E17726"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m8.024 6.969 14.01 10.72-2.502-6.359L8.024 6.97ZM35.542 31.594l-3.761 5.834 8.054 2.251 2.307-7.958-6.6-.127ZM6.528 31.721 8.82 39.68l8.04-2.251-3.747-5.834-6.586.127Z"
fill="#E27625"
stroke="#E27625"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m16.428 21.738-2.237 3.427 7.97.368-.266-8.709-5.467 4.914ZM32.229 21.738l-5.552-5.012-.181 8.807 7.97-.368-2.237-3.427ZM16.861 37.428l4.824-2.365-4.152-3.285-.672 5.65ZM26.971 35.063l4.81 2.365-.657-5.65-4.153 3.285Z"
fill="#E27625"
stroke="#E27625"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m31.78 37.428-4.81-2.365.392 3.172-.042 1.345 4.46-2.152ZM16.861 37.428l4.475 2.152-.028-1.345.377-3.172-4.824 2.365Z"
fill="#D5BFB2"
stroke="#D5BFB2"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m21.42 29.682-4-1.19 2.825-1.316 1.174 2.506ZM27.236 29.682l1.175-2.506 2.838 1.317-4.013 1.19Z"
fill="#233447"
stroke="#233447"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m16.861 37.427.7-5.834-4.447.128 3.747 5.706ZM31.096 31.593l.685 5.834 3.761-5.706-4.446-.128ZM34.465 25.165l-7.97.368.741 4.15 1.175-2.507 2.838 1.317 3.216-3.328ZM17.42 28.493l2.825-1.317 1.175 2.506.74-4.149-7.97-.368 3.23 3.328Z"
fill="#CC6228"
stroke="#CC6228"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m14.19 25.165 3.343 6.613-.112-3.285-3.23-3.328ZM31.25 28.493l-.126 3.285 3.342-6.613-3.216 3.328ZM22.161 25.533l-.741 4.149.937 4.9.21-6.458-.406-2.591ZM26.495 25.533l-.391 2.577.196 6.471.937-4.9-.741-4.148Z"
fill="#E27525"
stroke="#E27525"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m27.237 29.682-.937 4.9.671.481 4.153-3.285.126-3.285-4.013 1.19ZM17.42 28.493l.112 3.285 4.153 3.285.671-.481-.937-4.9-3.999-1.19Z"
fill="#F5841F"
stroke="#F5841F"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m27.32 39.58.042-1.345-.363-.312h-5.342l-.35.312.029 1.345-4.475-2.152 1.566 1.303 3.175 2.223h5.439l3.188-2.224 1.552-1.302-4.46 2.152Z"
fill="#C0AC9D"
stroke="#C0AC9D"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m26.97 35.063-.67-.482h-3.944l-.67.482-.378 3.172.35-.312h5.34l.364.312-.391-3.172Z"
fill="#161616"
stroke="#161616"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m41.234 18.283 1.188-5.863-1.79-5.451-13.66 10.266 5.257 4.503 7.425 2.195 1.636-1.94-.713-.524 1.132-1.048-.867-.68 1.133-.878-.741-.58ZM6.234 12.42l1.203 5.863-.77.58 1.147.878-.867.68L8.08 21.47l-.713.524 1.636 1.94 7.425-2.195 5.257-4.503L8.025 6.97l-1.79 5.452Z"
fill="#763E1A"
stroke="#763E1A"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="m39.654 23.933-7.425-2.195 2.237 3.427-3.342 6.613 4.419-.057h6.6l-2.49-7.788ZM16.428 21.738l-7.425 2.195-2.475 7.788h6.586l4.418.056-3.342-6.612 2.238-3.427ZM26.495 25.533l.476-8.298 2.153-5.905h-9.592l2.153 5.905.476 8.298.181 2.605.014 6.443H26.3l.014-6.443.182-2.605Z"
fill="#F5841F"
stroke="#F5841F"
strokeWidth="0.223"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</g>
</svg>
);
const CoinbaseWalletIcon = ({ width, height }: IconProps) => (
<svg
width={width}