Fix date fmts and start tutorial

helium · Dec 11, 2023 · ae577e2 · ae577e2
1 parent c3e59c1
commit ae577e2
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 148 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -874,9 +874,9 @@ SPEC CHECKSUMS:
   FBLazyVector: f1897022b53abf1469d6ad692ee2c69f57d967f3
   FBReactNativeSpec: 627fd07f1b9d498c9fa572e76d7f1a6b1ee9a444
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
+  glog: 791fe035093b84822da7f0870421a25839ca7870
   helium-react-native-sdk: 17b612b2dacebc8f10c18ba5611f200a81c940f9
-  hermes-engine: 0784cadad14b011580615c496f77e0ae112eed75
+  hermes-engine: 7a53ccac09146018a08239c5425625fdb79a6162
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   lottie-ios: 25e7b2675dad5c3ddad369ac9baab03560c5bfdd
   lottie-react-native: c9f1db4f4124dcce9f8159e65d8dc6e8bcb11fb4
@@ -886,7 +886,7 @@ SPEC CHECKSUMS:
   MapboxMobileEvents: de50b3a4de180dd129c326e09cd12c8adaaa46d6
   MultiplatformBleAdapter: 5a6a897b006764392f9cef785e4360f54fb9477d
   OneSignalXCFramework: 81ceac017a290f23793443323090cfbe888f74ea
-  RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
+  RCT-Folly: 85766c3226c7ec638f05ad7cb3cf6a268d6c4241
   RCTRequired: bd6045fbd511da5efe6db89eecb21e4e36bd7cbf
   RCTTypeSafety: c06d9f906faa69dd1c88223204c3a24767725fd8
   React: b9ea33557ef1372af247f95d110fbdea114ed3b2

