Skip to content

Commit

Permalink
refactor: 🦠 update AddWatchAccount
Browse files Browse the repository at this point in the history 
#44
  • Loading branch information
@zheleznov163
zheleznov163 committed Jul 8, 2022
1 parent 402d5f1 commit 6eb260d
Showing 1 changed file with 78 additions and 126 deletions.
204 changes: 78 additions & 126 deletions screens/Profile/components/organisms/AddWatchAccount.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,142 +1,94 @@
import { useCallback, useEffect, useMemo, useRef } from "react";
import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
import { SharedValue } from "react-native-reanimated";
import { useCallback, useMemo } from "react";
import { StyleSheet, View } from "react-native";
import * as Clipboard from "expo-clipboard";
import { observer } from "mobx-react-lite";
import { InputHandler } from "utils";
import * as Clipboard from "expo-clipboard";
import { BottomSheetMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
import { Steps } from "classes";
import { BottomSheet } from "components/moleculs";
import { useBottomSheetBackButton } from "../../hooks";
import { Button } from "components/atoms";
import { Search, Subtitle, Title } from "../atoms";

type Props = {
isOpen?: boolean;
animatedPosition?: SharedValue<number>;
backgroundStyle: StyleProp<
Omit<ViewStyle, "bottom" | "left" | "position" | "right" | "top">
>;
onClose?(): void;
close(): void;
};

export default observer<Props>(
({ backgroundStyle, animatedPosition, isOpen, onClose }) => {
// ----------- Input ----------

const inputWallet = useMemo(() => new InputHandler(), []);
const inputName = useMemo(() => new InputHandler(), []);

const pasteFromClipboard = useCallback(
async () => inputWallet.set(await Clipboard.getStringAsync()),
[]
);

// ------ BottomSheet -------

const snapPoints = useMemo(() => [350], []);
const bottomSheet = useRef<BottomSheetMethods>(null);

const close = () => bottomSheet.current?.close();
const open = (index: number) => bottomSheet.current?.snapToIndex(index);

useEffect(() => {
isOpen ? open(0) : close();
}, [isOpen]);

// --------- Steps ------------

const steps = useMemo(() => new Steps(["Add", "Name"]), []);

const openStepAdd = useCallback(() => {
steps.goTo("Add");
}, []);

const openStepName = useCallback(() => {
steps.goTo("Name");
}, []);

// --------- Close -----------

const handleClose = useCallback(() => {
onClose && onClose();
openStepAdd();
}, [onClose]);

useBottomSheetBackButton(isOpen, handleClose);

return (
<BottomSheet
enablePanDownToClose
snapPoints={snapPoints}
ref={bottomSheet}
backgroundStyle={backgroundStyle}
animatedPosition={animatedPosition}
onClose={handleClose}
index={-1}
>
<View style={styles.container}>
{steps.title === "Add" && (
<>
<Title style={styles.title}>Add Watch Account</Title>
<Search
loupe={false}
style={styles.search}
placeholder="Public Address"
value={inputWallet.value}
onChangeText={inputWallet.set}
Right={
<Button
text="Paste"
onPress={pasteFromClipboard}
style={styles.buttonPaste}
contentContainerStyle={styles.buttonPasteContent}
/>
}
/>
</>
)}
{steps.title === "Name" && (
<>
<Title style={styles.title}>Name your Wallet</Title>
<Search
loupe={false}
value={inputName.value}
onChangeText={inputName.set}
style={styles.search}
placeholder="Write a name"
/>
</>
)}
export default observer<Props>(({ close }) => {
// ----------- Input ----------

<Subtitle style={styles.subtitle}>
Access VIP experiences, exclusive previews,{"\n"}
finance your own and have your say.
</Subtitle>
const inputWallet = useMemo(() => new InputHandler(), []);
const inputName = useMemo(() => new InputHandler(), []);

<View style={styles.footer}>
{steps.title === "Add" && (
<Button
text="Proceed"
onPress={openStepName}
contentContainerStyle={styles.buttonContent}
textStyle={styles.buttonText}
/>
)}
{steps.title === "Name" && (
const pasteFromClipboard = useCallback(
async () => inputWallet.set(await Clipboard.getStringAsync()),
[]
);

// --------- Steps ------------

const steps = useMemo(() => new Steps(["Add", "Name"]), []);

const openStepName = useCallback(() => steps.goTo("Name"), []);

return (
<View style={styles.container}>
{steps.title === "Add" && (
<>
<Title style={styles.title}>Add Watch Account</Title>
<Search
loupe={false}
style={styles.search}
placeholder="Public Address"
value={inputWallet.value}
onChangeText={inputWallet.set}
Right={
<Button
text="Add Account"
onPress={close}
contentContainerStyle={styles.buttonContent}
textStyle={styles.buttonText}
text="Paste"
onPress={pasteFromClipboard}
style={styles.buttonPaste}
contentContainerStyle={styles.buttonPasteContent}
/>
)}
</View>
</View>
</BottomSheet>
);
}
);
}
/>
</>
)}
{steps.title === "Name" && (
<>
<Title style={styles.title}>Name your Wallet</Title>
<Search
loupe={false}
value={inputName.value}
onChangeText={inputName.set}
style={styles.search}
placeholder="Write a name"
/>
</>
)}

<Subtitle style={styles.subtitle}>
Access VIP experiences, exclusive previews,{"\n"}
finance your own and have your say.
</Subtitle>

<View style={styles.footer}>
{steps.title === "Add" && (
<Button
text="Proceed"
onPress={openStepName}
contentContainerStyle={styles.buttonContent}
textStyle={styles.buttonText}
/>
)}
{steps.title === "Name" && (
<Button
text="Add Account"
onPress={close}
contentContainerStyle={styles.buttonContent}
textStyle={styles.buttonText}
/>
)}
</View>
</View>
);
});

const styles = StyleSheet.create({
container: {
Expand Down

0 comments on commit 6eb260d

Please sign in to comment.