feat/account-upgrade-flow

app/app.tsx

@@ -36,7 +36,7 @@ import { FeatureFlagContextProvider } from "./config/feature-flags-context"
 import "./utils/logs"
 import { GestureHandlerRootView } from "react-native-gesture-handler"
 import { Provider } from "react-redux"
-import { store } from "./store/redux"
+import { persistor, store } from "./store/redux"
 import PolyfillCrypto from "react-native-webview-crypto"
 import { ActivityIndicatorProvider } from "./contexts/ActivityIndicatorContext"
 import { BreezProvider } from "./contexts/BreezContext"
@@ -45,6 +45,7 @@ import { NotificationsProvider } from "./components/notification"
 import { SafeAreaProvider } from "react-native-safe-area-context"
 import { FlashcardProvider } from "./contexts/Flashcard"
 import { NostrGroupChatProvider } from "./screens/chat/GroupChat/GroupChatProvider"
+import { PersistGate } from "redux-persist/integration/react"
 
 // FIXME should we only load the currently used local?
 // this would help to make the app load faster
@@ -67,14 +68,15 @@ export const App = () => (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <PolyfillCrypto />
       <Provider store={store}>
-        <PersistentStateProvider>
-          <ChatContextProvider>
-            <NostrGroupChatProvider
-              groupId={"A9lScksyYAOWNxqR"}
-              relayUrls={["wss://groups.0xchat.com"]}
-              adminPubkeys={[]}
-            >
-              <ActivityIndicatorProvider>
+        <PersistGate loading={null} persistor={persistor}>
+          <PersistentStateProvider>
+            <ChatContextProvider>
+              <NostrGroupChatProvider
+                groupId={"A9lScksyYAOWNxqR"}
+                relayUrls={["wss://groups.0xchat.com"]}
+                adminPubkeys={[]}
+              >
+                <ActivityIndicatorProvider>
                 <TypesafeI18n locale={detectDefaultLocale()}>
                   <ThemeProvider theme={theme}>
                     <GaloyClient>
@@ -101,10 +103,11 @@ export const App = () => (
                     </GaloyClient>
                   </ThemeProvider>
                 </TypesafeI18n>
-              </ActivityIndicatorProvider>
-            </NostrGroupChatProvider>
-          </ChatContextProvider>
-        </PersistentStateProvider>
+                </ActivityIndicatorProvider>
+              </NostrGroupChatProvider>
+            </ChatContextProvider>
+          </PersistentStateProvider>
+        </PersistGate>
       </Provider>
     </GestureHandlerRootView>
   </SafeAreaProvider>

app/components/account-upgrade-flow/AddressField.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useRef, useState } from "react"
+import { Modal, Platform, TouchableOpacity, View } from "react-native"
+import { makeStyles, Text, useTheme } from "@rneui/themed"
+import {
+  GooglePlacesAutocomplete,
+  GooglePlacesAutocompleteRef,
+} from "react-native-google-places-autocomplete"
+
+// components
+import { PrimaryBtn } from "../buttons"
+
+// env
+import { GOOGLE_PLACE_API_KEY } from "@env"
+
+type Props = {
+  label: string
+  placeholder: string
+  value?: string
+  errorMsg?: string
+  onAddressSelect: (address: string, lat?: number, lng?: number) => void
+}
+
+const AddressField: React.FC<Props> = ({
+  label,
+  placeholder,
+  value,
+  errorMsg,
+  onAddressSelect,
+}) => {
+  const styles = useStyles()
+  const { colors } = useTheme().theme
+
+  const ref = useRef<GooglePlacesAutocompleteRef>(null)
+  const [isFocused, setIsFocused] = useState(false)
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    if (isVisible && ref.current) {
+      ref.current.focus()
+    }
+  }, [isVisible, ref.current])
+
+  return (
+    <View style={styles.container}>
+      <Text type="bl" bold>
+        {label}
+      </Text>
+      <TouchableOpacity style={styles.input} onPress={() => setIsVisible(true)}>
+        <Text type="bl" color={value ? colors.black : colors.placeholder}>
+          {!!value ? value : placeholder}
+        </Text>
+      </TouchableOpacity>
+      {!!errorMsg && (
+        <Text type="caption" color={colors.red}>
+          {errorMsg}
+        </Text>
+      )}
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={isVisible}
+        onRequestClose={() => setIsVisible(false)}
+      >
+        <View style={styles.modal}>
+          <GooglePlacesAutocomplete
+            ref={ref}
+            listViewDisplayed="auto"
+            placeholder={placeholder}
+            onFail={(err) => console.log("Google places auto complete", err)}
+            onNotFound={() => console.log("Google places auto complete not found")}
+            fetchDetails={true}
+            onPress={(data, details) => {
+              setIsVisible(false)
+              onAddressSelect(
+                data.description,
+                details?.geometry.location.lat,
+                details?.geometry.location.lng,
+              )
+            }}
+            query={{
+              key: GOOGLE_PLACE_API_KEY,
+              language: "en",
+            }}
+            styles={{
+              textInput: [
+                styles.googlePlace,
+                isFocused ? { borderColor: colors.primary } : {},
+              ],
+            }}
+            textInputProps={{
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+            }}
+          />
+          <PrimaryBtn label="Cancel" onPress={() => setIsVisible(false)} />
+        </View>
+      </Modal>
+    </View>
+  )
+}
+
+export default AddressField
+
+const useStyles = makeStyles(({ colors }) => ({
+  container: {
+    marginBottom: 15,
+  },
+  input: {
+    paddingHorizontal: 15,
+    paddingVertical: 20,
+    marginTop: 5,
+    marginBottom: 2,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: colors.grey4,
+    backgroundColor: colors.grey5,
+  },
+  modal: {
+    flex: 1,
+    backgroundColor: colors.white,
+    padding: 20,
+  },
+  googlePlace: {
+    height: Platform.OS === "ios" ? 51 : 60,
+    paddingHorizontal: 15,
+    padding: 20,
+    marginTop: 5,
+    marginBottom: 15,
+    borderWidth: 1,
+    borderRadius: 10,
+    borderColor: colors.grey4,
+    backgroundColor: colors.grey5,
+    fontSize: 16,
+    fontFamily: "Sora-Regular",
+  },
+}))