diff --git a/src/features/governance/GovernanceNavigator.tsx b/src/features/governance/GovernanceNavigator.tsx
@@ -5,6 +5,8 @@ import {
 import React, { memo } from 'react'
 import { GovernanceProvider } from '@storage/GovernanceProvider'
 import { PortalHost } from '@gorhom/portal'
+import { useAppStorage } from '@storage/AppStorageProvider'
+import GovernanceTutorialScreen from './GovernanceTutorialScreen'
 import GovernanceScreen from './GovernanceScreen'
 import ProposalScreen from './ProposalScreen'
 import VotingPowerScreen from './VotingPowerScreen'
@@ -15,10 +17,18 @@ const screenOptions: StackNavigationOptions = {
 }
 
 const GovernanceStackScreen = () => {
+  const { voteTutorialShown } = useAppStorage()
+
   return (
     <>
       <GovernanceProvider>
         <GovernanceStack.Navigator screenOptions={screenOptions}>
+          {/*       {!voteTutorialShown && (
+            <GovernanceStack.Screen
+              name="GovernanceTutorialScreen"
+              component={GovernanceTutorialScreen}
+            />
+          )} */}
           <GovernanceStack.Screen
             name="GovernanceScreen"
             component={GovernanceScreen}

diff --git a/src/features/governance/GovernanceTutorialScreen.tsx b/src/features/governance/GovernanceTutorialScreen.tsx
@@ -0,0 +1,31 @@
+import { ReAnimatedBox } from '@components/AnimatedBox'
+import { DelayedFadeIn } from '@components/FadeInOut'
+import SafeAreaBox from '@components/SafeAreaBox'
+import Text from '@components/Text'
+import { useNavigation } from '@react-navigation/native'
+import globalStyles from '@theme/globalStyles'
+import React, { useMemo } from 'react'
+import { ScrollView } from 'react-native'
+import { Edge } from 'react-native-safe-area-context'
+import { useTranslation } from 'react-i18next'
+import { GovernanceNavigationProp } from './governanceTypes'
+
+export const GovernanceTutorialScreen = () => {
+  const { t } = useTranslation()
+  const navigation = useNavigation<GovernanceNavigationProp>()
+  const safeEdges = useMemo(() => ['top'] as Edge[], [])
+
+  return (
+    <ReAnimatedBox entering={DelayedFadeIn} style={globalStyles.container}>
+      <SafeAreaBox edges={safeEdges} flex={1}>
+        <ScrollView>
+          <Text marginTop="m" alignSelf="center" variant="h4">
+            Tutorial
+          </Text>
+        </ScrollView>
+      </SafeAreaBox>
+    </ReAnimatedBox>
+  )
+}
+
+export default GovernanceTutorialScreen
diff --git a/src/features/governance/ProposalCard.tsx b/src/features/governance/ProposalCard.tsx
@@ -11,14 +11,15 @@ import { BoxProps } from '@shopify/restyle'
 import { PublicKey } from '@solana/web3.js'
 import { useGovernance } from '@storage/GovernanceProvider'
 import { Theme } from '@theme/theme'
-import { fmtUnixTime, humanReadable } from '@utils/formatting'
+import { humanReadable } from '@utils/formatting'
 import axios from 'axios'
 import BN from 'bn.js'
 import MarkdownIt from 'markdown-it'
 import React, { useCallback, useMemo } from 'react'
 import { useAsync } from 'react-async-hook'
 import { FadeIn, FadeOut } from 'react-native-reanimated'
 import { useTranslation } from 'react-i18next'
+import { getTimeFromNowFmt } from '@utils/dateTools'
 import { ProposalFilter, ProposalV0 } from './governanceTypes'
 
 interface IProposalCardProps extends BoxProps<Theme> {
@@ -227,10 +228,9 @@ export const ProposalCard = ({
                 </Text>
               )}
               <Text variant="body2" color="primaryText">
-                {fmtUnixTime(endTs || new BN(0))}
+                {getTimeFromNowFmt(endTs || new BN(0))}
               </Text>
             </Box>
-            {}
             <Box>
               <Text variant="body2" color="secondaryText" textAlign="right">
                 {t('gov.proposals.votes')}

diff --git a/src/features/governance/ProposalScreen.tsx b/src/features/governance/ProposalScreen.tsx
@@ -21,7 +21,7 @@ import { PublicKey } from '@solana/web3.js'
 import { useGovernance } from '@storage/GovernanceProvider'
 import globalStyles from '@theme/globalStyles'
 import { Theme } from '@theme/theme'
-import { fmtUnixTime, humanReadable } from '@utils/formatting'
+import { humanReadable } from '@utils/formatting'
 import axios from 'axios'
 import BN from 'bn.js'
 import React, { useEffect, useMemo, useState } from 'react'
@@ -30,6 +30,7 @@ import { ScrollView } from 'react-native'
 import Markdown from 'react-native-markdown-display'
 import { Edge } from 'react-native-safe-area-context'
 import { useTranslation } from 'react-i18next'
+import { getTimeFromNowFmt } from '@utils/dateTools'
 import { useWalletSign } from '../../solana/WalletSignProvider'
 import { WalletStandardMessageTypes } from '../../solana/walletSignBottomSheetTypes'
 import { VoteOption } from './VoteOption'
@@ -124,15 +125,13 @@ export const ProposalScreen = () => {
       new BN(0),
     )
 
-    const results = proposal?.choices
-      .map((r, index) => ({
-        ...r,
-        index,
-        percent: totalVotes?.isZero()
-          ? 100 / proposal?.choices.length
-          : (r.weight.toNumber() / totalVotes.toNumber()) * 100,
-      }))
-      .sort((a, b) => b.percent - a.percent)
+    const results = proposal?.choices.map((r, index) => ({
+      ...r,
+      index,
+      percent: totalVotes?.isZero()
+        ? 100 / proposal?.choices.length
+        : (r.weight.toNumber() / totalVotes.toNumber()) * 100,
+    }))
 
     return { results, totalVotes }
   }, [proposal])
@@ -281,7 +280,7 @@ export const ProposalScreen = () => {
                       </Text>
                     )}
                     <Text variant="body2" color="primaryText">
-                      {fmtUnixTime(endTs || new BN(0))}
+                      {getTimeFromNowFmt(endTs || new BN(0))}
                     </Text>
                   </Box>
                   <Box>
@@ -304,48 +303,53 @@ export const ProposalScreen = () => {
                     borderRadius="l"
                     paddingTop="m"
                   >
-                    {votingResults.results?.map((r, idx) => (
-                      <Box
-                        key={r.name}
-                        flex={1}
-                        marginTop={idx > 0 ? 's' : 'none'}
-                      >
-                        <Text
-                          variant="body2"
-                          color="primaryText"
-                          marginBottom="xs"
-                        >
-                          {r.name}
-                        </Text>
+                    {votingResults.results
+                      ?.sort((a, b) => b.percent - a.percent)
+                      .map((r, idx) => (
                         <Box
-                          flexDirection="row"
+                          key={r.name}
                           flex={1}
-                          backgroundColor="grey900"
-                          borderRadius="m"
-                          overflow="hidden"
-                          marginBottom="xs"
+                          marginTop={idx > 0 ? 's' : 'none'}
                         >
-                          <Box
-                            flexDirection="row"
-                            height={6}
-                            width={`${r.percent}%`}
-                            backgroundColor={VotingResultColors[r.index]}
-                          />
-                        </Box>
-                        <Box flexDirection="row" justifyContent="space-between">
                           <Text
                             variant="body2"
-                            color="secondaryText"
-                            marginRight="ms"
+                            color="primaryText"
+                            marginBottom="xs"
                           >
-                            {humanReadable(r.weight, decimals)}
-                          </Text>
-                          <Text variant="body2" color="primaryText">
-                            {r.percent.toFixed(2)}%
+                            {r.name}
                           </Text>
+                          <Box
+                            flexDirection="row"
+                            flex={1}
+                            backgroundColor="grey900"
+                            borderRadius="m"
+                            overflow="hidden"
+                            marginBottom="xs"
+                          >
+                            <Box
+                              flexDirection="row"
+                              height={6}
+                              width={`${r.percent}%`}
+                              backgroundColor={VotingResultColors[r.index]}
+                            />
+                          </Box>
+                          <Box
+                            flexDirection="row"
+                            justifyContent="space-between"
+                          >
+                            <Text
+                              variant="body2"
+                              color="secondaryText"
+                              marginRight="ms"
+                            >
+                              {humanReadable(r.weight, decimals)}
+                            </Text>
+                            <Text variant="body2" color="primaryText">
+                              {r.percent.toFixed(2)}%
+                            </Text>
+                          </Box>
                         </Box>
-                      </Box>
-                    ))}
+                      ))}
                   </Box>
                 )}
               </Box>

