From 017b9f9c815a104efd89e63e91af65ab84791130 Mon Sep 17 00:00:00 2001
From: hyifeng <hyifeng@gmail.com>
Date: Wed, 6 Dec 2023 18:08:28 +0800
Subject: [PATCH] Update style of wallet extension select view (#21)

* Update style of wallet extension select view

* Update

---------

Co-authored-by: notset <notset@email.com>
---
 projects/16-open-qf/src/site/.gitignore       |  3 +
 .../connectWalletPopup/selectWalletPopup.jsx  | 50 +--------------
 .../connectWalletPopup/walletExtension.jsx    | 61 +++++++++++++++++++
 .../site/components/layouts/detailLayout.jsx  | 10 +++
 .../src/site/imgs/icons/arrow-caret-right.svg | 10 +++
 5 files changed, 86 insertions(+), 48 deletions(-)
 create mode 100644 projects/16-open-qf/src/site/components/connect/connectWalletPopup/walletExtension.jsx
 create mode 100644 projects/16-open-qf/src/site/components/layouts/detailLayout.jsx
 create mode 100644 projects/16-open-qf/src/site/imgs/icons/arrow-caret-right.svg

diff --git a/projects/16-open-qf/src/site/.gitignore b/projects/16-open-qf/src/site/.gitignore
index 9a89693eb..b7ba453de 100644
--- a/projects/16-open-qf/src/site/.gitignore
+++ b/projects/16-open-qf/src/site/.gitignore
@@ -43,3 +43,6 @@ next-env.d.ts
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+.yalc
+yalc.lock
diff --git a/projects/16-open-qf/src/site/components/connect/connectWalletPopup/selectWalletPopup.jsx b/projects/16-open-qf/src/site/components/connect/connectWalletPopup/selectWalletPopup.jsx
index 4cb48b2ae..22da28a20 100644
--- a/projects/16-open-qf/src/site/components/connect/connectWalletPopup/selectWalletPopup.jsx
+++ b/projects/16-open-qf/src/site/components/connect/connectWalletPopup/selectWalletPopup.jsx
@@ -1,4 +1,3 @@
-import tw from "tailwind-styled-components";
 import Modal from "@osn/common-ui/es/Modal";
 import {
   polkadotJs,
@@ -7,55 +6,10 @@ import {
   polkagate,
   nova,
 } from "./constants";
-import useInjectedWeb3 from "./useInjectedWeb3";
-import { useIsMounted } from "@osn/common";
-import { useEffect, useState } from "react";
+import WalletExtension from "./walletExtension";
 
 const Wallets = [polkadotJs, subWalletJs, talisman, polkagate, nova];
 
-const WalletExtensionWrapper = tw.div`
-  cursor-pointer
-  flex
-  justify-center
-  items-center
-  py-[12px]
-  px-[24px]
-  border
-  border-stroke-action-default
-  text-text-primary
-  text14medium
-`;
-
-function WalletExtension({ wallet, onClick }) {
-  const [installed, setInstalled] = useState(null);
-  const { loading: loadingInjectedWeb3, injectedWeb3 } = useInjectedWeb3();
-  const isMounted = useIsMounted();
-  const Logo = wallet.logo;
-
-  useEffect(() => {
-    if (loadingInjectedWeb3) {
-      return;
-    }
-
-    if (isMounted.current) {
-      setInstalled(!!injectedWeb3?.[wallet?.extensionName]);
-    }
-  }, [loadingInjectedWeb3, injectedWeb3, wallet?.extensionName, isMounted]);
-
-  if (!installed) {
-    return null;
-  }
-
-  return (
-    <WalletExtensionWrapper onClick={() => onClick(wallet)}>
-      <div className="flex items-center gap-[8px]">
-        <Logo className={wallet.title} alt={wallet.title} />
-        <span className="wallet-title">{wallet.title}</span>
-      </div>
-    </WalletExtensionWrapper>
-  );
-}
-
 function WalletsList({ setWalletExtensionType }) {
   return (
     <div className="space-y-2">
@@ -80,7 +34,7 @@ export default function SelectWalletPopup({
   return (
     <Modal open={open} setOpen={setOpen} footer={false}>
       <div className="flex flex-col gap-[20px]">
-        <h2 className="text-2xl font-bold">Connect Wallet</h2>
+        <span className="text16semibold text-text-primary">Connect Wallet</span>
         <WalletsList setWalletExtensionType={setWalletExtensionType} />
       </div>
     </Modal>
diff --git a/projects/16-open-qf/src/site/components/connect/connectWalletPopup/walletExtension.jsx b/projects/16-open-qf/src/site/components/connect/connectWalletPopup/walletExtension.jsx
new file mode 100644
index 000000000..9712dcade
--- /dev/null
+++ b/projects/16-open-qf/src/site/components/connect/connectWalletPopup/walletExtension.jsx
@@ -0,0 +1,61 @@
+import tw from "tailwind-styled-components";
+import useInjectedWeb3 from "./useInjectedWeb3";
+import { useIsMounted } from "@osn/common";
+import { useEffect, useState } from "react";
+import { ReactComponent as ArrowCaretRight } from "@/imgs/icons/arrow-caret-right.svg";
+import { LoadingIcon } from "@osn/common-ui";
+
+const Wrapper = tw.div`
+  flex
+  justify-between
+  items-center
+  py-[12px]
+  px-[12px]
+  border
+  border-stroke-action-default
+  ${(p) =>
+    p.disabled
+      ? "border-none bg-fill-bg-tertiary pointer-events-none"
+      : "cursor-pointer"}
+`;
+
+const ArrowCaretRightIcon = tw(ArrowCaretRight)`
+  [&_path]:fill-text-secondary
+`;
+
+export default function WalletExtension({ wallet, onClick }) {
+  const [installed, setInstalled] = useState(null);
+  const { loading: loadingInjectedWeb3, injectedWeb3 } = useInjectedWeb3();
+  const isMounted = useIsMounted();
+  const Logo = wallet.logo;
+
+  useEffect(() => {
+    if (loadingInjectedWeb3) {
+      return;
+    }
+
+    if (isMounted.current) {
+      setInstalled(!!injectedWeb3?.[wallet?.extensionName]);
+    }
+  }, [loadingInjectedWeb3, injectedWeb3, wallet?.extensionName, isMounted]);
+
+  const disabled = loadingInjectedWeb3 || !installed;
+
+  return (
+    <Wrapper disabled={disabled} onClick={() => onClick(wallet)}>
+      <div className="flex items-center gap-[8px]">
+        <Logo className={wallet.title} alt={wallet.title} />
+        <span className="text-text-primary text14medium">{wallet.title}</span>
+      </div>
+      <div>
+        {loadingInjectedWeb3 ? (
+          <LoadingIcon width={24} height={24} />
+        ) : installed ? (
+          <ArrowCaretRightIcon width={24} height={24} />
+        ) : (
+          <span className="text12medium text-text-tertiary">Not installed</span>
+        )}
+      </div>
+    </Wrapper>
+  );
+}
diff --git a/projects/16-open-qf/src/site/components/layouts/detailLayout.jsx b/projects/16-open-qf/src/site/components/layouts/detailLayout.jsx
new file mode 100644
index 000000000..fe4b9fb4b
--- /dev/null
+++ b/projects/16-open-qf/src/site/components/layouts/detailLayout.jsx
@@ -0,0 +1,10 @@
+import MainContainer from "../containers/main";
+import AppLayout from "./appLayout";
+
+export default function DetailLayout({ backdrop, children, ...props }) {
+  return (
+    <AppLayout backdrop={backdrop} {...props}>
+      <MainContainer>{children}</MainContainer>
+    </AppLayout>
+  );
+}
diff --git a/projects/16-open-qf/src/site/imgs/icons/arrow-caret-right.svg b/projects/16-open-qf/src/site/imgs/icons/arrow-caret-right.svg
new file mode 100644
index 000000000..9ed440b17
--- /dev/null
+++ b/projects/16-open-qf/src/site/imgs/icons/arrow-caret-right.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_15529_18999)">
+<path d="M9.15674 16.157L10.6567 17.657L16.3136 12.0001L10.6567 6.34326L9.15674 7.84326L13.3136 12.0001L9.15674 16.157Z" fill="#475467"/>
+</g>
+<defs>
+<clipPath id="clip0_15529_18999">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>