Fix governance screens

helium · Oct 8, 2024 · a3bf73c · a3bf73c
1 parent b34ca3f
commit a3bf73c
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 103 deletions.
diff --git a/src/features/account/TokenListItem.tsx b/src/features/account/TokenListItem.tsx
@@ -26,6 +26,7 @@ import { useAsync } from 'react-async-hook'
 import { useSolana } from '../../solana/SolanaProvider'
 import { HomeNavigationProp } from '../home/homeTypes'
 import AccountTokenCurrencyBalance from './AccountTokenCurrencyBalance'
+import { ServiceSheetNavigationProp } from '@services/serviceSheetTypes'
 
 export const ITEM_HEIGHT = 72
 type Props = {
@@ -198,7 +199,7 @@ const PercentChange = ({
 }
 
 export const TokenListGovItem = ({ mint }: { mint: PublicKey }) => {
-  const navigation = useNavigation()
+  const navigation = useNavigation<ServiceSheetNavigationProp>()
   const { anchorProvider, connection } = useSolana()
   const wallet = useCurrentWallet()
   const { triggerImpact } = useHaptic()
@@ -274,7 +275,7 @@ export const TokenListGovItem = ({ mint }: { mint: PublicKey }) => {
   const handleNavigation = useCallback(() => {
     triggerImpact('light')
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ;(navigation as any).navigate('Governance', {
+    ;(navigation as any).navigate('GovernanceService', {
       screen: 'PositionsScreen',
       initial: false,
       params: { mint: mintStr },

diff --git a/src/features/governance/GovernanceWrapper.tsx b/src/features/governance/GovernanceWrapper.tsx
@@ -5,15 +5,12 @@ import UserStar from '@assets/images/userStar.svg'
 import { ReAnimatedBox } from '@components/AnimatedBox'
 import Box from '@components/Box'
 import CircleLoader from '@components/CircleLoader'
-import SafeAreaBox from '@components/SafeAreaBox'
 import { Select } from '@components/Select'
-import Text from '@components/Text'
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import { useGovernance } from '@storage/GovernanceProvider'
 import React, { useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Animated } from 'react-native'
-import { Edge } from 'react-native-safe-area-context'
 import {
   GovernanceNavigationProp,
   GovernanceStackParamList,
@@ -33,7 +30,6 @@ export const GovernanceWrapper: React.FC<
   const { t } = useTranslation()
   const route = useRoute<Route>()
   const navigation = useNavigation<GovernanceNavigationProp>()
-  const safeEdges = useMemo(() => ['top'] as Edge[], [])
   const { loading, hasUnseenProposals } = useGovernance()
   const anim = useRef(new Animated.Value(1))
   const setSelectedTab = useSetTab()

diff --git a/src/features/governance/PositionsScreen.tsx b/src/features/governance/PositionsScreen.tsx
@@ -39,9 +39,14 @@ import GovernanceWrapper from './GovernanceWrapper'
 import LockTokensModal, { LockTokensModalFormValues } from './LockTokensModal'
 import { PositionsList } from './PositionsList'
 import { VotingPowerCard } from './VotingPowerCard'
+import { ScrollView } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useSpacing } from '@theme/themeHooks'
 
 export const PositionsScreen = () => {
   const { t } = useTranslation()
+  const { bottom } = useSafeAreaInsets()
+  const spacing = useSpacing()
   const wallet = useCurrentWallet()
   const { walletSignBottomSheetRef } = useWalletSign()
   const [isLockModalOpen, setIsLockModalOpen] = useState(false)
@@ -234,82 +239,83 @@ export const PositionsScreen = () => {
   }
 
   return (
-    <GovernanceWrapper selectedTab="positions">
-      <Box flexDirection="column" flex={1}>
-        <Box flex={1}>
-          <PositionsList header={<VotingPowerCard marginBottom="6" />} />
-        </Box>
-        {showError && (
+    <ScrollView>
+      <GovernanceWrapper selectedTab="positions">
+        <Box flexDirection="column" flex={1}>
+          <Box flex={1}>
+            <PositionsList header={<VotingPowerCard marginBottom="6" />} />
+          </Box>
+          {showError && (
+            <Box
+              flexDirection="row"
+              justifyContent="center"
+              alignItems="center"
+              paddingTop="3"
+            >
+              <Text variant="textXsMedium" color="error.500">
+                {showError}
+              </Text>
+            </Box>
+          )}
           <Box
             flexDirection="row"
-            justifyContent="center"
-            alignItems="center"
-            paddingTop="3"
+            gap="4"
+            style={{
+              marginBottom: bottom + spacing['0.5'],
+            }}
           >
-            <Text variant="textXsMedium" color="error.500">
-              {showError}
-            </Text>
+            <ButtonPressable
+              flex={1}
+              fontSize={16}
+              borderRadius="full"
+              backgroundColorOpacityPressed={0.7}
+              backgroundColor={'primaryText'}
+              title={t('gov.transactions.lockTokens')}
+              titleColor="primaryBackground"
+              titleColorPressed="base.black"
+              onPress={() => setIsLockModalOpen(true)}
+              disabled={claimingAllRewards || loading}
+            />
+            {HNT_MINT.equals(mint) && (
+              <>
+                <ButtonPressable
+                  flex={1}
+                  fontSize={16}
+                  borderRadius="full"
+                  backgroundColor="primaryText"
+                  backgroundColorOpacityPressed={0.7}
+                  backgroundColorDisabled="fg.disabled"
+                  backgroundColorDisabledOpacity={0.9}
+                  titleColorDisabled="text.disabled"
+                  title={
+                    claimingAllRewards ? '' : t('gov.transactions.claimRewards')
+                  }
+                  titleColor="primaryBackground"
+                  onPress={handleClaimRewards}
+                  disabled={
+                    !positionsWithRewards?.length ||
+                    claimingAllRewards ||
+                    loading
+                  }
+                />
+              </>
+            )}
           </Box>
-        )}
-        <Box flexDirection="row" padding="4">
-          <ButtonPressable
-            flex={1}
-            fontSize={16}
-            borderRadius="full"
-            borderWidth={2}
-            borderColor="base.white"
-            backgroundColorOpacityPressed={0.7}
-            title={t('gov.transactions.lockTokens')}
-            titleColor="base.white"
-            titleColorPressed="base.black"
-            onPress={() => setIsLockModalOpen(true)}
-            disabled={claimingAllRewards || loading}
-          />
-          {HNT_MINT.equals(mint) && (
-            <>
-              <Box paddingHorizontal="2" />
-              <ButtonPressable
-                flex={1}
-                fontSize={16}
-                borderRadius="full"
-                borderWidth={2}
-                borderColor={
-                  // eslint-disable-next-line no-nested-ternary
-                  claimingAllRewards
-                    ? 'bg.tertiary'
-                    : !positionsWithRewards?.length
-                    ? 'bg.tertiary'
-                    : 'base.white'
-                }
-                backgroundColor="base.white"
-                backgroundColorOpacityPressed={0.7}
-                backgroundColorDisabled="bg.tertiary"
-                backgroundColorDisabledOpacity={0.9}
-                titleColorDisabled="secondaryText"
-                title={
-                  claimingAllRewards ? '' : t('gov.transactions.claimRewards')
-                }
-                titleColor="base.black"
-                onPress={handleClaimRewards}
-                disabled={
-                  !positionsWithRewards?.length || claimingAllRewards || loading
-                }
-              />
-            </>
+          {claimingAllRewards && (
+            <ClaimingRewardsModal status={statusOfClaim} />
+          )}
+          {isLockModalOpen && (
+            <LockTokensModal
+              mint={mint}
+              maxLockupAmount={maxLockupAmount}
+              calcMultiplierFn={handleCalcLockupMultiplier}
+              onClose={() => setIsLockModalOpen(false)}
+              onSubmit={handleLockTokens}
+            />
           )}
         </Box>
-        {claimingAllRewards && <ClaimingRewardsModal status={statusOfClaim} />}
-        {isLockModalOpen && (
-          <LockTokensModal
-            mint={mint}
-            maxLockupAmount={maxLockupAmount}
-            calcMultiplierFn={handleCalcLockupMultiplier}
-            onClose={() => setIsLockModalOpen(false)}
-            onSubmit={handleLockTokens}
-          />
-        )}
-      </Box>
-    </GovernanceWrapper>
+      </GovernanceWrapper>
+    </ScrollView>
   )
 }
 

diff --git a/src/features/governance/VotersScreen.tsx b/src/features/governance/VotersScreen.tsx
@@ -19,7 +19,7 @@ import BN from 'bn.js'
 import { times } from 'lodash'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FlatList, Image, RefreshControl } from 'react-native'
+import { FlatList, Image, RefreshControl, ScrollView } from 'react-native'
 import { useDebounce } from 'use-debounce'
 import { GovernanceNavigationProp } from './governanceTypes'
 import { GovernanceWrapper } from './GovernanceWrapper'
@@ -80,7 +80,7 @@ export default function VotersScreen() {
         width="100%"
         justifyContent="center"
         alignItems="center"
-        mb="4"
+        marginVertical="4"
       >
         <Text variant="textMdRegular" color="primaryText">
           {t('gov.voters.noneFound')}
@@ -159,31 +159,39 @@ export default function VotersScreen() {
   const { primaryText } = useColors()
 
   return (
-    <GovernanceWrapper selectedTab="voters">
-      <Text color="primaryText" opacity={0.5} fontSize={20} mb="6">
-        {t('gov.voters.title')}
-      </Text>
-      <SearchInput
-        placeholder={t('gov.voters.searchPlaceholder')}
-        onChangeText={setProxySearch}
-        value={proxySearch}
-      />
-      <FlatList
-        keyExtractor={keyExtractor}
-        data={proxies}
-        renderItem={renderItem}
-        ListEmptyComponent={renderEmptyComponent}
-        refreshControl={
-          <RefreshControl
-            refreshing={loading || isLoading || isFetchingNextPage}
-            onRefresh={refetch}
-            title=""
-            tintColor={primaryText}
-          />
-        }
-        onEndReached={handleOnEndReached}
-      />
-    </GovernanceWrapper>
+    <ScrollView>
+      <GovernanceWrapper selectedTab="voters">
+        <Text
+          variant={'textSmRegular'}
+          color="primaryText"
+          opacity={0.5}
+          fontSize={20}
+          mb="6"
+        >
+          {t('gov.voters.title')}
+        </Text>
+        <SearchInput
+          placeholder={t('gov.voters.searchPlaceholder')}
+          onChangeText={setProxySearch}
+          value={proxySearch}
+        />
+        <FlatList
+          keyExtractor={keyExtractor}
+          data={proxies}
+          renderItem={renderItem}
+          ListEmptyComponent={renderEmptyComponent}
+          refreshControl={
+            <RefreshControl
+              refreshing={loading || isLoading || isFetchingNextPage}
+              onRefresh={refetch}
+              title=""
+              tintColor={primaryText}
+            />
+          }
+          onEndReached={handleOnEndReached}
+        />
+      </GovernanceWrapper>
+    </ScrollView>
   )
 }