diff --git a/native/components/connect-farcaster-bottom-sheet.react.js b/native/components/connect-farcaster-bottom-sheet.react.js --- a/native/components/connect-farcaster-bottom-sheet.react.js +++ b/native/components/connect-farcaster-bottom-sheet.react.js @@ -1,7 +1,13 @@ // @flow import * as React from 'react'; +import { View, StyleSheet } from 'react-native'; +import FarcasterPrompt from './farcaster-prompt.react.js'; +import FarcasterWebView, { + type FarcasterWebViewState, +} from './farcaster-web-view.react.js'; +import RegistrationButton from '../account/registration/registration-button.react.js'; import BottomSheet from '../bottom-sheet/bottom-sheet.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; @@ -18,11 +24,49 @@ const bottomSheetRef = React.useRef(null); + const [webViewState, setWebViewState] = + React.useState<FarcasterWebViewState>('closed'); + + const onSuccessfulConnect = React.useCallback(() => { + // TODO: Update fid + bottomSheetRef.current?.close(); + }, []); + + const onPressConnect = React.useCallback(() => { + setWebViewState('opening'); + }, []); + + const connectButtonVariant = + webViewState === 'opening' ? 'loading' : 'enabled'; + return ( <BottomSheet ref={bottomSheetRef} onClosed={goBack}> - {null} + <View style={styles.container}> + <View style={styles.promptContainer}> + <FarcasterPrompt /> + </View> + <RegistrationButton + onPress={onPressConnect} + label="Connect Farcaster account" + variant={connectButtonVariant} + /> + </View> + <FarcasterWebView + onSuccess={onSuccessfulConnect} + webViewState={webViewState} + /> </BottomSheet> ); } +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingHorizontal: 16, + }, + promptContainer: { + marginBottom: 40, + }, +}); + export default ConnectFarcasterBottomSheet;