Embed Flowser on interact page

.nvmrc

@@ -0,0 +1 @@
+v18

app/(platform)/[contractId]/interact/page.tsx

@@ -0,0 +1,26 @@
+"use client";
+import {useCurrentNetwork} from "@/hooks/useNetwork";
+import Loading from "@/components/ui/Loading";
+
+export default function InteractPage() {
+    const currentNetwork = useCurrentNetwork();
+
+    if (currentNetwork === null) {
+        return (
+            <div className="flex justify-center">
+                <Loading />
+            </div>
+        )
+    }
+
+    const baseUrl = process.env.NODE_ENV === "development" 
+        ? "http://localhost:3000"
+        : "https://interact.flowser.dev";
+
+    return (
+        <iframe
+            className="w-full h-[80vh] rounded-md"
+            src={`${baseUrl}/${currentNetwork}`}
+        />
+    )
+}

components/AccountSideBar.tsx

@@ -10,7 +10,7 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
   items: {
     href: string
     title: string
-    type: string
+    type: "sub" | "parent"
   }[]
 }
 
@@ -26,25 +26,20 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
       {...props}
     >
       {items.map((item) => (
-        !item.type || item.type !== 'coming-soon' ? <Link
+        <Link
           key={item.href}
           href={item.href}
           className={cn(
-            buttonVariants({ variant: "ghost" }),
-            "justify-start",
-            pathname === item.href
-              ? "bg-muted hover:bg-muted"
-              : "hover:bg-transparent hover:underline"
+              buttonVariants({ variant: "ghost" }),
+              "justify-start",
+              pathname === item.href
+                  ? "bg-muted hover:bg-muted"
+                  : "hover:bg-transparent hover:underline"
           )}
         >
           {item.title}
         </Link>
-        :
-        <Button disabled={true} variant="ghost" key={item.title}
-          className="justify-start">
-          {item.title}<sup className="text-xs text-muted-foreground">WIP</sup>
-        </Button>
       ))}
     </nav>
   )
-}
+}

components/UserNav.tsx

@@ -28,7 +28,7 @@ import { useCurrentUser } from '@/hooks/useCurrentUser'
 import { useAccount } from '@/hooks/useAccount'
 import ConnectionLight from "./ui/ConnectionLight"
 import FlowLogo from "./ui/FlowLogo"
-import { 
+import {
   Avatar,
   AvatarImage,
   AvatarFallback
@@ -38,15 +38,15 @@ import { useSearchParams } from "next/navigation"
 import Loading from "./ui/Loading"
 import { RadioGroup, RadioGroupItem } from "./ui/radio-group"
 import { Label } from "flowbite-react"
-import { getNetwork } from "@/hooks/useNetwork"
+import { useCurrentNetwork } from "@/hooks/useNetwork"
 
 
 export function UserNav() {
-  
+
   const user = useCurrentUser()
-  const hookNetwork = getNetwork()
+  const hookNetwork = useCurrentNetwork()
   const [network, setNetwork] = useState(hookNetwork || 'mainnet')
-  
+
   function changeNetwork(desiredNetwork: string) {
     fcl.unauthenticate()
     fcl.config(getNetworkConfig(desiredNetwork))
@@ -101,9 +101,9 @@ export default function AccountNav({user, network, changeNetwork}) {
     <>
     <DropdownMenuTrigger asChild>
     <Button variant="outline">
-      <ConnectionLight status="online"/><span className="w-2"></span> 
+      <ConnectionLight status="online"/><span className="w-2"></span>
       <span className="hidden md:inline-block">{ account.storage && account.storage?.find ? account.storage?.find.name : user?.addr }</span>
-      {account.storage && account.storage?.find ? 
+      {account.storage && account.storage?.find ?
       <Avatar className="h-6 w-6 me-2 md:hidden">
         <AvatarImage src={account.storage?.find.avatar} alt={account.storage?.find.name} />
       </Avatar>
@@ -120,7 +120,7 @@ export default function AccountNav({user, network, changeNetwork}) {
             {user?.addr}
           </p>
 
-          {account.storage && account.storage?.find && 
+          {account.storage && account.storage?.find &&
           <>
             <div className="flex pt-2 pb-1 items-center">
             <Avatar className="h-6 w-6 me-2">
@@ -180,10 +180,10 @@ export default function AccountNav({user, network, changeNetwork}) {
       </DropdownMenuSub>
 
       <DropdownMenuSeparator />
-    
+
       <DropdownMenuGroup>
         <DropdownMenuItem>
-          Settings    
+          Settings
           <DropdownMenuShortcut>
           <Cog className="h-4 w-4 text-muted-foreground" />
           </DropdownMenuShortcut>
@@ -208,10 +208,10 @@ export default function AccountNav({user, network, changeNetwork}) {
     <>
     <DropdownMenuTrigger asChild>
       <Button variant="outline">
-        <ConnectionLight status="online"/><span className="w-2"></span> 
+        <ConnectionLight status="online"/><span className="w-2"></span>
         <span className="hidden md:inline-block"><Loading className="h-5 w-5 m-0"/></span>
       </Button>
     </DropdownMenuTrigger>
     </>
   )
-}
+}

components/pages/ContractPageLayout.tsx

@@ -14,7 +14,7 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/h
 import { VerifiedBadge } from "@/components/ui/VerifiedBadge"
 
 export default function ContractPageLayout({ children }) {
-  
+
   const { contractId } = useParams()
   const user = useCurrentUser()
   const network = getNetworkFromAddress(getContractAddress(contractId))
@@ -42,7 +42,7 @@ export default function ContractPageLayout({ children }) {
     },
     {
       title: "Interact",
-      type: "coming-soon",
+      type: "parent",
       href:"/" + contractId + "/interact",
     }
   ]
@@ -60,8 +60,8 @@ export default function ContractPageLayout({ children }) {
           <AddressBadge className="text-sm h-6" address={getContractAddress(contractId)} copyBadge={true}/>
 
           {/* <p className="text-xs">
-            getContractAddress(contractId) === user?.addr ? 
-            "You own this contract, so you can update it." : 
+            getContractAddress(contractId) === user?.addr ?
+            "You own this contract, so you can update it." :
             `Login with the deploying account to modify this contract.`
           </p> */ }
 
@@ -95,4 +95,4 @@ const NotVerifiedBadge = () => {
       </HoverCardContent>
     </HoverCard>
   )
-}
+}

hooks/useNetwork.tsx

@@ -39,7 +39,7 @@ export function getNetworkConfig(network){
 export function useNetworkForAddress(address){
   let network = "testnet"
   if (address?.indexOf(".find")>-1){
-    network="mainnet"  
+    network="mainnet"
   } else{
   network = getNetworkFromAddress(address)
   }
@@ -73,12 +73,12 @@ export async function useNetwork(desiredNetwork: string = "mainnet"){
 //     }
 //     setConfig(getNetworkConfig[network], setValue)
 //   },[network, value])
-  
-  
+
+
 //   return value
 // }
 
-export function getNetwork(): string  {
+export function useCurrentNetwork(): string  {
   const [network, setNetwork] = useState<string|null>(null)
 
   useEffect(() => {
@@ -90,4 +90,4 @@ export function getNetwork(): string  {
   }, [])
 
   return network
-}
+}