feature/integrate-dialect

components/TopBar.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useState } from 'react'
+import * as anchor from '@project-serum/anchor'
 import Link from 'next/link'
+import { useTheme } from 'next-themes'
 import { abbreviateAddress } from '../utils/index'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import MenuItem from './MenuItem'
@@ -20,18 +22,75 @@ import {
 } from '@heroicons/react/outline'
 import { MangoIcon, TrophyIcon } from './icons'
 import { useWallet } from '@solana/wallet-adapter-react'
+import {
+  IncomingThemeVariables,
+  NotificationsButton,
+  defaultVariables,
+} from '@dialectlabs/react-ui'
+import { WalletType } from '@dialectlabs/react'
+import '@dialectlabs/react-ui/index.css'
 
 // const StyledNewLabel = ({ children, ...props }) => (
 //   <div style={{ fontSize: '0.5rem', marginLeft: '1px' }} {...props}>
 //     {children}
 //   </div>
 // )
 
+const themeToDialectTheme = {
+  Light: 'light',
+  Dark: 'dark',
+  Mango: 'dark',
+}
+
+const MANGO_PUBLIC_KEY = new anchor.web3.PublicKey(
+  'ACku9v81NK49xb8FfjciufbhFsQd8Dz2xKTMZgxAXCzp'
+)
+
+const themeVariables: IncomingThemeVariables = {
+  light: {
+    colors: {
+      bg: 'bg-th-bkg-3',
+      toggleBackgroundActive: 'bg-th-primary',
+      primary: '!text-th-fgd-1'
+    },
+    modal: 'z-20 !rounded-md',
+    section: 'bg-th-bkg-2 p-2 rounded-2xl',
+    bellButton:
+      'default-transition flex h-8 w-8 items-center justify-center rounded-full text-th-fgd-1 hover:text-th-primary focus:outline-none !shadow-none',
+    button: '!rounded-full !bg-th-bkg-button px-6 py-2 font-bold text-th-fgd-1 hover:brightness-[1.1] focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4 disabled:text-th-fgd-4 disabled:hover:brightness-100 w-full',
+    disabledButton: 'flex-grow !rounded-full px-6 py-2 font-bold text-white hover:brightness-[1.1] focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4 disabled:text-th-fgd-4 disabled:hover:brightness-100 bg-th-green-dark',
+    secondaryDangerButton: `${defaultVariables.light.secondaryDangerButton} !rounded-full`,
+    secondaryButton: `${defaultVariables.light.secondaryButton} !rounded-full`,
+    divider: 'dt-h-px !bg-th-bkg-4',
+    outlinedInput: 'h-10 rounded-md border bg-th-bkg-1 text-th-fgd-1 border-th-bkg-4 default-transition hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none pl-2'
+  },
+  dark: {
+    colors: {
+      bg: 'bg-th-bkg-3',
+      toggleBackgroundActive: 'bg-th-primary',
+      primary: '!text-th-fgd-1'
+    },
+    modal: 'z-20 !rounded-md',
+    bellButton:
+      'default-transition flex h-8 w-8 items-center justify-center rounded-full text-th-fgd-1 hover:text-th-primary focus:outline-none !shadow-none',
+    section: 'bg-th-bkg-2 p-2 rounded-2xl',
+    button: "whitespace-nowrap !rounded-full !bg-th-bkg-button px-6 py-2 font-bold text-th-fgd-1 hover:brightness-[1.1] focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4 disabled:text-th-fgd-4 disabled:hover:brightness-100 w-full",
+    disabledButton: "flex-grow !rounded-full px-6 py-2 font-bold text-white hover:brightness-[1.1] focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4 disabled:text-th-fgd-4 disabled:hover:brightness-100 bg-th-green-dark",
+    secondaryDangerButton: `${defaultVariables.dark.secondaryDangerButton} !rounded-full`,
+    secondaryButton: `${defaultVariables.dark.secondaryButton} !rounded-full`,
+    divider: 'dt-h-px !bg-th-bkg-4',
+    outlinedInput: `h-10 rounded-md border bg-th-bkg-1 px-2 pb-px text-th-fgd-1 border-th-bkg-4 default-transition hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none pl-2`
+  }
+}
+
 const TopBar = () => {
   const { t } = useTranslation('common')
+  const wallet = useWallet()
   const { publicKey } = useWallet()
+  const { theme } = useTheme()
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
   const cluster = useMangoStore((s) => s.connection.cluster)
+  const url = useMangoStore((s) => s.connection.endpoint)
   const [showAccountsModal, setShowAccountsModal] = useState(false)
   const [defaultMarket] = useLocalStorageState(
     DEFAULT_MARKET_KEY,
@@ -133,6 +192,20 @@ const TopBar = () => {
             </div>
             <div className="flex items-center space-x-2.5">
               {isDevnet ? <div className="pl-2 text-xxs">Devnet</div> : null}
+              <NotificationsButton
+                wallet={wallet as unknown as WalletType}
+                rpcUrl={url}
+                network={cluster as string}
+                publicKey={MANGO_PUBLIC_KEY}
+                theme={themeToDialectTheme[theme]}
+                variables={themeVariables}
+                notifications={[
+                  { name: 'Filled orders', detail: 'On fill' },
+                  { name: 'Liquidation warnings', detail: 'On low health' },
+                  { name: 'DAO proposals', detail: 'On creation' },
+                ]}
+                channels={['web3', 'telegram', 'email']}
+              />
               <div className="pl-2">
                 <Settings />
               </div>

package.json

@@ -17,6 +17,11 @@
     "analyze": "ANALYZE=true yarn build"
   },
   "dependencies": {
+    "@project-serum/anchor": "^0.24.2",
+    "@project-serum/serum": "0.13.55",
+    "@project-serum/sol-wallet-adapter": "0.2.0",
+    "@dialectlabs/react": "^0.5.1",
+    "@dialectlabs/react-ui": "^0.8.1",
     "@blockworks-foundation/mango-client": "^3.4.8",
     "@headlessui/react": "^0.0.0-insiders.2dbc38c",
     "@heroicons/react": "^1.0.0",