Remove some wallets from website (#49)

Author: ordinalspractice

.github/workflows/static.yaml

@@ -25,7 +25,7 @@ jobs:
 
       - name: Setup Node
         uses: actions/setup-node@v4
-     
+
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
         with:
@@ -41,9 +41,8 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: './www/dist'
+          path: "./www/dist"
 
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
-    

www/package.json

@@ -5,8 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint .",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . && tsc -b",
     "preview": "vite preview"
   },
   "dependencies": {

www/src/App.tsx

@@ -1,10 +1,3 @@
-// const defaultVerifyFormData = {
-//   address: "bc1ppv609nr0vr25u07u95waq5lucwfm6tde4nydujnu8npg4q75mr5sxq8lt3",
-//   message: "Hello World",
-//   signature:
-//     "AUHd69PrJQEv+oKTfZ8l+WROBHuy9HKrbFCJu7U1iK2iiEy1vMU5EfMtjc+VSHM7aU0SDbak5IUZRVno2P5mjSafAQ==",
-// };
-
 import { useEffect, useState } from "react";
 import {
   useLaserEyes,

www/src/components/AnimatedContainer.tsx

@@ -1,13 +1,21 @@
 import { useRef, useEffect, useState } from "react";
 
-const AnimatedContainer = ({ children, isExpanded }) => {
-  const contentRef = useRef(null);
+interface AnimatedContainerProps {
+  children: React.ReactNode;
+  isExpanded: boolean;
+}
+
+const AnimatedContainer: React.FC<AnimatedContainerProps> = ({
+  children,
+  isExpanded,
+}) => {
+  const contentRef = useRef() as React.MutableRefObject<HTMLDivElement>;
   const [height, setHeight] = useState("calc(var(--font-large) + 3rem)");
 
   useEffect(() => {
     const rafId = requestAnimationFrame(() => {
       if (contentRef.current) {
-        const newHeight = contentRef.current.scrollHeight;
+        const newHeight = contentRef.current?.scrollHeight;
         setHeight(
           isExpanded ? `${newHeight}px` : "calc(var(--font-large) + 3rem)"
         );

www/src/components/ConnectWallet.tsx

@@ -1,32 +1,22 @@
 import { Button } from "@/components/ui/button";
-import {
-  SUPPORTED_WALLETS,
-  WalletIcon,
-  UNISAT,
-  MAGIC_EDEN,
-  OYL,
-  PHANTOM,
-  LEATHER,
-  XVERSE,
-  OKX,
-} from "@omnisat/lasereyes";
+import { SUPPORTED_WALLETS, WalletIcon } from "@omnisat/lasereyes";
 import FormWrapper from "./FormWrapper";
 
+type WalletName =
+  | "unisat"
+  | "magic-eden"
+  | "oyl"
+  | "phantom"
+  | "leather"
+  | "xverse"
+  | "okx";
+
 interface ConnectWalletFormProps {
   provider: string | null;
   hasWallet: {
     [key: string]: boolean;
   };
-  onConnect: (
-    walletName:
-      | typeof UNISAT
-      | typeof MAGIC_EDEN
-      | typeof OYL
-      | typeof PHANTOM
-      | typeof LEATHER
-      | typeof XVERSE
-      | typeof OKX
-  ) => Promise<void>;
+  onConnect: (walletName: WalletName) => Promise<void>;
   onDisconnect: () => void;
 }
 const ConnectWalletForm = ({
@@ -48,35 +38,40 @@ const ConnectWalletForm = ({
   return (
     <FormWrapper title="connect wallet" onBack={onDisconnect}>
       <div className="grid grid-cols-3 gap-4">
-        {Object.values(SUPPORTED_WALLETS).map((wallet) => {
-          const isMissingWallet = !hasWallet[wallet.name];
-          return (
-            <div key={wallet.name} className="w-full">
-              {isMissingWallet ? (
-                <Button
-                  asChild
-                  className={`${baseButtonClass} bg-transparent/5 backdrop-blur-sm`}
-                >
-                  <a
-                    href={wallet.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center justify-center"
+        {Object.values(SUPPORTED_WALLETS)
+          .filter(
+            (wallet) => wallet.name !== "op_net" && wallet.name !== "wizz"
+          )
+          .map((wallet) => {
+            console.log(wallet);
+            const isMissingWallet = !hasWallet[wallet.name];
+            return (
+              <div key={wallet.name} className="w-full">
+                {isMissingWallet ? (
+                  <Button
+                    asChild
+                    className={`${baseButtonClass} bg-transparent/5 backdrop-blur-sm`}
+                  >
+                    <a
+                      href={wallet.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center justify-center"
+                    >
+                      <WalletIcon walletName={wallet.name} size={40} />
+                    </a>
+                  </Button>
+                ) : (
+                  <Button
+                    className={`${baseButtonClass} bg-white/90 text-black backdrop-blur-sm`}
+                    onClick={() => onConnect(wallet.name as WalletName)}
                   >
                     <WalletIcon walletName={wallet.name} size={40} />
-                  </a>
-                </Button>
-              ) : (
-                <Button
-                  className={`${baseButtonClass} bg-white/90 text-black backdrop-blur-sm`}
-                  onClick={() => onConnect(wallet.name)}
-                >
-                  <WalletIcon walletName={wallet.name} size={40} />
-                </Button>
-              )}
-            </div>
-          );
-        })}
+                  </Button>
+                )}
+              </div>
+            );
+          })}
       </div>
     </FormWrapper>
   );