feat(magic-eden): add magic eden mobile support (#367)

* bump(deps): ordit-sdk * feat(magic-eden): enable magic eden wallet on mobile * fix(select): hidden wallet line * fix(sample): display * fix(select): styling on mobile
ordzaar · Sep 24, 2024 · 6db886d · 6db886d
1 parent ce7fc25
commit 6db886d
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 130 deletions.
diff --git a/packages/ord-connect/package.json b/packages/ord-connect/package.json
@@ -60,7 +60,7 @@
     ]
   },
   "peerDependencies": {
-    "@ordzaar/ordit-sdk": "^2.2.0",
+    "@ordzaar/ordit-sdk": "^2.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }

diff --git a/packages/ord-connect/src/SampleApp.tsx b/packages/ord-connect/src/SampleApp.tsx
@@ -75,8 +75,8 @@ function TestControls() {
   };
 
   return (
-    <div className="controls">
-      <div>
+    <div className="test-container">
+      <div className="controls">
         <button type="button" onClick={handleCheckBalance}>
           Check balance
         </button>
@@ -90,7 +90,7 @@ function TestControls() {
           Sign message
         </button>
       </div>
-      <div>
+      <div className="details">
         {wallet ? <p>Wallet: {wallet}</p> : null}
         {address?.ordinals ? (
           <p>Connected Address: {address.ordinals ?? ""}</p>

diff --git a/packages/ord-connect/src/components/SelectWalletModal/WalletButton.tsx b/packages/ord-connect/src/components/SelectWalletModal/WalletButton.tsx
@@ -17,7 +17,6 @@ const WALLET_TO_NAME: Record<Wallet, string> = {
 
 export interface WalletButtonProps {
   wallet: Wallet;
-  subtitle: string;
   onConnect: () => Promise<boolean>;
   icon: string;
   renderAvatar?: (address: string, size: "large" | "small") => ReactNode;
@@ -26,7 +25,6 @@ export interface WalletButtonProps {
 
 export function WalletButton({
   wallet,
-  subtitle,
   onConnect,
   icon,
   renderAvatar,
@@ -61,21 +59,18 @@ export function WalletButton({
       <div className="option-wrapper">
         <img className="wallet-icon" src={icon} alt="" />
         <div className="wallet-option">
-          <span className="wallet-option-label">{walletName}</span>
-          <span
-            className="wallet-option-subtitle"
-            style={{ display: isMobile ? "block" : "none" }}
-          >
-            {subtitle}
-          </span>
+          <p className="wallet-option-label">{walletName}</p>
+          <p className="wallet-option-subtitle">
+            {isMobile ? "Available on app" : ""}
+          </p>
         </div>
         {connectedWallet === wallet && connectedAddress.ordinals ? (
           <div className="wallet-option-connected-address">
             {renderAvatar ? (
               renderAvatar(connectedAddress.ordinals, "small")
             ) : (
               <Avatar
-                size={16}
+                size={isMobile ? 12 : 16}
                 variant="beam"
                 name={connectedAddress.ordinals}
                 colors={["#1C2DCB", "#F226B8"]}
@@ -94,16 +89,16 @@ export function WalletButton({
         {loading ? (
           <img
             src={LoadingIcon}
-            width={24}
-            height={24}
+            width={isMobile ? 20 : 24}
+            height={isMobile ? 20 : 24}
             alt={`${walletName} extension is loading`}
           />
         ) : (
           <img
             src={ChevronRightIcon}
             alt=""
-            width={24}
-            height={24}
+            width={isMobile ? 20 : 24}
+            height={isMobile ? 20 : 24}
             className="chevron-btn"
           />
         )}

diff --git a/packages/ord-connect/src/components/SelectWalletModal/index.tsx b/packages/ord-connect/src/components/SelectWalletModal/index.tsx
@@ -59,7 +59,6 @@ export function SelectWalletModal({
     const ALL_WALLETS: WalletListItemProps[] = [
       {
         wallet: Wallet.OKX,
-        subtitle: "Available on OKX app",
         onConnect: () => connectWallet(Wallet.OKX),
         icon: OKXWalletIcon,
         hidden: isMobile && network !== Network.MAINNET,
@@ -68,7 +67,6 @@ export function SelectWalletModal({
       },
       {
         wallet: Wallet.UNISAT,
-        subtitle: "Coming soon on mobile browsing",
         onConnect: () => connectWallet(Wallet.UNISAT),
         icon: UnisatWalletIcon,
         hidden: isMobile,
@@ -77,24 +75,20 @@ export function SelectWalletModal({
       },
       {
         wallet: Wallet.XVERSE,
-        subtitle: "Available on Xverse app",
         onConnect: () => connectWallet(Wallet.XVERSE),
         icon: XverseWalletIcon,
         order: 22,
         chains: [Chain.BITCOIN],
       },
       {
         wallet: Wallet.MAGICEDEN,
-        subtitle: "Coming soon on mobile browsing",
         onConnect: () => connectWallet(Wallet.MAGICEDEN),
         icon: MagicEdenWalletIcon,
-        hidden: isMobile,
         order: 23,
         chains: [Chain.BITCOIN],
       },
       {
         wallet: Wallet.LEATHER,
-        subtitle: "Coming soon on mobile browsing",
         onConnect: () => connectWallet(Wallet.LEATHER),
         icon: LeatherWalletIcon,
         hidden: isMobile,
@@ -103,8 +97,8 @@ export function SelectWalletModal({
       },
     ];
 
-    const walletList = ALL_WALLETS.filter((walletItem) =>
-      walletItem.chains.includes(chain),
+    const walletList = ALL_WALLETS.filter(
+      (walletItem) => walletItem.chains.includes(chain) && !walletItem.hidden,
     );
 
     if (!walletsOrder) {
@@ -171,16 +165,11 @@ export function SelectWalletModal({
                 <section className="panel-content-container">
                   <section className="panel-content-inner-container">
                     {orderedWalletList.map((walletItem, index) => {
-                      if (walletItem.hidden) {
-                        return null;
-                      }
-
                       const isLastItem = index === orderedWalletList.length - 1;
                       return (
                         <Fragment key={walletItem.wallet}>
                           <WalletButton
                             wallet={walletItem.wallet}
-                            subtitle={walletItem.subtitle}
                             onConnect={async () => {
                               setErrorMessage("");
                               // catch clause not required