feat: net in router query

us3r-network · Jun 24, 2023 · 0cb3a32 · 0cb3a32
1 parent cf4428a
commit 0cb3a32
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 38 deletions.
diff --git a/packages/client/scan/src/App.tsx b/packages/client/scan/src/App.tsx
@@ -76,15 +76,13 @@ export default function App() {
 
   useEffect(() => {
     const routerNet = searchParams.get('network')?.toUpperCase()
-    console.log('routerNet', routerNet)
+
     if (routerNet) {
       Object.values(Network).includes(routerNet as Network) &&
         setNetwork(routerNet as Network)
     }
   }, [searchParams, setSearchParams])
 
-  console.log('network', network)
-
   return (
     <Us3rAuthWithRainbowkitProvider>
       <ProfileStateProvider ceramicHost={CERAMIC_TESTNET_HOST}>

diff --git a/packages/client/scan/src/components/Dapp/BasicInfo.tsx b/packages/client/scan/src/components/Dapp/BasicInfo.tsx
@@ -10,7 +10,7 @@ import DappMirror from '../icons/DappMirror'
 import DappMedium from '../icons/DappMedium'
 import DappGithub from '../icons/DappGithub'
 import Copy from '../icons/Copy'
-
+import { useCeramicCtx } from '../../context/CeramicCtx'
 
 export default function BasicInfo({ dapp }: { dapp?: Dapp }) {
   const socialLink = dapp?.socialLink || []
@@ -21,7 +21,7 @@ export default function BasicInfo({ dapp }: { dapp?: Dapp }) {
   const socialMedium = socialLink.find((item) => item.platform === 'medium')
 
   const [showCopyTint, setShowCopyTint] = useState(false)
-
+  const { network } = useCeramicCtx()
   const copyAppId = useCallback(async (appId: string) => {
     try {
       await navigator.clipboard.writeText(appId)
@@ -56,7 +56,7 @@ export default function BasicInfo({ dapp }: { dapp?: Dapp }) {
           </div>
         </div>
         <div className="edit">
-          <Link to={`/dapp/${dapp?.id}/edit`}>
+          <Link to={`/dapp/${dapp?.id}/edit?network=${network}`}>
             <button>
               <DappEdit />
             </button>

diff --git a/packages/client/scan/src/components/Home/Lists/Models.tsx b/packages/client/scan/src/components/Home/Lists/Models.tsx
@@ -53,11 +53,13 @@ function ListCard({
   count: number
   isIndexed?: boolean
 }) {
+  const { network } = useCeramicCtx()
+
   return (
     <CardBox className="models-box">
       <div className="name">
         {(isIndexed && (
-          <Link to={`/models/modelview/${stream_id}`}>
+          <Link to={`/models/modelview/${stream_id}?network=${network}`}>
             <h4>{name}</h4>
             <span>{shortPubKey(stream_id, { len: 8, split: '-' })}</span>
           </Link>
@@ -71,7 +73,9 @@ function ListCard({
       <div className="desc">{description}</div>
       <div className="count">
         {(isIndexed && (
-          <Link to={`/models/model/${stream_id}/mids`}>{count}</Link>
+          <Link to={`/models/model/${stream_id}/mids?network=${network}`}>
+            {count}
+          </Link>
         )) ||
           count}
       </div>

diff --git a/packages/client/scan/src/components/Home/Lists/Streams.tsx b/packages/client/scan/src/components/Home/Lists/Streams.tsx
@@ -45,16 +45,17 @@ function ListCard({
   did: string
   indexingTime: number
 }) {
+  const { network } = useCeramicCtx()
   return (
     <CardBox className="streams-box">
       <div className="short-key">
-        <Link to={`/streams/stream/${streamId}`}>
+        <Link to={`/streams/stream/${streamId}?network=${network}`}>
           {shortPubKey(streamId, { len: 8, split: '-' })}
         </Link>{' '}
       </div>
       <div className="avatar">
         <Avatar did={did} />
-        <Link to={`/streams/profile/${did}`}>
+        <Link to={`/streams/profile/${did}?network=${network}`}>
           <UserName did={did} />
         </Link>
       </div>

diff --git a/packages/client/scan/src/components/Home/Lists/Title.tsx b/packages/client/scan/src/components/Home/Lists/Title.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 import ComposeDB from '../../icons/ComposeDB'
 import { Link } from 'react-router-dom'
+import { useCeramicCtx } from '../../../context/CeramicCtx'
 
 export default function Title({
   title,
@@ -9,14 +10,15 @@ export default function Title({
   title: string
   viewAll: string
 }) {
+  const { network } = useCeramicCtx()
   return (
     <Box>
       <div>
         <ComposeDB />
         <h2>{title}</h2>
       </div>
       <div className="view-all">
-        <Link to={viewAll}>View All</Link>
+        <Link to={`${viewAll}?network=${network}`}>View All</Link>
       </div>
     </Box>
   )

diff --git a/packages/client/scan/src/components/ListTable.tsx b/packages/client/scan/src/components/ListTable.tsx
@@ -9,6 +9,7 @@ import { TableBox } from './TableBox'
 import { FamilyOrAppMapReverse, Types } from '../constants'
 import UserAvatarStyled from './common/UserAvatarStyled'
 import { UserName } from '@us3r-network/profile'
+import { useCeramicCtx } from '../context/CeramicCtx'
 
 export default function ListTable({
   data,
@@ -17,6 +18,7 @@ export default function ListTable({
   data: Array<Stream>
   showDid?: boolean
 }) {
+  const { network } = useCeramicCtx()
   return (
     <TableBox isMobile={isMobile}>
       <TableContainer isMobile={isMobile}>
@@ -41,13 +43,13 @@ export default function ListTable({
             let schemaOrModel = <div className="xxxx">-</div>
             if (item.schema) {
               schemaOrModel = (
-                <Link to={`/streams/stream/${item.schema}`}>
+                <Link to={`/streams/stream/${item.schema}?network=${network}`}>
                   {shortPubKey(item.schema, { len: 8, split: '-' })}
                 </Link>
               )
             } else if (item.model && (item.type === '0' || item.type === '3')) {
               schemaOrModel = (
-                <Link to={`/streams/stream/${item.model}`}>
+                <Link to={`/streams/stream/${item.model}?network=${network}`}>
                   {shortPubKey(item.model, { len: 8, split: '-' })}
                 </Link>
               )
@@ -56,15 +58,19 @@ export default function ListTable({
             return (
               <tr key={item.streamId + idx}>
                 <td>
-                  <Link to={`/streams/stream/${item.streamId}`}>
+                  <Link
+                    to={`/streams/stream/${item.streamId}?network=${network}`}
+                  >
                     {shortPubKey(item.streamId, { len: 8, split: '-' })}
                   </Link>
                 </td>
                 {showDid && (
                   <td>
                     <div className="did-container">
                       <Avatar did={item.did} />
-                      <Link to={`/streams/profile/${item.did}`}>
+                      <Link
+                        to={`/streams/profile/${item.did}?network=${network}`}
+                      >
                         <UserName did={item.did} />
                       </Link>
                     </div>
@@ -76,7 +82,7 @@ export default function ListTable({
                       <Link
                         to={`/streams/family/${encodeURIComponent(
                           item.domain
-                        )}`}
+                        )}?network=${network}`}
                       >
                         <div className="family">
                           {item.domain.length > 15
@@ -88,7 +94,9 @@ export default function ListTable({
                   )) || (
                     <div className="family-container">
                       {(item.familyOrApp && (
-                        <Link to={`/streams/family/${item.familyOrApp}`}>
+                        <Link
+                          to={`/streams/family/${item.familyOrApp}?network=${network}`}
+                        >
                           <div className="family">
                             {FamilyOrAppMapReverse[item.familyOrApp] ||
                             item.familyOrApp.length > 15

diff --git a/packages/client/scan/src/components/MobileNav.tsx b/packages/client/scan/src/components/MobileNav.tsx
@@ -13,10 +13,13 @@ import {
   useSession,
 } from '@us3r-network/auth-with-rainbowkit'
 import UserAvatarStyled from './common/UserAvatarStyled'
+import { useCeramicCtx } from '../context/CeramicCtx'
 
 export default function Nav() {
   const { signIn, signOut } = useAuthentication()
   const session = useSession()
+  const { network } = useCeramicCtx()
+
   let location = useLocation()
   const navigate = useNavigate()
   const [openFilter, setOpenFilter] = useState(false)
@@ -33,7 +36,7 @@ export default function Nav() {
           <BackCircle />
         </span>
       ) : (
-        <Link to={'/'}>
+        <Link to={`/?network=${network}`}>
           <div className="logo-container">
             <Logo className="App-logo" alt="logo" />
             {/* <span>Alpha</span> */}
@@ -76,7 +79,10 @@ export default function Nav() {
           <FilterSelectWrapper>
             <FilterSelectInner>
               <div className="nav">
-                <Link to={'/'} onClick={() => setOpenFilter(!openFilter)}>
+                <Link
+                  to={`/?network=${network}`}
+                  onClick={() => setOpenFilter(!openFilter)}
+                >
                   <div
                     className={`nav-item ${
                       location.pathname === '/' ? 'active' : ''
@@ -89,7 +95,7 @@ export default function Nav() {
                   </div>
                 </Link>
                 <Link
-                  to={'/streams'}
+                  to={`/streams?network=${network}`}
                   onClick={() => setOpenFilter(!openFilter)}
                 >
                   <div
@@ -104,7 +110,10 @@ export default function Nav() {
                   </div>
                 </Link>
 
-                <Link to={'/models'} onClick={() => setOpenFilter(!openFilter)}>
+                <Link
+                  to={`/models?network=${network}`}
+                  onClick={() => setOpenFilter(!openFilter)}
+                >
                   <div
                     className={`nav-item ${
                       location.pathname === '/models' ? 'active' : ''

diff --git a/packages/client/scan/src/components/ModelStreamList.tsx b/packages/client/scan/src/components/ModelStreamList.tsx
@@ -6,6 +6,7 @@ import { shortPubKey } from '../utils/shortPubKey'
 import { Link } from 'react-router-dom'
 import UserAvatarStyled from './common/UserAvatarStyled'
 import { UserName } from '@us3r-network/profile'
+import { useCeramicCtx } from '../context/CeramicCtx'
 
 export default function ModelStreamList({
   modelId,
@@ -14,6 +15,8 @@ export default function ModelStreamList({
   modelId: string
   data: ModelMid[]
 }) {
+  const { network } = useCeramicCtx()
+
   return (
     <TableBox>
       <TableContainer>
@@ -30,7 +33,9 @@ export default function ModelStreamList({
               <tr key={item.streamId}>
                 <td>
                   <div className="stream-id">
-                    <Link to={`/streams/stream/${item.streamId}`}>
+                    <Link
+                      to={`/streams/stream/${item.streamId}?network=${network}`}
+                    >
                       {shortPubKey(item.streamId, {
                         len: 8,
                         split: '-',

diff --git a/packages/client/scan/src/components/NoMatch.tsx b/packages/client/scan/src/components/NoMatch.tsx
@@ -1,12 +1,15 @@
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
+import { useCeramicCtx } from '../context/CeramicCtx'
 
 export default function NoMatch() {
+  const { network } = useCeramicCtx()
+
   return (
     <Container>
       <h2>404</h2>
       <p>
-        <Link to="/">Go to the home page</Link>
+        <Link to={`/?network=${network}`}>Go to the home page</Link>
       </p>
     </Container>
   )

diff --git a/packages/client/scan/src/components/StreamTable.tsx b/packages/client/scan/src/components/StreamTable.tsx
@@ -35,7 +35,9 @@ export default function StreamTable({
         <div>
           <span className="name">Stream ID:</span>
           <div>
-            <Link to={`/streams/stream/${data.streamId}`}>{data.streamId}</Link>
+            <Link to={`/streams/stream/${data.streamId}?network=${network}`}>
+              {data.streamId}
+            </Link>
           </div>
         </div>
         <div className="network">
@@ -56,7 +58,9 @@ export default function StreamTable({
           <span className="name">Family or App:</span>
           {(data.familyOrApp && (
             <div>
-              <Link to={`/streams/family/${data.familyOrApp}`}>
+              <Link
+                to={`/streams/family/${data.familyOrApp}?network=${network}`}
+              >
                 <div className="family">
                   {FamilyOrAppMapReverse[data.familyOrApp] || data.familyOrApp}
                 </div>
@@ -71,7 +75,7 @@ export default function StreamTable({
         <div className="from">
           <span className="name">From:</span>
           <div>
-            <Link to={`/streams/profile/${data.did}`}>
+            <Link to={`/streams/profile/${data.did}?network=${network}`}>
               <UserAvatarStyled did={data.did} className="avatar" />
               <UserName did={data.did} />
             </Link>
@@ -90,7 +94,9 @@ export default function StreamTable({
             <span className="name">Model:</span>
             {(data.model !== 'kh4q0ozorrgaq2mezktnrmdwleo1d' && (
               <div>
-                <Link to={`/streams/stream/${data.model}`}>{data.model}</Link>
+                <Link to={`/streams/stream/${data.model}?network=${network}`}>
+                  {data.model}
+                </Link>
                 <div>
                   <Check />
                   <span>ComposeDB</span>
@@ -103,7 +109,9 @@ export default function StreamTable({
             <span className="name">Schema:</span>
             {(data.schema && (
               <div>
-                <Link to={`/streams/stream/${data.schema}`}>{data.schema}</Link>
+                <Link to={`/streams/stream/${data.schema}?network=${network}`}>
+                  {data.schema}
+                </Link>
               </div>
             )) ||
               '-'}

diff --git a/packages/client/scan/src/container/DappInfo.tsx b/packages/client/scan/src/container/DappInfo.tsx
@@ -135,7 +135,9 @@ function DappModels({
                   </button>
                 )}
               </div>
-              <Link to={`/models/model/create?dappId=${appId}`}>
+              <Link
+                to={`/models/model/create?dappId=${appId}?network=${network}`}
+              >
                 <div className="create">
                   <Add stroke="#fff" /> Create
                 </div>
@@ -155,7 +157,7 @@ function DappModels({
                 }}
               />
             </div>
-            <Link to={'/models'}>
+            <Link to={`/models?network=${network}`}>
               <div className="explore">
                 <ExploreAdd /> Explore More
               </div>