diff --git a/web/account/siwe-button.react.js b/web/account/siwe-button.react.js
new file mode 100644
--- /dev/null
+++ b/web/account/siwe-button.react.js
@@ -0,0 +1,36 @@
+// @flow
+
+import * as React from 'react';
+import { FaEthereum } from 'react-icons/fa';
+
+import Button from '../components/button.react';
+import css from './siwe.css';
+
+type SIWEButtonProps = {
+  +onSIWEButtonClick: () => void,
+};
+function SIWEButton(props: SIWEButtonProps): React.Node {
+  const { onSIWEButtonClick } = props;
+
+  const siweButtonColor = React.useMemo(
+    () => ({ backgroundColor: 'white', color: 'black' }),
+    [],
+  );
+
+  return (
+    <div className={css.siweContainer}>
+      <Button
+        onClick={onSIWEButtonClick}
+        variant="filled"
+        buttonColor={siweButtonColor}
+      >
+        <div className={css.ethereumLogoContainer}>
+          <FaEthereum />
+        </div>
+        Sign in with Ethereum
+      </Button>
+    </div>
+  );
+}
+
+export default SIWEButton;
diff --git a/web/account/siwe.react.js b/web/account/siwe.react.js
--- a/web/account/siwe.react.js
+++ b/web/account/siwe.react.js
@@ -6,7 +6,6 @@
 import { ConnectButton, useConnectModal } from '@rainbow-me/rainbowkit';
 import invariant from 'invariant';
 import * as React from 'react';
-import { FaEthereum } from 'react-icons/fa';
 import { useDispatch } from 'react-redux';
 import { useAccount, useSigner } from 'wagmi';
 
@@ -33,6 +32,7 @@
 import { setPrimaryIdentityPublicKey } from '../redux/primary-identity-public-key-reducer';
 import { useSelector } from '../redux/redux-utils';
 import { webLogInExtraInfoSelector } from '../selectors/account-selectors.js';
+import SIWEButton from './siwe-button.react.js';
 import css from './siwe.css';
 
 const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector(
@@ -91,11 +91,6 @@
     })();
   }, [dispatch]);
 
-  const siweButtonColor = React.useMemo(
-    () => ({ backgroundColor: 'white', color: 'black' }),
-    [],
-  );
-
   const callSIWEAuthEndpoint = React.useCallback(
     (message: string, signature: string, extraInfo) =>
       siweAuthCall({
@@ -165,20 +160,7 @@
 
   let siweButton;
   if (openConnectModal) {
-    siweButton = (
-      <>
-        <Button
-          onClick={onSIWEButtonClick}
-          variant="filled"
-          buttonColor={siweButtonColor}
-        >
-          <div className={css.ethereumLogoContainer}>
-            <FaEthereum />
-          </div>
-          Sign in with Ethereum
-        </Button>
-      </>
-    );
+    siweButton = <SIWEButton onSIWEButtonClick={onSIWEButtonClick} />;
   }
   return (
     <div className={css.siweContainer}>