Skip to content

Commit 16a3cec

Browse files
committed
Cleanup demo edge cases and beautify
1 parent 95fafdb commit 16a3cec

17 files changed

+544
-261
lines changed

demo/android/app/src/main/kotlin/xyz/juicebox/demo/SecretIdStorageModule.kt

+20
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import com.facebook.react.bridge.ReactContextBaseJavaModule
55
import com.facebook.react.bridge.ReactMethod
66
import com.facebook.react.bridge.Promise
77
import com.google.android.gms.auth.blockstore.Blockstore
8+
import com.google.android.gms.auth.blockstore.DeleteBytesRequest
89
import com.google.android.gms.auth.blockstore.RetrieveBytesRequest
910
import com.google.android.gms.auth.blockstore.StoreBytesData
1011

@@ -13,6 +14,25 @@ class SecretIdStorageModule(reactContext: ReactApplicationContext) :
1314

1415
override fun getName() = NAME
1516

17+
@ReactMethod
18+
fun isAvailable(promise: Promise) {
19+
// TODO: Check if cloud backup is available and fallback to GDrive
20+
promise.resolve(null)
21+
}
22+
23+
@ReactMethod
24+
fun delete(promise: Promise) {
25+
val client = Blockstore.getClient(reactApplicationContext)
26+
val deleteRequest = DeleteBytesRequest.Builder()
27+
.setKeys(arrayListOf(SECRET_ID_BYTES_KEY))
28+
.build()
29+
client.deleteBytes(deleteRequest).addOnSuccessListener {
30+
promise.resolve(null)
31+
}.addOnFailureListener {
32+
promise.reject("0", "failed $it", it)
33+
}
34+
}
35+
1636
@ReactMethod
1737
fun register(secretId: String, promise: Promise) {
1838
val client = Blockstore.getClient(reactApplicationContext)

demo/assets/back.png

2.5 KB
Loading

demo/assets/checkmark.png

-2.2 KB
Binary file not shown.

demo/assets/splash.png

84.3 KB
Loading

demo/ios/JuiceboxDemo/AppDelegate.mm

+7-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
1111
// They will be passed down to the ViewController used by React Native.
1212
self.initialProps = @{};
1313

14-
return [super application:application didFinishLaunchingWithOptions:launchOptions];
14+
15+
BOOL success = [super application:application didFinishLaunchingWithOptions:launchOptions];
16+
if (success) {
17+
// Modify as needed to match the main color of your splash.
18+
self.window.rootViewController.view.backgroundColor = [UIColor colorWithRed:28.0/255.0 green:28.0/255.0 blue:28.0/255.0 alpha:1.0];
19+
}
20+
return success;
1521
}
1622

1723
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge

demo/ios/JuiceboxDemo/Info.plist

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<key>CFBundleDevelopmentRegion</key>
66
<string>en</string>
77
<key>CFBundleDisplayName</key>
8-
<string>JuiceboxDemo</string>
8+
<string>Juicebox</string>
99
<key>CFBundleExecutable</key>
1010
<string>$(EXECUTABLE_NAME)</string>
1111
<key>CFBundleIdentifier</key>

demo/ios/JuiceboxDemo/LaunchScreen.storyboard

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
1717
<subviews>
1818
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="splash" translatesAutoresizingMaskIntoConstraints="NO" id="S5V-mY-TnP">
19-
<rect key="frame" x="112.5" y="258.5" width="150" height="150"/>
19+
<rect key="frame" x="125" y="271" width="125" height="125"/>
2020
<constraints>
21-
<constraint firstAttribute="width" constant="150" id="7hb-7s-QPc"/>
22-
<constraint firstAttribute="height" constant="150" id="zGa-Wg-Mx7"/>
21+
<constraint firstAttribute="width" constant="125" id="7hb-7s-QPc"/>
22+
<constraint firstAttribute="height" constant="125" id="zGa-Wg-Mx7"/>
2323
</constraints>
2424
</imageView>
2525
</subviews>

demo/ios/SecretIdStorage.mm

+10
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22

