remove snow

components/header.js

@@ -19,7 +19,7 @@ import LightningIcon from '../svgs/bolt.svg'
 import SearchIcon from '../svgs/search-line.svg'
 import BackArrow from '../svgs/arrow-left-line.svg'
 import { BALANCE_LIMIT_MSATS, SSR } from '../lib/constants'
-import { useSnow } from './snow'
+import { useLightning } from './lightning'
 import { HAS_NOTIFICATIONS } from '../fragments/notifications'
 import AnonIcon from '../svgs/spy-fill.svg'
 import Hat from './hat'
@@ -172,12 +172,12 @@ function StackerCorner ({ dropNavKey }) {
 
 function LurkerCorner ({ path }) {
   const router = useRouter()
-  const snow = useSnow()
+  const strike = useLightning()
 
   useEffect(() => {
     if (!window.localStorage.getItem('striked')) {
       const to = setTimeout(() => {
-        snow()
+        strike()
         window.localStorage.setItem('striked', 'yep')
       }, randInRange(3000, 10000))
       return () => clearTimeout(to)

components/upvote.js

@@ -10,12 +10,12 @@ import LongPressable from 'react-longpressable'
 import Overlay from 'react-bootstrap/Overlay'
 import Popover from 'react-bootstrap/Popover'
 import { useShowModal } from './modal'
+import { LightningConsumer, useLightning } from './lightning'
 import { numWithUnits } from '../lib/format'
 import { payOrLoginError, useInvoiceModal } from './invoice'
 import useDebounceCallback from './use-debounce-callback'
 import { useToast } from './toast'
 import { Dropdown } from 'react-bootstrap'
-import { SnowConsumer, useSnow } from './snow'
 
 const UpvotePopover = ({ target, show, handleClose }) => {
   const me = useMe()
@@ -128,7 +128,7 @@ export default function UpVote ({ item, className, pendingSats, setPendingSats }
   const [tipShow, _setTipShow] = useState(false)
   const ref = useRef()
   const me = useMe()
-  const snow = useSnow()
+  const strike = useLightning()
   const toaster = useToast()
   const [setWalkthrough] = useMutation(
     gql`
@@ -171,8 +171,8 @@ export default function UpVote ({ item, className, pendingSats, setPendingSats }
   const showInvoiceModal = useInvoiceModal(
     async ({ hash, hmac }, { variables }) => {
       await act({ variables: { ...variables, hash, hmac } })
-      snow()
+      strike()
-    }, [act, snow])
+    }, [act, strike])
 
   const zap = useDebounceCallback(async (sats) => {
     if (!sats) return
@@ -216,7 +216,7 @@ export default function UpVote ({ item, className, pendingSats, setPendingSats }
   }, [item?.meSats, item?.meAnonSats, pendingSats, me?.privates?.tipDefault, me?.privates?.turboDefault])
 
   return (
-    <SnowConsumer>
+    <LightningConsumer>
       {(strike) =>
         <div ref={ref} className='upvoteParent'>
           <LongPressable
@@ -285,6 +285,6 @@ export default function UpVote ({ item, className, pendingSats, setPendingSats }
           <TipPopover target={ref.current} show={tipShow} handleClose={() => setTipShow(false)} />
           <UpvotePopover target={ref.current} show={voteShow} handleClose={() => setVoteShow(false)} />
         </div>}
-    </SnowConsumer>
+    </LightningConsumer>
   )
 }

pages/_app.js

@@ -1,5 +1,4 @@
 import '../styles/globals.scss'
-import '../styles/snow.scss'
 import { ApolloProvider, gql } from '@apollo/client'
 import { MeProvider } from '../components/me'
 import PlausibleProvider from 'next-plausible'
@@ -11,7 +10,7 @@ import { useRouter } from 'next/dist/client/router'
 import { useEffect } from 'react'
 import { ShowModalProvider } from '../components/modal'
 import ErrorBoundary from '../components/error-boundary'
-import { SnowProvider } from '../components/snow'
+import { LightningProvider } from '../components/lightning'
 import { ToastProvider } from '../components/toast'
 import { ServiceWorkerProvider } from '../components/serviceworker'
 import { SSR } from '../lib/constants'
@@ -94,7 +93,7 @@ export default function MyApp ({ Component, pageProps: { ...props } }) {
               <LoggerProvider>
                 <ServiceWorkerProvider>
                   <PriceProvider price={price}>
-                    <SnowProvider>
+                    <LightningProvider>
                       <ToastProvider>
                         <ShowModalProvider>
                           <BlockHeightProvider blockHeight={blockHeight}>
@@ -106,7 +105,7 @@ export default function MyApp ({ Component, pageProps: { ...props } }) {
                           </BlockHeightProvider>
                         </ShowModalProvider>
                       </ToastProvider>
-                    </SnowProvider>
+                    </LightningProvider>
                   </PriceProvider>
                 </ServiceWorkerProvider>
               </LoggerProvider>

pages/rewards/index.js

@@ -15,7 +15,7 @@ import { useShowModal } from '../../components/modal'
 import dynamic from 'next/dynamic'
 import { SSR } from '../../lib/constants'
 import { useToast } from '../../components/toast'
-import { useSnow } from '../../components/snow'
+import { useLightning } from '../../components/lightning'
 
 const GrowthPieChart = dynamic(() => import('../../components/charts').then(mod => mod.GrowthPieChart), {
   loading: () => <div>Loading...</div>
@@ -91,7 +91,7 @@ export default function Rewards ({ ssrData }) {
 export function DonateButton () {
   const showModal = useShowModal()
   const toaster = useToast()
-  const snow = useSnow()
+  const strike = useLightning()
   const [donateToRewards] = useMutation(
     gql`
       mutation donateToRewards($sats: Int!, $hash: String, $hmac: String) {
@@ -119,7 +119,7 @@ export function DonateButton () {
               console.error(error)
               toaster.danger('failed to donate')
             } else {
-              const didStrike = snow()
+              const didStrike = strike()
               if (!didStrike) {
                 toaster.success('donated')
               }

styles/globals.scss

@@ -147,8 +147,6 @@ $accordion-button-active-icon-dark:  $accordion-button-icon;
   --theme-quoteBar: rgb(206, 208, 212);
   --theme-linkHover: #004a72;
   --theme-linkVisited: #53758;
-  // snow
-  --theme-snowDropShadow: drop-shadow(0 0 4px black) ;
 }
 
 [data-bs-theme=dark] {
@@ -173,8 +171,6 @@ $accordion-button-active-icon-dark:  $accordion-button-icon;
   --theme-quoteColor: rgb(141, 144, 150);
   --theme-linkHover: #007cbe;
   --theme-linkVisited: #56798E;
-  // snow
-  --theme-snowDropShadow: drop-shadow(0 0 10px white);
 }
 
 @import '../node_modules/bootstrap/scss/bootstrap.scss';
@@ -354,7 +350,6 @@ mark {
 }
 
 html, body {
-  // background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
   background: var(--bs-body-bg) !important;
   color: var(--bs-body-color) !important;
   min-height: 100vh;

styles/snow.scss

@@ -1,64 +0,0 @@
-// reference: https://codepen.io/alphardex/pen/dyPorwJ
-
-@function random_range($min, $max) {
-    $rand: random();
-    $random_range: $min + floor($rand * (($max - $min) + 1));
-    @return $random_range;
-}
-
-.snow {
-    z-index: 999;
-    position: fixed;
-
-    // compile random styles for 1024 snowflakes
-    @for $i from 1 through 1024 {
-        $size: #{random_range(1, 10)}px;
-        // lower fall duration means faster fall speed
-        $fall-duration: random_range(5, 25) * 1s;
-        $fall-delay: random(10) * 1s;
-        $wind-max-swing: #{random_range(10, 50)}px;
-        // lower duration means faster swing
-        $wind-swing-duration: random_range(2.5, 4) * 1s;
-        $wind-delay: 0s;
-
-        &:nth-child(#{$i}) {
-            // +-50px to fix x-overflow if flake is blown out of right screen
-            left: clamp(0% + $wind-max-swing + $size + 50px, #{random(100) + "%"}, 100% - $size - $wind-max-swing - 50px);
-            animation: fall-#{$i} $fall-duration linear 0s 1;
-            opacity: 0;
-        }
-
-        &:nth-child(#{$i})::after {
-            content: '';
-            display: block;
-            background: white;
-            filter: var(--theme-snowDropShadow);
-            border-radius: 50%;
-            width: $size;
-            height: $size;
-            animation: wind-#{$i} $wind-swing-duration ease-in-out $wind-delay infinite alternate;
-        }
-
-        @keyframes wind-#{$i} {
-            0% {
-                transform: translateX($wind-max-swing);
-            }
-
-            100% {
-                transform: translateX(calc(-1 * $wind-max-swing));
-            }
-        }
-
-        @keyframes fall-#{$i} {
-            0% {
-                opacity: inherit;
-                transform: translateY(-#{random_range(1, 10)}vh);
-            }
-
-            100% {
-                opacity: 0;
-                transform: translateY(100vh);
-            }
-        }
-    }
-}