Skip to content

Commit

Permalink
feat: animations on onboarding and home dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@pierobassa
pierobassa committed Jan 21, 2024
1 parent 6c5e736 commit a436d5e
Show file tree
Hide file tree
Showing 2 changed files with 191 additions and 112 deletions.
127 changes: 82 additions & 45 deletions apps/web/src/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,33 @@ import { MergedTable } from '@/components/MergedTable';
import { GetGho } from '@/components/GetGho';
import { GhoData } from '@/components/GhoData';
import { ChangeEvent, useCallback, useState } from 'react';
import { motion } from 'framer-motion';

type Props = {
wallet: Address;
};

const bottomToUp = {
initial: {
opacity: 0,
y: 50,
scale: 0.95,
rotate: -10 // Slightly rotated when starting
},
animate: {
opacity: 1,
y: 0,
scale: 1,
rotate: 0 // Return to normal state
},
exit: {
opacity: 0,
y: -50,
scale: 0.95,
rotate: 10 // Rotate in opposite direction when exiting
}
};

export const Home = ({ wallet }: Props) => {
// const { setIsSPonsored } = useSponsoredTxFlag();
const { logout } = useAccountAdapter();
Expand All @@ -51,19 +73,26 @@ export const Home = ({ wallet }: Props) => {
const { data: balance } = useBalance({ address: wallet });

return (
<VStack spacing={4} alignItems={'stretch'} w="full">
<HStack justifyContent="space-between" w="full">
<FormControl display="flex" alignItems="center">
<FormLabel htmlFor="advanced" mb="0">
Advanced View
</FormLabel>
<Switch
id="advanced"
size="lg"
onChange={toggleShowAdvanced}
/>
</FormControl>
{/* <FormControl display="flex" alignItems="center">
<motion.div
initial="initial"
animate="animate"
exit="exit"
variants={bottomToUp}
transition={{ duration: 0.5 }}
>
<VStack spacing={4} alignItems={'stretch'} w="full">
<HStack justifyContent="space-between" w="full">
<FormControl display="flex" alignItems="center">
<FormLabel htmlFor="advanced" mb="0">
Advanced View
</FormLabel>
<Switch
id="advanced"
size="lg"
onChange={toggleShowAdvanced}
/>
</FormControl>
{/* <FormControl display="flex" alignItems="center">
<FormLabel htmlFor="sponsored" mb="0">
Enable ERC20 Sponsored Transactions
</FormLabel>
Expand All @@ -73,41 +102,49 @@ export const Home = ({ wallet }: Props) => {
onChange={handleOnChange}
/>
</FormControl> */}
<HStack spacing={8}>
<HStack spacing={2}>
<AddressButton address={wallet} withCopy={true} />
<HStack spacing={8}>
<HStack spacing={2}>
<Image
src={CryptoIconMap['WETH']}
boxSize="1.5rem"
/>
<Heading size="xs">
{Number(balance?.formatted ?? 0).toFixed(4)}
</Heading>
<AddressButton address={wallet} withCopy={true} />
<HStack spacing={2}>
<Image
src={CryptoIconMap['WETH']}
boxSize="1.5rem"
/>
<Heading size="xs">
{Number(balance?.formatted ?? 0).toFixed(4)}
</Heading>
</HStack>
</HStack>
<Button
variant={'solid'}
colorScheme="purple"
onClick={logout}
size="sm"
>
Logout
</Button>
</HStack>
<Button
variant={'solid'}
colorScheme="purple"
onClick={logout}
size="sm"
>
Logout
</Button>
</HStack>
</HStack>
<GetGho address={wallet} />
<GhoData address={wallet} />
<MergedTable address={wallet} />
{showAdvanced && (
<>
<Spacer h={30} />
<Heading size="md">Advanced View</Heading>
<SuppliedAssets address={wallet} />
<BorrowedAssets address={wallet} />
<ReservesIncentives address={wallet} />
</>
)}
</VStack>
<GetGho address={wallet} />
<GhoData address={wallet} />
<MergedTable address={wallet} />
{showAdvanced && (
<motion.div
initial="initial"
animate="animate"
exit="exit"
variants={bottomToUp}
transition={{ duration: 0.5 }}
>
<Spacer h={30} />
<Heading size="md">Advanced View</Heading>
<Spacer h={15} />
<SuppliedAssets address={wallet} />
<BorrowedAssets address={wallet} />
<ReservesIncentives address={wallet} />
</motion.div>
)}
</VStack>
</motion.div>
);
};
176 changes: 109 additions & 67 deletions apps/web/src/pages/Onboarding.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,20 @@ import {
} from '@repo/lfgho-sdk';
import Lottie from 'react-lottie';
import ghostAnimation from '../assets/ghost-lottie.json';
import { motion } from 'framer-motion';

// Animation variants
const leftToRight = {
initial: { opacity: 0, x: 50 },
animate: { opacity: 1, x: 0 },
exit: { opacity: 0, x: -50 }
};

const bottomToUp = {
initial: { opacity: 0, y: 50 }, // Start from below
animate: { opacity: 1, y: 0 }, // Animate to original position
exit: { opacity: 0, y: -50 } // Exit to above
};

type Steps = 'main' | 'alreadyHaveWallet' | 'createWallet' | 'connectWallet';

Expand Down Expand Up @@ -83,6 +97,7 @@ const OnboardingBody = () => {
<strong>'space' </strong> to reveal
</Text>
</VStack>
<div style={{ height: '200px', position: 'relative' }}> {/* Set a fixed height */}
<Lottie
style={{
position: 'absolute',
Expand All @@ -98,84 +113,103 @@ const OnboardingBody = () => {
height={200}
width={200}
/>
</div>
</VStack>
);
}

if (step === 'alreadyHaveWallet') {
return (
<ConnectKitButton.Custom>
{({ isConnected, isConnecting, show, address }) => {
if (isConnecting) {
return <Loading text={'Loading wallet...'} />;
}
return (
<HStack>
<IconButton
size="sm"
aria-label="Go back"
variant={'ghost'}
icon={<Icon as={FaArrowLeft} />}
onClick={() => setStep('main')}
/>
<HStack spacing={4}>
<Button
colorScheme="black"
variant={'outline'}
size={'lg'}
onClick={login}
leftIcon={<Icon as={FaKey} />}
>
Passkey
</Button>
<Text>or</Text>

<Button
colorScheme="black"
variant={'outline'}
size={'lg'}
onClick={show}
>
{isConnected ? address : 'Connect Wallet'}
</Button>
<motion.div
initial="initial"
animate="animate"
exit="exit"
variants={leftToRight}
transition={{ duration: 0.5 }}
>
<ConnectKitButton.Custom>
{({ isConnected, isConnecting, show, address }) => {
if (isConnecting) {
return <Loading text={'Loading wallet...'} />;
}
return (
<HStack>
<IconButton
size="sm"
aria-label="Go back"
variant={'ghost'}
icon={<Icon as={FaArrowLeft} />}
onClick={() => setStep('main')}
/>
<HStack spacing={4}>
<Button
colorScheme="black"
variant={'outline'}
size={'lg'}
onClick={login}
leftIcon={<Icon as={FaKey} />}
>
Passkey
</Button>
<Text>or</Text>

<Button
colorScheme="black"
variant={'outline'}
size={'lg'}
onClick={show}
>
{isConnected
? address
: 'Connect Wallet'}
</Button>
</HStack>
</HStack>
</HStack>
);
}}
</ConnectKitButton.Custom>
);
}}
</ConnectKitButton.Custom>
</motion.div>
);
}

if (step === 'createWallet') {
return (
<HStack>
<IconButton
size="sm"
aria-label="Go back"
variant={'ghost'}
icon={<Icon as={FaArrowLeft} />}
onClick={() => setStep('main')}
/>
<Input
variant="outline"
type="text"
placeholder="Wallet name ..."
onChange={handleInputChange}
value={inputValue}
borderColor={borderColor}
_placeholder={{ color: borderColor, opacity: 0.5 }}
_hover={{ borderColor: { borderColor } }}
/>
<IconButton
size="sm"
variant={'ghost'}
aria-label="Confirm"
colorScheme="green"
icon={<Icon as={FaCheck} />}
isDisabled={!inputValue}
onClick={() => signup(`LFGHO - ${inputValue}`)}
/>
</HStack>
<motion.div
initial="initial"
animate="animate"
exit="exit"
variants={leftToRight}
transition={{ duration: 0.5 }}
>
<HStack>
<IconButton
size="sm"
aria-label="Go back"
variant={'ghost'}
icon={<Icon as={FaArrowLeft} />}
onClick={() => setStep('main')}
/>
<Input
variant="outline"
type="text"
placeholder="Wallet name ..."
onChange={handleInputChange}
value={inputValue}
borderColor={borderColor}
_placeholder={{ color: borderColor, opacity: 0.5 }}
_hover={{ borderColor: { borderColor } }}
/>
<IconButton
size="sm"
variant={'ghost'}
aria-label="Confirm"
colorScheme="green"
icon={<Icon as={FaCheck} />}
isDisabled={!inputValue}
onClick={() => signup(`LFGHO - ${inputValue}`)}
/>
</HStack>
</motion.div>
);
}

Expand Down Expand Up @@ -215,7 +249,15 @@ export const Onboarding = () => {
</HStack>
</VStack>
<Box minH={100}>
<OnboardingBody />
<motion.div
initial="initial"
animate="animate"
exit="exit"
variants={bottomToUp}
transition={{ duration: 0.5 }}
>
<OnboardingBody />
</motion.div>
</Box>
</VStack>
);
Expand Down

0 comments on commit a436d5e

Please sign in to comment.