components#Background TypeScript Examples

Overview = () => {
  const alert = useAlert();
  const checkIfNewUser = useCallback(async () => {
    try {
      const isNewUser = Boolean(await AsyncStorage.getItem('isNewUser'));
      if (isNewUser) {
        alert('You are a new user!');
      } else {
        alert('You are an existing user!');
      }
    } catch (error) {}
  }, [alert]);

  useEffect(() => {
    checkIfNewUser();
  }, [checkIfNewUser]);

  const handleSignOut = async () => {
    await auth().signOut();
  };

  return (
    <Background>
      <StyledButton variant="positive" label="Sign out" onPress={handleSignOut} />
    </Background>
  );
}

ChooseDialingCode = () => {
  /*

const [selectedCountry, setSelectedCountry] = useState<ICountry>({
    name: 'unitedStates',
    dialingCode: '+1',
  });

  const { name } = selectedCountry;

  return (
    <Background>
      <Box flex={1} justifyContent="center" paddingHorizontal="l" backgroundColor="bgSecondary">
        <DialingCodeDropdown selectedCountry={name} onPress={() => true} />
      </Box>
    </Background>
  );


 */
  return (
    <Background>
      <StyledText variant="h1">ChooseDialingCode</StyledText>
    </Background>
  );
}

Welcome = ({ navigation }: StackNavigationProps<PreAuthScreens, 'Welcome'>) => {
  const handleNavigation = (route: 'Login' | 'SignUp') => {
    navigation.navigate(route);
  };

  return (
    <Background isBlue>
      <Box flex={1} alignItems="center">
        <Box style={WelcomeStyle.logo}>
          <Illustration name="logo" />
        </Box>
        <Box alignItems="center">
          <StyledText variant="h3Regular" color="white" opacity={0.5}>
            Welcome to
          </StyledText>
          <StyledText variant="h1Light" color="white">
            WHOLLET
          </StyledText>
        </Box>
        <Box flex={1} justifyContent="flex-end">
          <BottomSection
            mainButtonVariant="secondary"
            mainButtonLabel="Create account"
            lightTextLabel="Already have an account?"
            accentTextLabel="Login"
            onMainButtonPress={() => handleNavigation('SignUp')}
            onAccentTextPress={() => handleNavigation('Login')}
            isWelcomePage
          />
        </Box>
      </Box>
    </Background>
  );
}

Onboarding = ({ navigation }: StackNavigationProps<PreAuthScreens, 'Onboarding'>) => {
  const { height } = Dimensions.get('window');

  const handleGetStartedPress = () => navigation.navigate('Welcome');

  return (
    <Background>
      <ContentContainer height={height * 0.54} />
      <OnboardingSlider onGetStartedPress={handleGetStartedPress} />
    </Background>
  );
}

VerifyCode = () => {
  return (
    <Background>
      <StyledText variant="h1">VerifyCode</StyledText>
    </Background>
  );
}

ScanQRCode = () => {
  return (
    <Background>
      <StyledText variant="h1">ScanQRCode</StyledText>
    </Background>
  );
}

Confirmation = () => {
  return (
    <Background>
      <StyledText variant="h1">Confirmation</StyledText>
    </Background>
  );
}

TFA = () => {
  return (
    <Background>
      <StyledText variant="h1">TFA</StyledText>
    </Background>
  );
}

ChangePassword = () => {
  return (
    <Background>
      <StyledText variant="h1">ChangePassword</StyledText>
    </Background>
  );
}

ChangePin = () => {
  return (
    <Background>
      <StyledText variant="h1">ChangePin</StyledText>
    </Background>
  );
}

NewPin = () => {
  return (
    <Background>
      <StyledText variant="h1">NewPin</StyledText>
    </Background>
  );
}

Security = () => {
  return (
    <Background>
      <StyledText variant="h1">Security</StyledText>
    </Background>
  );
}

AddMessage = () => {
  return (
    <Background>
      <StyledText variant="h1">AddMessage</StyledText>
    </Background>
  );
}

Amount = () => {
  return (
    <Background>
      <StyledText variant="h1">Amount</StyledText>
    </Background>
  );
}

ChooseRecipient = () => {
  return (
    <Background>
      <StyledText variant="h1">ChooseRecipient</StyledText>
    </Background>
  );
}

AllAssets = () => {
  return (
    <Background>
      <StyledText variant="h1">AllAssets</StyledText>
    </Background>
  );
}

AllTransaction = () => {
  return (
    <Background>
      <StyledText variant="h1">AllTransaction</StyledText>
    </Background>
  );
}

CoinDetails = () => {
  return (
    <Background>
      <StyledText variant="h1">CoinDetails</StyledText>
    </Background>
  );
}

TransactionDetails = () => {
  return (
    <Background>
      <StyledText variant="h1">TransactionDetails</StyledText>
    </Background>
  );
}

EnterAddress = () => {
  return (
    <Background>
      <StyledText variant="h1">EnterAddress</StyledText>
    </Background>
  );
}

PinLayout: React.FC<IPinLayout> = ({
  isLogin,
  isConfirm,
  pinEntry,
  loading,
  onCheckIfPinExists,
  onPinEntryFinished,
  onPinChange,
  onPinDelete,
}) => {
  useEffect(() => {
    onCheckIfPinExists();
  }, [onCheckIfPinExists]);

  useEffect(() => {
    onPinEntryFinished();
  }, [onPinEntryFinished]);

  const title = isLogin || isConfirm ? 'Verification required' : 'Create a PIN';
  const subtitle =
    isLogin || isConfirm
      ? 'Please enter your PIN to proceed'
      : 'Enhance the security of your account by creating a PIN code';

  return (
    <Background>
      {loading && <Loading isFullScreen />}
      <Header {...{ title, subtitle }} />
      <Box position="absolute">
        <TextInput
          value={pinEntry}
          onChangeText={onPinChange}
          maxLength={4}
          style={{ opacity: 0 }}
          keyboardType="numeric"
        />
      </Box>
      <Box alignItems="center" style={PinLayoutStyle.indicator}>
        <Indicator type="pin" pinLength={pinEntry.length} />
      </Box>
      <Box flex={1} justifyContent="center">
        <NumberPad
          onNumberPress={onPinChange}
          onDeletePress={onPinDelete}
          onForgotPress={() => true}
          {...{ isLogin }}
        />
      </Box>
    </Background>
  );
}

