status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(build): Ensure compatibility with updated `@tamagui/*` & `@status/*` packages 

Co-authored-by: RadoslavDimchev <RadoslavDimchev111@gmail.com>
This commit is contained in:
Emil Ivanichkov 2024-02-09 20:10:17 +02:00 committed by Emil Ivanichkov
parent 82884cbf67
commit 3d7c474bf4
29 changed files with 61 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/General/CreateAvatar/CreateAvatar.tsx
View File

@ -44,7 +44,7 @@ const CreateAvatar = () => {
<Text size={13} weight="semibold" color={'#647084'}>
Device Avatar
</Text>
<XStack my={10} alignItems={'end'}>
<XStack my={10} alignItems={'flex-end'}>
<div className="device-avatar" style={{ background: chosenColor }}>
{selectedEmoji ? (
<Emoji

3
src/components/General/LeftSidebar/LeftSidebar.tsx
View File

@ -42,8 +42,7 @@ const LeftSidebar = () => {
return (
<YStack
space={'$3'}
minHeight={'100vh'}
background={'#FFF'}
minHeight={'14vh'}
style={{
padding: '8px',
borderTopLeftRadius: '16px',

2
src/components/General/LinkWithArrow.tsx
View File

@ -34,7 +34,7 @@ const LinkWithArrow = ({
cursor: 'pointer',
...style,
}}
onClick={navigateHandler}
onPress={navigateHandler}
>
{arrowLeft && <ArrowLeftIcon size={20} color="#2A4CF4" />}
<Link

8
src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
View File

@ -2,6 +2,7 @@ import { useState } from 'react'
import { XStack } from 'tamagui'
import { Avatar, Checkbox } from '@status-im/components'
import { colorsTyped } from '../../../../../tokens.ts'
import ValidatorNameAddress from '../../ValidatorNameAddress'
type ValidatorListItemProps = {
@ -29,23 +30,24 @@ const ValidatorListItem = ({
<XStack
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
justifyContent="space-between"
alignItems="center"
style={{
padding: '6px 8px',
borderRadius: '12px',
backgroundColor: (isSelected || isHovered) && 'rgba(42, 74, 245, 0.05)',
backgroundColor:
isSelected || isHovered ? 'rgba(42, 74, 245, 0.05)' : '',
cursor: 'pointer',
}}
width="92%"
onPress={handleClick}
>
<XStack alignItems="center" space={'$2'}>
<Avatar
type="user"
size={32}
name={name}
backgroundColor="$red-50"
backgroundColor={colorsTyped['red-50']}
colorHash={[
[2, 9],
[4, 8],

2
src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx
View File

@ -8,7 +8,7 @@ const ValidatorsTabs = () => {
return (
<Tabs defaultValue={VALIDATOR_TABS_RIGHT_SIDEBAR[0]}>
<Stack style={{ cursor: 'pointer', width: 'fit-content' }}>
<Tabs.List size={32}>
<Tabs.List size={32} variant="grey">
{VALIDATOR_TABS_RIGHT_SIDEBAR.map(tab => (
<Tabs.Trigger key={tab} type="default" value={tab}>
{tab}

2
src/components/General/ValidatorNameAddress.tsx
View File

@ -38,7 +38,7 @@ const ValidatorNameAddress = ({
}
return (
<YStack alignItems={'start'}>
<YStack alignItems={'flex-start'}>
<XStack space={'$1'} alignItems="center">
<Text size={13} weight={'semibold'}>
Validator {name}

9
src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx
View File

@ -48,11 +48,7 @@ const BalanceChartCard = () => {
<Text size={15} weight={'semibold'}>
Balance
</Text>
<XStack
style={{ alignItems: 'end' }}
space={'$1'}
onClick={() => setIsCalendarVisible(true)}
>
<XStack style={{ alignItems: 'end' }} space={'$1'}>
<Text size={27} weight={'semibold'}>
24,273
</Text>
@ -76,7 +72,6 @@ const BalanceChartCard = () => {
/>
)}
<XStack
onClick={() => setIsCalendarVisible(prev => !prev)}
style={{
border: '2px solid #09101C14',
height: 'fit-content',
@ -85,6 +80,7 @@ const BalanceChartCard = () => {
cursor: 'pointer',
}}
space={'$2'}
onPress={() => setIsCalendarVisible(prev => !prev)}
>
<Text size={13} weight={'semibold'}>
{dateRange?.from
@ -100,7 +96,6 @@ const BalanceChartCard = () => {
<Icon src="/icons/edit.svg" />
</XStack>
</XStack>
<LineChart years={filteredYears} userGains={filteredUserGains} />
</YStack>
</DashboardCardWrapper>

2
src/pages/Dashboard/DashboardContent.tsx
View File

@ -21,7 +21,7 @@ const DashboardContent = ({ windowWidth }: DashboardContentProps) => {
return (
<YStack
space="$4"
alignItems="start"
alignItems="flex-start"
px="24px"
minWidth="500px"
width="50vh"

8
src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
View File

@ -38,11 +38,7 @@ const DeviceUptime = () => {
<Text size={15} weight={'semibold'}>
Device Uptime
</Text>
<XStack
style={{ alignItems: 'end' }}
space={'$1'}
onClick={() => setIsCalendarVisible(true)}
>
<XStack style={{ alignItems: 'end' }} space={'$1'}>
<Text size={27} weight={'semibold'}>
24,273
</Text>
@ -52,7 +48,6 @@ const DeviceUptime = () => {
</XStack>
</YStack>
<XStack
onClick={() => setIsCalendarVisible(prev => !prev)}
style={{
border: '2px solid #09101C14',
height: 'fit-content',
@ -60,6 +55,7 @@ const DeviceUptime = () => {
borderRadius: '10px',
cursor: 'pointer',
}}
onPress={() => setIsCalendarVisible(prev => !prev)}
>
<Text size={13} weight={'semibold'}>
{dateRange?.from

13
src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
View File

@ -2,6 +2,7 @@ import { useSelector } from 'react-redux'
import { Stack, XStack, YStack } from 'tamagui'
import { CloseCircleIcon } from '@status-im/icons'
import { Button, InformationBox } from '@status-im/components'
import type { Property } from 'csstype'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import NimbusLogo from '../../components/Logos/NimbusLogo'
@ -22,8 +23,12 @@ const DeviceHealthCheck = () => {
const breakpoint = 768
const responsiveStyle = {
flexWrap: windowSize.width <= breakpoint ? 'wrap' : 'nowrap',
flexDirection: windowSize.width <= breakpoint ? 'column' : 'row',
flexWrap: (windowSize.width <= breakpoint
? 'wrap'
: 'nowrap') as Property.FlexWrap,
flexDirection: (windowSize.width <= breakpoint
? 'column'
: 'row') as Property.FlexDirection,
alignItems: 'flex-start',
width: windowSize.width <= breakpoint ? '200%' : '100%',
}
@ -47,13 +52,13 @@ const DeviceHealthCheck = () => {
subtitle="Configure your device to start Staking on Nimbus"
isAdvancedSettings={true}
/>
<XStack space={'$4'} style={responsiveStyle}>
<Stack space={'$4'} style={responsiveStyle}>
<DeviceStorageHealth
storage={deviceHealthState.storage}
maxStorage={deviceHealthState.maxMemory}
/>
<DeviceCPULoad load={deviceHealthState.cpuLoad} />
</XStack>
</Stack>
<XStack space={'$4'} style={responsiveStyle}>
<DeviceMemory
currentMemory={deviceHealthState.memory}

4
src/pages/LogsPage/LogsPage.tsx
View File

@ -35,7 +35,7 @@ const LogsPage = () => {
<LeftSidebar />
<YStack
space="$4"
alignItems="start"
alignItems="flex-start"
px="24px"
minWidth="500px"
width="50vh"
@ -46,7 +46,7 @@ const LogsPage = () => {
}}
className={'transparent-scrollbar'}
>
<XStack justifyContent="space-between" width={'100%'} flexWrap="wrap ">
<XStack justifyContent="space-between" width={'100%'} flexWrap="wrap">
<TitleLogo />
<HeaderBtns
dropdownMenuItem={dropdownMenuItem}

2
src/pages/PairDevice/SyncStatus.tsx
View File

@ -53,7 +53,7 @@ const SyncStatus = ({
<Text
size={13}
color={isAwaitingPairing ? '#EB5757' : '#647084'}
weight={isAwaitingPairing && 'semibold'}
weight={isAwaitingPairing ? 'semibold' : 'regular'}
>
{timer}
</Text>

6
src/pages/ValidatorManagement/ManageValidator/DepositStatus.tsx
View File

@ -22,10 +22,12 @@ const depositStatusData = [
const DepositStatus = () => {
return (
<XStack
border="1px solid ##DCE0E5"
borderWidth="1px"
borderStyle="solid"
borderColor={'#DCE0E5'}
space={'$2'}
backgroundColor="#fff"
borderRadius="10px"
borderRadius="$10"
marginTop="0px"
marginLeft="30px"
marginRight="20px"

2
src/pages/ValidatorManagement/ManageValidator/Header.tsx
View File

@ -4,7 +4,7 @@ import { PopupIcon } from '@status-im/icons'
const Header = () => {
return (
<XStack justifyContent="space-between" alignItems="center" padding="30px">
<XStack alignItems="end">
<XStack alignItems="flex-end">
<Titles title="Manage Validator" titleSize={27} subtitle="" />
</XStack>
<PopupIcon size={20} />

2
src/pages/ValidatorManagement/ManageValidator/ManageValidator.tsx
View File

@ -15,7 +15,7 @@ import Footer from './Footer'
const ManageValidator = () => {
return (
<XStack flexGrow="1">
<XStack flexGrow={1}>
<Stack width={'50%'} space="$2">
<Header />
<YStack backgroundColor="#F4F6FE" space={'$3'}>

2
src/pages/ValidatorManagement/ManageValidator/ManageValidatorTable/ValidatorDataTabs.tsx
View File

@ -25,7 +25,7 @@ const ValidatorDataTabs = () => {
maxWidth={'120px'}
style={{ cursor: 'pointer', margin: '8px 0' }}
>
<Tabs.List size={32}>
<Tabs.List size={32} variant="grey">
{MANAGE_VALIDATOR_TABS.map((tab, index) => (
<Tabs.Trigger key={index} type="default" value={tab}>
{tab}

6
src/pages/ValidatorManagement/ManageValidator/ValidatorBalance.tsx
View File

@ -5,10 +5,12 @@ import Icon from '../../../components/General/Icon'
const ValidatorBalance = () => {
return (
<XStack
border="1px solid ##DCE0E5"
borderWidth="1px"
borderStyle="solid"
borderColor={'#DCE0E5'}
space={'$2'}
backgroundColor="#2A4AF5"
borderRadius="10px"
borderRadius="$10"
marginTop="0px"
marginLeft="30px"
marginRight="20px"

2
src/pages/ValidatorManagement/ManageValidator/ValidatorToolCard.tsx
View File

@ -21,7 +21,7 @@ const ValidatorToolCard = ({ name, icon }: ValidatorToolCardProps) => {
minWidth: '100px',
}}
space={'$4'}
onClick={() => {}}
onPress={() => {}}
>
<Stack>
<Text size={19} weight={'semibold'}>

2
src/pages/ValidatorManagement/ManagementTabs.tsx
View File

@ -20,7 +20,7 @@ const ManagementTabs = () => {
maxWidth={'120px'}
style={{ cursor: 'pointer', margin: '8px 0' }}
>
<Tabs.List size={32}>
<Tabs.List size={32} variant="grey">
{VALIDATOR_TABS_MANAGEMENT.map(tab => (
<Tabs.Trigger key={tab} type="default" value={tab}>
{tab}

2
src/pages/ValidatorManagement/ValidatorManagementContent.tsx
View File

@ -10,7 +10,7 @@ const ValidatorManagementContent = () => {
return (
<YStack
space="$4"
alignItems="start"
alignItems="flex-start"
px="24px"
style={{
flexGrow: '1',

8
src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
View File

@ -74,7 +74,9 @@ const Advisories = () => {
<Text
size={27}
weight={
isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'
isCompleted(index) || isCurrent(title)
? 'semibold'
: 'regular'
}
color={
isCompleted(index) || isCurrent(title) ? 'blue' : 'default'
@ -85,7 +87,9 @@ const Advisories = () => {
<Text
size={19}
weight={
isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'
isCompleted(index) || isCurrent(title)
? 'semibold'
: 'regular'
}
color={
isCompleted(index) || isCurrent(title) ? 'blue' : 'default'

2
src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx
View File

@ -13,7 +13,7 @@ const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
return (
<YStack space={'$1'} width={windowSize.width < 780 ? '100%' : '70%'}>
<Stack style={{ marginBottom: '5%' }}>
<Text size={27} weight={400}>
<Text size={27} weight="regular">
{title}
</Text>
</Stack>

8
src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx
View File

@ -6,6 +6,7 @@ import {
} from '@status-im/components'
import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
import { useState } from 'react'
import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native'
import { isAddress } from 'web3-validator'
type WithdrawalAddressProps = {
@ -22,11 +23,12 @@ const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => {
const removeWithdrawalAddressHandler = () => {
setWithdrawalAddress('')
}
const checkAddress = (e: any) => {
const checkAddress = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
if (e.nativeEvent.text.length !== 0) {
setIsValidAddress(isAddress(e.nativeEvent.text))
}
}
return (
<YStack space={'$4'}>
<Text size={19} weight={'semibold'}>
@ -55,13 +57,13 @@ const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => {
<InformationBox
message="If withdrawal address is not provided at this step, your deposited funds will remain locked on the Beacon Chain until an address is provided. Unlocking will require signing a message with your withdrawal keys, generated from your mnemonic seed phrase (so keep it safe)."
variant="error"
icon={<CloseCircleIcon size={20} color="$red" />}
icon={<CloseCircleIcon size={20} />}
/>
{!isValidAddress && (
<InformationBox
message="Not valid ethereum address"
variant="error"
icon={<CloseCircleIcon size={20} color="$red" />}
icon={<CloseCircleIcon size={20} />}
/>
)}
</YStack>

2
src/pages/ValidatorOnboarding/Deposit/ConnectedWallet.tsx
View File

@ -52,7 +52,7 @@ const ConnectedWallet = () => {
{getFormattedWalletAddress(address)}
</Text>
<Stack style={{ marginTop: '3px' }}>
<Text size={13} color="#2A4CF4" weight={'semiboldF'}>
<Text size={13} color="#2A4CF4" weight={'semibold'}>
Connected
</Text>
</Stack>

2
src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx
View File

@ -19,7 +19,7 @@ const KeystoreBackupsCard = () => {
padding: '9px 16px',
cursor: 'pointer',
}}
onClick={downloadKeyFilesHandler}
onPress={downloadKeyFilesHandler}
>
<Text size={15} weight={'semibold'}>
Download Keystore Backups

2
src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
View File

@ -71,7 +71,7 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
paddingRight: '18px',
paddingLeft: '18px',
}}
onClick={copyRecoveryPhraseHandler}
onPress={copyRecoveryPhraseHandler}
>
<div
style={{

2
src/pages/ValidatorOnboarding/ValidatorSetup/BackButton.tsx
View File

@ -79,7 +79,7 @@ const BackButton = () => {
alignItems="center"
space="$3"
cursor={buttonState !== 'disabled' ? 'pointer' : 'default'}
onClick={() => buttonState !== 'disabled' && handleNavigateBack()}
onPress={() => buttonState !== 'disabled' && handleNavigateBack()}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>

2
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
View File

@ -35,7 +35,7 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
minWidth: '150px',
}}
space={'$8'}
onClick={() => {
onPress={() => {
dispatch(selectClient(name))
}}
>

6
tokens.ts
View File

@ -1,10 +1,10 @@
import { customisation } from '@status-im/colors'
import { createTokens } from '@tamagui/core'
import { size, space, zIndex } from '@tamagui/themes'
import { ColorTokens } from 'tamagui';
import { ColorTokens } from 'tamagui'
type ColorObject = {
[key: string]: ColorTokens;
[key: string]: ColorTokens
}
export const tokens = createTokens({
@ -206,7 +206,7 @@ export const tokens = createTokens({
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const colorsTyped: ColorObject = tokens.color as { [key: string]: any };
export const colorsTyped: ColorObject = tokens.color as { [key: string]: any }
type GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`
type RadiusTokens = GetTokenString<keyof typeof tokens.radius> | number