redirect to account page on new account

components/modals/CreateAccountModal.tsx

@@ -2,14 +2,25 @@ import { ModalProps } from '../../types/modal'
 import Modal from '../shared/Modal'
 import CreateAccountForm from '@components/account/CreateAccountForm'
 import mangoStore from '@store/mangoStore'
+import { useRouter } from 'next/router'
 
 const CreateAccountModal = ({ isOpen, onClose }: ModalProps) => {
   const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const router = useRouter()
+  const { asPath } = useRouter()
+
+  const handleClose = () => {
+    if (asPath !== '/') {
+      router.push('/')
+    }
+    onClose()
+  }
+
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <div className="flex min-h-[264px] flex-col items-center justify-center">
         <CreateAccountForm
-          customClose={onClose}
+          customClose={handleClose}
           isFirstAccount={!mangoAccount}
         />
       </div>

components/modals/MangoAccountsListModal.tsx

@@ -16,13 +16,12 @@ import Modal from '@components/shared/Modal'
 import { formatFixedDecimals } from 'utils/numbers'
 import CreateAccountForm from '@components/account/CreateAccountForm'
 import { EnterRightExitLeft } from '@components/shared/Transitions'
+import { useRouter } from 'next/router'
 
 const MangoAccountsListModal = ({
-  // mangoAccount,
   isOpen,
   onClose,
 }: {
-  // mangoAccount: MangoAccount | undefined
   isOpen: boolean
   onClose: () => void
 }) => {
@@ -34,6 +33,8 @@ const MangoAccountsListModal = ({
   const loading = mangoStore((s) => s.mangoAccount.initialLoad)
   const [showNewAccountForm, setShowNewAccountForm] = useState(false)
   const [, setLastAccountViewed] = useLocalStorageStringState(LAST_ACCOUNT_KEY)
+  const router = useRouter()
+  const { asPath } = useRouter()
 
   const handleSelectMangoAccount = async (acc: MangoAccount) => {
     const set = mangoStore.getState().set
@@ -58,6 +59,13 @@ const MangoAccountsListModal = ({
     }
   }
 
+  const handleClose = () => {
+    if (asPath !== '/') {
+      router.push('/')
+    }
+    onClose()
+  }
+
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <div className="inline-block w-full transform overflow-x-hidden">
@@ -144,7 +152,7 @@ const MangoAccountsListModal = ({
             show={showNewAccountForm}
           >
             <CreateAccountForm
-              customClose={() => setShowNewAccountForm(false)}
+              customClose={handleClose}
               handleBack={() => setShowNewAccountForm(false)}
             />
           </EnterRightExitLeft>

components/shared/Notification.tsx

@@ -4,6 +4,7 @@ import {
   ArrowTopRightOnSquareIcon,
   InformationCircleIcon,
   XCircleIcon,
+  XMarkIcon,
 } from '@heroicons/react/20/solid'
 import mangoStore, { CLUSTER } from '@store/mangoStore'
 import { Notification, notify } from '../../utils/notifications'
@@ -90,13 +91,14 @@ const NotificationList = () => {
 
   return (
     <div
-      className={`pointer-events-none fixed z-50 w-full space-y-2 p-4 text-th-fgd-1 md:w-auto md:p-6 ${position}`}
+      className={`pointer-events-none fixed z-50 flex w-full flex-col items-end space-y-2 p-4 text-th-fgd-1 md:w-auto md:p-6 ${position}`}
     >
       {notifications.filter((n) => n.show).length > 1 ? (
         <button
-          className="default-transition pointer-events-auto rounded bg-th-bkg-3 px-2 py-1 text-xs text-th-fgd-3 md:hover:bg-th-bkg-4"
+          className="default-transition pointer-events-auto flex items-center rounded bg-th-bkg-3 px-2 py-1 text-xs text-th-fgd-3 md:hover:bg-th-bkg-4"
           onClick={clearAll}
         >
+          <XMarkIcon className="mr-1 h-3.5 w-3.5" />
           Clear All
         </button>
       ) : null}