From 532ed0c08200509a5b825f0f42cb86a83f1a9289 Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Thu, 19 Dec 2024 11:21:46 -0800
Subject: [PATCH] Remove libs from metamask modal (#10799)

---
 .../components/ConnectedMetaMaskModal.tsx     |   2 +-
 .../sign-up-page/components/MetaMaskModal.jsx | 155 ------------------
 .../sign-up-page/components/MetaMaskModal.tsx | 125 ++++++++++++++
 3 files changed, 126 insertions(+), 156 deletions(-)
 delete mode 100644 packages/web/src/pages/sign-up-page/components/MetaMaskModal.jsx
 create mode 100644 packages/web/src/pages/sign-up-page/components/MetaMaskModal.tsx

diff --git a/packages/web/src/pages/sign-up-page/components/ConnectedMetaMaskModal.tsx b/packages/web/src/pages/sign-up-page/components/ConnectedMetaMaskModal.tsx
index 41d00799cae..6d7712e8d0c 100644
--- a/packages/web/src/pages/sign-up-page/components/ConnectedMetaMaskModal.tsx
+++ b/packages/web/src/pages/sign-up-page/components/ConnectedMetaMaskModal.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'
 
 import { configureMetaMask } from 'common/store/pages/signon/actions'
 
-import MetaMaskModal from './MetaMaskModal'
+import { MetaMaskModal } from './MetaMaskModal'
 
 const META_MASK_SETUP_URL =
   'https://help.audius.co/help/Configuring-MetaMask-For-Use-With-Audius-2d446'
diff --git a/packages/web/src/pages/sign-up-page/components/MetaMaskModal.jsx b/packages/web/src/pages/sign-up-page/components/MetaMaskModal.jsx
deleted file mode 100644
index 47ae95d190b..00000000000
--- a/packages/web/src/pages/sign-up-page/components/MetaMaskModal.jsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { Component } from 'react'
-
-import { BackendUtils as Utils } from '@audius/common/services'
-import { Button, Flex, Box, Text } from '@audius/harmony'
-import cn from 'classnames'
-import PropTypes from 'prop-types'
-
-import { waitForLibsInit } from 'services/audius-backend/eagerLoadUtils'
-import { env } from 'services/env'
-
-import styles from './MetaMaskModal.module.css'
-
-const WEB3_NETWORK_ID = env.WEB3_NETWORK_ID
-
-const messages = {
-  title: '    Are You Sure You Want To Continue With MetaMask?   ',
-  subHeader: '(not recommended)',
-  body1:
-    'Creating an Audius account with MetaMask will negatively impact your Audius experience in a significant way. We strongly suggest creating your account with an email and password.',
-  body2:
-    'To continue with MetaMask, please follow our advanced configuration guide.',
-  metaMaskGuide: 'Read MetaMask Configuration Guide',
-  continueOption: 'Yes, I Understand',
-  stopOption: 'No, Take Me Back',
-  metaMaskConfigure: 'Configure MetaMask to continue',
-  configureError:
-    'Your MetaMask is not properly configured. Make sure to set your network in MetaMask to the Audius network, and have at least one account in MetaMask. For more info, see the MetaMask Configuration Guide.',
-  accessError:
-    'You must grant Audius access to one of your MetaMask accounts in order to continue.'
-}
-
-class MetaMaskModal extends Component {
-  state = {
-    submitting: false,
-    accessError: false,
-    configureError: false
-  }
-
-  resetState = () => {
-    this.setState({
-      submitting: false,
-      accessError: false,
-      configureError: false
-    })
-  }
-
-  onClickContinue = async () => {
-    this.resetState()
-    this.setState({ submitting: true })
-    await waitForLibsInit()
-    try {
-      await window.ethereum?.enable()
-    } catch (err) {
-      this.setState({ accessError: true })
-      return
-    }
-    try {
-      const configured = await Utils.configureWeb3(
-        window.web3.currentProvider,
-        WEB3_NETWORK_ID,
-        true
-      )
-      if (configured) {
-        this.props.onClickContinue()
-        this.props.onClickBack()
-      } else {
-        this.setState({ configureError: true })
-      }
-    } catch {
-      this.setState({ configureError: true })
-    }
-  }
-
-  onModalClick = (e) => {
-    e.stopPropagation()
-  }
-
-  onContainerClick = (e) => {
-    this.props.onClickBack()
-  }
-
-  render() {
-    const { open, onClickReadConfig, onClickBack } = this.props
-    return (
-      <div
-        className={cn(styles.container, { [styles.hidden]: !open })}
-        onClick={this.onContainerClick}
-      >
-        <div className={styles.modal} onClick={this.onModalClick}>
-          <div className={styles.header}>
-            <div className={styles.title}>
-              <i className='emoji large police-cars-revolving-light' />
-              {messages.title}
-              <i className='emoji large police-cars-revolving-light' />
-            </div>
-            <div className={styles.sub}>{messages.subHeader}</div>
-          </div>
-          <div className={styles.bodyContainer}>
-            <div className={styles.bodyText}>{messages.body1}</div>
-            <div className={styles.bodyText}>{messages.body2}</div>
-          </div>
-          <div className={styles.guideContainer}>
-            <Button variant='primary' onClick={onClickReadConfig}>
-              {messages.metaMaskGuide}
-            </Button>
-          </div>
-          <Flex mt='2xl' w='100%' gap='l'>
-            <Button
-              variant='secondary'
-              isLoading={this.state.submitting}
-              onClick={this.onClickContinue}
-              fullWidth
-            >
-              {messages.continueOption}
-            </Button>
-            <Button
-              variant='primary'
-              fullWidth
-              onClick={() => {
-                this.resetState()
-                onClickBack()
-              }}
-            >
-              {messages.stopOption}
-            </Button>
-          </Flex>
-          {this.state.accessError || this.state.configureError ? (
-            <Box mt='l'>
-              <Text variant='body' color='danger'>
-                {this.state.accessError
-                  ? messages.accessError
-                  : messages.configureError}
-              </Text>
-            </Box>
-          ) : null}
-        </div>
-      </div>
-    )
-  }
-}
-
-MetaMaskModal.propTypes = {
-  configured: PropTypes.bool,
-  onClickReadConfig: PropTypes.func,
-  onClickBack: PropTypes.func,
-  onClickContinue: PropTypes.func,
-  open: PropTypes.bool
-}
-
-MetaMaskModal.defaultProps = {
-  open: false,
-  configured: false
-}
-
-export default MetaMaskModal
diff --git a/packages/web/src/pages/sign-up-page/components/MetaMaskModal.tsx b/packages/web/src/pages/sign-up-page/components/MetaMaskModal.tsx
new file mode 100644
index 00000000000..2a9861de2ef
--- /dev/null
+++ b/packages/web/src/pages/sign-up-page/components/MetaMaskModal.tsx
@@ -0,0 +1,125 @@
+import React, { useCallback, useState } from 'react'
+
+import { Button, Flex, Box, Text } from '@audius/harmony'
+import cn from 'classnames'
+
+import styles from './MetaMaskModal.module.css'
+
+const messages = {
+  title: '    Are You Sure You Want To Continue With MetaMask?   ',
+  subHeader: '(not recommended)',
+  body1:
+    'Creating an Audius account with MetaMask will negatively impact your Audius experience in a significant way. We strongly suggest creating your account with an email and password.',
+  body2:
+    'To continue with MetaMask, please follow our advanced configuration guide.',
+  metaMaskGuide: 'Read MetaMask Configuration Guide',
+  continueOption: 'Yes, I Understand',
+  stopOption: 'No, Take Me Back',
+  metaMaskConfigure: 'Configure MetaMask to continue',
+  configureError:
+    'Your MetaMask is not properly configured. Make sure to set your network in MetaMask to the Audius network, and have at least one account in MetaMask. For more info, see the MetaMask Configuration Guide.',
+  accessError:
+    'You must grant Audius access to one of your MetaMask accounts in order to continue.'
+}
+
+type MetaMaskModalProps = {
+  open: boolean
+  configured?: boolean
+  onClickReadConfig: () => void
+  onClickBack: () => void
+  onClickContinue: () => void
+}
+
+export const MetaMaskModal = ({
+  open,
+  onClickReadConfig,
+  onClickBack,
+  onClickContinue
+}: MetaMaskModalProps) => {
+  const [submitting, setSubmitting] = useState(false)
+  const [accessError, setAccessError] = useState(false)
+  const [configureError, setConfigureError] = useState(false)
+
+  const resetState = () => {
+    setSubmitting(false)
+    setAccessError(false)
+    setConfigureError(false)
+  }
+
+  const handleClickContinue = useCallback(async () => {
+    resetState()
+    setSubmitting(true)
+    onClickContinue()
+    try {
+      await window.ethereum?.enable()
+    } catch (err) {
+      setAccessError(true)
+      return
+    }
+    // TODO: Fix MM auth
+    // https://github.com/AudiusProject/audius-protocol/pull/10392
+    setConfigureError(true)
+  }, [onClickContinue])
+
+  const onModalClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+  }
+
+  const onContainerClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    onClickBack()
+  }
+
+  return (
+    <div
+      className={cn(styles.container, { [styles.hidden]: !open })}
+      onClick={onContainerClick}
+    >
+      <div className={styles.modal} onClick={onModalClick}>
+        <div className={styles.header}>
+          <div className={styles.title}>
+            <i className='emoji large police-cars-revolving-light' />
+            {messages.title}
+            <i className='emoji large police-cars-revolving-light' />
+          </div>
+          <div className={styles.sub}>{messages.subHeader}</div>
+        </div>
+        <div className={styles.bodyContainer}>
+          <div className={styles.bodyText}>{messages.body1}</div>
+          <div className={styles.bodyText}>{messages.body2}</div>
+        </div>
+        <div className={styles.guideContainer}>
+          <Button variant='primary' onClick={onClickReadConfig}>
+            {messages.metaMaskGuide}
+          </Button>
+        </div>
+        <Flex mt='2xl' w='100%' gap='l'>
+          <Button
+            variant='secondary'
+            isLoading={submitting}
+            onClick={handleClickContinue}
+            fullWidth
+          >
+            {messages.continueOption}
+          </Button>
+          <Button
+            variant='primary'
+            fullWidth
+            onClick={() => {
+              resetState()
+              onClickBack()
+            }}
+          >
+            {messages.stopOption}
+          </Button>
+        </Flex>
+        {accessError || configureError ? (
+          <Box mt='l'>
+            <Text variant='body' color='danger'>
+              {accessError ? messages.accessError : messages.configureError}
+            </Text>
+          </Box>
+        ) : null}
+      </div>
+    </div>
+  )
+}