import { useQuery } from '@apollo/client' import gql from 'graphql-tag' import { Container, OverlayTrigger, Popover } from 'react-bootstrap' import { CopyInput } from './form' import styles from './footer.module.css' import Texas from '../svgs/texas.svg' import Github from '../svgs/github-fill.svg' import Link from 'next/link' import useDarkMode from 'use-dark-mode' import Sun from '../svgs/sun-fill.svg' import Moon from '../svgs/moon-fill.svg' import No from '../svgs/no.svg' import Bolt from '../svgs/bolt.svg' import Amboss from '../svgs/amboss.svg' import { useEffect, useState } from 'react' import Rewards from './footer-rewards' // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX // if you update this you need to update /public/darkmode // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX const COLORS = { light: { body: '#f5f5f7', color: '#212529', navbarVariant: 'light', navLink: 'rgba(0, 0, 0, 0.55)', navLinkFocus: 'rgba(0, 0, 0, 0.7)', navLinkActive: 'rgba(0, 0, 0, 0.9)', borderColor: '#ced4da', inputBg: '#ffffff', inputDisabledBg: '#e9ecef', dropdownItemColor: 'rgba(0, 0, 0, 0.7)', dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)', commentBg: 'rgba(0, 0, 0, 0.03)', clickToContextColor: 'rgba(0, 0, 0, 0.07)', brandColor: 'rgba(0, 0, 0, 0.9)', grey: '#707070', link: '#007cbe', toolbarActive: 'rgba(0, 0, 0, 0.10)', toolbarHover: 'rgba(0, 0, 0, 0.20)', toolbar: '#ffffff', quoteBar: 'rgb(206, 208, 212)', quoteColor: 'rgb(101, 103, 107)', linkHover: '#004a72', linkVisited: '#537587' }, dark: { body: '#000000', inputBg: '#000000', inputDisabledBg: '#000000', navLink: 'rgba(255, 255, 255, 0.55)', navLinkFocus: 'rgba(255, 255, 255, 0.75)', navLinkActive: 'rgba(255, 255, 255, 0.9)', borderColor: 'rgba(255, 255, 255, 0.5)', dropdownItemColor: 'rgba(255, 255, 255, 0.7)', dropdownItemColorHover: 'rgba(255, 255, 255, 0.9)', commentBg: 'rgba(255, 255, 255, 0.04)', clickToContextColor: 'rgba(255, 255, 255, 0.2)', color: '#f8f9fa', brandColor: 'var(--primary)', grey: '#969696', link: '#2e99d1', toolbarActive: 'rgba(255, 255, 255, 0.10)', toolbarHover: 'rgba(255, 255, 255, 0.20)', toolbar: '#3e3f3f', quoteBar: 'rgb(158, 159, 163)', quoteColor: 'rgb(141, 144, 150)', linkHover: '#007cbe', linkVisited: '#56798E' } } const handleThemeChange = (dark) => { const root = window.document.documentElement const colors = COLORS[dark ? 'dark' : 'light'] Object.entries(colors).forEach(([varName, value]) => { const cssVarName = `--theme-${varName}` root.style.setProperty(cssVarName, value) }) } const RssPopover = (
home \ bitcoin
nostr \ tech \ jobs
) const SocialsPopover = ( nostr \ twitter \ youtube \ pod ) const ChatPopover = ( sphinx \ telegram \ simplex ) const AnalyticsPopover = ( visitors \ users ) export default function Footer ({ noLinks }) { const query = gql` { connectAddress } ` const { data } = useQuery(query, { fetchPolicy: 'cache-first' }) const darkMode = useDarkMode(false, { // set this so it doesn't try to use classes onChange: handleThemeChange }) const [mounted, setMounted] = useState() const [lightning, setLightning] = useState(undefined) useEffect(() => { setMounted(true) setLightning(localStorage.getItem('lnAnimate') || 'yes') }, []) const toggleLightning = () => { if (lightning === 'yes') { localStorage.setItem('lnAnimate', 'no') setLightning('no') } else { localStorage.setItem('lnAnimate', 'yes') setLightning('yes') } } const DarkModeIcon = darkMode.value ? Sun : Moon const LnIcon = lightning === 'yes' ? No : Bolt const version = process.env.NEXT_PUBLIC_COMMIT_HASH return ( ) }