Add dialect notifications (#188)

* feat: add initial notification bell

* update: dialect packages and bring in styling

* chore: update holaplex monitoring public key

* chore: bump dialect packages

* chore: change network to mainnet

Co-authored-by: Filipp Sher <[email protected]>

package.json

@@ -2,7 +2,7 @@
   "name": "marketplace",
   "private": true,
   "scripts": {
-    "dev": "PORT=8080 next dev",
+    "dev": "PORT=3000 next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
+    "@dialectlabs/react": "^0.4.11",
+    "@dialectlabs/react-ui": "^0.7.3",
     "@fontsource/inter": "^4.5.1",
     "@fontsource/jetbrains-mono": "^4.5.0",
     "@fontsource/material-icons": "^4.5.1",

src/components/DialectNotificationsButton/BellIcon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M15 6.667a5 5 0 0 0-10 0c0 5.833-2.5 7.5-2.5 7.5h15S15 12.5 15 6.667ZM11.442 17.5a1.666 1.666 0 0 1-2.884 0"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default SvgComponent

src/components/DialectNotificationsButton/CloseIcon.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgX = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="x_svg__h-6 x_svg__w-6"
+    fill="none"
+    viewBox="-4 -4 32 32"
+    stroke="currentColor"
+    {...props}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M6 18 18 6M6 6l12 12"
+    />
+  </svg>
+)
+
+export default SvgX

src/components/DialectNotificationsButton/SettingsIcon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={20}
+    height={20}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      stroke="#D8D8D8"
+      strokeWidth={2}
+      strokeLinecap="round"
+      d="M4 4v12M10 4v12M16 4v12"
+    />
+    <rect x={8} y={11} width={4} height={4} rx={1.5} fill="#fff" />
+    <rect x={2} y={5} width={4} height={4} rx={1.5} fill="#fff" />
+    <rect x={14} y={5} width={4} height={4} rx={1.5} fill="#fff" />
+  </svg>
+)
+
+export default SvgComponent

src/components/DialectNotificationsButton/index.tsx

@@ -0,0 +1,48 @@
+import {
+  defaultVariables,
+  IncomingThemeVariables,
+  NotificationsButton,
+} from '@dialectlabs/react-ui'
+import { useWallet } from '@solana/wallet-adapter-react'
+import { PublicKey } from '@solana/web3.js'
+import Bell from './BellIcon'
+import Settings from './SettingsIcon'
+import Close from './CloseIcon'
+
+const HOLAPLEX_MONITORING_PUBLIC_KEY = new PublicKey(
+  'BpVYWaAPbv5vyeRxiX9PMsmAVJVoL2Lp4YtuRgjuhoZh'
+)
+
+export const themeVariables: IncomingThemeVariables = {
+  dark: {
+    colors: {
+      bg: 'bg-gray-800',
+    },
+    bellButton:
+      'w-[48px] h-[48px] bg-gray-800 rounded-full hover:bg-gray-600 transition-transform hover:scale-[1.02]',
+    modal: `sm:rounded-md shadow-xl shadow-neutral-900 pt-1`,
+    icons: {
+      bell: Bell,
+      settings: Settings,
+      x: Close,
+    },
+    divider: `${defaultVariables.dark.divider} h-px opacity-10 mx-0`,
+    notificationMessage: `${defaultVariables.dark.notificationMessage} bg-transparent`,
+    notificationTimestamp: `${defaultVariables.dark.notificationTimestamp} text-left`,
+    notificationsDivider: '', // Empty line is intentional to ovveride dt-hidden
+  },
+}
+
+export default function DialectNotificationsButton() {
+  const wallet = useWallet()
+  return (
+    <NotificationsButton
+      wallet={wallet}
+      publicKey={HOLAPLEX_MONITORING_PUBLIC_KEY}
+      notifications={[{ name: 'Offer on NFT', detail: 'Event' }]}
+      theme="dark"
+      variables={themeVariables}
+      network="mainnet"
+    />
+  )
+}

src/pages/_app.tsx

@@ -1,3 +1,4 @@
+import '@dialectlabs/react-ui/index.css'
 import '../styles/globals.css'
 import '@fontsource/inter/300.css'
 import '@fontsource/inter/600.css'

src/pages/creators/[creator].tsx

@@ -29,6 +29,7 @@ import { Filter } from 'react-feather'
 import { Controller, useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 import Select from 'react-select'
+import DialectNotificationsButton from 'src/components/DialectNotificationsButton'
 import {
   GetNftCounts,
   GetWalletCounts,
@@ -226,7 +227,8 @@ interface NftFilterForm {
 }
 
 const CreatorShow: NextPage<CreatorPageProps> = ({ marketplace, creator }) => {
-  const { publicKey, connected } = useWallet()
+  const wallet = useWallet()
+  const { publicKey, connected } = wallet
   const [hasMore, setHasMore] = useState(true)
   const router = useRouter()
   const {
@@ -386,6 +388,9 @@ const CreatorShow: NextPage<CreatorPageProps> = ({ marketplace, creator }) => {
                 Admin Dashboard
               </Link>
             )}
+            <div className="mr-2">
+              <DialectNotificationsButton />
+            </div>
             <WalletPortal />
           </div>
         </div>

src/pages/nfts/[address].tsx

@@ -42,6 +42,7 @@ import { Link, Route, Routes } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { format } from 'timeago.js'
 import client from '../../client'
+import DialectNotificationsButton from '../../components/DialectNotificationsButton'
 import AcceptOfferForm from '../../components/AcceptOfferForm'
 import Avatar from '../../components/Avatar'
 import Button, { ButtonType } from '../../components/Button'
@@ -602,6 +603,9 @@ const NftShow: NextPage<NftPageProps> = ({ marketplace, nft }) => {
                 Admin Dashboard
               </Link>
             )}
+            <div className="mr-2">
+              <DialectNotificationsButton />
+            </div>
             <WalletPortal />
           </div>
         </div>

src/styles/globals.css

@@ -193,3 +193,10 @@ h4 {
 .select-base-theme .base__multi-value__label {
   @apply text-white;
 }
+
+/* Dialect-specific */
+@supports (overflow: overlay) {
+  .dt-overflow-y-auto {
+    overflow-y: overlay;
+  }
+}

tailwind.config.js

@@ -27,6 +27,7 @@ module.exports = {
         800: 'var(--success-800)',
         900: 'var(--success-900)',
       },
+      transparent: 'transparent',
     },
     fontFamily: {
       sans: ['Inter', 'sans-serif'],