EnterPhoneNumber = () => {
  return (
    <Background>
      <StyledText variant="h1">EnterPhoneNumber</StyledText>
    </Background>
  );
}

Overview = () => {
  return (
    <Background>
      <StyledText variant="h1">Overview</StyledText>
    </Background>
  );
}

ChooseCurrency = () => {
  return (
    <Background>
      <StyledText variant="h1">ChooseCurrency</StyledText>
    </Background>
  );
}

SignUp = ({ navigation }: StackNavigationProps<SignUpScreens, 'SignUp'>) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [showPassword, setShowPassword] = useState<boolean>(false);
  const alert = useAlert();

  const { height } = Dimensions.get('window');

  const isEmailValid = email.length > 0 ? validateEmailAddress(email) : undefined;
  const isPasswordValid = password.length > 0 ? validatePassword(password) : undefined;
  const isButtonDisabled = [isEmailValid, isPasswordValid].some(c => !c) || loading;

  const handleNavigationToLogin = () => {
    navigation.navigate('Login');
  };

  const handleSignUp = async () => {
    setLoading(true);
    try {
      const res = await auth().createUserWithEmailAndPassword(email, password);
      if (res) {
        const { additionalUserInfo } = res;
        if (additionalUserInfo) {
          const { isNewUser } = additionalUserInfo;
          await AsyncStorage.setItem('isNewUser', `${isNewUser}`);
        }
      }
    } catch (error) {
      if (error.code === 'auth/email-already-in-use') {
        setLoading(false);
        alert('Error', 'The email address is already in use by another account.', [
          { text: 'Login instead', onPress: handleNavigationToLogin },
        ]);
      }
    }
  };

  return (
    <Background>
      <Header {...{ navigation }} title="Create account" />
      <Box alignItems="center" justifyContent="flex-end" height={height * 0.37}>
        <Illustration name="office" width="308" height="171" />
      </Box>
      <AuthForm
        {...{
          email,
          password,
          isEmailValid,
          isPasswordValid,
          loading,
          isButtonDisabled,
          showPassword,
        }}
        isSignUp
        onEmailChange={v => setEmail(v)}
        onPasswordChange={v => setPassword(v)}
        onShowPasswordPress={() => setShowPassword(s => !s)}
        onNavigationToLoginOrSignUp={handleNavigationToLogin}
        onSignUpPress={handleSignUp}
        submitButtonLabel="Let's get started"
        bottomSectionLightTextLabel="Already have an account?"
        bottomSectionAccentTextLabel="Login"
      />
    </Background>
  );
}

NewPassword = () => {
  return (
    <Background>
      <StyledText variant="h1">NewPassword</StyledText>
    </Background>
  );
}

SignUp = ({ navigation }: StackNavigationProps<SignUpScreens, 'SignUp'>) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [showPassword, setShowPassword] = useState<boolean>(false);
  const alert = useAlert();

  const { height } = Dimensions.get('window');

  const isEmailValid = email.length > 0 ? validateEmailAddress(email) : undefined;
  const isPasswordValid = password.length > 0 ? validatePassword(password) : undefined;
  const isButtonDisabled = [isEmailValid, isPasswordValid].some(c => !c) || loading;

  const handleLogin = async () => {
    setLoading(true);
    try {
      const res = await auth().signInWithEmailAndPassword(email, password);
      if (res) {
        const { additionalUserInfo } = res;
        if (additionalUserInfo) {
          const { isNewUser } = additionalUserInfo;
          await AsyncStorage.setItem('isNewUser', `${isNewUser}`);
        }
      }
    } catch (error) {
      if (error.code === 'auth/user-not-found') {
        setLoading(false);
        alert(
          'Error',
          'The email and password you entered did not match our records. Please double check and try again.',
        );
      }
    }
  };

  return (
    <Background>
      <Header {...{ navigation }} title="Welcome Back!" colorMode="dark" />
      <Box alignItems="center" justifyContent="flex-end" height={height * 0.38}>
        <Illustration name="login" width="308" height={`${(height * 28) / 100}`} />
      </Box>
      <AuthForm
        {...{
          email,
          password,
          isEmailValid,
          isPasswordValid,
          loading,
          isButtonDisabled,
          showPassword,
        }}
        onEmailChange={v => setEmail(v)}
        onPasswordChange={v => setPassword(v)}
        onShowPasswordPress={() => setShowPassword(s => !s)}
        onNavigationToLoginOrSignUp={() => navigation.navigate('SignUp')}
        onSignUpPress={handleLogin}
        onForgotPasswordPress={() => true}
        submitButtonLabel="Login"
        bottomSectionLightTextLabel="Don't have an account?"
        bottomSectionAccentTextLabel="Sign Up"
      />
    </Background>
  );
}

ForgotPassword = () => {
  return (
    <Background>
      <StyledText variant="h1">ForgotPassword</StyledText>
    </Background>
  );
}

CheckYourEmail = () => {
  return (
    <Background>
      <StyledText variant="h1">CheckYourEmail</StyledText>
    </Background>
  );
}