feat(auth-dapp): adds hasInitialized logic

dapps/react-dapp-auth/pages/index.tsx

@@ -11,6 +11,7 @@ console.log(`AuthClient@${version}`);
 
 const Home: NextPage = () => {
   const [client, setClient] = useState<AuthClient | null>();
+  const [hasInitialized, setHasInitialized] = useState(false);
   const [uri, setUri] = useState<string>("");
   const [address, setAddress] = useState<string>("");
 
@@ -42,9 +43,10 @@ const Home: NextPage = () => {
     })
       .then((authClient) => {
         setClient(authClient);
+        setHasInitialized(true);
       })
-      .catch(console.log);
+      .catch(console.error);
-  }, [setClient]);
+  }, []);
 
   useEffect(() => {
     if (!client) return;
@@ -73,7 +75,9 @@ const Home: NextPage = () => {
 
   return (
     <Box width="100%" height="100%">
-      {view === "default" && <DefaultView onClick={onSignIn} />}
+      {view === "default" && (
+        <DefaultView onClick={onSignIn} hasInitialized={hasInitialized} />
+      )}
       {view === "qr" && <QrView uri={uri} />}
       {view === "signedIn" && <SignedInView address={address} />}
     </Box>

dapps/react-dapp-auth/views/DefaultView.tsx

@@ -1,6 +1,9 @@
 import { Box, Button, Flex, Heading, Image, position } from "@chakra-ui/react";
 
-const DefaultView: React.FC<{ onClick: () => void }> = ({ onClick }) => {
+const DefaultView: React.FC<{
+  onClick: () => void;
+  hasInitialized: boolean;
+}> = ({ onClick, hasInitialized }) => {
   return (
     <Box>
       <Box position={{ position: "relative" }}>
@@ -37,10 +40,13 @@ const DefaultView: React.FC<{ onClick: () => void }> = ({ onClick }) => {
           onClick={onClick}
           borderRadius={"16px"}
           background="#3396FF"
+          disabled={!hasInitialized}
         >
           <Flex gap="1em">
             <Image src="/wc.png" fit="scale-down" alt="WC" />
-            <span style={{ color: "white" }}>WalletConnect</span>
+            <span style={{ color: "white" }}>
+              {hasInitialized ? "WalletConnect" : "Initializing..."}
+            </span>
           </Flex>
         </Button>
       </Flex>