ENG-3429 ENG-3428 fix(portal): Fix create modal submissions (#661)

## Affected Packages

Apps

- [X] portal

Packages

- [ ] 1ui
- [ ] api
- [ ] protocol
- [ ] sdk

Tools

- [ ] tools

## Overview

Separate state between global create vs detail page creates. When
triggering open modal, both the global and the detail page modals were
getting opened because they are tied to the same state. This should be
done with an atomFamily buttfuck it for v1 release. Let'er ride

apps/portal/app/components/create-claim/create-claim-popovers.tsx

@@ -15,7 +15,7 @@ import { IdentityPresenter } from '@0xintuition/api'
 
 import { IdentitySearchCombobox } from '@components/identity/identity-search-combo-box'
 import { InfoTooltip } from '@components/info-tooltip'
-import { createIdentityModalAtom } from '@lib/state/store'
+import { detailCreateIdentityModalAtom } from '@lib/state/store'
 import {
   getAtomDescription,
   getAtomImage,
@@ -50,7 +50,7 @@ export const IdentityPopover: React.FC<IdentityPopoverProps> = ({
   setSearchQuery,
   handleInput,
 }) => {
-  const setCreateIdentityModalActive = useSetAtom(createIdentityModalAtom)
+  const setCreateIdentityModalActive = useSetAtom(detailCreateIdentityModalAtom)
   return (
     <Popover
       open={isObjectPopoverOpen}

apps/portal/app/components/list/add-identities.tsx

@@ -19,7 +19,10 @@ import { IdentitySearchCombobox } from '@components/identity/identity-search-com
 import { InfoTooltip } from '@components/info-tooltip'
 import useFilteredIdentitySearch from '@lib/hooks/useFilteredIdentitySearch'
 import useInvalidItems from '@lib/hooks/useInvalidItems'
-import { createIdentityModalAtom, saveListModalAtom } from '@lib/state/store'
+import {
+  detailCreateIdentityModalAtom,
+  saveListModalAtom,
+} from '@lib/state/store'
 import { useFetcher } from '@remix-run/react'
 import { TagLoaderData } from '@routes/resources+/tag'
 import { TAG_PREDICATE_VAULT_ID_TESTNET, TAG_RESOURCE_ROUTE } from 'app/consts'
@@ -55,7 +58,9 @@ export function AddIdentities({
   invalidIdentities,
   setInvalidIdentities,
 }: AddIdentitiesProps) {
-  const [, setCreateIdentityModalActive] = useAtom(createIdentityModalAtom)
+  const [, setCreateIdentityModalActive] = useAtom(
+    detailCreateIdentityModalAtom,
+  )
   const [saveListModalActive, setSaveListModalActive] =
     useAtom(saveListModalAtom)
 

apps/portal/app/components/sidebar-nav.tsx

@@ -24,7 +24,10 @@ import {
 import { UserPresenter } from '@0xintuition/api'
 
 import PrivyButton from '@client/privy-button'
-import { createClaimModalAtom, createIdentityModalAtom } from '@lib/state/store'
+import {
+  globalCreateClaimModalAtom,
+  globalCreateIdentityModalAtom,
+} from '@lib/state/store'
 import { NavLink, useLocation, useNavigate, useSubmit } from '@remix-run/react'
 import { PATHS } from 'app/consts'
 import { useAtom } from 'jotai'
@@ -104,11 +107,12 @@ export default function SidebarNav({
   const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false)
 
   const [createIdentityModalActive, setCreateIdentityModalActive] = useAtom(
-    createIdentityModalAtom,
+    globalCreateIdentityModalAtom,
   )
 
-  const [createClaimModalActive, setCreateClaimModalActive] =
-    useAtom(createClaimModalAtom)
+  const [createClaimModalActive, setCreateClaimModalActive] = useAtom(
+    globalCreateClaimModalAtom,
+  )
 
   function onLogout() {
     submit(null, {

apps/portal/app/components/tags/add-tags.tsx

@@ -9,7 +9,10 @@ import { AddListExistingCta } from '@components/list/add-list-existing-cta'
 import SaveListModal from '@components/list/save-list-modal'
 import useFilteredIdentitySearch from '@lib/hooks/useFilteredIdentitySearch'
 import useInvalidItems from '@lib/hooks/useInvalidItems'
-import { createIdentityModalAtom, saveListModalAtom } from '@lib/state/store'
+import {
+  detailCreateIdentityModalAtom,
+  saveListModalAtom,
+} from '@lib/state/store'
 import { useFetcher } from '@remix-run/react'
 import { TagLoaderData } from '@routes/resources+/tag'
 import { TAG_PREDICATE_VAULT_ID_TESTNET, TAG_RESOURCE_ROUTE } from 'app/consts'
@@ -48,7 +51,9 @@ export function AddTags({
     id: tag.vault_id,
   }))
 
-  const [, setCreateIdentityModalActive] = useAtom(createIdentityModalAtom)
+  const [, setCreateIdentityModalActive] = useAtom(
+    detailCreateIdentityModalAtom,
+  )
 
   const [saveListModalActive, setSaveListModalActive] =
     useAtom(saveListModalAtom)

apps/portal/app/lib/state/store.ts

@@ -20,8 +20,10 @@ export function atomWithToggle(
   return anAtom
 }
 
-export const createIdentityModalAtom = atomWithToggle(false)
-export const createClaimModalAtom = atomWithToggle(false)
+export const globalCreateIdentityModalAtom = atomWithToggle(false)
+export const detailCreateIdentityModalAtom = atomWithToggle(false)
+export const globalCreateClaimModalAtom = atomWithToggle(false)
+export const detailCreateClaimModalAtom = atomWithToggle(false)
 export const editProfileModalAtom = atomWithToggle(false)
 export const editSocialLinksModalAtom = atomWithToggle(false)
 

apps/portal/app/routes/app+/identity+/$id+/index.tsx

@@ -13,7 +13,7 @@ import { DataHeaderSkeleton, PaginatedListSkeleton } from '@components/skeleton'
 import { useLiveLoader } from '@lib/hooks/useLiveLoader'
 import { getClaimsAboutIdentity } from '@lib/services/claims'
 import { getPositionsOnIdentity } from '@lib/services/positions'
-import { createClaimModalAtom } from '@lib/state/store'
+import { detailCreateClaimModalAtom } from '@lib/state/store'
 import { formatBalance, invariant } from '@lib/utils/misc'
 import { defer, LoaderFunctionArgs } from '@remix-run/node'
 import { Await, useRouteLoaderData } from '@remix-run/react'
@@ -69,8 +69,9 @@ export default function ProfileDataAbout() {
     useRouteLoaderData<IdentityLoaderData>('routes/app+/identity+/$id') ?? {}
   invariant(identity, NO_IDENTITY_ERROR)
 
-  const [createClaimModalActive, setCreateClaimModalActive] =
-    useAtom(createClaimModalAtom)
+  const [createClaimModalActive, setCreateClaimModalActive] = useAtom(
+    detailCreateClaimModalAtom,
+  )
 
   return (
     <>

apps/portal/app/routes/app+/profile+/$wallet+/data-about.tsx

@@ -13,7 +13,7 @@ import { DataHeaderSkeleton, PaginatedListSkeleton } from '@components/skeleton'
 import { useLiveLoader } from '@lib/hooks/useLiveLoader'
 import { getClaimsAboutIdentity } from '@lib/services/claims'
 import { getPositionsOnIdentity } from '@lib/services/positions'
-import { createClaimModalAtom } from '@lib/state/store'
+import { detailCreateClaimModalAtom } from '@lib/state/store'
 import logger from '@lib/utils/logger'
 import { formatBalance, invariant } from '@lib/utils/misc'
 import { defer, LoaderFunctionArgs, redirect } from '@remix-run/node'
@@ -83,8 +83,9 @@ export default function ProfileDataAbout() {
     useRouteLoaderData<ProfileLoaderData>('routes/app+/profile+/$wallet') ?? {}
   invariant(userIdentity, NO_USER_IDENTITY_ERROR)
 
-  const [createClaimModalActive, setCreateClaimModalActive] =
-    useAtom(createClaimModalAtom)
+  const [createClaimModalActive, setCreateClaimModalActive] = useAtom(
+    detailCreateClaimModalAtom,
+  )
 
   return (
     <>

apps/portal/app/routes/app+/profile+/_index+/data-about.tsx

@@ -13,7 +13,7 @@ import { DataHeaderSkeleton, PaginatedListSkeleton } from '@components/skeleton'
 import { useLiveLoader } from '@lib/hooks/useLiveLoader'
 import { getClaimsAboutIdentity } from '@lib/services/claims'
 import { getPositionsOnIdentity } from '@lib/services/positions'
-import { createClaimModalAtom } from '@lib/state/store'
+import { detailCreateClaimModalAtom } from '@lib/state/store'
 import logger from '@lib/utils/logger'
 import { formatBalance, invariant } from '@lib/utils/misc'
 import { defer, LoaderFunctionArgs, redirect } from '@remix-run/node'
@@ -78,8 +78,9 @@ export default function ProfileDataAbout() {
     ) ?? {}
   invariant(userIdentity, NO_USER_IDENTITY_ERROR)
 
-  const [createClaimModalActive, setCreateClaimModalActive] =
-    useAtom(createClaimModalAtom)
+  const [createClaimModalActive, setCreateClaimModalActive] = useAtom(
+    detailCreateClaimModalAtom,
+  )
 
   return (
     <>