33
@interface RCT_EXTERN_MODULE(SecretIdStorage, NSObject)
44

5+
RCT_EXTERN_METHOD(
6+
isAvailable:(RCTPromiseResolveBlock)resolve
7+
reject:(RCTPromiseRejectBlock)reject
8+
)
9+
10+
RCT_EXTERN_METHOD(
11+
delete:(RCTPromiseResolveBlock)resolve
12+
reject:(RCTPromiseRejectBlock)reject
13+
)
14+
515
RCT_EXTERN_METHOD(
616
register:(NSString *)secretId
717
resolve:(RCTPromiseResolveBlock)resolve

demo/ios/SecretIdStorage.swift

+31
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,37 @@ class SecretIdStorage: NSObject {
2222
static let recordType = "SecretId"
2323
static let recordId = CKRecord.ID(recordName: "xyz.juicebox.jbid")
2424

25+
@objc
26+
func isAvailable(
27+
_ resolve: @escaping RCTPromiseResolveBlock,
28+
reject: @escaping RCTPromiseRejectBlock
29+
) {
30+
Task {
31+
do {
32+
try await checkAccountStatus()
33+
resolve(())
34+
} catch {
35+
reject("\((error as NSError).code)", "storage not available: \(error)", error)
36+
}
37+
}
38+
}
39+
40+
@objc
41+
func delete(
42+
_ resolve: @escaping RCTPromiseResolveBlock,
43+
reject: @escaping RCTPromiseRejectBlock
44+
) {
45+
Task {
46+
do {
47+
try await checkAccountStatus()
48+
try await container.privateCloudDatabase.deleteRecord(withID: Self.recordId)
49+
resolve(())
50+
} catch {
51+
reject("\((error as NSError).code)", "Failed to delete record: \(error)", error)
52+
}
53+
}
54+
}
55+
2556
@objc
2657
func register(
2758
_ secretId: String,

demo/package.json

-2
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,10 @@
1515
"@react-navigation/stack": "^6.3.19",
1616
"react": "18.2.0",
1717
"react-native": "0.72.6",
18-
"react-native-action-sheet": "^2.2.0",
1918
"react-native-gesture-handler": "^2.13.3",
2019
"react-native-randombytes": "^3.6.1",
2120
"react-native-safe-area-context": "^4.7.3",
2221
"react-native-screens": "^3.26.0",
23-
"react-native-toast-message": "^2.1.6",
2422
"text-encoding-polyfill": "^0.6.7"
2523
},
2624
"devDependencies": {

demo/src/App.tsx

+2-14
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
22
import { NavigationContainer } from '@react-navigation/native';
33
import { createStackNavigator } from '@react-navigation/stack';
44
import { ActivityIndicator, View, StyleSheet } from 'react-native';
5-
import Toast, { ErrorToast } from 'react-native-toast-message';
65

76
import AsyncStorage from '@react-native-async-storage/async-storage';
87

@@ -12,16 +11,6 @@ import Secret from './Screens/Secret';
1211

1312
const Stack = createStackNavigator();
1413

15-
const toastConfig = {
16-
error: (props: Object) => (
17-
<ErrorToast
18-
{...props}
19-
text1Style={styles.text1Style}
20-
text2Style={styles.text2Style}
21-
/>
22-
),
23-
};
24-
2514
const App = () => {
2615
const [isSetupComplete, setIsSetupComplete] = useState<boolean | null>(null);
2716

@@ -35,7 +24,7 @@ const App = () => {
3524

3625
return isSetupComplete == null ? (
3726
<View style={styles.container}>
38-
<ActivityIndicator color={'#ffffff'} size={'large'} />
27+
<ActivityIndicator color={'#8c5eea'} size={'large'} />
3928
</View>
4029
) : (
4130
<>
@@ -60,7 +49,6 @@ const App = () => {
6049
/>
6150
</Stack.Navigator>
6251
</NavigationContainer>
63-
<Toast config={toastConfig} />
6452
</>
6553
);
6654
};
@@ -70,7 +58,7 @@ const styles = StyleSheet.create({
7058
flex: 1,
7159
justifyContent: 'center',
7260
alignItems: 'center',
73-
backgroundColor: '#531ac8',
61+
backgroundColor: '#1c1c1c',
7462
},
7563
text1Style: {
7664
fontSize: 18,

demo/src/Screens/Secret.tsx

+30-26
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import {
44
Text,
55
TouchableOpacity,
66
StyleSheet,
7-
Image,
87
Platform,
98
} from 'react-native';
9+
import { SafeAreaView } from 'react-native-safe-area-context';
1010
import AsyncStorage from '@react-native-async-storage/async-storage';
1111
import { CommonActions } from '@react-navigation/native';
1212

@@ -33,31 +33,26 @@ const Secret = ({ navigation, route }) => {
3333
}, [route]);
3434

3535
return (
36-
<View style={styles.container}>
37-
<View style={styles.roundRect}>
38-
<Text style={styles.secretLabel}>Your Secret</Text>
39-
<Text style={styles.secretText}>{secret}</Text>
40-
<View style={styles.checkmarkRow}>
41-
<Image
42-
source={require('../../assets/checkmark.png')}
43-
style={styles.checkmark}
44-
/>
45-
<Text style={styles.backedUpText}>Registered with Juicebox</Text>
46-
</View>
47-
</View>
36+
<SafeAreaView style={styles.container}>
4837
<TouchableOpacity style={styles.signOutButton} onPress={handleSignOut}>
4938
<Text style={styles.signOutButtonText}>Sign Out</Text>
5039
</TouchableOpacity>
51-
</View>
40+
<View style={styles.roundRectContainer}>
41+
<View style={styles.roundRect}>
42+
<Text style={styles.secretLabel}>Secret Key</Text>
43+
<Text style={styles.secretText}>{secret}</Text>
44+
</View>
45+
</View>
46+
</SafeAreaView>
5247
);
5348
};
5449

5550
const styles = StyleSheet.create({
5651
container: {
5752
flex: 1,
58-
alignItems: 'center',
59-
justifyContent: 'center',
60-
backgroundColor: '#ffffff',
53+
alignItems: 'flex-end',
54+
justifyContent: 'flex-start',
55+
backgroundColor: '#1c1c1c',
6156
},
6257
checkmarkRow: {
6358
flexDirection: 'row',
@@ -69,37 +64,46 @@ const styles = StyleSheet.create({
6964
height: 15,
7065
},
7166
backedUpText: {
72-
color: '#43A047',
67+
color: '#006400',
7368
marginLeft: 8,
7469
fontSize: 14,
7570
fontWeight: 'bold',
7671
},
77-
roundRect: {
78-
backgroundColor: '#f7f7f7',
79-
borderRadius: 20,
72+
roundRectContainer: {
73+
width: '100%',
74+
flex: 1,
8075
alignItems: 'center',
81-
maxWidth: 360,
76+
justifyContent: 'center',
77+
},
78+
roundRect: {
79+
backgroundColor: '#181818',
80+
borderColor: '#474747',
81+
borderWidth: 1,
82+
borderRadius: 18,
83+
alignItems: 'flex-start',
84+
minWidth: 360,
85+
paddingHorizontal: 20,
8286
},
8387
secretText: {
8488
fontSize: 15,
8589
fontWeight: '300',
8690
fontFamily: Platform.OS === 'ios' ? 'Courier New' : 'monospace',
87-
color: '#032f62',
91+
color: '#ABABAB',
8892
paddingVertical: 10,
89-
paddingHorizontal: 20,
93+
marginBottom: 8,
9094
},
9195
secretLabel: {
9296
fontWeight: 'bold',
9397
fontSize: 14,
94-
color: '#6a737d',
98+
color: '#ffffff',
9599
marginTop: 15,
96100
},
97101
signOutButton: {
98102
paddingVertical: 10,
99103
paddingHorizontal: 20,
100104
},
101105
signOutButtonText: {
102-
color: '#531ac8',
106+
color: '#fffdf8',
103107
fontSize: 14,
104108
fontWeight: 'bold',
105109
},

0 commit comments

Comments
 (0)