diff --git a/src/features/governance/governanceTypes.ts b/src/features/governance/governanceTypes.ts
@@ -17,6 +17,7 @@ export type ProposalFilter =
   | 'failed'
 
 export type GovernanceStackParamList = {
+  GovernanceTutorialScreen: undefined
   GovernanceScreen: undefined
   VotingPowerScreen: { mint: string }
   ProposalScreen: { mint: string; proposal: string }
@@ -25,15 +26,22 @@ export type GovernanceStackParamList = {
 export type GovernanceNavigationProp =
   StackNavigationProp<GovernanceStackParamList>
 
+const voteAccentColors = [] as Color[]
+
+export default voteAccentColors
 export const VotingResultColors: Color[] = [
-  'turquoise',
-  'red200',
-  'jazzberryJam',
-  'persianRose',
-  'orange500',
+  'blueRibbon',
+  'aquaMarine',
+  'purple500',
+  'blueBright500',
   'greenBright500',
-  'flamenco',
+  'orange500',
+  'persianRose',
   'gold',
-  'purple500',
-  'purpleHeart',
+  'electricViolet',
+  'flamenco',
+  'malachite',
+  'turquoise',
+  'white',
+  'red500',
 ]
diff --git a/src/utils/dateTools.ts b/src/utils/dateTools.ts
@@ -58,13 +58,23 @@ export const daysToMonths = (days: number) => {
 export const getMinDurationFmt = (startTs: BN, endTs: BN) => {
   return getFormattedStringFromDays(getMinDurationInDays(startTs, endTs))
 }
-export const getTimeLeftFromNowFmt = (ts: BN) => {
+
+export const getTimeLeftFromNowFmt = (ts: BN, fullFormat = false) => {
   const dateNowSecTimeStampBN = new BN(new Date().getTime() / 1000)
   return getFormattedStringFromDays(
     ts.sub(dateNowSecTimeStampBN).toNumber() / SECS_PER_DAY,
+    fullFormat,
   )
 }
 
+export const getTimeFromNowFmt = (ts: BN, fullFormat = false) => {
+  const dateNowSecTimeStampBN = new BN(new Date().getTime() / 1000)
+  const adjustedTs = ts.sub(dateNowSecTimeStampBN).toNumber() / SECS_PER_DAY
+  return `${getFormattedStringFromDays(Math.abs(adjustedTs), fullFormat)}${
+    adjustedTs < 0 ? ' ago' : ' from now'
+  }`
+}
+
 export const getMinDurationInDays = (startTs: BN, endTs: BN) => {
   return endTs.sub(startTs).toNumber() / SECS_PER_DAY
 }