Skip to content

Commit

Permalink
completed most of withdraw receipt
Browse files Browse the repository at this point in the history
  • Loading branch information
@sumershinde22
sumershinde22 committed Dec 2, 2024
1 parent 003f311 commit d023fb3
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 71 deletions.
Binary file added frontend/assets/images/confetti.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 9 additions & 29 deletions frontend/src/components/Tag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,35 +10,20 @@ const tagVariants = cva('flex flex-row items-center rounded-lg px-3 py-1', {
variants: {
level: {
neutral: 'bg-gray-900',
success: 'bg-success',
success: 'bg-success',
warning: 'bg-[#F7B418]',
critical: 'bg-[#D32246]',
neutralSubdued: 'bg-gray-200',
successSubdued: 'bg-[#ECF3ED]',
warningSubdued: 'bg-[#F9EFD7]',
criticalSubdued: 'bg-[#F8EDED]'
criticalSubdued: 'bg-[#F8EDED]',
},
},
defaultVariants: {
level: 'neutral',
}
},
});

const tagIconVariants = cva('', {
variants: {
level: {
neutral: 'text-black',
success: 'text-success',
warning: 'text-[#F7B418]',
critical: 'text-[#D32246]',
neutralSubdued: 'text-gray-600',
successSubdued: 'text-success',
warningSubdued: 'text-[#F7B418]',
criticalSubdued: 'text-[#D32246]'
}
}
})

const tagTextVariants = cva('text-xs font-sourceSans3Medium', {
variants: {
level: {
Expand All @@ -49,12 +34,12 @@ const tagTextVariants = cva('text-xs font-sourceSans3Medium', {
neutralSubdued: 'text-gray-600',
successSubdued: 'text-success',
warningSubdued: 'text-[#F7B418]',
criticalSubdued: 'text-[#D32246]'
}
criticalSubdued: 'text-[#D32246]',
},
},
defaultVariants: {
level: 'neutral',
}
},
});

