Skip to content

Commit 52b6259

Browse files
sirdeggensirdeggen
authored
Merge pull request #28 from bsv-blockchain/onboarding
Onboarding
2 parents 27e33d7 + d330d46 commit 52b6259

File tree

5 files changed

+55
-58
lines changed

5 files changed

+55
-58
lines changed

‎app/auth/password.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,9 @@ export default function PasswordScreen() {
114114
disabled={!isButtonEnabled() || loading}
115115
>
116116
{loading ? (
117-
<ActivityIndicator color={colors.buttonText} />
117+
<ActivityIndicator color={colors.buttonTextDisabled} />
118118
) : (
119-
<Text style={styles.buttonText}>{t('continue')}</Text>
119+
<Text style={[styles.buttonText, (!isValidPassword() || loading) && styles.buttonTextDisabled]}>{t('continue')}</Text>
120120
)}
121121
</TouchableOpacity>
122122

‎app/auth/phone.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,9 +199,9 @@ export default function PhoneScreen() {
199199
disabled={!isValidPhoneNumber() || loading}
200200
>
201201
{loading ? (
202-
<ActivityIndicator color={colors.buttonText} />
202+
<ActivityIndicator color={colors.buttonTextDisabled} />
203203
) : (
204-
<Text style={styles.buttonText}>{t('continue')}</Text>
204+
<Text style={[styles.buttonText, (!isValidPhoneNumber() || loading) && styles.buttonTextDisabled]}>{t('continue')}</Text>
205205
)}
206206
</TouchableOpacity>
207207

‎app/index.tsx‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,17 @@ export default function LoginScreen() {
171171
marginTop: 12
172172
}
173173
]}
174-
onPress={() => {
174+
onPress={handleConfig}
175+
>
176+
<View style={styles.configIconContainer}>
177+
<Ionicons name="settings-outline" size={20} color={colors.primary} style={{ marginRight: 8 }} />
178+
<Text style={{ color: colors.textPrimary }}>{t('configure_providers')}</Text>
179+
</View>
180+
</TouchableOpacity>
181+
182+
<Text style={[styles.termsText, { paddingHorizontal: 50, color: colors.textSecondary }]}>{t('terms_privacy_agreement')}</Text>
183+
184+
<TouchableOpacity style={styles.configButton} onPress={() => {
175185
// Set mode to web2 immediately when button is pressed
176186
setWeb2Mode(true)
177187

@@ -185,18 +195,8 @@ export default function LoginScreen() {
185195
handleGetStarted()
186196
}
187197
)
188-
}}
189-
>
190-
<Text style={[styles.getStartedButtonText, { color: colors.textPrimary }]}>Continue without login</Text>
191-
</TouchableOpacity>
192-
193-
<Text style={[styles.termsText, { color: colors.textSecondary }]}>{t('terms_privacy_agreement')}</Text>
194-
195-
<TouchableOpacity style={styles.configButton} onPress={handleConfig}>
196-
<View style={styles.configIconContainer}>
197-
<Ionicons name="settings-outline" size={20} color={colors.secondary} />
198-
<Text style={styles.configButtonText}>{t('configure_providers')}</Text>
199-
</View>
198+
}}>
199+
<Text style={[styles.configButtonText, { color: '#487dbf' }]}>{t('continue_without_login')}</Text>
200200
</TouchableOpacity>
201201
</>
202202
)}
@@ -228,7 +228,7 @@ const styles = StyleSheet.create({
228228
width: 100,
229229
height: 100,
230230
borderRadius: 50,
231-
backgroundColor: '#0066cc',
231+
backgroundColor: '#487dbf',
232232
justifyContent: 'center',
233233
alignItems: 'center'
234234
},
@@ -259,20 +259,28 @@ const styles = StyleSheet.create({
259259
fontSize: 16,
260260
fontWeight: 'bold'
261261
},
262+
continueButtonText: {
263+
fontSize: 16,
264+
fontWeight: 'bold',
265+
color: '#0066cc'
266+
},
262267
configButton: {
263268
flexDirection: 'row',
264269
alignItems: 'center',
265270
justifyContent: 'center',
266271
marginTop: 50,
267-
padding: 10
272+
padding: 10,
273+
borderWidth: 1,
274+
borderColor: '#487dbf',
275+
borderRadius: 10,
276+
width: '60%'
268277
},
269278
configIconContainer: {
270279
flexDirection: 'row',
271280
alignItems: 'center',
272281
marginLeft: 8
273282
},
274283
configButtonText: {
275-
color: '#0066cc',
276284
fontSize: 14,
277285
marginLeft: 2
278286
},

‎components/RecoveryKeySaver.tsx‎

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -127,13 +127,11 @@ const RecoveryKeySaver = () => {
127127
<View style={[styles.modalContainer, { backgroundColor: 'rgba(0,0,0,0.5)' }]}>
128128
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.keyboardAvoid}>
129129
<View style={[styles.modalContent, { backgroundColor: colors.background }]}>
130-
<Text style={[styles.title, { color: colors.textPrimary }]}>Secure Access Backup and Recovery</Text>
130+
<Text style={[styles.title, { color: colors.textPrimary }]}>Save Your Recovery Key Now</Text>
131131

132132
<ScrollView style={styles.scrollView}>
133133
{!affirmative1 && (
134134
<View>
135-
<Text style={[styles.subtitle, { color: colors.textPrimary }]}>Save Your Recovery Key Now:</Text>
136-
137135
<View
138136
style={[
139137
styles.keyContainer,
@@ -156,7 +154,7 @@ const RecoveryKeySaver = () => {
156154
color={colors.buttonText}
157155
style={styles.buttonIcon}
158156
/>
159-
<Text style={[styles.buttonText, { color: colors.buttonText }]}>Copy to Clipboard</Text>
157+
<Text style={[styles.buttonText, { color: colors.buttonText }]}>Copy</Text>
160158
</TouchableOpacity>
161159

162160
<TouchableOpacity
@@ -179,29 +177,19 @@ const RecoveryKeySaver = () => {
179177
<Checkbox
180178
checked={affirmative1}
181179
onPress={() => setAffirmative1(!affirmative1)}
182-
label="I have saved my recovery key in a secure location"
180+
label="I have saved my recovery key"
183181
/>
184182
</View>
185183

186184
{affirmative1 && (
187185
<View>
188186
<Text style={[styles.subtitle, { color: colors.textPrimary }]}>
189-
Any 2 of 3 factors are required to access your data:
190-
</Text>
191-
192-
<Text style={[styles.centeredText, { color: colors.textPrimary, fontWeight: 'bold' }]}>
193-
Phone, Password, Recovery Key
194-
</Text>
195-
196-
<Text style={[styles.description, { color: colors.textSecondary, marginTop: 16 }]}>
197-
When you lose your phone or forget your password, you must use the other factors to re-establish
198-
secure control. This is a perfectly normal and unavoidable fact of life. However -
187+
Any 2 of 3 factors are required to access your data: Phone, Password, Recovery Key
199188
</Text>
200189

201190
<View style={[styles.warningBox, { borderColor: colors.error }]}>
202191
<Text style={[styles.warningText, { color: colors.error }]}>
203-
Loss of more than one factor will result in TOTAL LOSS of access to all assets, encrypted data,
204-
and certificates.
192+
Loss of two factors = PERMANENT TOTAL LOSS of all assets, and data.
205193
</Text>
206194
</View>
207195

@@ -231,15 +219,15 @@ const RecoveryKeySaver = () => {
231219
style={[
232220
styles.buttonPrimary,
233221
{
234-
backgroundColor: isAllChecked ? '#006600' : colors.inputBorder,
235-
opacity: isAllChecked ? 1 : 0.5
222+
backgroundColor: colors.buttonBackground,
223+
opacity: isAllChecked ? 1 : 0.2
236224
}
237225
]}
238226
onPress={onKeySaved}
239227
disabled={!isAllChecked}
240228
>
241229
<Text style={[styles.buttonText, { color: colors.buttonText }]}>Securely Saved</Text>
242-
<Ionicons name="lock-closed" size={20} color={colors.buttonText} style={styles.buttonIcon} />
230+
<Ionicons name={isAllChecked ? "lock-closed" : "lock-open"} size={20} color={colors.buttonText} style={styles.buttonIcon} />
243231
</TouchableOpacity>
244232
</View>
245233
</View>
@@ -257,7 +245,6 @@ const styles = StyleSheet.create({
257245
alignItems: 'center'
258246
},
259247
keyboardAvoid: {
260-
width: '90%',
261248
maxWidth: 500
262249
},
263250
modalContent: {
@@ -271,7 +258,6 @@ const styles = StyleSheet.create({
271258
shadowOpacity: 0.25,
272259
shadowRadius: 3.84,
273260
elevation: 5,
274-
maxHeight: '80%'
275261
},
276262
scrollView: {
277263
maxHeight: 450,
@@ -319,7 +305,7 @@ const styles = StyleSheet.create({
319305
flex: 0.48
320306
},
321307
buttonIcon: {
322-
marginRight: 8
308+
marginLeft: 8
323309
},
324310
warningBox: {
325311
borderWidth: 1,
@@ -379,7 +365,7 @@ const styles = StyleSheet.create({
379365
},
380366
buttonText: {
381367
fontSize: 16,
382-
fontWeight: '500'
368+
fontWeight: '500',
383369
},
384370
buttonSecondaryText: {
385371
fontSize: 16

‎components/Web3BenefitsModal.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Modal, View, Text, TouchableOpacity, StyleSheet } from 'react-native'
33
import { Ionicons } from '@expo/vector-icons'
44
import { useTheme } from '@/context/theme/ThemeContext'
55
import { useTranslation } from 'react-i18next'
6+
import { red } from '@bsv/sdk/primitives/Point.ts'
67

78
interface Web3BenefitsModalProps {
89
visible: boolean
@@ -63,36 +64,35 @@ const Web3BenefitsModal: React.FC<Web3BenefitsModalProps> = ({
6364
{/* Content - Simple approach */}
6465
<View style={{ padding: 20 }}>
6566
<Text style={[{ fontSize: 16, marginBottom: 16, color: colors.textPrimary }]}>
66-
The benefits of web3 are as follows:
67+
A Web3 identity brings you:
6768
</Text>
6869

70+
<Text style={[{ fontSize: 16, fontWeight: 'bold', color: colors.textPrimary }]}>Micropayments</Text>
6971
<Text style={[{ fontSize: 14, lineHeight: 20, marginBottom: 8, color: colors.textPrimary }]}>
70-
• Never login again - One identity for every Web3 app. No more passwords or sign-ups.
72+
where creators to earn directly.
7173
</Text>
74+
<Text style={[{ fontSize: 16, fontWeight: 'bold', color: colors.textPrimary }]}>Private Identity</Text>
7275
<Text style={[{ fontSize: 14, lineHeight: 20, marginBottom: 8, color: colors.textPrimary }]}>
73-
• Instant everything - Payments, access, verification - all happen in seconds.
76+
with mutual auth means no signups or logins.
7477
</Text>
78+
<Text style={[{ fontSize: 16, fontWeight: 'bold', color: colors.textPrimary }]}>Data Sovereignty</Text>
7579
<Text style={[{ fontSize: 14, lineHeight: 20, marginBottom: 8, color: colors.textPrimary }]}>
76-
• You own your data - No companies tracking you or selling your information.
77-
</Text>
78-
<Text style={[{ fontSize: 14, lineHeight: 20, marginBottom: 8, color: colors.textPrimary }]}>
79-
• Works everywhere - Access thousands of Web3 apps with the same identity.
80-
</Text>
81-
<Text style={[{ fontSize: 14, lineHeight: 20, marginBottom: 20, color: colors.textPrimary }]}>
82-
• Future-proof - Be early to the next generation of the internet.
80+
you're in control, with no 3rd party tracking.
8381
</Text>
8482
</View>
8583

84+
<Text style={[{ padding: 20, fontSize: 16, fontWeight: 'bold', color: colors.textPrimary }]}>Become an early adopter and lead your peers to the future of everything.</Text>
85+
8686
{/* Action Buttons */}
8787
<View style={styles.buttonContainer}>
8888
<TouchableOpacity style={[styles.primaryButton, { backgroundColor: colors.primary }]} onPress={onGoToLogin}>
8989
<Text style={[styles.primaryButtonText, { color: colors.buttonText }]}>
90-
🚀 Get My Web3 Identity (30s)
90+
Get Started
9191
</Text>
9292
</TouchableOpacity>
9393

9494
<TouchableOpacity style={styles.secondaryButton} onPress={onContinueWithoutLogin}>
95-
<Text style={[styles.secondaryButtonText, { color: colors.textSecondary }]}>Maybe later</Text>
95+
<Text style={[styles.secondaryButtonText, { color: colors.textPrimary }]}>Maybe Later</Text>
9696
</TouchableOpacity>
9797
</View>
9898
</View>
@@ -165,10 +165,13 @@ const styles = StyleSheet.create({
165165
paddingHorizontal: 12,
166166
alignItems: 'center',
167167
alignSelf: 'center',
168-
marginTop: 8
168+
marginTop: 8,
169+
borderRadius: 12,
170+
borderWidth: 1,
171+
borderColor: '#666'
169172
},
170173
secondaryButtonText: {
171-
fontSize: 11,
174+
fontSize: 14,
172175
fontWeight: '300',
173176
opacity: 0.5
174177
}

0 commit comments

Comments
 (0)