Merge branch 'main' into scripts/escrow_tip

JoyboyCommunity/src/components/Picker/index.tsx

@@ -0,0 +1,35 @@
+import {Picker as RNPicker, PickerProps as RNPickerProps} from '@react-native-picker/picker';
+import {forwardRef} from 'react';
+
+import {useStyles} from '../../hooks';
+import {PickerContainer} from '../PickerContainer';
+import stylesheet from './styles';
+
+export type PickerProps = RNPickerProps<string> & {
+  label: string;
+};
+
+export const _Picker = forwardRef<RNPicker<string>, PickerProps>((props, ref) => {
+  const {label, selectedValue, children, ...restProps} = props;
+
+  const styles = useStyles(stylesheet);
+
+  return (
+    <PickerContainer
+      selectedValue={selectedValue}
+      modalizeTitle={label}
+      containerStyle={styles.container}
+      textProps={{fontSize: 15, weight: 'semiBold', color: 'inputText'}}
+    >
+      <RNPicker ref={ref} selectedValue={selectedValue} {...restProps}>
+        {children}
+      </RNPicker>
+    </PickerContainer>
+  );
+});
+_Picker.displayName = 'Picker';
+
+const Picker = _Picker as typeof _Picker & {Item: typeof RNPicker.Item};
+Picker.Item = RNPicker.Item;
+
+export {Picker};

JoyboyCommunity/src/components/Picker/styles.ts

@@ -0,0 +1,14 @@
+import {Platform} from 'react-native';
+
+import {Spacing, ThemedStyleSheet} from '../../styles';
+
+export default ThemedStyleSheet((theme) => ({
+  container: {
+    paddingVertical: Platform.OS === 'android' ? Spacing.none : Spacing.medium,
+    paddingHorizontal: Platform.OS === 'android' ? Spacing.medium : Spacing.large,
+    borderWidth: 1,
+    borderColor: theme.colors.inputBorder,
+    backgroundColor: theme.colors.inputBackground,
+    borderRadius: 99,
+  },
+}));

JoyboyCommunity/src/components/PickerContainer/index.tsx

@@ -0,0 +1,47 @@
+import {useRef} from 'react';
+import {Platform, Pressable, StyleProp, View, ViewStyle} from 'react-native';
+import {Portal} from 'react-native-portalize';
+
+import {Modalize} from '../Modalize';
+import {Text, TextProps} from '../Text';
+
+export type PickerContainerProps = {
+  selectedValue: string;
+  modalizeTitle: string;
+
+  style?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  textProps?: TextProps;
+
+  children?: React.ReactNode;
+};
+
+export const PickerContainer: React.FC<PickerContainerProps> = (props) => {
+  const {selectedValue, modalizeTitle, style, containerStyle, textProps, children} = props;
+
+  const modalizeRef = useRef<Modalize>(null);
+
+  const onTouchablePress = () => {
+    modalizeRef.current?.open();
+  };
+
+  return (
+    <View style={containerStyle}>
+      {Platform.OS === 'ios' ? (
+        <>
+          <Pressable style={style} onPress={onTouchablePress}>
+            <Text {...textProps}>{selectedValue}</Text>
+          </Pressable>
+
+          <Portal>
+            <Modalize ref={modalizeRef} title={modalizeTitle}>
+              {children}
+            </Modalize>
+          </Portal>
+        </>
+      ) : (
+        children
+      )}
+    </View>
+  );
+};

JoyboyCommunity/src/components/index.ts

@@ -8,6 +8,8 @@ export {Input} from './Input';
 export {Menu} from './Menu';
 export {Modal} from './Modal';
 export {Modalize} from './Modalize';
+export {Picker} from './Picker';
+export {PickerContainer} from './PickerContainer';
 export {InputAccessoryView} from './Skeleton/InputAccessoryView';
 export {KeyboardAvoidingView} from './Skeleton/KeyboardAvoidingView';
 export {KeyboardFixedView} from './Skeleton/KeyboardFixedView';

JoyboyCommunity/src/modules/Tip/index.tsx

@@ -1,26 +1,18 @@
-import {Picker} from '@react-native-picker/picker';
-import {forwardRef, useMemo, useState} from 'react';
+import {forwardRef, useState} from 'react';
 import {Platform, View} from 'react-native';
 import {Modalize as RNModalize} from 'react-native-modalize';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
