redo tipping, removing modal, adding walkthrough, setting tipping default to 1

components/comment.js

@@ -70,7 +70,7 @@ export default function Comment ({
         <div className={`${itemStyles.hunk} ${styles.hunk}`}>
           <div className='d-flex align-items-center'>
             <div className={`${itemStyles.other} ${styles.other}`}>
-              <span title={`${item.sats} upvotes \\ ${item.tips} tipped`}>{item.sats + item.tips} sats</span>
+              <span title={`${item.sats} upvotes \\ ${item.tips} tipped${item.meSats > 0 ? ` (${item.meSats} from me)` : ''}`}>{item.sats + item.tips} sats</span>
               <span> \ </span>
               {item.boost > 0 &&
                 <>

components/item-act.js

@@ -1,7 +1,7 @@
 import { InputGroup, Modal } from 'react-bootstrap'
 import React, { useState, useCallback, useContext, useRef, useEffect } from 'react'
 import * as Yup from 'yup'
-import { Checkbox, Form, Input, SubmitButton } from './form'
+import { Form, Input, SubmitButton } from './form'
 import { useMe } from './me'
 
 export const ItemActContext = React.createContext({
@@ -53,7 +53,7 @@ export function ItemActModal () {
       <Modal.Body>
         <Form
           initial={{
-            amount: me?.tipDefault || 21,
+            amount: me?.tipDefault,
             default: false
           }}
           schema={ActSchema}
@@ -78,12 +78,6 @@ export function ItemActModal () {
             autoFocus
             append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
           />
-          <Checkbox
-            label='set as default'
-            name='tipDefault'
-            required
-            autoFocus
-          />
           <div className='d-flex'>
             <SubmitButton variant='success' className='ml-auto mt-1 px-4' value='TIP'>tip</SubmitButton>
           </div>

components/item.js

@@ -47,7 +47,7 @@ export default function Item ({ item, rank, children }) {
               </>}
           </div>
           <div className={`${styles.other}`}>
-            <span title={`${item.sats} upvotes \\ ${item.tips} tipped`}>{item.sats + item.tips} sats</span>
+            <span title={`${item.sats} upvotes \\ ${item.tips} tipped${item.meSats > 0 ? ` (${item.meSats} from me)` : ''}`}>{item.sats + item.tips} sats</span>
             <span> \ </span>
             {item.boost > 0 &&
               <>

components/upvote.js

@@ -7,9 +7,9 @@ import { useFundError } from './fund-error'
 import ActionTooltip from './action-tooltip'
 import { useItemAct } from './item-act'
 import { useMe } from './me'
+import Rainbow from '../lib/rainbow'
 import { useRef, useState } from 'react'
 import LongPressable from 'react-longpressable'
-import Rainbow from '../lib/rainbow'
 import { Overlay, Popover } from 'react-bootstrap'
 
 const getColor = (meSats) => {
@@ -18,7 +18,7 @@ const getColor = (meSats) => {
   }
 
   const idx = Math.min(
-    Math.floor((Math.log(meSats) / Math.log(100000)) * (Rainbow.length - 1)),
+    Math.floor((Math.log(meSats) / Math.log(10000)) * (Rainbow.length - 1)),
     Rainbow.length - 1)
   return Rainbow[idx]
 }
@@ -34,7 +34,7 @@ const UpvotePopover = ({ target, show, handleClose }) => (
         <button type='button' className='close' onClick={handleClose}><span aria-hidden='true'>×</span><span className='sr-only'>Close alert</span></button>
       </Popover.Title>
       <Popover.Content>
-        Press bolt again to tip 1 sat
+        Press bolt again to tip 1 sat.
       </Popover.Content>
     </Popover>
   </Overlay>
@@ -51,7 +51,8 @@ const TipPopover = ({ target, show, handleClose }) => (
         <button type='button' class='close' onClick={handleClose}><span aria-hidden='true'>×</span><span class='sr-only'>Close alert</span></button>
       </Popover.Title>
       <Popover.Content>
-        Press and hold bolt to tip a custom amount
+        <div className='mb-2'>Press and hold bolt to tip a custom amount.</div>
+        <div>As you tip more, the bolt color follows the rainbow.</div>
       </Popover.Content>
     </Popover>
   </Overlay>
@@ -72,11 +73,6 @@ export default function UpVote ({ item, className }) {
       }`
   )
 
-  // TODO: 1. create functions that updates user to say that they've performed the
-  // actions so they don't get reprompted, 2. check that the user hasn't been prompted
-  // before prompting ... we can probably just create one toggle function for each
-  // that does these checks
-
   const setVoteShow = (yes) => {
     if (!me) return
 
@@ -178,8 +174,6 @@ export default function UpVote ({ item, className }) {
   }
 
   const noSelfTips = item?.meVote && item?.mine
-  // 12 px default height
-  const cover = (item?.meSats < 10 ? ((10 - item.meSats) / 10.0) : 0) * 12
   const color = getColor(item?.meSats)
   return (
     <LightningConsumer>
@@ -266,11 +260,6 @@ export default function UpVote ({ item, className }) {
                     e.stopPropagation()
                   }}
                 />
-                <div
-                  className={styles.cover} onClick={e => {
-                    e.stopPropagation()
-                  }} style={{ top: item?.parentId ? '9px' : '4px', height: `${cover}px` }}
-                />
               </div>
             </ActionTooltip>
           </LongPressable>

prisma/migrations/20211213194823_tip_default/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ALTER COLUMN "tipDefault" SET DEFAULT 1;

prisma/schema.prisma

@@ -33,7 +33,7 @@ model User {
   freeComments   Int         @default(5)
   freePosts      Int         @default(2)
   checkedNotesAt DateTime?
-  tipDefault     Int         @default(0)
+  tipDefault     Int         @default(1)
   pubkey         String?     @unique
   theme          String      @default("light")