feat: add reinstall button (#90)

* feat: add reinstall button * feat: change reinstall button position * revert download changes --------- Co-authored-by: vvvvvv1vvvvvv <[email protected]>
RabbyHub · Dec 20, 2024 · 0dd6e0e · 0dd6e0e
1 parent 020040d
commit 0dd6e0e
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 1 deletion.
diff --git a/src/components/Download/style.module.scss b/src/components/Download/style.module.scss
@@ -498,7 +498,6 @@ $tips_panel_offset_mobile: 16px;
     font-size: 22px;
   }
 
-
   @if $downloadCardCount >= 3 {
     .panelButtonGroupApp {
       gap: 10px;

diff --git a/src/page/uninstalled/index.tsx b/src/page/uninstalled/index.tsx
@@ -7,6 +7,7 @@ import { ga } from "../../ga";
 import { useMutation } from "react-query";
 import { apiReady } from "../../service";
 import toast, { Toaster } from "react-hot-toast";
+import { IsFirefox } from "../../constant";
 
 export const Uninstalled = () => {
   const [input, setInput] = useState("");
@@ -129,6 +130,29 @@ export const Uninstalled = () => {
           Skip
         </div>
       </div>
+      <div className={styles.installBtnContainer}>
+        {IsFirefox ? (
+          <a
+            href="https://addons.mozilla.org/firefox/addon/rabby-wallet/"
+            target="_blank"
+            rel="noreferrer"
+            className={styles.installBtn}
+          >
+            <img src="/assets/images/firefox-2x.png" alt="" />
+            Reinstall Extension
+          </a>
+        ) : (
+          <a
+            href="https://chrome.google.com/webstore/detail/rabby/acmacodkjbdgmoleebolmdjonilkdbch"
+            target="_blank"
+            rel="noreferrer"
+            className={styles.installBtn}
+          >
+            <img src="/assets/images/chrome-2x.png" alt="" />
+            Reinstall Extension
+          </a>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/page/uninstalled/style.module.css b/src/page/uninstalled/style.module.css
@@ -7,6 +7,8 @@
   align-items: center;
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto,
     sans-serif;
+
+  padding: 40px 0;
 }
 
 .box {
@@ -185,3 +187,38 @@
   width: 40px;
   height: 40px;
 }
+
+.installBtnContainer {
+  position: fixed;
+  top: 40px;
+  right: 40px;
+}
+
+.installBtn {
+  display: inline-flex;
+  padding: 14px 40px;
+  justify-content: center;
+  align-items: center;
+
+  gap: 8px;
+  border-radius: 16px;
+  background-color: #fff;
+
+  color: var(--r-neutral-title1, #192945);
+  text-align: center;
+  font-size: 18px;
+  line-height: 21px;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.installBtn:hover {
+  border-radius: 16px;
+  background: var(--r-neutral-bg1, #fff);
+  box-shadow: 0px 4px 16px 0px rgba(33, 48, 138, 0.32);
+}
+
+.installBtn > img {
+  width: 28px;
+  height: 28px;
+}