[landing] Introduce a loading state to SIWE component

Summary:
After clicking the button, we need to make sure that a user can't interact with it again and is aware that an operation is in progress.

| old | new |
| {F3851157} | {F3851163} |

We could introduce a loading state containing some indicator, but we don't have anything similar on the web and the landing, so it probably isn't worth it to introduce just for this case.
Also, I considered using a common button component from the web by extracting it to the lib. This would require a lot of design decisions because the web colors and margins don't always match what we have on the landing and the native - where the SIWE component is displayed.
Another consideration was to use the `Button` component from the landing, but it is so simple that it wouldn't be beneficial.

So overall, there were some opportunities to reduce code duplication, but I don't think they are worth it now.

https://linear.app/comm/issue/ENG-10080/introduce-a-loading-status-to-the-sign-in-button-on-siwe-landing-page

Test Plan: Checked on iOS simulator that the button state changes and it isn't possible to click it multiple times.

Reviewers: kamil, angelika

Reviewed By: kamil

Subscribers: ashoat

Differential Revision: https://phab.comm.dev/D14248

landing/siwe.css

@@ -46,12 +46,21 @@ div.connectedWalletInfo > div {
 }
 
 .button {
+  all: unset;
+  color: white;
+  font-family: sans-serif;
   margin-top: 20px;
   background: #6a20e3;
   border-radius: 4px;
   text-align: center;
   padding: 10px;
   width: 100%;
+  transition: 150ms;
+}
+
+.disabled {
+  background-color: var(--black-80);
+  color: var(--black-60);
 }
 
 /* Classes from node_modules/@rainbow-me/rainbowkit/dist/components/index.css */

landing/siwe.react.js

@@ -7,6 +7,7 @@ import {
 } from '@rainbow-me/rainbowkit';
 import '@rainbow-me/rainbowkit/styles.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import classnames from 'classnames';
 import invariant from 'invariant';
 import _merge from 'lodash/fp/merge.js';
 import * as React from 'react';
@@ -79,24 +80,31 @@ function SIWE(): React.Node {
     siweMessageIssuedAt,
   } = React.useContext(SIWEContext);
 
-  const onClick = React.useCallback(() => {
+  const [inProgress, setInProgress] = React.useState(false);
+
+  const onClick = React.useCallback(async () => {
     invariant(siweNonce, 'nonce must be present during SIWE attempt');
     invariant(siweMessageType, 'message type must be set during SIWE attempt');
     invariant(
       siwePrimaryIdentityPublicKey,
       'primaryIdentityPublicKey must be present during SIWE attempt',
     );
-    const statement = getSIWEStatementForPublicKey(
-      siwePrimaryIdentityPublicKey,
-      siweMessageType,
-    );
-    void signInWithEthereum(
-      address,
-      signer,
-      siweNonce,
-      statement,
-      siweMessageIssuedAt,
-    );
+    try {
+      setInProgress(true);
+      const statement = getSIWEStatementForPublicKey(
+        siwePrimaryIdentityPublicKey,
+        siweMessageType,
+      );
+      await signInWithEthereum(
+        address,
+        signer,
+        siweNonce,
+        statement,
+        siweMessageIssuedAt,
+      );
+    } finally {
+      setInProgress(false);
+    }
   }, [
     address,
     signer,
@@ -186,6 +194,11 @@ function SIWE(): React.Node {
       );
     }
 
+    const buttonClasses = classnames({
+      [css.button]: true,
+      [css.disabled]: inProgress,
+    });
+
     return (
       <div className={css.wrapper}>
         <span className={css.walletDisplayText}>
@@ -196,9 +209,13 @@ function SIWE(): React.Node {
         </div>
         <p>{explanationStatement}</p>
         {termsOfUseAndPolicyInfo}
-        <div className={css.button} onClick={onClick}>
+        <button
+          className={buttonClasses}
+          onClick={onClick}
+          disabled={inProgress}
+        >
           {buttonStatement}
-        </div>
+        </button>
       </div>
     );
   }