Release 2.0.4 (#180)

safe-global · May 22, 2024 · 858de6e · 858de6e
1 parent 655335b
commit 858de6e
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "safe-dao-governance-app",
   "homepage": "https://github.com/safe-global/safe-dao-governance-app",
   "license": "GPL-3.0",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "scripts": {
     "build": "next build && next export",
     "lint": "tsc && next lint",

diff --git a/src/components/TokenLocking/BoostBreakdown.tsx b/src/components/TokenLocking/BoostBreakdown.tsx
@@ -53,8 +53,15 @@ export const BoostBreakdown = ({
 
   return (
     <Stack direction={{ md: 'column' }} gap={2} height="100%">
-      <Box className={`${css.boostInfoBox} ${css.bordered}`} p={4} gap={4} flex="2" height="100%" display="flex">
-        <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center" gap={2}>
+      <Box className={`${css.boostInfoBox} ${css.bordered}`} p={3} gap={4} flex="2" height="100%" display="flex">
+        <Box
+          display="flex"
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+          gap={2}
+          textAlign="right"
+        >
           <span style={{ display: 'inline-flex' }}>
             {!isInitialState && (
               <>
@@ -91,7 +98,7 @@ export const BoostBreakdown = ({
           </Stack>
         )}
       </Box>
-      <Box className={`${css.boostInfoBox} ${css.bordered}`} flex="0" p={4} gap={4} display="flex" width="100%">
+      <Box className={`${css.boostInfoBox} ${css.bordered}`} flex="0" p={3} gap={4} display="flex" width="100%">
         <Box>
           <BoostMeter isLock={isLock} isVisibleDifference={isVisibleDifference} prediction={boostPrediction} />
         </Box>

diff --git a/src/components/TokenLocking/BoostGraph/AxisTopLabel.tsx b/src/components/TokenLocking/BoostGraph/AxisTopLabel.tsx
@@ -14,8 +14,8 @@ export const AxisTopLabel = ({ startTime, ...props }: VictoryLabelProps & { star
 
   return (
     <>
-      <VictoryLabel {...props} dy={0} style={{ ...style, fontSize: '11px' }} />
-      <VictoryLabel {...props} dy={16} text={dateLabel} style={{ ...style, fontSize: '11px', fill: '#FFF' }} />
+      <VictoryLabel {...props} dy={0} style={{ ...style, fontSize: '12px' }} />
+      <VictoryLabel {...props} dy={16} text={dateLabel} style={{ ...style, fontSize: '12px', fill: '#FFF' }} />
     </>
   )
 }
diff --git a/src/components/TokenLocking/BoostGraph/BoostGraph.tsx b/src/components/TokenLocking/BoostGraph/BoostGraph.tsx
@@ -1,12 +1,10 @@
 import { SEASON1_START, SEASON2_START } from '@/config/constants'
-import { floorNumber, getBoostFunction } from '@/utils/boost'
+import { getBoostFunction } from '@/utils/boost'
 import { getCurrentDays } from '@/utils/date'
-import { formatAmount } from '@/utils/formatters'
 import { LockHistory } from '@/utils/lock'
 import { useTheme } from '@mui/material/styles'
 import { useMemo } from 'react'
 import { VictoryAxis, VictoryChart, VictoryLine, VictoryScatter, DomainTuple, ForAxes, VictoryArea } from 'victory'
-import { ArrowDownLabel } from './ArrowDownLabel'
 import { AxisTopLabel } from './AxisTopLabel'
 import { BoostGradients } from './BoostGradients'
 import { generatePointsFromHistory } from './helper'
@@ -15,7 +13,7 @@ import { ScatterDot } from './ScatterDot'
 import { useVictoryTheme } from './theme'
 import { useStartDate } from '@/hooks/useStartDates'
 
-const DOMAIN: ForAxes<DomainTuple> = { x: [-5, SEASON2_START + 5], y: [0.8, 2.3] }
+const DOMAIN: ForAxes<DomainTuple> = { x: [-12, SEASON2_START + 15], y: [0.8, 2.275] }
 
 export const BoostGraph = ({
   lockedAmount,
@@ -37,8 +35,6 @@ export const BoostGraph = ({
 
   const pastLockPoints = useMemo(() => generatePointsFromHistory(pastLocks, now), [pastLocks, now])
 
-  const format = (value: number) => formatAmount(floorNumber(value, 2), 2)
-
   const currentBoostDataPoints = useMemo(
     () => [
       ...pastLockPoints,
@@ -119,17 +115,19 @@ export const BoostGraph = ({
         <VictoryAxis
           dependentAxis
           domain={DOMAIN}
+          axisValue={0}
           tickValues={[1, 1.5, 2]}
           tickFormat={(d) => Number(d).toFixed(1) + 'x'}
           theme={victoryTheme}
           style={{
             tickLabels: {
-              padding: 16,
+              padding: 0,
             },
           }}
         />
         <VictoryAxis
           orientation="top"
+          axisValue={2.1}
           tickValues={[0, SEASON1_START, SEASON2_START]}
           tickFormat={(value) => {
             if (value === 0) {
@@ -151,6 +149,7 @@ export const BoostGraph = ({
           theme={victoryTheme}
         />
         <VictoryAxis
+          axisValue={0.9}
           tickValues={[now]}
           tickFormat={(value) => {
             if (value === now) {
@@ -205,10 +204,6 @@ export const BoostGraph = ({
               fill: theme.palette.text.primary,
             },
           }}
-          labels={[format(newBoostFunction({ x: now })) + 'x', format(newBoostFunction({ x: SEASON2_START })) + 'x']}
-          labelComponent={
-            <ArrowDownLabel backgroundColor={isLock ? theme.palette.primary.main : theme.palette.warning.main} />
-          }
           size={4}
           dataComponent={
             <ScatterDot

diff --git a/src/components/TokenLocking/BoostGraph/ScatterDot.tsx b/src/components/TokenLocking/BoostGraph/ScatterDot.tsx
@@ -3,7 +3,6 @@ import { useTheme } from '@mui/material/styles'
 import { useState } from 'react'
 import { ArrowDownLabel } from './ArrowDownLabel'
 import { floorNumber } from '@/utils/boost'
-import { SEASON2_START } from '@/config/constants'
 
 /**
  * Draws different circles based on the date
@@ -30,12 +29,12 @@ export const ScatterDot = ({
         <circle
           cx={props.x}
           cy={props.y}
-          r={22}
+          r={18}
           fill="transparent"
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}
         />
-        {hovered && props.datum.x !== SEASON2_START && (
+        {hovered && (
           <ArrowDownLabel
             style={{
               verticalAnchor: 'middle',
@@ -64,12 +63,12 @@ export const ScatterDot = ({
       <circle
         cx={props.x}
         cy={props.y}
-        r={10}
+        r={6}
         fill="transparent"
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
       />
-      {hovered && props.datum.x !== SEASON2_START && (
+      {hovered && (
         <ArrowDownLabel
           style={{
             verticalAnchor: 'middle',

diff --git a/src/components/TokenLocking/BoostGraph/graphConstants.ts b/src/components/TokenLocking/BoostGraph/graphConstants.ts
@@ -1,3 +1,3 @@
-export const BIG_SCREEN = { height: 280, padding: 52, width: 524 }
+export const BIG_SCREEN = { height: 289, padding: 0, width: 524 }
 
-export const SMALL_SCREEN = { height: 180, padding: 52, width: 476 }
+export const SMALL_SCREEN = { height: 250, padding: 0, width: 476 }
diff --git a/src/components/TokenLocking/BoostGraph/helper.ts b/src/components/TokenLocking/BoostGraph/helper.ts
@@ -6,10 +6,8 @@ export const generatePointsFromHistory = (pastLocks: LockHistory[], nowInDays: n
   // find each individual day
   const days = pastLocks.map((lock) => lock.day).filter((day, index, days) => days.indexOf(day) === index)
 
-  return days
-    .map((day) => ({
-      x: day,
-      y: boostFunction({ x: day }),
-    }))
-    .slice(0, -1)
+  return days.map((day) => ({
+    x: day,
+    y: boostFunction({ x: day }),
+  }))
 }
diff --git a/src/components/TokenLocking/BoostGraph/theme.ts b/src/components/TokenLocking/BoostGraph/theme.ts
@@ -9,7 +9,7 @@ const grey = '#A1A3A7'
 // Typography
 const sansSerif = "'DM Sans'"
 const letterSpacing = 'normal'
-const fontSize = '12px'
+const fontSize = '14px'
 
 // Strokes
 const strokeLinecap = 'round'

diff --git a/src/components/TokenLocking/LockTokenWidget.tsx b/src/components/TokenLocking/LockTokenWidget.tsx
@@ -183,7 +183,7 @@ export const LockTokenWidget = ({ safeBalance }: { safeBalance: BigNumberish | u
           <Grid item xs={12} md={8}>
             <BoostGraph lockedAmount={Number(cleanedAmount)} pastLocks={relativeLockHistory} isLock />
 
-            <Grid container spacing={2} mb={1} alignItems="center">
+            <Grid container spacing={2} mb={1} mt={2} alignItems="center">
               <Grid item xs={12} md={8}>
                 <Typography>Select amount to lock</Typography>
                 <TextField

diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -114,4 +114,4 @@ export const DISCORD_URL = 'https://chat.safe.global'
 export const UNLIMITED_APPROVAL_AMOUNT = BigNumber.from(2).pow(256).sub(1)
 
 export const SEASON2_START = 160
-export const SEASON1_START = 27
+export const SEASON1_START = 33
diff --git a/src/utils/__tests__/boost.test.ts b/src/utils/__tests__/boost.test.ts
@@ -67,12 +67,12 @@ describe('boost', () => {
       expect(getTimeFactor(0)).toBe(1)
     })
 
-    it('should return 1 on first 28 days', () => {
-      expect(getTimeFactor(27)).toBe(1)
+    it('should return 1 on first 34 days', () => {
+      expect(getTimeFactor(33)).toBe(1)
     })
 
-    it('should use the correct function after 28 days', () => {
-      expect(getTimeFactor(30)).toBeCloseTo(1 - 3 / 133)
+    it('should use the correct function after 34 days', () => {
+      expect(getTimeFactor(34)).toBeCloseTo(1 - 1 / 127)
     })
 
     it('it should be 0 after the season', () => {
@@ -142,8 +142,8 @@ describe('boost', () => {
       expect(boostFunction({ x: 0 })).toBeCloseTo(1)
       expect(boostFunction({ x: 44 })).toBeCloseTo(1)
       // 1.0 * 0.86 + 1 = 1.86
-      expect(boostFunction({ x: 45 })).toBeCloseTo(1.86)
-      expect(boostFunction({ x: 1000 })).toBeCloseTo(1.86)
+      expect(boostFunction({ x: 45 })).toBeCloseTo(1.905)
+      expect(boostFunction({ x: 1000 })).toBeCloseTo(1.905)
     })
 
     it('should keep boost unchanged if NaN is the locked amount', () => {
@@ -216,6 +216,21 @@ describe('boost', () => {
       expect(boostFunction({ x: 1000 })).toBe(1)
     })
 
+    it('should not decrease the boost if locked amount is > 100k after unlocking', () => {
+      const priorLocks: LockHistory[] = [
+        {
+          day: 0,
+          amount: 200_000,
+        },
+      ]
+      const boostFunction = getBoostFunction(39, -100_000, priorLocks)
+
+      expect(boostFunction({ x: -1 })).toBe(1)
+      expect(boostFunction({ x: 0 })).toBeCloseTo(2)
+      expect(boostFunction({ x: 39 })).toBe(2)
+      expect(boostFunction({ x: 1000 })).toBe(2)
+    })
+
     it('should compute for 2000 tokens on day one, unlocking 1000 after 40 days and locking another 1000 after 80 days', () => {
       const priorLocks: LockHistory[] = [
         {
@@ -237,11 +252,11 @@ describe('boost', () => {
       expect(boostFunction({ x: 0 })).toBeCloseTo(1.277)
       expect(boostFunction({ x: 38 })).toBeCloseTo(1.277)
       // 0.25 * 0.91 + 1
-      expect(boostFunction({ x: 39 })).toBeCloseTo(1.2275)
-      expect(boostFunction({ x: 78 })).toBeCloseTo(1.2275)
+      expect(boostFunction({ x: 39 })).toBeCloseTo(1.238)
+      expect(boostFunction({ x: 78 })).toBeCloseTo(1.238)
       // 1.2275 + (1.277 - 1.25) * (0.609)
-      expect(boostFunction({ x: 79 })).toBeCloseTo(1.2439)
-      expect(boostFunction({ x: 1000 })).toBeCloseTo(1.2439)
+      expect(boostFunction({ x: 79 })).toBeCloseTo(1.255)
+      expect(boostFunction({ x: 1000 })).toBeCloseTo(1.255)
     })
   })
 })
diff --git a/src/utils/boost.ts b/src/utils/boost.ts
@@ -1,5 +1,7 @@
 import { LockHistory } from './lock'
 
+const MAX_AMOUNT = 100_000
+
 export const floorNumber = (num: number, digits: number) => {
   const decimal = Math.pow(10, digits)
   return Math.floor(num * decimal) / decimal
@@ -22,11 +24,11 @@ export const getTokenBoost = (amountLocked: number) => {
 }
 
 export const getTimeFactor = (days: number) => {
-  if (days <= 27) {
+  if (days <= 33) {
     return 1
   }
 
-  return Math.max(0, 1 - (days - 27) / 133)
+  return Math.max(0, 1 - (days - 33) / 127)
 }
 
 /**
@@ -59,7 +61,9 @@ export const getBoostFunction =
         currentBoost = currentBoost + boostGain * timeFactorLock
       } else {
         // handle unlock
-        currentBoost = getTokenBoost(lockedAmount) * getTimeFactor(currentEvent.day) + 1
+        if (lockedAmount < MAX_AMOUNT) {
+          currentBoost = getTokenBoost(lockedAmount) * getTimeFactor(currentEvent.day) + 1
+        }
       }
     }