app/components/account-upgrade-flow/CheckBoxField.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react"
+import { View, TouchableOpacity } from "react-native"
+import { Icon, makeStyles, Text, useTheme } from "@rneui/themed"
+import Tooltip from "react-native-walkthrough-tooltip"
+import { useI18nContext } from "@app/i18n/i18n-react"
+
+type Props = {
+  isChecked?: boolean
+  onCheck: () => void
+}
+
+const CheckBoxField: React.FC<Props> = ({ isChecked, onCheck }) => {
+  const styles = useStyles()
+  const { colors } = useTheme().theme
+  const { LL } = useI18nContext()
+
+  const [tooltipVisible, setTooltipVisible] = useState(false)
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity style={styles.container} onPress={onCheck}>
+        <Icon
+          name={isChecked ? "checkbox" : "checkbox-outline"}
+          size={30}
+          color={isChecked ? colors.green : colors.grey2}
+          type="ionicon"
+          style={{ marginRight: 10 }}
+        />
+        <Text type="bl">{LL.AccountUpgrade.flashTerminal()}</Text>
+      </TouchableOpacity>
+      <Tooltip
+        isVisible={tooltipVisible}
+        content={<Text>{LL.AccountUpgrade.flashTerminalTooltip()}</Text>}
+        placement="top"
+        onClose={() => setTooltipVisible(false)}
+      >
+        <TouchableOpacity onPress={() => setTooltipVisible(true)}>
+          <Icon
+            name={"help-circle"}
+            size={25}
+            color={colors._lightBlue}
+            type="ionicon"
+            style={{ marginHorizontal: 5 }}
+          />
+        </TouchableOpacity>
+      </Tooltip>
+    </View>
+  )
+}
+
+export default CheckBoxField
+
+const useStyles = makeStyles(() => ({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+}))

app/components/account-upgrade-flow/DropDownField.tsx

@@ -0,0 +1,81 @@
+import React from "react"
+import { View } from "react-native"
+import { makeStyles, Text, useTheme } from "@rneui/themed"
+import { Dropdown } from "react-native-element-dropdown"
+import { useI18nContext } from "@app/i18n/i18n-react"
+
+type Props = {
+  label: string
+  placeholder: string
+  data: any[]
+  value: string
+  errorMsg?: string
+  isOptional?: boolean
+  onChange: (val: string) => void
+}
+
+const DropDownField: React.FC<Props> = ({
+  label,
+  placeholder,
+  data,
+  value,
+  errorMsg,
+  isOptional,
+  onChange,
+}) => {
+  const styles = useStyles()
+  const { colors } = useTheme().theme
+  const { LL } = useI18nContext()
+
+  return (
+    <View style={styles.wrapper}>
+      <Text type="bl" bold>
+        {label}
+        {isOptional && (
+          <Text type="caption" color={colors.grey2}>
+            {LL.AccountUpgrade.optional()}
+          </Text>
+        )}
+      </Text>
+      <Dropdown
+        style={styles.dropdown}
+        containerStyle={styles.container}
+        data={data}
+        search={false}
+        maxHeight={300}
+        labelField="label"
+        valueField={value}
+        placeholder={placeholder}
+        value={value}
+        onChange={(item) => onChange(item.value)}
+      />
+      {!!errorMsg && (
+        <Text type="caption" color={colors.red}>
+          {errorMsg}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+export default DropDownField
+
+const useStyles = makeStyles(({ colors }) => ({
+  wrapper: {
+    marginBottom: 15,
+  },
+  dropdown: {
+    padding: 15,
+    marginTop: 5,
+    marginBottom: 2,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: colors.grey4,
+    backgroundColor: colors.grey5,
+    fontSize: 16,
+    fontFamily: "Sora-Regular",
+  },
+  container: {
+    marginTop: 5,
+  },
+}))