Skip to content

Commit

Permalink
Merge branch 'main' into feat/tiping
Browse files Browse the repository at this point in the history
  • Loading branch information
MSghais committed Jun 17, 2024
2 parents 35c9487 + 2c03f39 commit 71abe5b
Show file tree
Hide file tree
Showing 7 changed files with 214 additions and 6 deletions.
33 changes: 27 additions & 6 deletions JoyboyCommunity/src/assets/icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -256,22 +256,22 @@ export const CopyIconStack: React.FC<SvgProps> = (props: SvgProps) => (
<Path
opacity="0.4"
d="M16.0549 8.25C17.4225 8.24998 18.5248 8.24996 19.3918 8.36652C20.2919 8.48754 21.0497 8.74643 21.6517 9.34835C22.2536 9.95027 22.5125 10.7081 22.6335 11.6083C22.75 12.4752 22.75 13.5775 22.75 14.9451V16.0549C22.75 17.4225 22.75 18.5248 22.6335 19.3918C22.5125 20.2919 22.2536 21.0497 21.6517 21.6517C21.0497 22.2536 20.2919 22.5125 19.3918 22.6335C18.5248 22.75 17.4225 22.75 16.0549 22.75H14.9451C13.5775 22.75 12.4752 22.75 11.6082 22.6335C10.7081 22.5125 9.95027 22.2536 9.34835 21.6516C8.74643 21.0497 8.48754 20.2919 8.36652 19.3918C8.24996 18.5248 8.24998 17.4225 8.25 16.0549V14.9451C8.24998 13.5775 8.24996 12.4752 8.36652 11.6082C8.48754 10.7081 8.74643 9.95027 9.34835 9.34835C9.95027 8.74643 10.7081 8.48754 11.6083 8.36652C12.4752 8.24996 13.5775 8.24998 14.9451 8.25H16.0549Z"
fill={props.color}
fill="currentColor"
/>
<Path
d="M6.75 14.8569C6.74991 13.5627 6.74983 12.3758 6.8799 11.4084C7.0232 10.3425 7.36034 9.21504 8.28769 8.28769C9.21504 7.36034 10.3425 7.0232 11.4084 6.8799C12.3758 6.74983 13.5627 6.74991 14.8569 6.75H17.0931C17.3891 6.75 17.5371 6.75 17.6261 6.65419C17.7151 6.55838 17.7045 6.4142 17.6833 6.12584C17.6648 5.87546 17.6412 5.63892 17.6111 5.41544C17.4818 4.45589 17.2232 3.6585 16.6718 2.98663C16.4744 2.74612 16.2539 2.52558 16.0134 2.3282C15.3044 1.74638 14.4557 1.49055 13.4248 1.36868C12.4205 1.24998 11.1512 1.24999 9.54893 1.25H9.45109C7.84883 1.24999 6.57947 1.24998 5.57525 1.36868C4.54428 1.49054 3.69558 1.74638 2.98663 2.3282C2.74612 2.52558 2.52558 2.74612 2.3282 2.98663C1.74638 3.69558 1.49055 4.54428 1.36868 5.57525C1.24998 6.57947 1.24999 7.84882 1.25 9.45108V9.54891C1.24999 11.1512 1.24998 12.4205 1.36868 13.4247C1.49054 14.4557 1.74638 15.3044 2.3282 16.0134C2.52558 16.2539 2.74612 16.4744 2.98663 16.6718C3.6585 17.2232 4.45589 17.4818 5.41544 17.6111C5.63892 17.6412 5.87546 17.6648 6.12584 17.6833C6.4142 17.7045 6.55838 17.7151 6.65419 17.6261C6.75 17.5371 6.75 17.3891 6.75 17.0931V14.8569Z"
fill={props.color}
fill="currentColor"
/>
</Svg>
);

