Merge pull request #181 from public-awesome/studio-survey-update

Increase Studio Survey visibility + minor UI updates

.env.example

@@ -1,4 +1,4 @@
-APP_VERSION=0.6.8
+APP_VERSION=0.6.9
 
 NEXT_PUBLIC_PINATA_ENDPOINT_URL=https://api.pinata.cloud/pinning/pinFileToIPFS
 NEXT_PUBLIC_SG721_CODE_ID=2595
@@ -32,4 +32,5 @@ NEXT_PUBLIC_BLOCK_EXPLORER_URL=https://testnet-explorer.publicawesome.dev/starga
 NEXT_PUBLIC_NETWORK=testnet
 NEXT_PUBLIC_STARGAZE_WEBSITE_URL=https://testnet.publicawesome.dev
 NEXT_PUBLIC_BADGES_URL=https://badges.publicawesome.dev
-NEXT_PUBLIC_WEBSITE_URL=https://
+NEXT_PUBLIC_WEBSITE_URL=https://
+NEXT_PUBLIC_SYNC_COLLECTIONS_API_URL="https://..."

components/Sidebar.tsx

@@ -38,13 +38,13 @@ export const Sidebar = () => {
     <SidebarLayout>
       {/* Stargaze brand as home button */}
       <Anchor href="/" onContextMenu={(e) => [e.preventDefault(), router.push('/brand')]}>
-        <img alt="Brand Text" className="w-full" src="/stargaze_logo_800.svg" />
+        <img alt="Brand Text" className="ml-6 w-3/4" src="/studio-logo.png" />
       </Anchor>
       {/* wallet button */}
       <WalletLoader />
       {/* main navigation routes */}
 
-      <div className="absolute top-[20%] left-[5%]">
+      <div className="absolute top-[20%] left-[5%] mt-2">
         <ul className="group p-2 w-full bg-transparent menu rounded-box">
           <li tabIndex={0}>
             <div
@@ -258,9 +258,9 @@ export const Sidebar = () => {
       {/* footer attribution */}
       <div className="text-xs text-white/50">
         Stargaze Studio {process.env.APP_VERSION} <br />
-        Made by{' '}
+        Powered by{' '}
-        <Anchor className="text-plumbus hover:underline" href="https://deuslabs.fi">
+        <Anchor className="text-plumbus hover:underline" href="https://stargaze.zone">
-          deus labs
+          Stargaze
         </Anchor>
       </div>
 

components/WalletLoader.tsx

@@ -16,7 +16,7 @@ export const WalletLoader = () => {
   const displayName = useWalletStore((store) => store.name || getShortAddress(store.address))
 
   return (
-    <Popover className="mt-8 mb-2">
+    <Popover className="mt-4 mb-2">
       {({ close }) => (
         <>
           <div className="grid -mx-4">

env.d.ts

@@ -45,6 +45,7 @@ declare namespace NodeJS {
     readonly NEXT_PUBLIC_NETWORK: string
     readonly NEXT_PUBLIC_STARGAZE_WEBSITE_URL: string
     readonly NEXT_PUBLIC_WEBSITE_URL: string
+    readonly NEXT_PUBLIC_SYNC_COLLECTIONS_API_URL: string
   }
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stargaze-studio",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "workspaces": [
     "packages/*"
   ],

pages/collections/create.tsx

@@ -9,6 +9,7 @@
 import { toUtf8 } from '@cosmjs/encoding'
 import { coin } from '@cosmjs/proto-signing'
 import { Sidetab } from '@typeform/embed-react'
+import axios from 'axios'
 import clsx from 'clsx'
 import { Alert } from 'components/Alert'
 import { Anchor } from 'components/Anchor'
@@ -41,7 +42,7 @@ import type { DispatchExecuteArgs as VendingFactoryDispatchExecuteArgs } from 'c
 import { dispatchExecute as vendingFactoryDispatchExecute } from 'contracts/vendingFactory/messages/execute'
 import type { NextPage } from 'next'
 import { NextSeo } from 'next-seo'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import { upload } from 'services/upload'
 import { compareFileArrays } from 'utils/compareFileArrays'
@@ -55,6 +56,7 @@ import {
   SG721_CODE_ID,
   SG721_UPDATABLE_CODE_ID,
   STARGAZE_URL,
+  SYNC_COLLECTIONS_API_URL,
   VENDING_FACTORY_ADDRESS,
   VENDING_FACTORY_FLEX_ADDRESS,
   VENDING_FACTORY_UPDATABLE_ADDRESS,
@@ -81,6 +83,7 @@ const CollectionCreationPage: NextPage = () => {
     baseFactory: baseFactoryContract,
   } = useContracts()
   const scrollRef = useRef<HTMLDivElement>(null)
+  const sidetabRef = useRef<any>(null)
 
   const vendingFactoryMessages = useMemo(
     () => vendingFactoryContract?.use(VENDING_FACTORY_ADDRESS),
@@ -1102,14 +1105,45 @@ const CollectionCreationPage: NextPage = () => {
         )
     }
   }
+
+  const syncCollections = useCallback(async () => {
+    const collectionAddress =
+      minterType === 'openEdition' ? openEditionMinterDetails?.sg721ContractAddress : sg721ContractAddress
+    if (collectionAddress && SYNC_COLLECTIONS_API_URL) {
+      await axios.get(`${SYNC_COLLECTIONS_API_URL}/${collectionAddress}`).catch((error) => {
+        console.error('Sync collections: ', error)
+      })
+    }
+  }, [minterType, openEditionMinterDetails?.sg721ContractAddress, sg721ContractAddress])
+
   useEffect(() => {
     if (
       vendingMinterContractAddress !== null ||
       openEditionMinterDetails?.openEditionMinterContractAddress ||
       isMintingComplete
-    )
+    ) {
       scrollRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [vendingMinterContractAddress, openEditionMinterDetails?.openEditionMinterContractAddress, isMintingComplete])
+    }
+    if (
+      (minterType === 'vending' && vendingMinterContractAddress !== null) ||
+      (minterType === 'openEdition' && openEditionMinterDetails?.openEditionMinterContractAddress) ||
+      (minterType === 'base' && vendingMinterContractAddress !== null && isMintingComplete)
+    ) {
+      void syncCollections()
+      if (sidetabRef.current) {
+        setTimeout(() => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+          sidetabRef.current.open()
+        }, 3000)
+      }
+    }
+  }, [
+    vendingMinterContractAddress,
+    openEditionMinterDetails?.openEditionMinterContractAddress,
+    isMintingComplete,
+    minterType,
+    syncCollections,
+  ])
 
   useEffect(() => {
     setBaseTokenUri(uploadDetails?.baseTokenURI as string)
@@ -1600,7 +1634,14 @@ const CollectionCreationPage: NextPage = () => {
               Mint & Add Token(s)
             </Button>
           </Conditional>
-          <Sidetab buttonColor="#455CF9" buttonText="Studio Survey" height={600} id="yJnL8fXk" width={800} />
+          <Sidetab
+            buttonColor="#455CF9"
+            buttonText="Studio Survey"
+            height={600}
+            id="yJnL8fXk"
+            ref={sidetabRef}
+            width={800}
+          />
         </div>
       </div>
     </div>

pages/home.tsx

@@ -0,0 +1,53 @@
+import { Conditional } from 'components/Conditional'
+import { HomeCard } from 'components/HomeCard'
+import type { NextPage } from 'next'
+import { BADGE_HUB_ADDRESS } from 'utils/constants'
+import { withMetadata } from 'utils/layout'
+
+const HomePage: NextPage = () => {
+  return (
+    <section className="px-8 pt-4 pb-16 mx-auto space-y-8 max-w-4xl">
+      <div className="flex justify-center items-center py-8 max-w-xl">
+        <img alt="Brand Text" className="ml-[50%] w-1/2" src="/studio-logo.png" />
+      </div>
+      <h1 className="font-heading text-4xl font-bold">Welcome!</h1>
+      <p className="text-xl">
+        Looking for a fast and efficient way to build an NFT collection? Stargaze Studio is the solution.
+        <br />
+        <br />
+        Stargaze Studio is built to provide useful smart contract interfaces that help you build and deploy your own NFT
+        collections in no time.
+      </p>
+
+      <br />
+
+      <br />
+
+      <div className="grid gap-8 md:grid-cols-2">
+        <HomeCard
+          className="p-4 -m-4 hover:bg-gray-500/10 rounded"
+          link="/collections/"
+          linkText="Collections"
+          title="Collections"
+        >
+          Create a collection, view a list of your collections or execute collection actions and queries.
+        </HomeCard>
+        <Conditional test={BADGE_HUB_ADDRESS !== undefined}>
+          <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/badges" linkText="Badges" title="Badges">
+            Create badges, view a list of them or execute badge related actions and queries.
+          </HomeCard>
+        </Conditional>
+        <HomeCard
+          className="p-4 -m-4 hover:bg-gray-500/10 rounded"
+          link="/contracts"
+          linkText="Dashboards"
+          title="Contract Dashboards"
+        >
+          Execute actions and queries for a variety of contracts.
+        </HomeCard>
+      </div>
+    </section>
+  )
+}
+
+export default withMetadata(HomePage, { center: false })

pages/index.tsx

@@ -6,33 +6,27 @@ import { withMetadata } from 'utils/layout'
 
 const HomePage: NextPage = () => {
   return (
-    <section className="px-8 pt-4 pb-16 mx-auto space-y-8 max-w-4xl">
+    <section className="pt-4 pb-16 mt-28 ml-[25%] w-3/5">
-      <div className="flex justify-center items-center py-8 max-w-xl">
+      <div className="grid grid-cols-1 gap-10">
-        <img alt="Brand Text" className="ml-[50%] w-full" src="/stargaze_logo_800.svg" />
+        <HomeCard
-      </div>
+          className="p-8 -m-4 hover:bg-gray-500/10 rounded"
-      <h1 className="font-heading text-4xl font-bold">Welcome!</h1>
+          link="/collections/"
-      <p className="text-xl">
+          linkText="Collections"
-        Looking for a fast and efficient way to build an NFT collection? Stargaze Studio is the solution.
+          title="Collections"
-        <br />
+        >
-        <br />
-        Stargaze Studio is built to provide useful smart contract interfaces that help you build and deploy your own NFT
-        collections in no time.
-      </p>
-
-      <br />
-
-      <br />
-
-      <div className="grid gap-8 md:grid-cols-2">
-        <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/collections/" title="Collections">
           Create a collection, view a list of your collections or execute collection actions and queries.
         </HomeCard>
         <Conditional test={BADGE_HUB_ADDRESS !== undefined}>
-          <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/badges" title="Badges">
+          <HomeCard className="p-8 -m-4 hover:bg-gray-500/10 rounded" link="/badges" linkText="Badges" title="Badges">
             Create badges, view a list of them or execute badge related actions and queries.
           </HomeCard>
         </Conditional>
-        <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/contracts" title="Contract Dashboards">
+        <HomeCard
+          className="p-8 -m-4 hover:bg-gray-500/10 rounded"
+          link="/contracts"
+          linkText="Dashboards"
+          title="Contract Dashboards"
+        >
           Execute actions and queries for a variety of contracts.
         </HomeCard>
       </div>

utils/constants.ts

@@ -30,7 +30,6 @@ export const PINATA_ENDPOINT_URL = process.env.NEXT_PUBLIC_PINATA_ENDPOINT_URL
 export const NETWORK = process.env.NEXT_PUBLIC_NETWORK
 export const API_URL = process.env.NEXT_PUBLIC_API_URL
 export const STARGAZE_URL = process.env.NEXT_PUBLIC_STARGAZE_WEBSITE_URL
-
 export const BLOCK_EXPLORER_URL = process.env.NEXT_PUBLIC_BLOCK_EXPLORER_URL
-
 export const WEBSITE_URL = process.env.NEXT_PUBLIC_WEBSITE_URL
+export const SYNC_COLLECTIONS_API_URL = process.env.NEXT_PUBLIC_SYNC_COLLECTIONS_API_URL

utils/links.ts

@@ -1,26 +1,27 @@
 import { ImGithub, ImTwitter } from 'react-icons/im'
 import { SiDiscord, SiTelegram } from 'react-icons/si'
 
-import { BLOCK_EXPLORER_URL } from './constants'
+import { BLOCK_EXPLORER_URL, NETWORK } from './constants'
 
 export const links = {
   // main links
-  deuslabs: `https://deuslabs.fi`,
   Discord: `https://discord.gg/stargaze`,
   Docs: `https://docs.stargaze.zone/guides/stargaze-studio`,
   GitHub: `https://github.com/public-awesome/stargaze-studio`,
-  Stargaze: `https://stargaze.zone/`,
+  Survey: `https://stargaze-zone.typeform.com/studiosurvey`,
   Telegram: `https://t.me/joinchat/ZQ95YmIn3AI0ODFh`,
   Twitter: `https://twitter.com/stargazezone`,
   Explorer: BLOCK_EXPLORER_URL,
   Documentation: 'https://docs.stargaze.zone/guides/stargaze-studio',
+  Switch: `${NETWORK === 'mainnet' ? 'https://studio.publicawesome.dev' : 'https://studio.stargaze.zone'}`,
 }
 
 export const footerLinks = [
+  { text: `Switch to ${NETWORK === 'mainnet' ? 'Testnet' : 'Mainnet'}`, href: links.Switch },
   { text: 'Block Explorer', href: links.Explorer },
   { text: 'Documentation', href: links.Docs },
   { text: 'Submit an issue', href: `${links.GitHub}/issues/new` },
-  { text: 'Powered by Stargaze', href: links.Stargaze },
+  { text: 'Studio Survey', href: links.Survey },
 ]
 
 export const socialsLinks = [