Feature: Account Center UI (#917)

* Initial validation and options

* Update API

* Progress on the pill

* Minimized UI

* Add shared classes

* Modifying success icon positioning styles

* Modify spacing

* Start on expanded

* Full maximised UI

* Modify margin

* Add modal and adjust network styles

* Add extra chain params to validation

* Add default val to suppress warning

* Update icons for dark background

* Styles and add elipsis menu

* Increment core version

* Add internationalization to new copy

* Fix invalid app chain styles

* Add icons

* Fix icon for network selector

* WalletRow bugfix

* Update feature name

* Modify imports

* Fix issues on Safari

* Add switch accounts link if MetaMask

* Style updates

* Style and icon updates

* Add hover states to menu

* Update docs

* Remove unused import

* Make desktop optional

* Add commented out accountCenter options

* Add extra docs

* Modify animation

* Add link to icon

* Tweak animations

* Increment common version

* Major version bump for core package

* Remove duplicate line

* Fix typo from merge

* Remove unused stream

* Fix type ordering

* Complete chainId to Label

* Fixes duplicate comment in demo

* Fixes Injected formatting

* Increment injected version

* Update readme with missing Chain params

Author: lnbc1QWFyb24

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/common/src/elements/AddressTable.svelte

@@ -3,7 +3,7 @@
   import { utils } from 'ethers'
 
   export let accountsListObject: AccountsList | undefined
-  export let accountSelected: Account | undefined
+  export let accountSelected: Account | undefined = undefined
   export let showEmptyAddresses: boolean
 
   $: accounts = showEmptyAddresses

packages/common/src/types.ts

@@ -413,6 +413,8 @@ export interface Chain {
   rpcUrl: string
   label: string
   token: TokenSymbol // eg ETH, BNB, MATIC
+  color?: string
+  icon?: string // svg string
 }
 
 export type TokenSymbol = string // eg ETH

packages/common/src/validation.ts

@@ -10,10 +10,13 @@ const basePaths = Joi.array().items(basePath)
 const chain = Joi.object({
   namespace: Joi.string(),
   id: Joi.string().required(),
-  label: Joi.string(),
+  rpcUrl: Joi.string().required(),
+  label: Joi.string().required(),
   token: Joi.string().required(),
-  rpcUrl: Joi.string()
+  icon: Joi.string(),
+  color: Joi.string()
 })
+
 const chains = Joi.array().items(chain)
 
 const asset = Joi.object({

packages/core/README.md

@@ -28,6 +28,7 @@ type InitOptions {
   chains: Chain[]
   appMetadata?: AppMetadata
   i18n?: i18nOptions
+  accountCenter?: AccountCenterOptions
 }
 ```
 
@@ -46,6 +47,8 @@ type Chain = {
   rpcUrl: string // used for network requests
   label: string // used for display, eg Ethereum Mainnet
   token: TokenSymbol // the native token symbol, eg ETH, BNB, MATIC
+  color?: string // the color used to represent the chain and will be used as a background for the icon
+  icon?: string // the icon to represent the chain
 }
 ```
 
@@ -88,6 +91,30 @@ type i18nOptions = Record<Locale, i18n>
 To see a list of all of the text values that can be internationalized or replaced, check out the [default en file](src/i18n/en.json).
 Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood.
 
+**`accountCenter`**
+An object that defines whether the account center UI is enabled and it's position on the screen. Currently the account center is disabled for mobile devices, so only desktop options are available.
+
+```typescript
+type AccountCenterOptions = {
+  desktop: {
+    position?: AccountCenterPosition // default: 'topRight'
+    enabled?: AccountCenter['enabled'] // default: true
+  }
+}
+
+type AccountCenter = {
+  enabled: boolean
+  position: AccountCenterPosition
+  expanded: boolean
+}
+
+type AccountCenterPosition =
+  | 'topRight'
+  | 'bottomRight'
+  | 'bottomLeft'
+  | 'topLeft'
+```
+
 ### Initialization Example
 
 Putting it all together, here is an example initialization with the injected wallet modules:
@@ -236,15 +263,27 @@ Onboard currently keeps track of the following state:
 
 - `wallets`: The wallets connected to Onboard
 - `chains`: The chains that Onboard has been initialized with
+- `accountCenter`: The current state of the account center UI
 - `walletModules`: The wallet modules that are currently set and will be rendered in the wallet selection modal
 
 ```typescript
 type AppState = {
-  chains: Chain[]
   wallets: WalletState[]
+  chains: Chain[]
+  accountCenter: AccountCenter
   walletModules: WalletModule[]
 }
 
+type Chain {
+  namespace?: 'evm'
+  id: ChainId
+  rpcUrl: string
+  label: string
+  token: TokenSymbol
+  color?: string
+  icon?: string
+}
+
 type WalletState = {
   label: string
   icon: string
@@ -273,6 +312,18 @@ type ConnectedChain = {
 type ChainId = string
 type TokenSymbol = string
 
+type AccountCenter = {
+  enabled: boolean
+  position: AccountCenterPosition
+  expanded: boolean
+}
+
+type AccountCenterPosition =
+  | 'topRight'
+  | 'bottomRight'
+  | 'bottomLeft'
+  | 'topLeft'
+
 type WalletModule {
   label: string
   getIcon: () => Promise<string>

packages/core/src/constants.ts

@@ -1,9 +1,14 @@
 import type { AppState } from './types'
 
 export const APP_INITIAL_STATE: AppState = {
-  chains: [],
+  wallets: [],
   walletModules: [],
-  wallets: []
+  chains: [],
+  accountCenter: {
+    enabled: true,
+    position: 'topRight',
+    expanded: false
+  }
 }
 
 export const STORAGE_KEYS = {

packages/core/src/i18n/en.json

@@ -49,6 +49,27 @@
       "heading": "Switch Chain",
       "paragraph1": "{app} requires that you switch your wallet to the {nextNetworkName} network to continue.",
       "paragraph2": "*Some wallets may not support changing networks. If you can not change networks in your wallet you may consider switching to a different wallet."
+    },
+    "confirmDisconnectAll": {
+      "heading": "Disconnect all Wallets",
+      "description": "Are you sure that you would like to disconnect all your wallets?",
+      "confirm": "Confirm",
+      "cancel": "Cancel"
     }
+  },
+  "accountCenter": {
+    "connectAnotherWallet": "Connect another Wallet",
+    "disconnectAllWallets": "Disconnect all Wallets",
+    "currentNetwork": "Current Network",
+    "appInfo": "App Info",
+    "learnMore": "Learn More",
+    "gettingStartedGuide": "Getting Started Guide",
+    "smartContracts": "Smart Contract(s)",
+    "explore": "Explore",
+    "backToApp": "Back to App",
+    "poweredBy": "powered by",
+    "addAccount": "Add Account",
+    "setPrimaryAccount": "Set Primary Account",
+    "disconnectWallet": "Disconnect Wallet"
   }
 }

packages/core/src/icons/arbitrum.ts

@@ -0,0 +1,10 @@
+export default `
+  <svg height="100%" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.7827 11.3172L15.5966 8.23933L20.4858 15.8545L20.4881 17.3159L20.4722 7.25942C20.4606 7.0136 20.3301 6.7887 20.1218 6.6561L11.3194 1.5928C11.1135 1.49162 10.8523 1.49269 10.6468 1.59594C10.6191 1.60989 10.593 1.62499 10.568 1.64147L10.5374 1.66079L1.99318 6.6121L1.95999 6.62712C1.91737 6.64674 1.8743 6.67165 1.83382 6.70063C1.67186 6.81683 1.56424 6.98861 1.52944 7.18131C1.52423 7.21052 1.52039 7.24026 1.51855 7.27023L1.53197 15.4653L6.08607 8.40666C6.65942 7.47067 7.90869 7.1692 9.06835 7.1856L10.4295 7.22155L2.40986 20.0827L3.3552 20.627L11.4709 7.23458L15.0581 7.22155L6.96327 20.9519L10.3366 22.8921L10.7396 23.1239C10.9101 23.1932 11.111 23.1967 11.283 23.1347L20.2091 17.9618L18.5026 18.9507L13.7827 11.3172ZM14.4747 21.2849L11.0677 15.9375L13.1474 12.4083L17.622 19.461L14.4747 21.2849Z" fill="#2D374B"/>
+    <path d="M11.0684 15.9375L14.4754 21.2849L17.6228 19.4609L13.1482 12.4083L11.0684 15.9375Z" fill="#28A0F0"/>
+    <path d="M20.4887 17.3159L20.4864 15.8545L15.5972 8.23932L13.7832 11.3172L18.5031 18.9507L20.2097 17.9618C20.3771 17.8259 20.4783 17.6264 20.489 17.4111L20.4887 17.3159Z" fill="#28A0F0"/>
+    <path d="M7.71943e-05 18.694L2.41 20.0826L10.4296 7.22152L9.0685 7.18557C7.90883 7.16916 6.65964 7.47063 6.08621 8.40662L1.53211 15.4652L0 17.8193V18.694H7.71943e-05Z" fill="white"/>
+    <path d="M15.0582 7.22156L11.4712 7.23459L3.35547 20.627L6.19211 22.2603L6.96354 20.9519L15.0582 7.22156Z" fill="white"/>
+    <path d="M21.9999 7.20306C21.97 6.45287 21.5638 5.76608 20.9275 5.36626L12.0097 0.237888C11.3803 -0.079066 10.594 -0.0794494 9.96363 0.237658C9.88913 0.275218 1.2912 5.26171 1.2912 5.26171C1.17223 5.31874 1.05764 5.38673 0.949789 5.46384C0.381801 5.87094 0.0355663 6.50346 0 7.19846V17.8194L1.53211 15.4653L1.5187 7.27029C1.52054 7.24032 1.52429 7.21088 1.52958 7.18175C1.56415 6.9889 1.67185 6.81689 1.83397 6.70069C1.87444 6.67171 10.6192 1.60995 10.647 1.596C10.8526 1.49275 11.1137 1.49168 11.3195 1.59286L20.122 6.65616C20.3302 6.78876 20.4608 7.01366 20.4723 7.25948V17.4111C20.4617 17.6265 20.3766 17.8259 20.2092 17.9619L18.5026 18.9508L17.6221 19.461L14.4748 21.285L11.283 23.1347C11.1111 23.1968 10.9101 23.1933 10.7397 23.124L6.96334 20.952L6.19191 22.2603L9.58559 24.2142C9.6978 24.278 9.79784 24.3345 9.87985 24.3807C10.0069 24.452 10.0935 24.4996 10.1241 24.5144C10.3653 24.6315 10.7123 24.6997 11.025 24.6997C11.3118 24.6997 11.5913 24.647 11.8559 24.5434L21.1266 19.1745C21.6587 18.7623 21.9717 18.1406 21.9999 17.467V7.20306Z" fill="#96BEDC"/>
+  </svg>
+`

packages/core/src/icons/arrow-forward.ts

@@ -0,0 +1,5 @@
+export default `
+  <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.09 15.59L11.5 17L16.5 12L11.5 7L10.09 8.41L12.67 11H3V13H12.67L10.09 15.59ZM19 3H5C3.89 3 3 3.9 3 5V9H5V5H19V19H5V15H3V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z" fill="currentColor"/>
+  </svg>
+`

packages/core/src/icons/avalanche.ts

@@ -0,0 +1,5 @@
+export default `
+  <svg width="100%" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19.8682 0.489349H0.110352V18.4468H19.8682V0.489349Z" fill="white"/>
+  </svg>
+`

packages/core/src/icons/binance.ts

@@ -0,0 +1,5 @@
+export default `
+  <svg width="100%" height="100%" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.32975 5.90275L7 3.2325L9.67163 5.90413L11.2254 4.35038L7 0.125L2.776 4.349L4.32975 5.90275ZM0.125 7L1.67875 5.44625L3.2325 7L1.67875 8.55375L0.125 7ZM4.32975 8.09725L7 10.7675L9.67163 8.09587L11.2254 9.64894L7 13.875L2.776 9.651L2.77394 9.64894L4.32975 8.09725ZM10.7675 7L12.3212 5.44625L13.875 7L12.3212 8.55375L10.7675 7ZM8.57575 6.99863H8.57713V7L7 8.57713L5.42494 7.00275L5.42219 7L5.42494 6.99794L5.70062 6.72156L5.83469 6.5875L7 5.42288L8.57644 6.99931L8.57575 6.99863Z" fill="white"/>
+  </svg>
+`

packages/core/src/icons/blocknative.js renamed to packages/core/src/icons/blocknative.ts

@@ -1,5 +1,5 @@
 export default `
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 790.34 114.51" width="80%">
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 790.34 114.51" width="100%">
   <defs>
     <style>.cls-1{fill:#262a3d;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}</style>
     <linearGradient id="linear-gradient" x1="694.45" y1="46.08" x2="741.39" y2="46.08" gradientUnits="userSpaceOnUse">

packages/core/src/icons/caret-light.ts

@@ -0,0 +1,5 @@
+export default `
+  <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z" fill="currentColor"/>
+  </svg>
+`

packages/core/src/icons/caret.ts

@@ -0,0 +1,5 @@
+export default `
+  <svg width="100%" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 10L12 15L17 10H7Z" fill="currentColor"/>
+  </svg>
+`

packages/core/src/icons/celo.ts

@@ -0,0 +1,5 @@
+export default `
+  <svg width="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19.1511 8.08001C19.1511 4.11201 15.9191 0.880005 11.9511 0.880005C8.94313 0.880005 6.38313 2.70401 5.29513 5.32801C2.73513 6.41601 0.911133 8.976 0.911133 11.952C0.911133 15.92 4.14313 19.152 8.11113 19.152C11.1191 19.152 13.6791 17.328 14.7671 14.704C17.2951 13.616 19.1511 11.056 19.1511 8.08001ZM8.11113 17.36C5.13513 17.36 2.70313 14.928 2.70313 11.952C2.70313 10.256 3.50313 8.72001 4.75113 7.72801C4.75113 7.85601 4.75113 7.98401 4.75113 8.08001C4.75113 12.048 7.98313 15.28 11.9511 15.28C12.1111 15.28 12.2391 15.28 12.3991 15.28C11.3751 16.56 9.83913 17.36 8.11113 17.36ZM13.3591 13.296C12.9111 13.424 12.4311 13.488 11.9511 13.488C8.97513 13.488 6.54313 11.056 6.54313 8.08001C6.54313 7.60001 6.60713 7.15201 6.73513 6.736C7.18313 6.60801 7.66313 6.54401 8.14313 6.54401C11.1191 6.54401 13.5511 8.976 13.5511 11.952C13.5191 12.432 13.4551 12.88 13.3591 13.296ZM15.3111 12.304C15.3111 12.176 15.3111 12.048 15.3111 11.952C15.3111 7.984 12.0791 4.752 8.11113 4.752C7.95113 4.752 7.82313 4.752 7.66313 4.752C8.65513 3.472 10.1911 2.67201 11.9191 2.67201C14.8951 2.67201 17.3271 5.10401 17.3271 8.08001C17.3271 9.80801 16.5271 11.312 15.3111 12.304Z" fill="white"/>
+  </svg>
+`

packages/core/src/icons/close.js

@@ -0,0 +1,5 @@
+export default `
+  <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="currentColor"/>
+  </svg>
+`

packages/core/src/icons/close.ts

@@ -0,0 +1,5 @@
+export default `
+  <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 8C13.1 8 14 7.1 14 6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6C10 7.1 10.9 8 12 8ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM12 16C10.9 16 10 16.9 10 18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18C14 16.9 13.1 16 12 16Z" fill="currentColor"/>
+  </svg>
+`

packages/core/src/icons/default-app-icon.js

@@ -0,0 +1,10 @@
+export default `
+  <svg height="100%" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.99902 0.12619V5.20805L9.58065 7.12736L4.99902 0.12619Z" fill="white" fill-opacity="0.602"/>
+    <path d="M4.99923 0.12619L0.416992 7.12736L4.99923 5.20805V0.12619Z" fill="white"/>
+    <path d="M4.99902 10.4207V13.8737L9.58371 7.92728L4.99902 10.4207Z" fill="white" fill-opacity="0.602"/>
+    <path d="M4.99923 13.8737V10.4201L0.416992 7.92728L4.99923 13.8737Z" fill="white"/>
+    <path d="M4.99902 9.62134L9.58065 7.12739L4.99902 5.20923V9.62134Z" fill="white" fill-opacity="0.2"/>
+    <path d="M0.416992 7.12739L4.99923 9.62134V5.20923L0.416992 7.12739Z" fill="white" fill-opacity="0.602"/>
+  </svg>
+`

packages/core/src/icons/elipsis.ts

@@ -0,0 +1,5 @@
+export default `
+  <svg height="100%" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.26613 0.133876C5.46683 0.0457135 5.68592 0 5.90775 0C6.12958 0 6.34867 0.0457135 6.54938 0.133876L10.2679 1.9598C10.3617 1.99893 10.4437 2.05898 10.5068 2.13465C10.5699 2.21033 10.6121 2.29932 10.6298 2.3938H10.6335V11.5637C10.6245 11.6667 10.5857 11.7654 10.5213 11.8495C10.457 11.9336 10.3694 11.9998 10.2679 12.0411L6.54938 13.8656C6.34867 13.9538 6.12958 13.9995 5.90775 13.9995C5.68592 13.9995 5.46683 13.9538 5.26613 13.8656L1.54762 12.0397C1.44724 11.9979 1.36095 11.9313 1.29799 11.8472C1.23504 11.7631 1.19779 11.6646 1.19025 11.5623C1.19025 11.5465 1.19025 11.5332 1.19025 11.522V2.39205C1.20579 2.29767 1.24673 2.20852 1.30923 2.13292C1.37173 2.05733 1.45375 1.99776 1.54762 1.9598L5.26613 0.133876ZM10.0478 7.50898L6.54938 9.22396C6.34872 9.31229 6.12961 9.35809 5.90775 9.35809C5.68589 9.35809 5.46678 9.31229 5.26613 9.22396L1.77525 7.51283V11.5455L5.26613 13.2493C5.43937 13.3471 5.62982 13.4154 5.82863 13.4512L5.9085 13.4558C6.12668 13.4357 6.3373 13.3704 6.525 13.2647L10.05 11.5301V7.50898H10.0478ZM0.585375 11.3642C0.568078 11.6186 0.612957 11.8734 0.716625 12.1093C0.805331 12.2602 0.936232 12.3857 1.09538 12.4726L1.10662 12.4796C1.1505 12.5069 1.1985 12.5356 1.25663 12.5692L1.32563 12.6081L1.53675 12.7267L1.23375 13.1922L0.9975 13.0592L0.95775 13.0365C0.889125 12.9973 0.8325 12.9637 0.779625 12.9315C0.214875 12.5769 0.004125 12.1912 0 11.3887V11.3642H0.585H0.585375ZM5.61412 5.05096C5.58845 5.05933 5.5634 5.06926 5.53912 5.08071L1.82137 6.90524L1.81013 6.91119H1.80675L1.81275 6.91469L1.82137 6.91889L5.53988 8.74341C5.56405 8.75505 5.58912 8.76499 5.61487 8.77316L5.61412 5.05096ZM6.201 5.05096V8.77456C6.22675 8.76639 6.25182 8.75645 6.276 8.74481L9.9945 6.92029L10.0057 6.91434H10.0091L10.0031 6.91154L9.9945 6.90699L6.276 5.08246C6.25182 5.07083 6.22675 5.06088 6.201 5.05271V5.05096ZM10.0478 3.04479L6.71025 4.68137L10.0478 6.31795V3.04304V3.04479ZM1.77525 3.04864V6.3141L5.103 4.68137L1.77525 3.04864ZM6.27525 0.61617C6.15894 0.569406 6.03364 0.545286 5.907 0.545286C5.78036 0.545286 5.65506 0.569406 5.53875 0.61617L1.821 2.4393L1.80975 2.4449L1.80638 2.44665L1.81238 2.4498L1.821 2.45365L5.5395 4.27817C5.65571 4.32526 5.78106 4.34956 5.90775 4.34956C6.03444 4.34956 6.15979 4.32526 6.276 4.27817L9.9945 2.45365L10.0057 2.4498L10.0091 2.44805L10.0031 2.4449L9.9945 2.4407L6.27525 0.61617ZM10.5968 0.816717L10.833 0.949365L10.875 0.970015C10.9432 1.00921 10.9999 1.04316 11.0528 1.07501C11.6179 1.42851 11.8282 1.81455 11.8328 2.61709V2.64159H11.2459C11.2632 2.38703 11.2183 2.13212 11.1146 1.8961C11.0258 1.74528 10.8948 1.61983 10.7355 1.53316L10.7242 1.52616C10.6807 1.49851 10.6327 1.47016 10.5743 1.43656L10.5056 1.39981L10.2945 1.28151L10.5975 0.816017L10.5968 0.816717Z" fill="white"/>
+  </svg>
+`

packages/core/src/icons/ethereum.ts

@@ -0,0 +1,9 @@
+export default `
+  <svg width="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C24.8366 32 32 24.8366 32 16Z" fill="#04795B"/>
+    <path d="M11.6529 17.4492C12.2831 17.4492 12.8648 17.2392 13.3334 16.8758L9.4877 13.0316C9.12413 13.4919 8.9141 14.0734 8.9141 14.7114C8.906 16.2216 10.134 17.4492 11.6529 17.4492Z" fill="#EFEFEF"/>
+    <path d="M23.0931 14.7033C23.0931 14.0734 22.8831 13.4919 22.5195 13.0234L18.6738 16.8677C19.1343 17.2311 19.716 17.4411 20.3543 17.4411C21.8651 17.4492 23.0931 16.2216 23.0931 14.7033Z" fill="#EFEFEF"/>
+    <path d="M25.0322 10.528L23.3275 12.2321C23.8931 12.9105 24.2324 13.7666 24.2324 14.7195C24.2324 16.8597 22.4954 18.5961 20.3544 18.5961C19.4092 18.5961 18.5447 18.2569 17.866 17.6915L15.9998 19.5571L14.1335 17.6915C13.4549 18.2569 12.5985 18.5961 11.6451 18.5961C9.50416 18.5961 7.7672 16.8597 7.7672 14.7195C7.7672 13.7746 8.10651 12.9105 8.67206 12.2321L7.79947 11.3599L6.96736 10.528C5.99787 12.1271 5.44043 13.9927 5.44043 15.9956C5.44043 21.8265 10.1667 26.543 15.9917 26.543C21.8167 26.543 26.543 21.8185 26.543 15.9956C26.5591 13.9846 26.0017 12.119 25.0322 10.528Z" fill="#EFEFEF"/>
+    <path d="M23.6338 8.71084C21.7191 6.6999 19.0045 5.44 15.9991 5.44C12.9937 5.44 10.2872 6.6999 8.36435 8.71084C8.10584 8.98545 7.85539 9.27617 7.62109 9.575L15.991 17.9419L24.361 9.56695C24.1509 9.27617 23.9005 8.97734 23.6338 8.71084ZM15.9991 6.81297C18.4713 6.81297 20.7658 7.76593 22.4866 9.50231L15.9991 15.9874L9.5116 9.50231C11.2405 7.76593 13.5269 6.81297 15.9991 6.81297Z" fill="#EFEFEF"/>
+  </svg>
+`