Initial commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true,
+    "editor.tabSize": 2
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Estevan Maito
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,2 @@
+# walletchat-leaderboard
+ WalletChat's User's Leaderboard

context/SidebarContext.tsx

@@ -0,0 +1,86 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+
+// create context
+
+interface IScrollY {
+  id: string | null
+  position: number
+}
+interface ISidebarContext {
+  isSidebarOpen: boolean
+  scrollY: IScrollY
+  closeSidebar: () => void
+  toggleSidebar: () => void
+  saveScroll: (el: HTMLElement | null) => void
+}
+
+const SidebarContext = React.createContext<ISidebarContext>(
+  { 
+    isSidebarOpen: false,
+    scrollY: {id: null, position: 0},
+    closeSidebar: () => {},
+    toggleSidebar: () => {},
+    saveScroll: (el: HTMLElement | null) => {}
+  }
+);
+
+interface ISidebarPovider{ children: React.ReactNode }
+
+export const SidebarProvider = ({ children }: ISidebarPovider) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
+
+  function toggleSidebar() {
+    setIsSidebarOpen(!isSidebarOpen)
+  }
+
+  function closeSidebar() {
+    setIsSidebarOpen(false)
+  }
+
+  const defaultScrollY = useMemo(() => {
+    return {id: null, position: 0}
+  }, [])
+
+  const storageScrollY = useCallback(() => {
+    return JSON.parse(localStorage.getItem('sidebarScrollY') || JSON.stringify(defaultScrollY))
+  }, [defaultScrollY])
+
+  const [scrollY, setScrollY] = useState<IScrollY>(
+    process.browser ? storageScrollY() : defaultScrollY
+  )
+
+  function saveScroll(el: HTMLElement | null) {
+    const id = el?.id || null
+    const position = el?.scrollTop || 0
+    setScrollY({id, position})
+  }
+
+  useEffect(() => {
+    if (process.browser) {
+      localStorage.setItem('sidebarScrollY', JSON.stringify(scrollY))
+    }
+  }, [scrollY])
+
+  useLayoutEffect(() => {
+    if (process.browser) {
+      const { id, position } = storageScrollY()
+      document.getElementById(id)?.scrollTo(0, position)
+
+      if (isSidebarOpen) {
+        document.getElementById(id)?.scrollTo(0, position)
+      }
+    }
+  }, [scrollY, storageScrollY, isSidebarOpen])
+
+  const context = {
+    isSidebarOpen,
+    scrollY,
+    toggleSidebar,
+    closeSidebar,
+    saveScroll,
+  }
+
+  return <SidebarContext.Provider value={context}>{children}</SidebarContext.Provider>
+}
+
+export default SidebarContext

context/ThemeContext.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect, useRef, useLayoutEffect } from 'react'
+
+/**
+ * Saves the old theme for future use
+ * @param {string} theme - Name of curent theme
+ * @return {string} previousTheme
+ */
+function usePrevious(theme: string) {
+  const ref = useRef<string>()
+  useEffect(() => {
+    ref.current = theme
+  })
+  return ref.current
+}
+
+/**
+ * Gets user preferences from local storage
+ * @param {string} key - localStorage key
+ * @return {array} getter and setter for user preferred theme
+ */
+function useStorageTheme(key: string): [string, React.Dispatch<React.SetStateAction<string | boolean>>]{
+  const userPreference =
+    !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+
+  const [theme, setTheme] = useState(
+    // use stored theme fallback to user preference
+    localStorage.getItem(key) || userPreference
+  )
+
+  // update stored theme
+  useEffect(() => {
+    localStorage.setItem(key.toString(), theme.toString())
+  }, [theme, key])
+
+  return [theme.toString(), setTheme]
+}
+
+interface IThemeContext{
+  theme: string | React.Dispatch<React.SetStateAction<string | boolean>>
+  toggleTheme: () => void
+}
+
+// create context
+export const ThemeContext = React.createContext<IThemeContext>({ theme: "", toggleTheme: () => {} })
+
+interface IThemeProvider{
+  children: React.ReactNode
+}
+
+// create context provider
+export const ThemeProvider = ({ children }: IThemeProvider) => {
+  const [theme, setTheme] = useStorageTheme('theme')
+
+  // update root element class on theme change
+  const oldTheme = usePrevious(theme.toString())
+  useLayoutEffect(() => {
+    document.documentElement.classList.remove(`theme-${oldTheme}`)
+    document.documentElement.classList.add(`theme-${theme}`)
+  }, [theme, oldTheme])
+
+  function toggleTheme() {
+
+    if (theme === 'light'){
+      setTheme('dark')
+    }
+    else{
+      setTheme('light')
+    }
+  }
+
+  const context = {
+    theme,
+    toggleTheme,
+  }
+
+  return <ThemeContext.Provider value={context}>{children}</ThemeContext.Provider>
+}