interface TagProps extends ViewProps, VariantProps<typeof tagVariants> {
Expand All @@ -70,14 +55,9 @@ export function Tag({
...props
}: TagProps & { className?: string }) {
return (
<StyledView
className={`${tagVariants({ level })} ${className || ''}`}
{...props}
>
<StyledView className={`${tagIconVariants({ level })}`}>{icon}</StyledView>
<StyledText className={`${tagTextVariants({ level })} ${icon ? 'ml-1' : ''}`}>
{children}
</StyledText>
<StyledView className={`${tagVariants({ level })} ${className || ''}`} {...props}>
{icon && <StyledView className='mr-1'>{icon}</StyledView>}
<StyledText className={tagTextVariants({ level })}>{children}</StyledText>
</StyledView>
);
}
Expand Down
124 changes: 82 additions & 42 deletions frontend/src/screens/profile/WithdrawConfirmScreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,119 @@
// WithdrawConfirmScreen.js
import React from 'react';
import { View, Text, Image } from 'react-native';
import { View, Text, Dimensions } from 'react-native';
import { styled } from 'nativewind';
import Button from '../../components/Button';
import Svg, { Path } from 'react-native-svg';
import Tag from '../../components/Tag';

// Reusable Ellipse Component
const Ellipse = styled(View);

const StyledView = styled(View);
const StyledText = styled(Text);
const StyledImage = styled(Image);

export default function WithdrawConfirmScreen() {
const numberOfEllipses = 15;
const ellipsesArray = Array.from({ length: numberOfEllipses });
const ellipseWidth = 18;
const ellipseHeight = 19.885;

const horizontalPadding = 24;
const availableWidth = Dimensions.get('window').width - 2 * horizontalPadding;
const totalEllipsesWidth = ellipseWidth * numberOfEllipses;
const adjustment = 2;
const spacing = (availableWidth - totalEllipsesWidth - adjustment) / (numberOfEllipses - 1);

return (
<StyledView className='flex-1 bg-gray-50'>
{/* Top Section */}
<StyledView className='flex-1 bg-gray-50 relative'>
{/* Top Section */}
<StyledView className='mb-6 py-8 px-6'>
<StyledText className='text-base font-sourceSans3 font-normal text-defaultText leading-5 mb-1'>
<StyledText className='text-base font-sourceSans3 text-defaultText leading-5 mb-1'>
Total Cash Available
</StyledText>

{/* Row for Balance and Button */}
<StyledView className='flex-row justify-between items-center'>
<StyledText className='text-3xl text-defaultText font-extrabold leading-10'>
<StyledText className='text-3xl text-defaultText font-title leading-10'>
$1,234.67
</StyledText>
<Button
type='secondary'
size='small'
className=''
onPress={() => console.log('View Portfolio button pressed')}
>
<StyledText className=''>View Portfolio</StyledText>
<StyledText>View Portfolio</StyledText>
</Button>
</StyledView>
</StyledView>

{/* Pending Transfer Card */}
<StyledView className='bg-white rounded-t-2xl shadow-md overflow-hidden'>
<StyledView className='p-6'>
<StyledText className='text-lg font-bold text-black mb-2'>Pending transfer</StyledText>
<StyledText className='text-sm text-gray-600 mb-4'>
{/* White Card */}
<StyledView className='bg-white rounded-t-2xl mx-6 px-7 py-8 pb-10'>
{/* The 'pb-10' adds padding at the bottom to accommodate the perforated ellipses */}
<StyledView>
<StyledText className='text-2xl font-heading font-bold text-defaultText mb-2'>
Pending transfer
</StyledText>
<StyledText className='font-nunitoRegular text-base'>
You successfully withdrew $200 out of your 3 Stones account.
</StyledText>

{/* Transaction Details */}
<StyledView className='flex-row justify-between mb-2'>
<StyledText className='font-bold text-black'>Transaction ID</StyledText>
<StyledText className='text-gray-600'>4394 3489 3984 2938</StyledText>
</StyledView>
<StyledView className='flex-row justify-between mb-2'>
<StyledText className='font-bold text-black'>Date</StyledText>
<StyledText className='text-gray-600'>September 1, 2024</StyledText>
</StyledView>
<StyledView className='flex-row justify-between mb-2'>
<StyledText className='font-bold text-black'>Nominal</StyledText>
<StyledText className='text-gray-600'>$200.00</StyledText>
</StyledView>
<StyledView className='flex-row justify-between mb-2'>
<StyledText className='font-bold text-black'>Administrative Fee</StyledText>
<StyledText className='text-gray-600'>$0.25</StyledText>
</StyledView>
<StyledView className='flex-row justify-between items-center mb-4'>
<StyledText className='font-bold text-black'>Status</StyledText>
<StyledView className='px-3 py-1 bg-green-100 rounded-full'>
<StyledText className='text-green-700 text-sm font-medium'>Success</StyledText>
<StyledView className='py-6'>
{/* Transaction Details */}
<StyledView className='flex-row justify-between items-center mb-2'>
<StyledText className='font-sourceSans3Bold text-base'>Transaction ID</StyledText>
<StyledText className='font-sourceSans3 text-gray-900'>
4394 3489 3984 2938
</StyledText>
</StyledView>
<StyledView className='flex-row justify-between items-center mb-2'>
<StyledText className='font-sourceSans3Bold text-base'>Date</StyledText>
<StyledText className='font-sourceSans3 text-gray-900'>September 1, 2024</StyledText>
</StyledView>
<StyledView className='flex-row justify-between items-center mb-2'>
<StyledText className='font-sourceSans3Bold text-base'>Nominal</StyledText>
<StyledText className='font-sourceSans3 text-gray-900'>$200.00</StyledText>
</StyledView>
<StyledView className='flex-row justify-between items-center mb-2'>
<StyledText className='font-sourceSans3Bold text-base'>Administrative Fee</StyledText>
<StyledText className='font-sourceSans3 text-gray-900'>$0.25</StyledText>
</StyledView>
<StyledView className='flex-row justify-between items-center'>
<StyledText className='font-sourceSans3Bold text-base'>Status</StyledText>
<Tag level='success' className='flex-row items-center'>
<StyledText className='font-sourceSans3'>Success</StyledText>
</Tag>
</StyledView>
</StyledView>

{/* Total */}
<StyledView className='flex-row justify-between'>
<StyledText className='font-bold text-black text-lg'>Total</StyledText>
<StyledText className='font-bold text-black text-lg'>$199.75</StyledText>
{/* Total */}
<StyledView className='flex-row justify-between pt-6'>
<StyledText className='font-heading text-lg'>Total</StyledText>
<StyledText className='font-heading text-lg'>$199.75</StyledText>
</StyledView>
</StyledView>
</StyledView>
{/* SVG Serrated Edge */}
</StyledView>

{/* Perforated Bottom */}
<StyledView
className='flex-row'
style={{
bottom: -ellipseHeight / 2,
left: horizontalPadding,
right: horizontalPadding,
height: ellipseHeight,
}}
>
{ellipsesArray.map((_, index) => (
<Ellipse
key={index}
className='bg-gray-50 rounded-full'
style={{
width: ellipseWidth,
height: ellipseHeight,
marginTop: -ellipseHeight,
marginRight: index !== numberOfEllipses - 1 ? spacing : 0,
}}
/>
))}
</StyledView>
</StyledView>
);
Expand Down

0 comments on commit d023fb3

Please sign in to comment.