-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Upgrade framer-motion to v11
- Loading branch information
Showing
13 changed files
with
163 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { ArrowIcon, Button } from '@hyperlane-xyz/widgets'; | ||
| import { ComponentProps } from 'react'; | ||
| import { CardPage } from '../../flows/CardPage'; | ||
| import { useCardNav } from '../../flows/hooks'; | ||
| import { Color } from '../../styles/Color'; | ||
|
|
||
| export function BackButton({ page, ...rest }: ComponentProps<typeof Button> & { page: CardPage }) { | ||
| const { setPage } = useCardNav(); | ||
|
|
||
| return ( | ||
| <Button onClick={() => setPage(page)} {...rest} className="flex items-center gap-0.5"> | ||
| <ArrowIcon direction="w" width={30} height={20} color={Color.accent} /> | ||
| <span className="text-md text-accent-500">Back</span> | ||
| </Button> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { AnimatePresence, motion } from 'framer-motion'; | ||
| import { WarpDeploymentForm } from '../features/deployment/WarpDeploymentForm'; | ||
| import { CardPage } from './CardPage'; | ||
| import { LandingPage } from './LandingCard'; | ||
| import { useCardNav } from './hooks'; | ||
|
|
||
| export function CardFlow() { | ||
| const { page, direction } = useCardNav(); | ||
|
|
||
| return ( | ||
| <AnimatePresence mode="wait" custom={direction}> | ||
| <motion.div | ||
| key={page} | ||
| custom={direction} | ||
| variants={variants} | ||
| transition={transition} | ||
| initial="enter" | ||
| animate="center" | ||
| exit="exit" | ||
| > | ||
| {page === CardPage.Landing && <LandingPage />} | ||
| {page === CardPage.WarpForm && <WarpDeploymentForm />} | ||
| </motion.div> | ||
| ; | ||
| </AnimatePresence> | ||
| ); | ||
| } | ||
|
|
||
| const variants = { | ||
| enter: (direction: 'forward' | 'backward') => ({ | ||
| opacity: 0, | ||
| x: direction === 'forward' ? 40 : -40, | ||
| }), | ||
| center: { opacity: 1, x: 0 }, | ||
| exit: (direction: 'forward' | 'backward') => ({ | ||
| opacity: 0, | ||
| x: direction === 'forward' ? -40 : 40, | ||
| }), | ||
| }; | ||
| const transition = { duration: 0.3 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| export enum CardPage { | ||
| Landing, | ||
| WarpForm, | ||
| WarpReview, | ||
| WarpDeploy, | ||
| WarpSuccess, | ||
| WarpError, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { SolidButton } from '../components/buttons/SolidButton'; | ||
| import { links } from '../consts/links'; | ||
| import { CardPage } from './CardPage'; | ||
| import { useCardNav } from './hooks'; | ||
|
|
||
| export function LandingPage() { | ||
| const { setPage } = useCardNav(); | ||
|
|
||
| return ( | ||
| <div className="space-y-6 p-4 text-center"> | ||
| <h1 className="text-2xl text-primary-500">Deploy a Warp Route</h1> | ||
| <h2 className="text-md"> | ||
| Anyone can permissionlessly create an interchain token bridge by deploying Hyperlane Warp | ||
| Route contracts. | ||
| </h2> | ||
| <p className="text-sm"> | ||
| Follow three steps to create a new route: configure your options, deploy your contracts, and | ||
| set up a bridge UI. | ||
| </p> | ||
| <div className="flex justify-center gap-12"> | ||
| <a | ||
| href={links.warpDocs} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="w-36 rounded-lg border-2 border-accent-500 px-3 py-2 text-accent-500 transition-all hover:border-accent-600 hover:text-accent-600 active:scale-95" | ||
| > | ||
| Learn more | ||
| </a> | ||
| <SolidButton | ||
| color="accent" | ||
| onClick={() => setPage(CardPage.WarpForm)} | ||
| className="w-36 px-3 py-2" | ||
| > | ||
| Deploy | ||
| </SolidButton> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { useStore } from '../features/store'; | ||
|
|
||
| export function useCardNav() { | ||
| return useStore((s) => ({ page: s.cardPage, direction: s.direction, setPage: s.setCardPage })); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters