Merge pull request #49 from useLiquidOps/feat--Ouro-support

feat: add Ouro

Author: LorimerJenkins

public/partners/ouro.png

@@ -104,6 +104,33 @@ const Connect: React.FC = () => {
     }
   };
 
+  // Ouro connector
+  const handleConnectOuro = async () => {
+    if (typeof window === "undefined" || !window.arweaveWallet) {
+      alert(
+        `Please ensure you have the Ouro wallet and it is properly installed on your device.\n\nFor new users, you can download the wallet by going to bit.ly/OuroWallet`,
+      );
+      return;
+    }
+
+    try {
+      await window.arweaveWallet.connect(
+        ["ACCESS_ADDRESS", "SIGN_TRANSACTION"],
+        walletInfo,
+      );
+      const permissions = await window.arweaveWallet.getPermissions();
+      if (permissions.length > 0) {
+        const addr = await window.arweaveWallet.getActiveAddress();
+        setAddress(addr);
+        setConnected(true);
+      }
+
+      setIsWalletModalOpen(false);
+    } catch (error) {
+      console.error("Connection error:", error);
+    }
+  };
+
   // Beacon connector
   const { isConnected, connect } = useWallet();
   const handleConnectBeacon = async () => {
@@ -237,6 +264,7 @@ const Connect: React.FC = () => {
         onClose={handleCloseWalletModal}
         onConnectWander={handleConnectWander}
         onConnectBeacon={connect}
+        onConnectOuro={handleConnectOuro}
       />
     </>
   );

src/components/Connect/Connect.tsx

@@ -13,13 +13,15 @@ interface WalletModalProps {
   onClose: () => void;
   onConnectWander: () => void;
   onConnectBeacon: () => void;
+  onConnectOuro: () => void;
 }
 
 const WalletModal: React.FC<WalletModalProps> = ({
   isOpen,
   onClose,
   onConnectWander,
   onConnectBeacon,
+  onConnectOuro,
 }) => {
   return (
     <AnimatePresence>
@@ -89,6 +91,30 @@ const WalletModal: React.FC<WalletModalProps> = ({
                   <p className={styles.walletDescription}>IOS support</p>
                 </div>
               </div>
+
+              <div
+                className={styles.walletOption}
+                style={{ backgroundColor: "#bbfba9" }}
+                onClick={onConnectOuro}
+              >
+                <Image
+                  src="/partners/ouro.png"
+                  height={40}
+                  width={40}
+                  alt="Ouro"
+                />
+                <div className={styles.walletInfo}>
+                  <p className={styles.walletName} style={{ color: "black" }}>
+                    Ouro
+                  </p>
+                  <p
+                    className={styles.walletDescription}
+                    style={{ color: "black" }}
+                  >
+                    Chrome support
+                  </p>
+                </div>
+              </div>
             </div>
 
             <div className={styles.noWallet}>