-import {LikeFillIcon} from '../../assets/icons';
-import {Avatar, Button, Input, Modalize} from '../../components';
-import {Text} from '../../components/Text';
+import {Avatar, Button, Input, Modalize, Picker, Text} from '../../components';
 import {useStyles} from '../../hooks';
 import stylesheet from './styles';
 
 export const TipToken = forwardRef<RNModalize>((props, ref) => {
   const styles = useStyles(stylesheet);
-  const [token, setToken] = useState<string>('');
+  const [token, setToken] = useState<string>('JBY');
   const [amount, setAmount] = useState<string>('');
 
-  const isActive = useMemo(() => {
-    if (amount.length > 0 && token.length > 0) {
-      return true;
-    }
-    return false;
-  }, [amount, token]);
+  const isActive = !!amount && !!token;
 
   return (
     <Modalize
@@ -35,6 +27,7 @@ export const TipToken = forwardRef<RNModalize>((props, ref) => {
           <View style={styles.cardHeader}>
             <View style={styles.cardContent}>
               <Avatar size={48} source={require('../../assets/joyboy-logo.png')} />
+
               <View>
                 <Text fontSize={15} color="text" weight="bold">
                   Abdel 全快 Zenkai 🐉🐺
@@ -46,7 +39,6 @@ export const TipToken = forwardRef<RNModalize>((props, ref) => {
             </View>
 
             <View style={styles.likes}>
-              <LikeFillIcon />
               <Text fontSize={11}>16 likes</Text>
             </View>
           </View>
@@ -59,7 +51,7 @@ export const TipToken = forwardRef<RNModalize>((props, ref) => {
         <View style={styles.pickerContainer}>
           <View>
             <Picker
-              style={styles.pickerSelect}
+              label="Please select a token"
               selectedValue={token}
               onValueChange={(itemValue) => setToken(itemValue)}
             >
@@ -72,18 +64,21 @@ export const TipToken = forwardRef<RNModalize>((props, ref) => {
         </View>
 
         <View style={styles.sending}>
-          <Text color="textSecondary" fontSize={16} weight="medium">
-            Sending
+          <View style={styles.sendingText}>
+            <Text color="textSecondary" fontSize={16} weight="medium">
+              Sending
+            </Text>
+
             {amount.length > 0 && token.length > 0 ? (
-              <Text style={styles.more} fontSize={16} weight="bold">
+              <Text color="primary" fontSize={16} weight="bold">
                 {amount} {token}
               </Text>
             ) : (
-              <Text style={styles.more} fontSize={16} weight="bold">
+              <Text color="primary" fontSize={16} weight="bold">
                 ...
               </Text>
             )}
-          </Text>
+          </View>
 
           <View style={styles.recipient}>
             <Text fontSize={16} weight="regular">
@@ -96,10 +91,18 @@ export const TipToken = forwardRef<RNModalize>((props, ref) => {
         </View>
 
         <View style={styles.submitButton}>
-          <Button variant={isActive ? 'secondary' : 'default'}>Tip</Button>
+          <Button variant="secondary" disabled={!isActive}>
+            Tip
+          </Button>
         </View>
 
-        <Text style={styles.comment}>
+        <Text
+          weight="semiBold"
+          color="inputPlaceholder"
+          fontSize={13}
+          align="center"
+          style={styles.comment}
+        >
           Tip friends and support creators with your favorite tokens.
         </Text>
       </SafeAreaView>

JoyboyCommunity/src/modules/Tip/styles.ts

@@ -53,30 +53,26 @@ export default ThemedStyleSheet((theme) => ({
     alignItems: 'center',
     justifyContent: 'space-between',
   },
+  sendingText: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: Spacing.xsmall,
+  },
 
   recipient: {
     flexDirection: 'row',
     gap: 4,
     alignItems: 'center',
-    paddingBottom: Spacing.small,
   },
   card: {
     width: '100%',
-    height: 112,
     backgroundColor: theme.colors.primaryLight,
     borderRadius: 16,
-    paddingLeft: Spacing.small,
-    paddingRight: Spacing.small,
-    paddingTop: Spacing.medium,
-    justifyContent: 'center',
-    paddingBottom: Spacing.medium,
+    padding: Spacing.medium,
   },
 
   comment: {
     paddingTop: Spacing.small,
-    fontSize: 13,
-    fontWeight: 400,
-    color: theme.colors.inputPlaceholder,
   },
 
   pickerContainer: {
@@ -94,19 +90,6 @@ export default ThemedStyleSheet((theme) => ({
   likeIcon: {
     color: theme.colors.primary,
   },
-  pickerSelect: {
-    fontSize: 16,
-    paddingVertical: Spacing.medium,
-    paddingHorizontal: Spacing.medium,
-    borderWidth: 1,
-    borderColor: theme.colors.inputBorder,
-    backgroundColor: theme.colors.inputBackground,
-    borderRadius: 80,
-    color: theme.colors.inputPlaceholder,
-    paddingRight: 0,
-    paddingLeft: Spacing.normal,
-    fontWeight: 600,
-  },
 
   content: {
     padding: Spacing.xlarge,