diff --git a/apps/wallet/src/screens/Authentication/Invitation/GetCodeStepCard.tsx b/apps/wallet/src/screens/Authentication/Invitation/GetCodeStepCard.tsx new file mode 100644 index 000000000..c0c50e9c3 --- /dev/null +++ b/apps/wallet/src/screens/Authentication/Invitation/GetCodeStepCard.tsx @@ -0,0 +1,42 @@ +import type { FC } from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import { InvitationCodeStepBackground } from '@walless/icons'; + +interface GetCodeStepCardProps { + text: string; +} + +const GetCodeStepCard: FC = ({ text }) => { + return ( + + + + + + + {text} + + + ); +}; + +export default GetCodeStepCard; + +const styles = StyleSheet.create({ + container: { + width: 254, + height: 72, + paddingHorizontal: 16, + alignItems: 'flex-end', + justifyContent: 'center', + }, + background: { + position: 'absolute', + top: 0, + left: 0, + zIndex: -1, + }, + text: { + color: '#ffffff', + }, +}); diff --git a/apps/wallet/src/screens/Authentication/Invitation/GetCodeStepNumber.tsx b/apps/wallet/src/screens/Authentication/Invitation/GetCodeStepNumber.tsx new file mode 100644 index 000000000..60353763f --- /dev/null +++ b/apps/wallet/src/screens/Authentication/Invitation/GetCodeStepNumber.tsx @@ -0,0 +1,33 @@ +import type { FC } from 'react'; +import { StyleSheet, Text, View } from 'react-native'; + +interface GetCodeStepNumberProps { + number: number; +} + +const GetCodeStepNumber: FC = ({ number }) => { + return ( + + {number} + + ); +}; + +export default GetCodeStepNumber; + +const styles = StyleSheet.create({ + container: { + width: 28, + height: 28, + borderRadius: 14, + borderColor: '#ffffff', + borderWidth: 1, + justifyContent: 'center', + alignItems: 'center', + }, + text: { + color: '#ffffff', + fontSize: 12, + fontWeight: '500', + }, +}); diff --git a/apps/wallet/src/screens/Authentication/Invitation/InvitationGuide.tsx b/apps/wallet/src/screens/Authentication/Invitation/InvitationGuide.tsx new file mode 100644 index 000000000..5cac5d489 --- /dev/null +++ b/apps/wallet/src/screens/Authentication/Invitation/InvitationGuide.tsx @@ -0,0 +1,96 @@ +import { StyleSheet, Text, View } from 'react-native'; +import { Anchor } from '@walless/gui'; + +import GetCodeStepCard from './GetCodeStepCard'; +import GetCodeStepNumber from './GetCodeStepNumber'; + +const InvitationGuide = () => { + return ( + + Get invitation code + + + Walless is in phase 2. To get access code: + + + + + + + + + + + + + + + + + + + + Go to Discord + + + ); +}; + +export default InvitationGuide; + +const styles = StyleSheet.create({ + container: { + justifyContent: 'center', + alignItems: 'center', + paddingVertical: 28, + paddingHorizontal: 28, + gap: 20, + backgroundColor: '#232F37', + borderRadius: 16, + alignSelf: 'center', + }, + title: { + color: '#ffffff', + fontSize: 24, + fontWeight: '500', + }, + subtitle: { + color: '#ffffff', + }, + contentContainer: { + flexDirection: 'row', + alignItems: 'center', + gap: 8, + }, + stepCardContainer: { + gap: 16, + }, + stepNumberContainer: { + alignItems: 'center', + }, + connectedLine: { + width: 2, + height: 58, + backgroundColor: '#ffffff66', + }, + anchor: { + backgroundColor: '#198CCA', + borderColor: '#19A3E1', + shadowColor: '#16B7FF', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.58, + shadowRadius: 16.0, + elevation: 24, + borderRadius: 10, + borderWidth: 1, + paddingHorizontal: 16, + paddingVertical: 8, + }, + anchorText: { + color: '#ffffff', + fontWeight: '500', + }, +}); diff --git a/apps/wallet/src/screens/Authentication/Invitation/index.tsx b/apps/wallet/src/screens/Authentication/Invitation/index.tsx index d7f6128e3..4a17314ee 100644 --- a/apps/wallet/src/screens/Authentication/Invitation/index.tsx +++ b/apps/wallet/src/screens/Authentication/Invitation/index.tsx @@ -4,14 +4,15 @@ import type { NativeSyntheticEvent, TextInputKeyPressEventData, } from 'react-native'; +import type { ViewStyle } from 'react-native'; import { KeyboardAvoidingView, Platform, StyleSheet, + TouchableOpacity, TouchableWithoutFeedback, - type ViewStyle, } from 'react-native'; -import { Anchor, Button, Input, Text, View } from '@walless/gui'; +import { Button, Input, modalActions, Text, View } from '@walless/gui'; import { showError } from 'modals/Error'; import { appState } from 'state/app'; import { validateInvitationCode } from 'utils/auth'; @@ -20,6 +21,7 @@ import { navigate } from 'utils/navigation'; import { hideNativeKeyboard } from 'utils/system'; import HadWalletAccount from './GetCode'; +import InvitationGuide from './InvitationGuide'; import InvitationHeader from './InvitationHeader'; export const InvitationScreen: FC = () => { @@ -68,6 +70,13 @@ export const InvitationScreen: FC = () => { } }; + const handleShowGuideModal = () => { + modalActions.show({ + id: 'invitationGuide', + component: InvitationGuide, + }); + }; + const handleLoginPress = () => { setError(undefined); navigate('Authentication', { screen: 'Login' }); @@ -111,11 +120,9 @@ export const InvitationScreen: FC = () => { - + + Get invitation code + Powered by walless.io, version@{config.version} diff --git a/packages/icons/components/InvitationCodeStepBackground.tsx b/packages/icons/components/InvitationCodeStepBackground.tsx new file mode 100644 index 000000000..1bac64a2d --- /dev/null +++ b/packages/icons/components/InvitationCodeStepBackground.tsx @@ -0,0 +1,121 @@ +import { + ClipPath, + Defs, + G, + LinearGradient, + Path, + Rect, + Stop, + Svg, +} from 'react-native-svg'; + +export const InvitationCodeStepBackground = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/icons/index.ts b/packages/icons/index.ts index c0416ea54..224799d37 100644 --- a/packages/icons/index.ts +++ b/packages/icons/index.ts @@ -38,6 +38,7 @@ export { Heart } from './components/Heart'; export { Home } from './components/Home'; export { IdCard } from './components/IdCard'; export { InfoIcon } from './components/Info'; +export { InvitationCodeStepBackground } from './components/InvitationCodeStepBackground'; export { Kite } from './components/Kite'; export { LinkedIn } from './components/LinkedIn'; export { Lock } from './components/Lock';