From 8ff8c11e4d1ba7e00c7cc18fc37f9282cf9296e3 Mon Sep 17 00:00:00 2001
From: Vasiliy Yorkin <vasiliy.yorkin@gmail.com>
Date: Thu, 15 Feb 2024 17:11:59 +0300
Subject: [PATCH 1/3] Add new links and better dapp connection icon

---
 .../ConnectionHeader/ConnectionHeader.tsx     |  4 +-
 src/ui/pages/Settings/Settings.tsx            | 68 ++++++++++++++++++-
 2 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/src/ui/pages/Overview/ConnectionHeader/ConnectionHeader.tsx b/src/ui/pages/Overview/ConnectionHeader/ConnectionHeader.tsx
index eeb9e087f..8ad3c1462 100644
--- a/src/ui/pages/Overview/ConnectionHeader/ConnectionHeader.tsx
+++ b/src/ui/pages/Overview/ConnectionHeader/ConnectionHeader.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import SettingsIcon from 'jsx:src/ui/assets/filters.svg';
+import GlobeIcon from 'jsx:src/ui/assets/globe.svg';
 import { invariant } from 'src/shared/invariant';
 import { PauseInjectionControl } from 'src/ui/components/PauseInjection';
 import { PausedHeader, usePausedData } from 'src/ui/components/PauseInjection';
@@ -138,7 +138,7 @@ export function ConnectionHeader() {
                 }}
                 disabled={!tabData}
               >
