feat(mobile): Mobile support (#109)

* Mobile support * Rename supportedDevice to isSupportedDevice * Update UniSat URL * feat: add info on selector button * reduce sizing * new on hover effect * remove unused css * ocd style fixing * rever changes * use isMobile to conditionally render info * new styling * reset styling * moar styling fix * Update packages/ord-connect/src/components/SelectWalletModal/index.tsx --------- Co-authored-by: G9000 <leo.caesar@live.com> Co-authored-by: Keng Ye <kengyeleow@gmail.com> Co-authored-by: Keng Ye <40191153+kyleleow@users.noreply.github.com>
ordzaar · Oct 26, 2023 · 742639d · 742639d
1 parent a6f1697
commit 742639d
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 37 deletions.
diff --git a/packages/ord-connect/src/components/OrdConnectKit.tsx b/packages/ord-connect/src/components/OrdConnectKit.tsx
@@ -7,6 +7,7 @@ import { SelectWalletModal } from "./SelectWalletModal";
 export interface OrdConnectKitProp {
   customStyle?: string;
   onViewWallet?: () => void;
+  disableMobile?: boolean;
 }
 
 /**
@@ -21,6 +22,7 @@ export interface OrdConnectKitProp {
 export function OrdConnectKit({
   customStyle,
   onViewWallet,
+  disableMobile,
 }: OrdConnectKitProp) {
   const { address, network, isModalOpen, openModal, closeModal } =
     useOrdContext();
@@ -37,7 +39,11 @@ export function OrdConnectKit({
         <PreConnectButton openModal={openModal} customStyle={customStyle} />
       )}
 
-      <SelectWalletModal isOpen={isModalOpen} closeModal={closeModal} />
+      <SelectWalletModal
+        isOpen={isModalOpen}
+        closeModal={closeModal}
+        disableMobile={disableMobile}
+      />
     </>
   );
 }
diff --git a/packages/ord-connect/src/components/SelectWalletModal/WalletButton.tsx b/packages/ord-connect/src/components/SelectWalletModal/WalletButton.tsx
@@ -4,16 +4,22 @@ import LoadingIcon from "../../assets/loading.svg";
 
 interface WalletButtonProp {
   name: string;
+  info: string;
   onConnect: () => Promise<boolean>;
   icon: string;
   setErrorMessage: (msg: string) => void;
+  isDisabled?: boolean;
+  isMobileDevice?: boolean;
 }
 
 export function WalletButton({
   name,
+  info,
   onConnect,
   icon,
   setErrorMessage,
+  isDisabled,
+  isMobileDevice,
 }: WalletButtonProp) {
   const [loading, setLoading] = useState(false);
   return (
@@ -32,18 +38,39 @@ export function WalletButton({
           setLoading(false);
         }
       }}
+      disabled={isDisabled}
     >
-      <img width={40} src={icon} alt={`Connect ${name} Wallet`} />
-      <span className="wallet-option-label">{name}</span>
-      {loading ? (
+      <div className="option-wrapper">
         <img
-          src={LoadingIcon}
-          width={40}
-          alt={`${name} wallet extension is loading`}
+          className="wallet-icon"
+          src={icon}
+          alt={`Connect ${name} Wallet`}
         />
-      ) : (
-        <img src={ChevronRightIcon} alt="Chevron Right" />
-      )}
+        <div className="wallet-option">
+          <span className="wallet-option-label">{name}</span>
+          <span
+            className="wallet-option-info"
+            style={{ display: isMobileDevice ? "block" : "none" }}
+          >
+            {info}
+          </span>
+        </div>
+        {loading ? (
+          <img
+            src={LoadingIcon}
+            width={30}
+            alt={`${name} wallet extension is loading`}
+          />
+        ) : (
+          <img
+            src={ChevronRightIcon}
+            alt="Chevron Right"
+            width={20}
+            height={20}
+            className="chveron-btn"
+          />
+        )}
+      </div>
     </button>
   );
 }
diff --git a/packages/ord-connect/src/components/SelectWalletModal/index.tsx b/packages/ord-connect/src/components/SelectWalletModal/index.tsx
@@ -10,15 +10,18 @@ import {
   XVERSE_WALLET_CHROME_EXTENSION_URL,
 } from "../../utils/constant";
 import { WalletButton } from "./WalletButton";
+import { isMobileDevice } from "../../utils/mobile-detector.ts";
 
 interface SelectWalletModalProp {
   isOpen: boolean;
   closeModal: () => void;
+  disableMobile?: boolean;
 }
 
 export function SelectWalletModal({
   isOpen,
   closeModal,
+  disableMobile,
 }: SelectWalletModalProp) {
   const {
     updateAddress,
@@ -32,7 +35,7 @@ export function SelectWalletModal({
     publicKey,
   } = useOrdContext();
   const [errorMessage, setErrorMessage] = useState<string>("");
-  const isChromium = window.chrome;
+  const isSupportedDevice = !disableMobile || !isMobileDevice();
 
   const onConnectUnisatWallet = async () => {
     try {
@@ -172,9 +175,9 @@ export function SelectWalletModal({
               <Dialog.Panel className="panel">
                 <section className="panel-title-container">
                   <Dialog.Title as="h3" className="panel-title">
-                    {isChromium
+                    {isSupportedDevice
                       ? "Choose wallet to connect"
-                      : "Unsupported Browser"}
+                      : "Unsupported device"}
                   </Dialog.Title>
                   <button
                     type="button"
@@ -186,26 +189,30 @@ export function SelectWalletModal({
                 </section>
 
                 <section className="panel-content-container">
-                  {isChromium ? (
+                  {isSupportedDevice ? (
                     <section className="panel-content-inner-container">
                       <WalletButton
-                        name="Unisat"
+                        name="Unisat Wallet"
+                        info="Coming soon on mobile browsing"
                         onConnect={onConnectUnisatWallet}
                         icon={UnisatWalletIcon}
                         setErrorMessage={setErrorMessage}
+                        isDisabled={isMobileDevice()} // disable unisat on mobile until it is supported
+                        isMobileDevice={isMobileDevice()}
                       />
                       <hr className="horizontal-separator" />
                       <WalletButton
                         name="Xverse"
+                        info="Available on Xverse app"
                         onConnect={onConnectXverseWallet}
                         icon={XverseWalletIcon}
                         setErrorMessage={setErrorMessage}
+                        isMobileDevice={isMobileDevice()}
                       />
                     </section>
                   ) : (
                     <Dialog.Description className="unsupported-browser-message">
-                      To connect to your wallet, please download Google Chrome
-                      or any other Chromium-based browser.
+                      This website does not support mobile devices.
                     </Dialog.Description>
                   )}
                   <p className="error-message">{errorMessage}</p>

diff --git a/packages/ord-connect/src/components/SelectWalletModal/style.css b/packages/ord-connect/src/components/SelectWalletModal/style.css
@@ -24,7 +24,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 628px;
+    width: 500px;
     height: auto;
     border-radius: 20px;
   }
@@ -56,16 +56,14 @@
 .ord-connect-wallet-modal .panel-title-container {
   display: flex;
   justify-content: space-between;
-  padding: 32px 24px 20px;
+  padding: 32px 24px 0px 24px;
   align-items: center;
-  border-bottom: 1px solid #333;
 }
 
 @media screen and (min-width: 768px) {
   .ord-connect-wallet-modal .panel-title-container {
-    padding-left: 48px;
+    padding: 24px 32px 0px 32px;
     border-bottom: 0px;
-    padding-bottom: 8px;
   }
 
   .ord-connect-wallet-modal .unsupported-browser-message {
@@ -75,31 +73,47 @@
 }
 
 .ord-connect-wallet-modal .panel-title {
-  font-weight: 700;
   font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
   line-height: 32px;
-  color: #fff;
   margin: 0px;
 }
 
+@media screen and (min-width: 768px) {
+  .ord-connect-wallet-modal .panel-title {
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+    letter-spacing: 0.2px;
+  }
+}
+
 .ord-connect-wallet-modal .unsupported-browser-message {
   color: #fff;
 }
 
 .ord-connect-wallet-modal .close-button {
+  display: inline-flex;
   background: transparent;
   border: 0px;
   cursor: pointer;
 }
 
 .ord-connect-wallet-modal .panel-content-container {
-  margin: 64px 24px 0px;
+  margin: 32px 24px 0px;
 }
 
 @media screen and (min-width: 768px) {
   .ord-connect-wallet-modal .panel-content-container {
-    margin-bottom: 48px;
-    margin-top: 48px;
+    margin: 48px 32px 32px 32px;
+  }
+}
+
+@media screen and (min-width: 1080px) {
+  .ord-connect-wallet-modal .panel-content-container {
+    margin: 48px 32px 32px 32px;
   }
 }
 
@@ -123,6 +137,10 @@
   cursor: pointer;
 }
 
+.ord-connect-wallet-modal .wallet-option-button:disabled .chveron-btn {
+  opacity: 0.3;
+}
+
 .waiting-cursor {
   cursor: wait !important;
 }
@@ -142,6 +160,24 @@
   object-fit: cover;
 }
 
+.ord-connect-wallet-modal .option-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 12px;
+  width: 100%;
+}
+
+@media screen and (min-width: 1080px) {
+  .ord-connect-wallet-modal .option-wrapper {
+    padding: 16px;
+  }
+}
+
+.ord-connect-wallet-modal .wallet-option-button {
+  padding: 8px 16px;
+}
+
 .ord-connect-wallet-modal .wallet-option-button:hover {
   background: rgba(255, 255, 255, 0.1);
 }
@@ -152,24 +188,57 @@
 }
 
 .ord-connect-wallet-modal .wallet-option-button:first-child {
-  padding: 32px 32px 24px;
+  padding: 16px 16px 8px 16px;
   border: 0px;
   margin-bottom: 0px;
-  border-radius: 20px 20px 20px 20px;
+  border-radius: 20px 20px 0px 0px;
 }
 
 .ord-connect-wallet-modal .wallet-option-button:nth-of-type(2) {
   border: 0px;
-  padding: 24px 32px 32px;
   margin-bottom: 0px;
   border-radius: 0px 0px 20px 20px;
 }
 
-.ord-connect-wallet-modal .wallet-option-label {
-  margin-left: 16px;
+.ord-connect-wallet-modal .wallet-option-button:last-child {
+  padding: 8px 16px 16px 16px;
+}
+
+.ord-connect-wallet-modal .wallet-icon {
+  width: 32px;
+}
+
+@media (min-width: 768px) {
+  .ord-connect-wallet-modal .wallet-icon {
+    width: 40px;
+  }
+}
+
+.ord-connect-wallet-modal .wallet-option {
   flex-grow: 1;
+  margin-left: 16px;
   text-align: left;
 }
+.ord-connect-wallet-modal .wallet-option-label {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+@media screen and (min-width: 1079px) {
+  .ord-connect-wallet-modal .wallet-option-label {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 24px;
+  }
+}
+
+.ord-connect-wallet-modal .wallet-option-info {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: #8c8c8c;
+}
 
 .ord-connect-wallet-modal .horizontal-separator {
   margin: 0px 16px;

diff --git a/packages/ord-connect/src/main.tsx b/packages/ord-connect/src/main.tsx
@@ -69,7 +69,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <OrdConnectProvider initialNetwork="testnet" initialSafeMode>
       <SampleComponent />
-      <OrdConnectKit />
+      <OrdConnectKit disableMobile={false} />
     </OrdConnectProvider>
   </React.StrictMode>,
 );
diff --git a/packages/ord-connect/src/utils/constant.ts b/packages/ord-connect/src/utils/constant.ts
@@ -1,5 +1,4 @@
-// Both Unisat and Xverse only support Chrome
-export const UNISAT_WALLET_CHROME_EXTENSION_URL =
-  "https://chrome.google.com/webstore/detail/unisat-wallet/ppbibelpcjmhbdihakflkdcoccbgbkpo";
+// their www subdomain doesn't work lol
+export const UNISAT_WALLET_CHROME_EXTENSION_URL = "https://unisat.io/download";
 export const XVERSE_WALLET_CHROME_EXTENSION_URL =
-  "https://chrome.google.com/webstore/detail/xverse-wallet/idnnbdplmphpflfnlkomgpfbpcgelopg";
+  "https://www.xverse.app/download";
diff --git a/packages/ord-connect/src/utils/mobile-detector.ts b/packages/ord-connect/src/utils/mobile-detector.ts
@@ -0,0 +1,5 @@
+export function isMobileDevice() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent,
+  );
+}