From 61fba24bffe5a185cab322a687b928c318378c20 Mon Sep 17 00:00:00 2001
From: Taneeya <2240351540@qq.com>
Date: Fri, 15 Oct 2021 13:42:03 +0800
Subject: [PATCH] add the link to web

---
 components/Introduction/Introduction.module.scss |  5 ++++-
 components/Introduction/Introduction.tsx         | 16 ++++++++++++++++
 public/images/web_icon.svg                       | 10 ++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 public/images/web_icon.svg

diff --git a/components/Introduction/Introduction.module.scss b/components/Introduction/Introduction.module.scss
index 5bc8151..411819c 100644
--- a/components/Introduction/Introduction.module.scss
+++ b/components/Introduction/Introduction.module.scss
@@ -157,7 +157,7 @@
   background: #000000;
   box-shadow: 0px 12px 36px rgba(76, 191, 122, 0.08);
   border-radius: 12px;
-  margin-right: 24px;
+  margin-right: 20px;
 
   @media (max-width: $media-md) {
     &:nth-child(2) {
@@ -166,6 +166,9 @@
     &:nth-child(3) {
       display: none;
     }
+    &:nth-child(4) {
+      display: none;
+    }
     &:last-child {
       display: none;
     }
diff --git a/components/Introduction/Introduction.tsx b/components/Introduction/Introduction.tsx
index 78f0604..3a492bc 100644
--- a/components/Introduction/Introduction.tsx
+++ b/components/Introduction/Introduction.tsx
@@ -73,6 +73,15 @@ export function Introduction() {
     }
   };
 
+  const handleOpenWeb = () => {
+    if (theme !== 'dark') {
+      window.open(
+        'https://wallet.clover.finance/',
+        '_blank',
+      );
+    }
+  };
+
   return (
     <>
       <div className={styles.textOuter}>
@@ -122,6 +131,13 @@ export function Introduction() {
               <img width={24} height={24} src='/images/chrome_icon.svg' alt='' />
               <span>Add to Chrome</span>
             </Button>
+            <Button
+              className={styles.btn_item}
+              onClick={handleOpenWeb}
+            >
+              <img width={24} height={24} src='/images/web_icon.svg' alt='' />
+              <span>Open web wallet</span>
+            </Button>
             <Button className={cn(styles.btn_item, styles.btn_code)}>
               <img width={24} height={24} src='/images/code_icon.svg' alt='' />
               <div>
diff --git a/public/images/web_icon.svg b/public/images/web_icon.svg
new file mode 100644
index 0000000..02c1771
--- /dev/null
+++ b/public/images/web_icon.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1403:22)">
+<path d="M11.7553 2C6.3617 2 2 6.3617 2 11.7553C2 17.1383 6.3617 21.5106 11.7553 21.5106C17.1489 21.5106 21.5106 17.1489 21.5106 11.7553C21.5 6.3617 17.1383 2 11.7553 2ZM16.0957 8.35106L14.5532 14.0106C14.4787 14.2766 14.2766 14.4787 14.0106 14.5532L8.35106 16.0957C7.93617 16.2021 7.51064 15.9681 7.40425 15.5532C7.37234 15.4149 7.37234 15.2766 7.40425 15.1489L8.94681 9.48936C9.02128 9.2234 9.2234 9.02128 9.48936 8.94681L15.1489 7.40425C15.5638 7.29787 15.9894 7.53191 16.0957 7.94681C16.1383 8.08511 16.1383 8.2234 16.0957 8.35106Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1403:22">
+<rect width="19.5" height="19.5" fill="white" transform="translate(2 2)"/>
+</clipPath>
+</defs>
+</svg>