-                <SettingsIcon
+                <GlobeIcon
                   style={{
                     display: 'block',
                     width: 20,
diff --git a/src/ui/pages/Settings/Settings.tsx b/src/ui/pages/Settings/Settings.tsx
index 8d57033f7..2cfebd2c8 100644
--- a/src/ui/pages/Settings/Settings.tsx
+++ b/src/ui/pages/Settings/Settings.tsx
@@ -9,7 +9,7 @@ import { ViewSuspense } from 'src/ui/components/ViewSuspense';
 import { accountPublicRPCPort } from 'src/ui/shared/channels';
 import { HStack } from 'src/ui/ui-kit/HStack';
 import { Media } from 'src/ui/ui-kit/Media';
-import { SurfaceList } from 'src/ui/ui-kit/SurfaceList';
+import { SurfaceItemAnchor, SurfaceList } from 'src/ui/ui-kit/SurfaceList';
 import { Toggle } from 'src/ui/ui-kit/Toggle';
 import { UIText } from 'src/ui/ui-kit/UIText';
 import { VStack } from 'src/ui/ui-kit/VStack';
@@ -17,6 +17,9 @@ import WalletIcon from 'jsx:src/ui/assets/wallet.svg';
 import LockIcon from 'jsx:src/ui/assets/lock.svg';
 import GlobeIcon from 'jsx:src/ui/assets/globe.svg';
 import SettingsIcon from 'jsx:src/ui/assets/settings.svg';
+import QuestionIcon from 'jsx:src/ui/assets/question-hint.svg';
+import InfoIcon from 'jsx:src/ui/assets/info.svg';
+import ZerionLogoIcon from 'jsx:src/ui/assets/zerion-logo.svg';
 import DarkModeLampIcon from 'jsx:src/ui/assets/dark-mode-lamp.svg';
 import NetworksIcon from 'jsx:src/ui/assets/network.svg';
 import SecurityIcon from 'jsx:src/ui/assets/security.svg';
@@ -126,6 +129,69 @@ function SettingsMain() {
             },
             {
               key: 8,
+              pad: false,
+              style: { paddingInline: 0 },
+              component: (
+                <SurfaceItemAnchor
+                  href="http://zerion.io/premium"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <AngleRightRow kind="link">
+                    <HStack gap={8} alignItems="center">
+                      <ZerionLogoIcon
+                        style={{
+                          width: 24,
+                          height: 24,
+                          color: 'transparent',
+                        }}
+                      />
+                      <UIText kind="body/regular">Zerion Premium</UIText>
+                    </HStack>
+                  </AngleRightRow>
+                </SurfaceItemAnchor>
+              ),
+            },
+            {
+              key: 9,
+              pad: false,
+              style: { paddingInline: 0 },
+              component: (
+                <SurfaceItemAnchor
+                  href="https://app.getbeamer.com/zerion/en?category=extension"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <AngleRightRow kind="link">
+                    <HStack gap={8} alignItems="center">
+                      <InfoIcon />
+                      <UIText kind="body/regular">What's New</UIText>
+                    </HStack>
+                  </AngleRightRow>
+                </SurfaceItemAnchor>
+              ),
+            },
+            {
+              key: 10,
+              pad: false,
+              style: { paddingInline: 0 },
+              component: (
+                <SurfaceItemAnchor
+                  href="https://help.zerion.io/en/collections/5525626-zerion-extension"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <AngleRightRow kind="link">
+                    <HStack gap={8} alignItems="center">
+                      <QuestionIcon style={{ width: 24, height: 24 }} />
+                      <UIText kind="body/regular">Help & Support</UIText>
+                    </HStack>
+                  </AngleRightRow>
+                </SurfaceItemAnchor>
+              ),
+            },
+            {
+              key: 11,
               onClick: async () => {
                 await logout.mutateAsync();
                 navigate('/login');

From 119555e3187fd48a8eb6a03c325d6e12502ef59c Mon Sep 17 00:00:00 2001
From: Vasiliy Yorkin <vasiliy.yorkin@gmail.com>
Date: Thu, 15 Feb 2024 18:53:14 +0300
Subject: [PATCH 2/3] Update icons

---
 src/ui/assets/premium.svg          |  5 +++++
 src/ui/pages/Settings/Settings.tsx | 14 ++++----------
 2 files changed, 9 insertions(+), 10 deletions(-)
 create mode 100644 src/ui/assets/premium.svg

diff --git a/src/ui/assets/premium.svg b/src/ui/assets/premium.svg
new file mode 100644
index 000000000..24b19d5bc
--- /dev/null
+++ b/src/ui/assets/premium.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.43597 6.18404C4 7.03968 4 8.15979 4 10.4V13.6C4 15.8402 4 16.9603 4.43597 17.816C4.81947 18.5686 5.43139 19.1805 6.18404 19.564C7.03968 20 8.15979 20 10.4 20H13.6C15.8402 20 16.9603 20 17.816 19.564C18.5686 19.1805 19.1805 18.5686 19.564 17.816C20 16.9603 20 15.8402 20 13.6V10.4C20 8.15979 20 7.03968 19.564 6.18404C19.1805 5.43139 18.5686 4.81947 17.816 4.43597C16.9603 4 15.8402 4 13.6 4H10.4C8.15979 4 7.03968 4 6.18404 4.43597C5.43139 4.81947 4.81947 5.43139 4.43597 6.18404Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 8.2682 1 6.4023 1.69322 4.96281C2.38127 3.53406 3.53406 2.38127 4.96281 1.69322C6.4023 1 8.2682 1 12 1C15.7318 1 17.5977 1 19.0372 1.69322C20.4659 2.38127 21.6187 3.53406 22.3068 4.96281C23 6.4023 23 8.2682 23 12C23 15.7318 23 17.5977 22.3068 19.0372C21.6187 20.4659 20.4659 21.6187 19.0372 22.3068C17.5977 23 15.7318 23 12 23C8.2682 23 6.4023 23 4.96281 22.3068C3.53406 21.6187 2.38127 20.4659 1.69322 19.0372C1 17.5977 1 15.7318 1 12ZM12 21.4C10.109 21.4 8.78236 21.3989 7.74599 21.3182C6.72699 21.2388 6.12332 21.0898 5.65703 20.8652C4.55485 20.3344 3.66555 19.4452 3.13477 18.343C2.91021 17.8767 2.76117 17.273 2.68182 16.254C2.60113 15.2176 2.6 13.891 2.6 12C2.6 10.109 2.60113 8.78236 2.68182 7.74599C2.76117 6.72699 2.91021 6.12332 3.13477 5.65703C3.66555 4.55485 4.55485 3.66555 5.65703 3.13477C6.12332 2.91021 6.72699 2.76117 7.74599 2.68182C8.78236 2.60113 10.109 2.6 12 2.6C13.891 2.6 15.2176 2.60113 16.254 2.68182C17.273 2.76117 17.8767 2.91021 18.343 3.13477C19.4452 3.66555 20.3344 4.55485 20.8652 5.65703C21.0898 6.12332 21.2388 6.72699 21.3182 7.74599C21.3989 8.78236 21.4 10.109 21.4 12C21.4 13.891 21.3989 15.2176 21.3182 16.254C21.2388 17.273 21.0898 17.8767 20.8652 18.343C20.3344 19.4452 19.4452 20.3344 18.343 20.8652C17.8767 21.0898 17.273 21.2388 16.254 21.3182C15.2176 21.3989 13.891 21.4 12 21.4Z" fill="currentColor"/>
+<path d="M13.3921 9.74366L12.3586 8.23494C12.1441 7.92169 11.682 7.92169 11.4674 8.23494L10.434 9.74366C10.3638 9.84621 10.2604 9.92139 10.1412 9.95655L8.38777 10.4737C8.0237 10.5811 7.88092 11.0208 8.11238 11.3218L9.22711 12.7714C9.30288 12.8699 9.34238 12.9915 9.33897 13.1158L9.28871 14.9441C9.27827 15.3238 9.65208 15.5955 10.0097 15.4683L11.7321 14.8555C11.8491 14.8138 11.977 14.8138 12.094 14.8555L13.8164 15.4683C14.174 15.5955 14.5478 15.3238 14.5374 14.9441L14.4871 13.1158C14.4837 12.9915 14.5232 12.8699 14.599 12.7714L15.7137 11.3218C15.9452 11.0208 15.8024 10.5811 15.4383 10.4737L13.6849 9.95655C13.5657 9.92139 13.4623 9.84621 13.3921 9.74366Z" fill="white"/>
+</svg>
diff --git a/src/ui/pages/Settings/Settings.tsx b/src/ui/pages/Settings/Settings.tsx
index 2cfebd2c8..26ed51bbc 100644
--- a/src/ui/pages/Settings/Settings.tsx
+++ b/src/ui/pages/Settings/Settings.tsx
@@ -18,8 +18,8 @@ import LockIcon from 'jsx:src/ui/assets/lock.svg';
 import GlobeIcon from 'jsx:src/ui/assets/globe.svg';
 import SettingsIcon from 'jsx:src/ui/assets/settings.svg';
 import QuestionIcon from 'jsx:src/ui/assets/question-hint.svg';
-import InfoIcon from 'jsx:src/ui/assets/info.svg';
-import ZerionLogoIcon from 'jsx:src/ui/assets/zerion-logo.svg';
+import RocketIcon from 'jsx:src/ui/assets/rocket-outline.svg';
+import PremiumIcon from 'jsx:src/ui/assets/premium.svg';
 import DarkModeLampIcon from 'jsx:src/ui/assets/dark-mode-lamp.svg';
 import NetworksIcon from 'jsx:src/ui/assets/network.svg';
 import SecurityIcon from 'jsx:src/ui/assets/security.svg';
@@ -139,13 +139,7 @@ function SettingsMain() {
                 >
                   <AngleRightRow kind="link">
                     <HStack gap={8} alignItems="center">
-                      <ZerionLogoIcon
-                        style={{
-                          width: 24,
-                          height: 24,
-                          color: 'transparent',
-                        }}
-                      />
+                      <PremiumIcon style={{ color: 'var(--black)' }} />
                       <UIText kind="body/regular">Zerion Premium</UIText>
                     </HStack>
                   </AngleRightRow>
@@ -164,7 +158,7 @@ function SettingsMain() {
                 >
                   <AngleRightRow kind="link">
                     <HStack gap={8} alignItems="center">
-                      <InfoIcon />
+                      <RocketIcon />
                       <UIText kind="body/regular">What's New</UIText>
                     </HStack>
                   </AngleRightRow>

From 624e9b556722784f29460f846ff3d3004024f3dc Mon Sep 17 00:00:00 2001
From: Vasiliy Yorkin <vasiliy.yorkin@gmail.com>
Date: Mon, 19 Feb 2024 12:46:28 +0300
Subject: [PATCH 3/3] Update premium icon

---
 src/ui/assets/premium.svg          | 16 ++++++++++++++--
 src/ui/pages/Settings/Settings.tsx |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/ui/assets/premium.svg b/src/ui/assets/premium.svg
index 24b19d5bc..6349f335a 100644
--- a/src/ui/assets/premium.svg
+++ b/src/ui/assets/premium.svg
@@ -1,5 +1,17 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.43597 6.18404C4 7.03968 4 8.15979 4 10.4V13.6C4 15.8402 4 16.9603 4.43597 17.816C4.81947 18.5686 5.43139 19.1805 6.18404 19.564C7.03968 20 8.15979 20 10.4 20H13.6C15.8402 20 16.9603 20 17.816 19.564C18.5686 19.1805 19.1805 18.5686 19.564 17.816C20 16.9603 20 15.8402 20 13.6V10.4C20 8.15979 20 7.03968 19.564 6.18404C19.1805 5.43139 18.5686 4.81947 17.816 4.43597C16.9603 4 15.8402 4 13.6 4H10.4C8.15979 4 7.03968 4 6.18404 4.43597C5.43139 4.81947 4.81947 5.43139 4.43597 6.18404Z" fill="currentColor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 8.2682 1 6.4023 1.69322 4.96281C2.38127 3.53406 3.53406 2.38127 4.96281 1.69322C6.4023 1 8.2682 1 12 1C15.7318 1 17.5977 1 19.0372 1.69322C20.4659 2.38127 21.6187 3.53406 22.3068 4.96281C23 6.4023 23 8.2682 23 12C23 15.7318 23 17.5977 22.3068 19.0372C21.6187 20.4659 20.4659 21.6187 19.0372 22.3068C17.5977 23 15.7318 23 12 23C8.2682 23 6.4023 23 4.96281 22.3068C3.53406 21.6187 2.38127 20.4659 1.69322 19.0372C1 17.5977 1 15.7318 1 12ZM12 21.4C10.109 21.4 8.78236 21.3989 7.74599 21.3182C6.72699 21.2388 6.12332 21.0898 5.65703 20.8652C4.55485 20.3344 3.66555 19.4452 3.13477 18.343C2.91021 17.8767 2.76117 17.273 2.68182 16.254C2.60113 15.2176 2.6 13.891 2.6 12C2.6 10.109 2.60113 8.78236 2.68182 7.74599C2.76117 6.72699 2.91021 6.12332 3.13477 5.65703C3.66555 4.55485 4.55485 3.66555 5.65703 3.13477C6.12332 2.91021 6.72699 2.76117 7.74599 2.68182C8.78236 2.60113 10.109 2.6 12 2.6C13.891 2.6 15.2176 2.60113 16.254 2.68182C17.273 2.76117 17.8767 2.91021 18.343 3.13477C19.4452 3.66555 20.3344 4.55485 20.8652 5.65703C21.0898 6.12332 21.2388 6.72699 21.3182 7.74599C21.3989 8.78236 21.4 10.109 21.4 12C21.4 13.891 21.3989 15.2176 21.3182 16.254C21.2388 17.273 21.0898 17.8767 20.8652 18.343C20.3344 19.4452 19.4452 20.3344 18.343 20.8652C17.8767 21.0898 17.273 21.2388 16.254 21.3182C15.2176 21.3989 13.891 21.4 12 21.4Z" fill="currentColor"/>
+<path d="M4.43597 6.18404C4 7.03968 4 8.15979 4 10.4V13.6C4 15.8402 4 16.9603 4.43597 17.816C4.81947 18.5686 5.43139 19.1805 6.18404 19.564C7.03968 20 8.15979 20 10.4 20H13.6C15.8402 20 16.9603 20 17.816 19.564C18.5686 19.1805 19.1805 18.5686 19.564 17.816C20 16.9603 20 15.8402 20 13.6V10.4C20 8.15979 20 7.03968 19.564 6.18404C19.1805 5.43139 18.5686 4.81947 17.816 4.43597C16.9603 4 15.8402 4 13.6 4H10.4C8.15979 4 7.03968 4 6.18404 4.43597C5.43139 4.81947 4.81947 5.43139 4.43597 6.18404Z" fill="url(#paint0_linear_984_21913)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 8.2682 1 6.4023 1.69322 4.96281C2.38127 3.53406 3.53406 2.38127 4.96281 1.69322C6.4023 1 8.2682 1 12 1C15.7318 1 17.5977 1 19.0372 1.69322C20.4659 2.38127 21.6187 3.53406 22.3068 4.96281C23 6.4023 23 8.2682 23 12C23 15.7318 23 17.5977 22.3068 19.0372C21.6187 20.4659 20.4659 21.6187 19.0372 22.3068C17.5977 23 15.7318 23 12 23C8.2682 23 6.4023 23 4.96281 22.3068C3.53406 21.6187 2.38127 20.4659 1.69322 19.0372C1 17.5977 1 15.7318 1 12ZM12 21.4C10.109 21.4 8.78236 21.3989 7.74599 21.3182C6.72699 21.2388 6.12332 21.0898 5.65703 20.8652C4.55485 20.3344 3.66555 19.4452 3.13477 18.343C2.91021 17.8767 2.76117 17.273 2.68182 16.254C2.60113 15.2176 2.6 13.891 2.6 12C2.6 10.109 2.60113 8.78236 2.68182 7.74599C2.76117 6.72699 2.91021 6.12332 3.13477 5.65703C3.66555 4.55485 4.55485 3.66555 5.65703 3.13477C6.12332 2.91021 6.72699 2.76117 7.74599 2.68182C8.78236 2.60113 10.109 2.6 12 2.6C13.891 2.6 15.2176 2.60113 16.254 2.68182C17.273 2.76117 17.8767 2.91021 18.343 3.13477C19.4452 3.66555 20.3344 4.55485 20.8652 5.65703C21.0898 6.12332 21.2388 6.72699 21.3182 7.74599C21.3989 8.78236 21.4 10.109 21.4 12C21.4 13.891 21.3989 15.2176 21.3182 16.254C21.2388 17.273 21.0898 17.8767 20.8652 18.343C20.3344 19.4452 19.4452 20.3344 18.343 20.8652C17.8767 21.0898 17.273 21.2388 16.254 21.3182C15.2176 21.3989 13.891 21.4 12 21.4Z" fill="url(#paint1_linear_984_21913)"/>
 <path d="M13.3921 9.74366L12.3586 8.23494C12.1441 7.92169 11.682 7.92169 11.4674 8.23494L10.434 9.74366C10.3638 9.84621 10.2604 9.92139 10.1412 9.95655L8.38777 10.4737C8.0237 10.5811 7.88092 11.0208 8.11238 11.3218L9.22711 12.7714C9.30288 12.8699 9.34238 12.9915 9.33897 13.1158L9.28871 14.9441C9.27827 15.3238 9.65208 15.5955 10.0097 15.4683L11.7321 14.8555C11.8491 14.8138 11.977 14.8138 12.094 14.8555L13.8164 15.4683C14.174 15.5955 14.5478 15.3238 14.5374 14.9441L14.4871 13.1158C14.4837 12.9915 14.5232 12.8699 14.599 12.7714L15.7137 11.3218C15.9452 11.0208 15.8024 10.5811 15.4383 10.4737L13.6849 9.95655C13.5657 9.92139 13.4623 9.84621 13.3921 9.74366Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_984_21913" x1="4" y1="4" x2="20.2136" y2="4.2616" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2F2FD2"/>
+<stop offset="0.485628" stop-color="#804CBA"/>
+<stop offset="1" stop-color="#FF6F7D"/>
+</linearGradient>
+<linearGradient id="paint1_linear_984_21913" x1="4" y1="4" x2="20.2136" y2="4.2616" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2F2FD2"/>
+<stop offset="0.485628" stop-color="#804CBA"/>
+<stop offset="1" stop-color="#FF6F7D"/>
+</linearGradient>
+</defs>
 </svg>
diff --git a/src/ui/pages/Settings/Settings.tsx b/src/ui/pages/Settings/Settings.tsx
index 26ed51bbc..f547fb7cd 100644
--- a/src/ui/pages/Settings/Settings.tsx
+++ b/src/ui/pages/Settings/Settings.tsx
@@ -139,7 +139,7 @@ function SettingsMain() {
                 >
                   <AngleRightRow kind="link">
                     <HStack gap={8} alignItems="center">
-                      <PremiumIcon style={{ color: 'var(--black)' }} />
+                      <PremiumIcon />
                       <UIText kind="body/regular">Zerion Premium</UIText>
                     </HStack>
                   </AngleRightRow>