localstorage price as sats

components/comment.js

@@ -80,7 +80,7 @@ export default function Comment ({ item, children, replyOpen, includeParent, cac
             {reply ? 'cancel' : 'reply'}
           </div>}
         {reply &&
-          <div className='pb-2 pr-2'>
+          <div className={styles.replyWrapper}>
             <Reply parentId={item.id} onSuccess={() => setReply(replyOpen || false)} cacheId={cacheId} />
           </div>}
         {children}

components/comment.module.css

@@ -8,7 +8,7 @@
 
 .text {
     margin-top: .1rem;
-    padding-right: .75rem;
+    padding-right: 15px;
 }
 
 .reply {
@@ -17,6 +17,11 @@
     padding-bottom: .5rem;
 }
 
+.replyWrapper {
+    padding-right: 15px;
+    padding-bottom: .5rem;
+}
+
 .children {
     margin-top: .25rem;
 }
@@ -32,7 +37,7 @@
 .skeleton .text {
     height: 80px;
     border-radius: .4rem;
-    margin-right: .75rem;
+    margin-right: 15px;
 }
 
 .skeleton .reply {

components/price.js

@@ -1,11 +1,14 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Button } from 'react-bootstrap'
 import useSWR from 'swr'
 
 const fetcher = url => fetch(url).then(res => res.json())
 
 export default function Price () {
-  const [asSats, setAsSats] = useState(false)
+  const [asSats, setAsSats] = useState(undefined)
+  useEffect(() => {
+    setAsSats(localStorage.getItem('asSats'))
+  }, [])
 
   const { data } = useSWR(
     'https://api.coinbase.com/v2/prices/BTC-USD/spot',
@@ -16,19 +19,29 @@ export default function Price () {
 
   if (!data) return null
 
-  const fixed = n => Number.parseFloat(n).toFixed(2)
-  const handleClick = () => setAsSats(!asSats)
+  const fixed = (n, f) => Number.parseFloat(n).toFixed(f)
+  const handleClick = () => {
+    if (asSats) {
+      localStorage.removeItem('asSats')
+      setAsSats(undefined)
+    } else {
+      localStorage.setItem('asSats', 'yep')
+      setAsSats('yep')
+    }
+  }
+
   if (asSats) {
+    console.log(asSats, 'as sats')
     return (
       <Button className='text-reset' onClick={handleClick} variant='link'>
-        {fixed(100000000 / data.data.amount) + ' sats/$'}
+        {fixed(100000000 / data.data.amount, 0) + ' sats/$'}
       </Button>
     )
   }
 
   return (
     <Button className='text-reset' onClick={handleClick} variant='link'>
-      {'$' + fixed(data.data.amount)}
+      {'$' + fixed(data.data.amount, 2)}
     </Button>
   )
 }