export const InfoIcon: React.FC<SvgProps> = (props) => (
<Svg width={18} height={18} viewBox="0 0 18 18" fill="none" {...props}>
<Svg viewBox="0 0 20 20" fill="none" {...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M9.04763 0.45813C10.8732 0.458119 12.3071 0.45811 13.4266 0.608625C14.5738 0.762864 15.4841 1.08539 16.1992 1.80056C16.9144 2.51572 17.2369 3.42594 17.3912 4.57315C17.5417 5.69265 17.5417 7.12654 17.5416 8.9521V8.95212V8.95214V8.95216V9.04744V9.04746V9.04748V9.0475C17.5417 10.8731 17.5417 12.3069 17.3912 13.4264C17.2369 14.5737 16.9144 15.4839 16.1992 16.199C15.4841 16.9142 14.5738 17.2367 13.4266 17.391C12.3071 17.5415 10.8732 17.5415 9.04768 17.5415H9.04766H9.04764H9.04762H8.95234H8.95232H8.9523H8.95228C7.12672 17.5415 5.69284 17.5415 4.57333 17.391C3.42612 17.2367 2.51591 16.9142 1.80074 16.199C1.08558 15.4839 0.763047 14.5737 0.608808 13.4264C0.458293 12.3069 0.458302 10.873 0.458313 9.04744V8.95215C0.458302 7.12656 0.458293 5.69266 0.608808 4.57315C0.763047 3.42594 1.08558 2.51572 1.80074 1.80056C2.51591 1.08539 3.42612 0.762864 4.57333 0.608625C5.69285 0.45811 7.12675 0.458119 8.95233 0.45813H9.04763ZM8.16665 12.7498C8.16665 12.2896 8.53807 11.9165 8.99625 11.9165H9.00371C9.46189 11.9165 9.83331 12.2896 9.83331 12.7498C9.83331 13.21 9.46189 13.5831 9.00371 13.5831H8.99625C8.53807 13.5831 8.16665 13.21 8.16665 12.7498ZM8.16675 9.41646C8.16675 9.8767 8.53984 10.2498 9.00008 10.2498C9.46032 10.2498 9.83342 9.8767 9.83342 9.41646V6.08313C9.83342 5.62289 9.46032 5.2498 9.00008 5.2498C8.53984 5.2498 8.16675 5.62289 8.16675 6.08313V9.41646Z"
fill={props.color}
d="M10.0476 1.45801C11.8732 1.458 13.3071 1.45799 14.4266 1.6085C15.5738 1.76274 16.4841 2.08527 17.1992 2.80043C17.9144 3.5156 18.2369 4.42582 18.3911 5.57302C18.5416 6.69253 18.5416 8.12642 18.5416 9.95202V10.0473C18.5416 11.8729 18.5416 13.3068 18.3911 14.4263C18.2369 15.5735 17.9144 16.4838 17.1992 17.1989C16.4841 17.9141 15.5738 18.2366 14.4266 18.3909C13.3071 18.5414 11.8732 18.5413 10.0476 18.5413H9.95231C8.12673 18.5413 6.69284 18.5414 5.57333 18.3909C4.42612 18.2366 3.5159 17.9141 2.80074 17.1989C2.08558 16.4838 1.76305 15.5735 1.6088 14.4263C1.4583 13.3068 1.4583 11.8729 1.45831 10.0473V9.95202C1.4583 8.12644 1.4583 6.69254 1.6088 5.57302C1.76305 4.42582 2.08558 3.5156 2.80074 2.80043C3.5159 2.08527 4.42612 1.76274 5.57333 1.6085C6.69285 1.45799 8.12675 1.458 9.95231 1.45801H10.0476ZM9.16665 13.7497C9.16665 13.2894 9.53806 12.9163 9.99623 12.9163H10.0037C10.4619 12.9163 10.8333 13.2894 10.8333 13.7497C10.8333 14.2099 10.4619 14.583 10.0037 14.583H9.99623C9.53806 14.583 9.16665 14.2099 9.16665 13.7497ZM9.16673 10.4163C9.16673 10.8766 9.53981 11.2497 10.0001 11.2497C10.4603 11.2497 10.8334 10.8766 10.8334 10.4163V7.08301C10.8334 6.62278 10.4603 6.24968 10.0001 6.24968C9.53981 6.24968 9.16673 6.62278 9.16673 7.08301V10.4163Z"
fill="currentColor"
/>
</Svg>
);
Expand All @@ -282,7 +282,7 @@ export const LockIcon: React.FC<SvgProps> = (props) => (
fillRule="evenodd"
clipRule="evenodd"
d="M16 1.66663C8.08388 1.66663 1.66663 8.08388 1.66663 16C1.66663 23.9161 8.08388 30.3333 16 30.3333C23.9161 30.3333 30.3333 23.9161 30.3333 16C30.3333 8.08388 23.9161 1.66663 16 1.66663ZM12.6666 14.3333C12.6666 12.4923 14.159 11 16 11C17.8409 11 19.3333 12.4923 19.3333 14.3333C19.3333 15.7002 18.5106 16.8749 17.3333 17.3893V21C17.3333 21.7364 16.7364 22.3333 16 22.3333C15.2636 22.3333 14.6666 21.7364 14.6666 21V17.3893C13.4893 16.8749 12.6666 15.7002 12.6666 14.3333Z"
fill={props.color}
fill="currentColor"
/>
</Svg>
);
Expand All @@ -303,3 +303,24 @@ export const UploadIcon: React.FC<SvgProps> = (props) => (
/>
</Svg>
);
export const SuccessIcon: React.FC<SvgProps> = (props) => (
<Svg viewBox="0 0 20 20" fill="none" {...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M10.0477 1.45825C11.8733 1.45824 13.3072 1.45824 14.4267 1.60874C15.5739 1.76299 16.4841 2.08552 17.1993 2.80068C17.9145 3.51584 18.237 4.42606 18.3912 5.57327C18.5417 6.69279 18.5417 8.1267 18.5417 9.95225V10.0476C18.5417 11.8732 18.5417 13.3071 18.3912 14.4266C18.237 15.5738 17.9145 16.484 17.1993 17.1992C16.4841 17.9143 15.5739 18.2368 14.4267 18.3911C13.3072 18.5416 11.8733 18.5416 10.0477 18.5416H9.95237C8.12679 18.5416 6.69291 18.5416 5.57339 18.3911C4.42618 18.2368 3.51597 17.9143 2.8008 17.1992C2.08564 16.484 1.76311 15.5738 1.60887 14.4266C1.45836 13.3071 1.45837 11.8732 1.45837 10.0476V9.95225C1.45837 8.12668 1.45836 6.69279 1.60887 5.57327C1.76311 4.42606 2.08564 3.51584 2.8008 2.80068C3.51597 2.08552 4.42618 1.76299 5.57339 1.60874C6.69291 1.45824 8.12681 1.45824 9.95237 1.45825H10.0477ZM14.0646 6.68357C14.2855 7.08736 14.1371 7.59373 13.7334 7.81455C12.5905 8.4395 11.5174 9.74784 10.6979 11.0026C10.2985 11.6143 9.97796 12.1838 9.75754 12.6003C9.64754 12.808 9.56304 12.9767 9.50662 13.092L9.42471 13.2632C9.29596 13.5446 9.02179 13.7318 8.71279 13.7488C8.40371 13.7658 8.1106 13.6102 7.95169 13.3445C7.69276 12.9116 7.28132 12.5164 6.90002 12.215C6.71474 12.0685 6.54797 11.953 6.42897 11.8751L6.25372 11.7655C5.85415 11.5373 5.71502 11.0286 5.94297 10.6289C6.17098 10.2291 6.67992 10.0898 7.0797 10.3178L7.34223 10.4809C7.49406 10.5803 7.70229 10.7247 7.93369 10.9076C8.11052 11.0474 8.30824 11.2155 8.50787 11.4092C8.72187 11.0247 8.98937 10.5708 9.30246 10.0913C10.1497 8.794 11.4098 7.18564 12.9337 6.35227C13.3375 6.13144 13.8438 6.27977 14.0646 6.68357Z"
fill="currentColor"
/>
</Svg>
);

export const ErrorIcon: React.FC<SvgProps> = (props) => (
<Svg viewBox="0 0 20 20" fill="none" {...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M8.63501 1.67908C9.52201 1.38464 10.478 1.38464 11.365 1.67908C12.2484 1.97231 12.942 2.66776 13.6388 3.64487C14.3333 4.61875 15.1007 5.97663 16.0898 7.727L16.1287 7.79572C17.1181 9.54633 17.8854 10.9042 18.3637 12.0053C18.8442 13.1118 19.0835 14.0672 18.8926 14.985C18.7003 15.9092 18.2262 16.7495 17.5357 17.3847C16.8468 18.0183 15.9089 18.2856 14.728 18.4139C13.5538 18.5416 12.0177 18.5416 10.0407 18.5416H9.95942C7.98236 18.5416 6.44629 18.5416 5.27202 18.4139C4.09106 18.2856 3.15316 18.0183 2.46436 17.3847C1.77386 16.7495 1.29974 15.9092 1.10746 14.985C0.916506 14.0672 1.15584 13.1118 1.63638 12.0053C2.11461 10.9042 2.88196 9.54633 3.87132 7.79571L3.91016 7.727C4.89935 5.97664 5.66674 4.61875 6.36123 3.64487C7.05803 2.66776 7.75162 1.97231 8.63501 1.67908ZM9.16667 14.1666C9.16667 13.7063 9.53809 13.3333 9.99625 13.3333H10.0038C10.4619 13.3333 10.8333 13.7063 10.8333 14.1666C10.8333 14.6268 10.4619 14.9999 10.0038 14.9999H9.99625C9.53809 14.9999 9.16667 14.6268 9.16667 14.1666ZM9.16667 10.8333C9.16667 11.2935 9.53976 11.6666 10 11.6666C10.4603 11.6666 10.8333 11.2935 10.8333 10.8333V7.49992C10.8333 7.03968 10.4603 6.66658 10 6.66658C9.53976 6.66658 9.16667 7.03968 9.16667 7.49992V10.8333Z"
fill="currentColor"
/>
</Svg>
);
Binary file added JoyboyCommunity/src/assets/tipping-modal.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 69 additions & 0 deletions JoyboyCommunity/src/components/TippingModal/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {Image, View} from 'react-native';
import {Portal} from 'react-native-portalize';

import {useStyles} from '../../hooks';
import {MainStackNavigationProps} from '../../types';
import {Button, Text} from '..';
import stylesheet from './styles';

export type TippingModalProps = {
user: string;
symbol: string;
amount: number;
visible?: boolean;
};

export const TippingModal: React.FC<TippingModalProps> = ({
user,
symbol,
amount,
visible = true,
}) => {
const styles = useStyles(stylesheet);

const navigation = useNavigation<MainStackNavigationProps>();

if (!visible) return null;

return (
<Portal>
<View style={styles.container}>
<View style={styles.modalContainer}>
<View style={styles.modal}>
<View style={styles.logo}>
<Image
style={styles.logoImage}
source={require('../../assets/tipping-modal.png')}
resizeMode="cover"
/>
</View>

<View style={styles.content}>
<Text color="text" weight="bold" fontSize={21} lineHeight={24}>
Tipped {user}
</Text>
<Text color="primary" weight="bold" fontSize={21} lineHeight={24}>
{amount} {symbol}
</Text>
<Text color="textSecondary" weight="medium" fontSize={15} lineHeight={24}>
Keep spreading love
</Text>

<Button
style={styles.button}
onPress={() => {
navigation.navigate('Home');
}}
variant="secondary"
>
Home
</Button>
</View>
</View>
</View>
</View>
</Portal>
);
};
47 changes: 47 additions & 0 deletions JoyboyCommunity/src/components/TippingModal/styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import {Spacing, ThemedStyleSheet} from '../../styles';

export default ThemedStyleSheet((theme) => ({
container: {
flex: 1,
},
modalContainer: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)',
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
modal: {
width: '80%',
height: '40%',
backgroundColor: theme.colors.surface,
borderRadius: 24,
},
logo: {
position: 'absolute',
top: '-43%',
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
logoImage: {
width: 238,
},
content: {
gap: Spacing.small,
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'flex-end',
paddingHorizontal: Spacing.large,
paddingVertical: Spacing.medium,
},
button: {
width: '100%',
},
}));
42 changes: 42 additions & 0 deletions JoyboyCommunity/src/components/Toast/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import {View} from 'react-native';

import {ErrorIcon, InfoIcon, SuccessIcon} from '../../assets/icons';
import {useStyles, useTheme} from '../../hooks';
import {Text} from '../Text';
import stylesheet from './styles';

export type ToastProps = {
type: 'success' | 'info' | 'error';
title: string;
};

export const Toast: React.FC<ToastProps> = ({type, title}) => {
const theme = useTheme();
const styles = useStyles(stylesheet, type);

const color = (
{
success: 'successDark',
info: 'infoDark',
error: 'errorDark',
} as const
)[type];

const Icon = (
{
success: SuccessIcon,
info: InfoIcon,
error: ErrorIcon,
} as const
)[type];

return (
<View style={styles.container}>
<Icon width={20} height={20} color={theme.colors[color]} />

<Text weight="semiBold" color={color} fontSize={14} style={styles.text}>
{title}
</Text>
</View>
);
};
28 changes: 28 additions & 0 deletions JoyboyCommunity/src/components/Toast/styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import {Spacing, ThemedStyleSheet} from '../../styles';

export default ThemedStyleSheet((theme, type: 'success' | 'info' | 'error') => ({
container: {
width: '100%',
flexDirection: 'row',
alignItems: 'center',
gap: Spacing.xsmall,
paddingVertical: Spacing.medium,
paddingHorizontal: Spacing.medium,
borderRadius: 8,

...(type === 'success' && {
backgroundColor: theme.colors.successLight,
}),

...(type === 'info' && {
backgroundColor: theme.colors.infoLight,
}),

...(type === 'error' && {
backgroundColor: theme.colors.errorLight,
}),
},
text: {
flex: 1,
},
}));
1 change: 1 addition & 0 deletions JoyboyCommunity/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,4 @@ export {SquareInput} from './SquareInput';
export {Story} from './Story';
export {Text} from './Text';
export {TextButton} from './TextButton';
export {Toast} from './Toast';

0 comments on commit 71abe5b

Please sign in to comment.