dashboard/components/AccessibleNavigationAnnouncer.tsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+function AccessibleNavigationAnnouncer() {
+  const [message, setMessage] = useState('')
+  const router = useRouter()
+
+  useEffect(() => {
+    // ignore the /
+    if (router.pathname.slice(1)) {
+      // make sure navigation has occurred and screen reader is ready
+      setTimeout(() => setMessage(`Navigated to ${router.pathname.slice(1)} page.`), 500)
+    } else {
+      setMessage('')
+    }
+  }, [router])
+
+  return (
+    <span className="sr-only" role="status" aria-live="polite" aria-atomic="true">
+      {message}
+    </span>
+  )
+}
+
+export default AccessibleNavigationAnnouncer

dashboard/components/CTA.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+function CTA() {
+  return (
+    <a
+      className="flex items-center justify-between p-4 mb-8 text-sm font-semibold text-purple-100 bg-black rounded-lg shadow-md focus:outline-none focus:shadow-outline-purple"
+      href="https://github.com/roketid/windmill-dashboard-nextjs-typescript"
+    >
+      <div className="flex items-center">
+        {/* <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+        </svg> */}
+        <span>Comming Soon: Convert ChatPoints into WalletChat tokens</span>
+      </div>
+      <span>
+        Learn more{" "}
+        <span dangerouslySetInnerHTML={{ __html: "&RightArrow;" }}></span>
+      </span>
+    </a>
+  );
+}
+
+export default CTA;

dashboard/components/Cards/InfoCard.tsx

@@ -0,0 +1,24 @@
+import { ReactSVGElement } from 'react'
+import { Card, CardBody } from '@roketid/windmill-react-ui'
+
+interface IInfoCard{
+  title: string
+  value: string
+  children?: ReactSVGElement
+}
+
+function InfoCard({ title, value, children }: IInfoCard) {
+  return (
+    <Card>
+      <CardBody className="flex items-center">
+        {children}
+        <div>
+          <p className="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
+          <p className="text-lg font-semibold text-gray-700 dark:text-gray-200">{value}</p>
+        </div>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default InfoCard

dashboard/components/Chart/ChartCard.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+interface IChart{
+  children: React.ReactNode
+  title: string
+}
+
+function Chart({ children, title }: IChart) {
+  return (
+    <div className="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+      <p className="mb-4 font-semibold text-gray-800 dark:text-gray-300">{title}</p>
+      {children}
+    </div>
+  )
+}
+
+export default Chart

dashboard/components/Chart/ChartLegend.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import {ILegends} from 'utils/demo/chartsData'
+
+interface IChartLegend{
+  legends: ILegends[]
+}
+
+function ChartLegend({ legends }: IChartLegend) {
+  return (
+    <div className="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400">
+      {legends.map((legend) => (
+        <div className="flex items-center" key={legend.title}>
+          <span className={`inline-block w-3 h-3 mr-1 ${legend.color} rounded-full`}></span>
+          <span>{legend.title}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default ChartLegend