WalletConnect: auto-approve request on paste

src/components/Body/WalletConnectTab/URIInput.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import {
   FormControl,
   HStack,
@@ -14,9 +15,25 @@ interface URIInputParams {
   setUri: (value: string) => void;
   bg: string;
   isConnected: boolean;
+  initWalletConnect: () => void;
 }
 
-function URIInput({ uri, setUri, bg, isConnected }: URIInputParams) {
+function URIInput({
+  uri,
+  setUri,
+  bg,
+  isConnected,
+  initWalletConnect,
+}: URIInputParams) {
+  const [pasted, setPasted] = useState(false);
+
+  useEffect(() => {
+    if (pasted) {
+      initWalletConnect();
+      setPasted(false);
+    }
+  }, [uri]);
+
   return (
     <FormControl my={4}>
       <HStack>
@@ -46,6 +63,11 @@ function URIInput({ uri, setUri, bg, isConnected }: URIInputParams) {
           autoComplete="off"
           value={uri}
           onChange={(e) => setUri(e.target.value)}
+          onPaste={(e) => {
+            e.preventDefault();
+            setPasted(true);
+            setUri(e.clipboardData.getData("text"));
+          }}
           bg={bg}
           isDisabled={isConnected}
         />

src/components/Body/WalletConnectTab/index.tsx

@@ -35,9 +35,15 @@ function WalletConnectTab({
 }: WalletConnectTabParams) {
   return (
     <>
-      <URIInput uri={uri} setUri={setUri} bg={bg} isConnected={isConnected} />
+      <URIInput
+        uri={uri}
+        setUri={setUri}
+        bg={bg}
+        isConnected={isConnected}
+        initWalletConnect={initWalletConnect}
+      />
       <Center>
-        <Button onClick={initWalletConnect} isDisabled={isConnected}>
+        <Button onClick={() => initWalletConnect()} isDisabled={isConnected}>
           Connect
         </Button>
       </Center>