feat: update onboarding and application flows

src/components/Alert.js

@@ -7,7 +7,7 @@ import { Fonts, Palette, gutters } from '../styles'
 import GradientButton from './GradientButton'
 import { LinearGradient } from './LinearGradient/LinearGradient'
 import Overlay from './Overlay'
-const WebAlertModal = ({ title, description, options }) => {
+const WebAlertModal = ({ title, description, options, onDismiss }) => {
   const [visible, setVisible] = useState(true)
 
   const confirmOption = options?.find(({ style }) => style !== 'cancel')
@@ -15,14 +15,18 @@ const WebAlertModal = ({ title, description, options }) => {
   const hasSecondaryAction = Boolean(cancelOption)
   const buttonContainerStyle = hasSecondaryAction ? styles.actionButton : styles.singleActionButton
 
-  const onConfirm = () => {
+  const dismiss = (callback) => {
     setVisible(false)
-    confirmOption?.onPress()
+    setTimeout(onDismiss, 500)
+    callback?.()
+  }
+
+  const onConfirm = () => {
+    dismiss(confirmOption?.onPress)
   }
 
   const onCancel = () => {
-    setVisible(false)
-    cancelOption?.onPress()
+    dismiss(cancelOption?.onPress)
   }
 
   const renderDescription = () => {
@@ -80,8 +84,12 @@ const alertPolyfill = (title, description, options, extra) => {
   const rootDiv = document.createElement('div')
   document.body.appendChild(rootDiv)
 
+  const { createRoot } = require('react-dom/client')
+  const root = createRoot(rootDiv)
+
   const closeModal = () => {
-    document.body.removeChild(rootDiv)
+    root.unmount()
+    rootDiv.remove()
   }
 
   const WebAlertComponent = () => (
@@ -93,8 +101,7 @@ const alertPolyfill = (title, description, options, extra) => {
     />
   )
 
-  // Render the React component into the div
-  require('react-dom').render(<WebAlertComponent />, rootDiv)
+  root.render(<WebAlertComponent />)
 }
 
 const customAlert = (title, description, options, extra) => {