add operator list

src/components/OperatorList.tsx

@@ -0,0 +1,37 @@
+import { FC, useEffect, useState } from "react";
+import { Dimensions, FlatList, Image, StyleSheet } from "react-native"
+
+type OperatorListProps = {
+  wallet: string;
+};
+
+const  OperatorList: FC<OperatorListProps> = props => {
+  const {wallet} = props;
+  const [operators, setOperators] = useState([] as string[]);
+  const { width, height } = Dimensions.get("window");
+
+  const getOperators = async () => {
+    //TODO: replace with HTTP get
+    setOperators(["https://ordinal-operators.s3.amazonaws.com/Alchemists/400/Autonomous_Esoteric_Alchemist.jpeg", "https://ordinal-operators.s3.amazonaws.com/Magicians/400/Unseen_Rogue_Magician.jpeg", "https://ordinal-operators.s3.amazonaws.com/Alchemists/400/Autonomous_Esoteric_Alchemist.jpeg", "https://ordinal-operators.s3.amazonaws.com/Magicians/400/Unseen_Rogue_Magician.jpeg", "https://ordinal-operators.s3.amazonaws.com/Alchemists/400/Autonomous_Esoteric_Alchemist.jpeg", "https://ordinal-operators.s3.amazonaws.com/Magicians/400/Unseen_Rogue_Magician.jpeg", "https://ordinal-operators.s3.amazonaws.com/Alchemists/400/Autonomous_Esoteric_Alchemist.jpeg", "https://ordinal-operators.s3.amazonaws.com/Magicians/400/Unseen_Rogue_Magician.jpeg", "https://ordinal-operators.s3.amazonaws.com/Alchemists/400/Autonomous_Esoteric_Alchemist.jpeg", "https://ordinal-operators.s3.amazonaws.com/Magicians/400/Unseen_Rogue_Magician.jpeg", "https://ordinal-operators.s3.amazonaws.com/Alchemists/400/Autonomous_Esoteric_Alchemist.jpeg", "https://ordinal-operators.s3.amazonaws.com/Magicians/400/Unseen_Rogue_Magician.jpeg"])
+  }
+
+  useEffect(() => {
+    getOperators();
+  }, [wallet]);
+
+  return (
+    <FlatList style={styles.container} numColumns={2} data={operators} renderItem={({item}) => <Image src={item} style={[styles.operatorImg, {width:(width / 2) - 16, aspectRatio: 1}]}/>}/>
+  )};
+
+const styles = StyleSheet.create({
+    container: {
+       width: '100%',
+       marginVertical: 10,
+    },
+    operatorImg: {
+        marginHorizontal: 'auto',
+        marginVertical: 10
+    }
+});
+
+export default OperatorList;

src/components/steps/HomeScreen.tsx

@@ -13,6 +13,7 @@ import SubMenuModal from "../SubMenuModal";
 import IconButton from "../IconButton";
 import Clipboard from "@react-native-clipboard/clipboard";
 import Svg, { Circle, Defs, Mask, Rect } from "react-native-svg";
+import OperatorList from "../OperatorList";
 
 enum HomeSteps {
   Home,
@@ -112,7 +113,7 @@ const  HomeScreen: FC<HomeScreenProps> = props => {
 
   return <View style={Styles.container}>
     {step == HomeSteps.Home && 
-    <View>
+    <View style={Styles.container}>
       <View style={styles.homeTextContainer}>
         <Text style={styles.homeHeading}>My Operators</Text>
         <TouchableOpacity style={styles.subMenu} onPress={openSubMenu}><Icon name="dots-horizontal" size={24} color="white" /></TouchableOpacity>
@@ -125,7 +126,8 @@ const  HomeScreen: FC<HomeScreenProps> = props => {
         <View style={{width: '50%'}}>
           <IconButton label="Scan" disabled={false} rotate="0deg" backgroundColor="#321504" labelColor="#FE740C" icon="line-scan" onChangeFunc={() => setStep(HomeSteps.ScanCode)}/> 
         </View>
-        </View>
+      </View>
+      <OperatorList wallet={walletKey}></OperatorList>
       <ReceiveModal address={walletAddress()} isVisible={receiveVisible} onChangeFunc={copyAddressAndClose} onCancelFunc={() => setReceiveVisible(false)}/>
     </View>
     }