Skip to content

Commit

Permalink
Merge branch 'develop' into feat/dapp-be-connect
Browse files Browse the repository at this point in the history
  • Loading branch information
michaeljscript committed Apr 22, 2024
2 parents 93dd264 + ef40a33 commit 63fd72b
Show file tree
Hide file tree
Showing 76 changed files with 1,771 additions and 489 deletions.
2 changes: 2 additions & 0 deletions apps/wallet-mobile/.storybook/storybook.requires.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 5 additions & 5 deletions apps/wallet-mobile/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -90,16 +90,16 @@
]
},
"dependencies": {
"@amplitude/analytics-react-native": "^1.3.1",
"@amplitude/analytics-react-native": "1.3.1",
"@cardano-foundation/ledgerjs-hw-app-cardano": "^6.0.0",
"@emurgo/cip14-js": "^3.0.1",
"@emurgo/cip4-js": "1.0.7",
"@emurgo/cross-csl-core": "^4.2.0",
"@emurgo/cross-csl-mobile": "^4.2.0",
"@emurgo/cross-csl-core": "4.4.0",
"@emurgo/cross-csl-mobile": "4.4.0",
"@emurgo/csl-mobile-bridge": "6.0.0-alpha.4",
"@emurgo/react-native-blockies-svg": "^0.0.2",
"@emurgo/react-native-hid": "^5.15.6",
"@emurgo/yoroi-lib": "0.15.1",
"@emurgo/yoroi-lib": "0.15.4-alpha.1",
"@formatjs/intl-datetimeformat": "^6.7.0",
"@formatjs/intl-getcanonicallocales": "^2.1.0",
"@formatjs/intl-locale": "^3.2.1",
Expand Down Expand Up @@ -216,7 +216,7 @@
"@babel/preset-react": "^7.16.7",
"@babel/runtime": "^7.20.0",
"@emurgo/cardano-serialization-lib-nodejs": "^9.1.4",
"@emurgo/cross-csl-nodejs": "^4.2.0",
"@emurgo/cross-csl-nodejs": "4.4.0",
"@formatjs/cli": "^6.1.0",
"@formatjs/ts-transformer": "^3.13.0",
"@react-navigation/devtools": "^6.0.13",
Expand Down
98 changes: 61 additions & 37 deletions apps/wallet-mobile/src/Dashboard/Dashboard.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import {useNavigation} from '@react-navigation/native'
import {StackNavigationProp} from '@react-navigation/stack'
import {useTheme} from '@yoroi/theme'
import BigNumber from 'bignumber.js'
import React from 'react'
import {defineMessages, useIntl} from 'react-intl'
Expand All @@ -17,6 +18,8 @@ import {useSelectedWallet} from '../features/WalletManager/Context'
import globalMessages from '../i18n/global-messages'
import {Modal} from '../legacy/Modal'
import {DashboardRoutes, useWalletNavigation} from '../navigation'
import {PoolTransitionNotice} from '../Staking/PoolTransition/PoolTransitionNotice'
import {usePoolTransition} from '../Staking/PoolTransition/usePoolTransition'
import {isEmptyString} from '../utils/utils'
import {getCardanoNetworkConfigById} from '../yoroi-wallets/cardano/networks'
import {getCardanoBaseConfig} from '../yoroi-wallets/cardano/utils'
Expand All @@ -35,9 +38,11 @@ import {UserSummary} from './UserSummary'
import {WithdrawStakingRewards} from './WithdrawStakingRewards'

export const Dashboard = () => {
const {styles} = useStyles()
const intl = useIntl()
const navigateTo = useNavigateTo()
const governanceStrings = useGovernanceStrings()
const {isPoolRetiring} = usePoolTransition()

const wallet = useSelectedWallet()
const {isLoading: isSyncing, sync} = useSync(wallet)
Expand Down Expand Up @@ -91,6 +96,12 @@ export const Dashboard = () => {
>
{stakingInfo?.status !== 'staked' && <NotDelegatedInfo />}

{isPoolRetiring && (
<Row>
<PoolTransitionNotice />
</Row>
)}

<Row>
<EpochInfo />
</Row>
Expand Down Expand Up @@ -157,8 +168,6 @@ const useNavigateTo = () => {
}
}

const Row = ({style, ...props}: ViewProps) => <View {...props} style={[style, styles.row]} />

const SyncErrorBanner = ({showRefresh}: {showRefresh: boolean}) => {
const intl = useIntl()

Expand Down Expand Up @@ -227,45 +236,60 @@ const EpochInfo = () => {
)
}

const Actions = (props: ViewProps) => <View {...props} style={styles.actions} />

const messages = defineMessages({
stakingCenterButton: {
id: 'components.delegation.delegationnavigationbuttons.stakingCenterButton',
defaultMessage: '!!!Go to Staking Center',
},
})

const styles = StyleSheet.create({
root: {
flex: 1,
},
container: {
flexDirection: 'column',
flex: 1,
},
scrollView: {
flex: 1,
backgroundColor: '#fff',
},
contentContainer: {
paddingTop: 16,
paddingHorizontal: 16,
},
row: {
flex: 1,
paddingVertical: 12,
},
actions: {
flexDirection: 'row',
backgroundColor: '#fff',
padding: 16,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
elevation: 1,
shadowOpacity: 0.06,
shadowColor: 'black',
shadowRadius: 6,
shadowOffset: {width: 0, height: -8},
},
})
const useStyles = () => {
const {theme} = useTheme()
const {color} = theme

const styles = StyleSheet.create({
root: {
flex: 1,
},
container: {
flexDirection: 'column',
flex: 1,
},
scrollView: {
flex: 1,
backgroundColor: color.gray.min,
},
contentContainer: {
paddingTop: 16,
paddingHorizontal: 16,
},
row: {
flex: 1,
paddingVertical: 12,
},
actions: {
flexDirection: 'row',
backgroundColor: color.gray.min,
padding: 16,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
elevation: 1,
shadowOpacity: 0.06,
shadowColor: color['black-static'],
shadowRadius: 6,
shadowOffset: {width: 0, height: -8},
},
})

return {styles}
}

const Actions = (props: ViewProps) => {
const {styles} = useStyles()
return <View {...props} style={styles.actions} />
}

const Row = (props: ViewProps) => {
const {styles} = useStyles()
return <View {...props} style={styles.row} />
}
4 changes: 3 additions & 1 deletion apps/wallet-mobile/src/Dashboard/DashboardNavigator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {SettingsButton} from '../components/Button'
import {useGovernanceManagerMaker} from '../features/Staking/Governance'
import {useSelectedWallet} from '../features/WalletManager/Context'
import {DashboardRoutes, defaultStackNavigationOptions, useWalletNavigation} from '../navigation'
import {DelegationConfirmation} from '../Staking'
import {DelegationConfirmation, FailedTxScreen} from '../Staking'
import {StakingCenter} from '../Staking/StakingCenter'
import {useWalletName} from '../yoroi-wallets/hooks'
import {Dashboard} from './Dashboard'
Expand Down Expand Up @@ -46,6 +46,8 @@ export const DashboardNavigator = () => {
component={DelegationConfirmation}
options={{title: strings.title}}
/>

<Stack.Screen name="delegation-failed-tx" component={FailedTxScreen} options={{title: strings.title}} />
</Stack.Navigator>
</GovernanceProvider>
)
Expand Down
47 changes: 47 additions & 0 deletions apps/wallet-mobile/src/Staking/FailedTx/FailedTxImage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import * as React from 'react'
import Svg, {Defs, LinearGradient, Path, Stop, SvgProps} from 'react-native-svg'

export const FailedTxImage = (props: SvgProps) => {
return (
<Svg width={201} height={200} viewBox="0 0 201 200" fill="none" {...props}>
<Path
d="M48.477 17.513l-7.55 4.102 5.251 7.501-.249 68.963c-.031 8.886 5.61 19.231 12.623 23.104l46.822 25.889c.219 1.907.504 3.988.867 6.256a32.813 32.813 0 002.081 7.316l-2.19-1.644 2.089 8.886 9.506 15.758 7.862-4.443a2.16 2.16 0 00.483-.266c.838-.575 1.086-1.657.577-2.511a30.503 30.503 0 01-2.72-6.805c-.91-3.13 1.004-7.765 2.599-10.849l17.05 9.427 6.787 9.694 8.641-4.295c3.148-1.207 5.237-4.762 5.237-10.093l.257-71.533c.031-8.886-5.61-19.23-12.623-23.104L58.918 17.468c-2.626-1.459-5.072-1.792-7.106-1.17a20.427 20.427 0 00-3.335 1.215z"
fill="url(#paint0_linear_20568_11560)"
/>

<Path
opacity={0.8}
d="M36.757 31.198c0-8.886 5.735-12.96 12.732-9.086l92.959 51.405c7.013 3.873 12.654 14.218 12.623 23.104l-.257 71.525c0 8.886-5.735 12.959-12.732 9.086l-28.714-15.876a23.321 23.321 0 001.605 13.292 80.522 80.522 0 003.398 6.435c.449.79.281 1.769-.409 2.383a2.165 2.165 0 01-2.529.231c-6.701-4.147-16.036-12.152-18.148-25.318a133.949 133.949 0 01-.88-6.405l-47.282-26.148c-7.013-3.872-12.654-14.217-12.623-23.103l.257-71.525z"
fill="#52FCFF"
/>

<Path
d="M54.364 77.083c-.317.137-.478.433-.478.889s.161.934.478 1.436c.315.5.714.897 1.19 1.193.477.295.891.4 1.24.311l6.242-2.1 6.242 9.84c.35.52.748.917 1.192 1.193.444.276.841.369 1.19.282.352-.087.526-.359.526-.814 0-.456-.174-.96-.526-1.509l-6.194-9.81 6.194-2.13c.352-.118.526-.406.526-.86 0-.455-.174-.944-.526-1.464-.349-.52-.746-.918-1.19-1.194-.444-.276-.843-.37-1.192-.284l-6.242 2.101-6.242-9.838a4.115 4.115 0 00-1.24-1.225c-.476-.294-.875-.39-1.19-.281-.317.105-.478.387-.478.843 0 .456.161.949.478 1.482l6.242 9.838-6.242 2.1zM109.146 109.906c-.317.137-.476.433-.476.891 0 .454.159.932.476 1.434.317.499.716.899 1.192 1.193.475.297.889.4 1.238.313l6.242-2.101 6.244 9.839c.349.52.746.917 1.192 1.193.444.276.839.371 1.188.284.351-.087.526-.359.526-.814 0-.456-.175-.96-.526-1.511l-6.194-9.809 6.194-2.13c.351-.119.526-.404.526-.86 0-.456-.175-.943-.526-1.463-.349-.52-.744-.92-1.188-1.196-.446-.275-.843-.369-1.192-.282l-6.244 2.101-6.242-9.84a4.116 4.116 0 00-1.238-1.222c-.476-.297-.875-.39-1.192-.282-.317.105-.476.387-.476.843 0 .456.159.95.476 1.48l6.244 9.838-6.244 2.101zM88.083 124.986c3.767 2.226 6.821 1.102 6.821-2.511 0-3.612-3.054-8.346-6.82-10.572-3.768-2.226-6.822-1.102-6.822 2.511 0 3.613 3.054 8.346 6.821 10.572z"
fill="#FF1351"
/>

<Defs>
<LinearGradient
id="paint0_linear_20568_11560"
x1={40.9268}
y1={183.645}
x2={164.5}
y2={183.645}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#17D1AA" />

<Stop offset={0.15} stopColor="#1ACBAF" />

<Stop offset={0.37} stopColor="#21B8BC" />

<Stop offset={0.62} stopColor="#2E9BD3" />

<Stop offset={0.89} stopColor="#3F71F1" />

<Stop offset={1} stopColor="#475FFF" />
</LinearGradient>
</Defs>
</Svg>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import {storiesOf} from '@storybook/react-native'
import React from 'react'

import {FailedTxScreen} from './FailedTxScreen'

storiesOf('Staking/Failed Tx Screen', module).add('initial', () => {
return <FailedTxScreen />
})
131 changes: 131 additions & 0 deletions apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import {useNavigation} from '@react-navigation/native'
import {useTheme} from '@yoroi/theme'
import React from 'react'
import {defineMessages, useIntl} from 'react-intl'
import {StyleSheet, View} from 'react-native'

import {Button, Spacer, Text} from '../../components'
import {Space} from '../../components/Space/Space'
import {FailedTxImage} from './FailedTxImage'

export const FailedTxScreen = () => {
const strings = useStrings()
const styles = useStyles()
const navigateTo = useNavigateTo()

return (
<View style={styles.container}>
<FailedTxImage />

<Space height="l" />

<Text style={styles.title}>{strings.notEnoughFunds}</Text>

<Text style={styles.text}>{strings.noFundsToProcess}</Text>

<Spacer height={22} />

<Button onPress={navigateTo.buyAda} title={strings.buyAda} style={styles.button} shelleyTheme />

<Space height="l" />

<Button
onPress={navigateTo.main}
title={strings.goToMain}
style={styles.button}
textStyles={styles.outlineText}
outline
/>
</View>
)
}

const useNavigateTo = () => {
const navigation = useNavigation()

return {
buyAda: () =>
navigation.navigate('app-root', {
screen: 'main-wallet-routes',
params: {
screen: 'history',
params: {
screen: 'exchange-create-order',
},
},
}),
main: () =>
navigation.navigate('app-root', {
screen: 'main-wallet-routes',
params: {
screen: 'history',
params: {
screen: 'history-list',
},
},
}),
}
}

const useStyles = () => {
const {theme} = useTheme()
const {color, typography, padding} = theme
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
...padding['l'],
},
title: {
color: color.gray.max,
...typography['heading-3-medium'],
...padding['x-s'],
textAlign: 'center',
},
text: {
color: color.gray[600],
...typography['body-2-m-regular'],
textAlign: 'center',
maxWidth: 330,
},
button: {
...padding['x-l'],
...typography['button-2-m'],
},
outlineText: {
color: theme.color.primary[500],
},
})
return styles
}

const useStrings = () => {
const intl = useIntl()

return {
notEnoughFunds: intl.formatMessage(messages.notEnoughFunds),
noFundsToProcess: intl.formatMessage(messages.noFundsToProcess),
buyAda: intl.formatMessage(messages.buyAda),
goToMain: intl.formatMessage(messages.goToMain),
}
}

const messages = defineMessages({
notEnoughFunds: {
id: 'components.stakingcenter.failedDelegation.notEnoughFunds',
defaultMessage: '!!!Not enough funds',
},
noFundsToProcess: {
id: 'components.stakingcenter.failedDelegation.noFundsToProcess',
defaultMessage: '!!!Your transaction cannot be processed due to lack of funds on your wallet balance',
},
buyAda: {
id: 'components.stakingcenter.failedDelegation.buyAda',
defaultMessage: '!!!Buy ada',
},
goToMain: {
id: 'components.stakingcenter.failedDelegation.goToMain',
defaultMessage: '!!!Go to main wallet page',
},
})
Loading

0 comments on commit 63fd72b

Please sign in to comment.