use isMobile to conditionally render info

ordzaar · Oct 23, 2023 · 485c22e · 485c22e
1 parent e54b227
commit 485c22e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/packages/ord-connect/src/components/SelectWalletModal/WalletButton.tsx b/packages/ord-connect/src/components/SelectWalletModal/WalletButton.tsx
@@ -9,6 +9,7 @@ interface WalletButtonProp {
   icon: string;
   setErrorMessage: (msg: string) => void;
   isDisabled?: boolean;
+  isMobileDevice?: boolean;
 }
 
 export function WalletButton({
@@ -18,6 +19,7 @@ export function WalletButton({
   icon,
   setErrorMessage,
   isDisabled,
+  isMobileDevice,
 }: WalletButtonProp) {
   const [loading, setLoading] = useState(false);
   return (
@@ -41,7 +43,12 @@ export function WalletButton({
       <img width={32} src={icon} alt={`Connect ${name} Wallet`} />
       <div className="wallet-option">
         <span className="wallet-option-label">{name}</span>
-        <span className="wallet-option-info">{info}</span>
+        <span
+          className="wallet-option-info"
+          style={{ display: isMobileDevice ? "block" : "none" }}
+        >
+          {info}
+        </span>
       </div>
       {loading ? (
         <img

diff --git a/packages/ord-connect/src/components/SelectWalletModal/index.tsx b/packages/ord-connect/src/components/SelectWalletModal/index.tsx
@@ -198,6 +198,7 @@ export function SelectWalletModal({
                         icon={UnisatWalletIcon}
                         setErrorMessage={setErrorMessage}
                         isDisabled={isMobileDevice()}
+                        isMobileDevice={isMobileDevice()}
                       />
                       <hr className="horizontal-separator" />
                       <WalletButton
@@ -206,6 +207,7 @@ export function SelectWalletModal({
                         onConnect={onConnectXverseWallet}
                         icon={XverseWalletIcon}
                         setErrorMessage={setErrorMessage}
+                        isMobileDevice={isMobileDevice()}
                       />
                     </section>
                   ) : (

diff --git a/packages/ord-connect/src/components/SelectWalletModal/style.css b/packages/ord-connect/src/components/SelectWalletModal/style.css
@@ -182,19 +182,12 @@
 }
 
 .ord-connect-wallet-modal .wallet-option-info {
-  display: block;
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
   color: #8c8c8c;
 }
 
-@media (min-width: 768px) {
-  .ord-connect-wallet-modal .wallet-option-info {
-    display: none;
-  }
-}
-
 .ord-connect-wallet-modal .horizontal-separator {
   margin: 0px 16px;
   border: 0px;