realms + realm switch (solana-labs#34)

* added realms page * code fix * fix search * realm switch * realm info clear on realms page + solana logo and favicon * loader * dao info fix and solona logo always in main nav * realms logo fixes * null in realm info fix * main logo path fix * fix: add SOCEAN img * realm logo and go back to organizations nav * fix wallet disconnection on realms page * realms with env paramenter * adding endpoint options to dao * dao and realms env for app * manual merge realms-page branch Co-authored-by: Adrian Brzeziński <[email protected]> Co-authored-by: Sebastian.Bor <[email protected]>
dialectlabs · Oct 4, 2021 · 6840518 · 6840518
1 parent de675d5
commit 6840518
Show file tree

Hide file tree

Showing 26 changed files with 397 additions and 157 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,2 @@
+#Without comment application will run in context of one dao
+#DAO=MNGO
diff --git a/components/DiscussionPanel.tsx b/components/DiscussionPanel.tsx
@@ -8,7 +8,7 @@ const DiscussionPanel = () => {
   )
 
   return (
-    <div className="bg-bkg-2 p-6 rounded-lg">
+    <div className="bg-bkg-2 border border-bkg-3 p-6 rounded-lg">
       <h2 className="mb-4">
         Discussion{' '}
         <span className="text-base text-fgd-3">

diff --git a/components/Input.tsx b/components/Input.tsx
@@ -32,7 +32,9 @@ const Input = ({
         type={type}
         value={value}
         onChange={onChange}
-        className={`${className} font-display px-2 py-2 w-full bg-bkg-1 rounded text-fgd-1 
+        className={`${
+          className ? className : ''
+        } font-display px-2 py-2 w-full bg-bkg-1 rounded text-fgd-1 
           border border-fgd-4 default-transition hover:border-primary-dark 
           focus:border-primary-light focus:outline-none 
           ${disabled ? 'cursor-not-allowed hover:border-fgd-4 text-fgd-3' : ''}

diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -1,42 +1,42 @@
-import { useState } from 'react'
-import useRealm from '../hooks/useRealm'
-import { getResourcePathPart } from '../tools/core/resources'
+//import { useState } from 'react'
 import ConnectWalletButton from './ConnectWalletButton'
+import useRealm from '../hooks/useRealm'
+//import { getResourcePathPart } from '../tools/core/resources'
+import { UserGroupIcon } from '@heroicons/react/solid'
 
 const NavBar = () => {
   const { realm, realmInfo } = useRealm()
-  const [showAltText, setShowAltText] = useState(false)
-
-  const onLogoError = (e: any) => {
-    // Hide broken image and show the realm name instead
-    e.target.style.display = 'none'
-    setShowAltText(true)
-  }
-
-  const realmName = realmInfo?.mainnetName ?? realm?.info.name
+  //const [showAltText, setShowAltText] = useState(false)
+  const { DAO } = process.env
 
-  // TODO: Show solana/realms branding when on the home page
+  const realmName = DAO ? realmInfo?.mainnetName ?? realm?.info.name : 'Solana'
+  //   const onLogoError = (e: any) => {
+  // Hide broken image and show the realm name instead
+  //     e.target.style.display = 'none'
+  //     setShowAltText(true)
+  //   }
 
   return (
-    <div className="bg-bkg-1 flex h-20 items-center justify-between px-6">
-      <div className="flex justify-start lg:w-0 lg:flex-1">
-        <a href={realmInfo?.website ? `${realmInfo?.website}` : ''}>
+    <div className="grid grid-cols-12">
+      <div className="bg-bkg-1 col-span-12 xl:col-start-2 xl:col-span-10 flex h-20 items-center justify-between px-4">
+        <a href={DAO && realmInfo?.website ? `${realmInfo?.website}` : '/'}>
           {realmName && (
             <>
               <span className="sr-only">{realmName}</span>
-              <img
+              <UserGroupIcon className="h-8 w-8 text-fgd-1" />
+              {/* <img
                 className="h-7"
                 src={`/realms/${getResourcePathPart(realmName)}/img/logo.svg`}
                 alt={realmName}
                 width="auto"
                 onError={onLogoError}
               />
-              {showAltText && <span> {realmName}</span>}
+              {showAltText && <span> {realmName}</span>} */}
             </>
           )}
         </a>
+        <ConnectWalletButton />
       </div>
-      <ConnectWalletButton />
     </div>
   )
 }

diff --git a/components/OrganzationsBackNav.tsx b/components/OrganzationsBackNav.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import useRealm from '../hooks/useRealm'
+import { GlobeAltIcon } from '@heroicons/react/outline'
+import { ArrowLeftIcon } from '@heroicons/react/solid'
+import Link from 'next/link'
+import { TwitterIcon } from '../components/icons'
+
+const OrganzationsBackNav = () => {
+  const { realm, realmInfo } = useRealm()
+  const { DAO } = process.env
+  const realmName = realmInfo?.mainnetName ?? realm?.info?.name
+  return (
+    <div className="pb-4">
+      {!DAO ? (
+        <Link href={`/realms`}>
+          <a className="default-transition flex items-center mb-6 text-fgd-3 text-sm transition-all hover:text-fgd-1">
+            <ArrowLeftIcon className="h-4 w-4 mr-1 text-primary-light" />
+            Back
+          </a>
+        </Link>
+      ) : null}
+      <div className="border-b border-bkg-4 flex items-center justify-between pb-4">
+        {realmName && (
+          <div className="flex items-center">
+            {realmInfo?.ogImage ? (
+              <div className="bg-[rgba(255,255,255,0.1)] rounded-full h-14 w-14 flex items-center justify-center">
+                <img className="w-8" src={realmInfo?.ogImage}></img>
+              </div>
+            ) : (
+              <div className="bg-[rgba(255,255,255,0.1)] h-14 w-14 flex font-bold items-center justify-center rounded-full text-fgd-3">
+                {realmName?.charAt(0)}
+              </div>
+            )}
+            <h1 className="ml-3">{realmName}</h1>
+          </div>
+        )}
+        <div className="flex items-center space-x-6">
+          {realmInfo?.website ? (
+            <a
+              className="default-transition flex items-center text-fgd-2 text-sm hover:text-fgd-1"
+              href={realmInfo?.website}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <GlobeAltIcon className="mr-1.5 h-4 w-4" />
+              Website
+            </a>
+          ) : null}
+          {realmInfo?.twitter ? (
+            <a
+              className="default-transition flex items-center text-fgd-2 text-sm hover:text-fgd-1"
+              href={`https://twitter.com/${realmInfo?.twitter}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <TwitterIcon className="mr-1.5 h-4 w-4" />
+              Twitter
+            </a>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default OrganzationsBackNav
diff --git a/components/PageBodyContainer.tsx b/components/PageBodyContainer.tsx
@@ -1,5 +1,5 @@
 const PageBodyContainer = ({ children }) => (
-  <div className="min-h-screen grid grid-cols-12 gap-4">
+  <div className="min-h-screen grid grid-cols-12 gap-4 pb-10 pt-4">
     <div className="col-span-12 px-4 xl:col-start-2 xl:col-span-10">
       {children}
     </div>

diff --git a/components/ProposalCard.tsx b/components/ProposalCard.tsx
@@ -44,7 +44,7 @@ const ProposalCard = ({ id, proposal }: ProposalCardProps) => {
       <Link href={`/dao/${symbol}/proposal/${id}`}>
         <a>
           <StyledCardWrapepr className="bg-bkg-2 border border-bkg-3 default-transition rounded-lg hover:bg-bkg-3">
-            <div className="mb-2 px-6 py-4">
+            <div className="px-6 py-4">
               <div className="flex items-start justify-between">
                 <h3 className="text-fgd-1">{proposal.name}</h3>
                 <div className="flex items-center pl-4 pt-1">
@@ -55,7 +55,7 @@ const ProposalCard = ({ id, proposal }: ProposalCardProps) => {
               <ProposalTimeStatus proposal={proposal} />
             </div>
             {ProposalState[proposal.state] === 'Voting' && (
-              <div className="bg-[rgba(255,255,255,0.05)] flex px-6 py-4">
+              <div className="bg-[rgba(255,255,255,0.05)] flex mt-2 px-6 py-4">
                 <div className="border-r border-bkg-4 pr-4 w-1/2">
                   <VoteResultsBar
                     approveVotePercentage={

diff --git a/components/TopBar.tsx b/components/TopBar.tsx
diff --git a/components/explorer/tools.ts b/components/explorer/tools.ts
@@ -8,7 +8,6 @@ export function getExplorerUrl(
 ) {
   const getClusterUrlParam = () => {
     let cluster: string
-
     if (endpoint === 'localnet') {
       cluster = `custom&customUrl=${encodeURIComponent(
         'http://127.0.0.1:8899'

diff --git a/components/icons.jsx b/components/icons.jsx
@@ -0,0 +1,17 @@
+export const TwitterIcon = ({ className }) => {
+  return (
+    <svg
+      className={`${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+    >
+      <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
+    </svg>
+  )
+}
diff --git a/hooks/useHydrateStore.tsx b/hooks/useHydrateStore.tsx
@@ -2,19 +2,21 @@ import { Connection } from '@solana/web3.js'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { getRealmInfo } from '../models/registry/api'
+import { EndpointTypes } from '../models/types'
 import useWalletStore, { ENDPOINTS } from '../stores/useWalletStore'
 
 export default function useHydrateStore() {
   const router = useRouter()
-  const { pk, symbol } = router.query
+  const { symbol, endpoint, pk } = router.query
+  const apiEndpoint = endpoint ? (endpoint[0] as EndpointTypes) : 'mainnet'
   const mints = useWalletStore((s) => s.mints)
   const setWalletStore = useWalletStore((s) => s.set)
   const { fetchAllRealms, fetchRealm, fetchProposal } = useWalletStore(
     (s) => s.actions
   )
   useEffect(() => {
     const fetch = async () => {
-      const realmInfo = getRealmInfo(symbol as string)
+      const realmInfo = getRealmInfo(symbol as string, apiEndpoint)
       if (realmInfo) {
         setWalletStore((s) => {
           const ENDPOINT = ENDPOINTS.find((e) => e.name === realmInfo.endpoint)

diff --git a/hooks/useRealm.tsx b/hooks/useRealm.tsx
@@ -1,13 +1,14 @@
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 import { getRealmInfo } from '../models/registry/api'
+import { EndpointTypes } from '../models/types'
 
 import useWalletStore from '../stores/useWalletStore'
 
 export default function useRealm() {
   const router = useRouter()
-  const { symbol } = router.query
-
+  const { symbol, endpoint } = router.query
+  const apiEndpoint = endpoint ? (endpoint[0] as EndpointTypes) : 'mainnet'
   const connected = useWalletStore((s) => s.connected)
   const wallet = useWalletStore((s) => s.current)
   const tokenAccounts = useWalletStore((s) => s.tokenAccounts)
@@ -22,7 +23,9 @@ export default function useRealm() {
     councilTokenOwnerRecords,
   } = useWalletStore((s) => s.selectedRealm)
 
-  const realmInfo = useMemo(() => getRealmInfo(symbol as string), [symbol])
+  const realmInfo = useMemo(() => getRealmInfo(symbol as string, apiEndpoint), [
+    symbol,
+  ])
 
   const realmTokenAccount = useMemo(
     () =>

diff --git a/models/registry/api.ts b/models/registry/api.ts
@@ -1,9 +1,6 @@
 import { PublicKey } from '@solana/web3.js'
-import {
-  endsWithIgnoreCase,
-  equalsIgnoreCase,
-  replaceIgnoreCase,
-} from '../../tools/core/strings'
+import { equalsIgnoreCase } from '../../tools/core/strings'
+import { EndpointTypes } from '../types'
 
 export interface RealmInfo {
   symbol: string
@@ -33,14 +30,16 @@ const MAINNET_REALMS: RealmInfo[] = [
     keywords:
       'Mango Markets, DAO, Governance, Serum, SRM, Serum DEX, DEFI, Decentralized Finance, Decentralised Finance, Crypto, ERC20, Ethereum, Decentralize, Solana, SOL, SPL, Cross-Chain, Trading, Fastest, Fast, SerumBTC, SerumUSD, SRM Tokens, SPL Tokens',
     twitter: '@mangomarkets',
-    ogImage: 'https://token.mango.markets/preview.jpg',
+    ogImage: 'https://trade.mango.markets/assets/icons/logo.svg',
   },
 
   {
     symbol: 'SOCEAN',
     programId: new PublicKey('5hAykmD4YGcQ7Am3N7nC9kyELq6CThAkU82nhNKDJiCy'),
     realmId: new PublicKey('759qyfKDMMuo9v36tW7fbGanL63mZFPNbhU7zjPrkuGK'),
     website: 'https://www.socean.fi',
+    ogImage:
+      'https://socean-git-enhancement-orca-price-feed-lieuzhenghong.vercel.app/static/media/socnRound.c466b499.png',
   },
   {
     symbol: 'Governance',
@@ -79,35 +78,34 @@ const DEVNET_REALMS: RealmInfo[] = [
   },
 ]
 
-export function getAllRealmInfos(endpoint: 'mainnet' | 'devnet' = 'mainnet') {
+export function getAllRealmInfos(endpoint: EndpointTypes = 'mainnet') {
   return endpoint === 'mainnet' ? MAINNET_REALMS : DEVNET_REALMS
 }
 
-export function getRealmInfo(symbol: string) {
+export function getRealmInfo(
+  symbol: string,
+  endpoint: EndpointTypes = 'mainnet'
+) {
   if (!symbol) {
     return undefined
   }
-
-  // TODO: replace -dev realm symbol suffix with query param
-  if (endsWithIgnoreCase(symbol, '-DEV')) {
-    const mainnetSymbol = replaceIgnoreCase(symbol, '-DEV', '')
-
+  console.log(endpoint === 'devnet', '@@@@@@@@')
+  if (endpoint === 'devnet') {
     let devRealmInfo = getAllRealmInfos('devnet').find((r) =>
-      equalsIgnoreCase(r.symbol, mainnetSymbol)
+      equalsIgnoreCase(r.symbol, symbol)
     )
 
     if (devRealmInfo) {
       devRealmInfo.endpoint = 'devnet'
 
       const mainnetRealmInfo = getAllRealmInfos('mainnet').find((r) =>
-        equalsIgnoreCase(r.symbol, mainnetSymbol)
+        equalsIgnoreCase(r.symbol, symbol)
       )
 
       if (mainnetRealmInfo) {
         devRealmInfo = { ...mainnetRealmInfo, ...devRealmInfo }
       }
     }
-
     return devRealmInfo
   }
 
@@ -118,6 +116,5 @@ export function getRealmInfo(symbol: string) {
   if (realmInfo) {
     realmInfo.endpoint = 'mainnet'
   }
-
   return realmInfo
 }
diff --git a/models/types.ts b/models/types.ts
@@ -0,0 +1 @@
+export type EndpointTypes = 'mainnet' | 'devnet' | 'localnet'
diff --git a/next.config.js b/next.config.js
@@ -16,4 +16,7 @@ module.exports = withTM({
     return config
   },
   webpack5: false,
+  env: {
+    DAO: process.env.DAO,
+  },
 })
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -8,17 +8,17 @@ import PageBodyContainer from '../components/PageBodyContainer'
 import useHydrateStore from '../hooks/useHydrateStore'
 import useRealm from '../hooks/useRealm'
 import { getResourcePathPart } from '../tools/core/resources'
+const SOLANA = 'Solana'
 
 function App({ Component, pageProps }) {
   useHydrateStore()
   useWallet()
 
   const { realm, realmInfo } = useRealm()
 
-  // TODO: Show solana/realms branding when on the home page
-  const realmName = realmInfo?.mainnetName ?? realm?.info.name
+  const realmName = realmInfo?.mainnetName ?? realm?.info?.name ?? SOLANA
 
-  const title = realmName ? `${realmName} DAO` : 'DAO'
+  const title = realmName && realmName !== SOLANA ? `${realmName} DAO` : SOLANA
   const description = `Discuss and vote on ${title} proposals.`
 
   // Note: ?v==${Date.now()} is added to the url to force favicon refresh. Without it browsers would cache the last used and won't change it for different realms
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		#Without comment application will run in context of one dao
		#DAO=MNGO
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type EndpointTypes = 'mainnet' \| 'devnet' \| 'localnet'