-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add draft of onboarding page * chore: update t&c links * feat: add guided tour through app * fix: typos and eslint warnings * restrict width of onboarding cards * feat: replace UI faucet with discord link * feat: improve CTA * feat: add link to onboarding page --------- Co-authored-by: Thomas Jeatt <[email protected]>
- Loading branch information
Showing
13 changed files
with
436 additions
and
5 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
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,130 @@ | ||
| import { useState } from 'react'; | ||
| import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride'; | ||
|
|
||
| import { CTA, theme } from '@/component-library'; | ||
|
|
||
| type Props = { | ||
| disabled?: boolean; | ||
| label?: string; | ||
| } | ||
|
|
||
| type TutorialProps = Props; | ||
|
|
||
| const steps: Step[] = [ | ||
| { | ||
| target: 'body', | ||
| placement: 'center', | ||
| title: 'Welcome to the Interlay app!', | ||
| content: 'Step through this tutorial to understand the different parts of the app.', | ||
| }, | ||
| { | ||
| target: '[href="/wallet"]', | ||
| title: 'Wallet', | ||
| content: 'You can find an overview of your assets and positions in the DeFi hub on the wallet page.', | ||
| }, | ||
| { | ||
| target: '[href="/bridge"]', | ||
| title: 'IBTC', | ||
| content: 'On the IBTC page you can bridge BTC from and to Interlay.' | ||
| }, | ||
| { | ||
| target: '[href="/transfer"]', | ||
| title: 'Transfer and Bridge', | ||
| content: 'You can transfer assets on Interlay and you can also...' | ||
| }, | ||
| { | ||
| target: '[href="/transfer"]', | ||
| title: 'Transfer and Bridge', | ||
| content: '...bridge assets from other chains like Polkadot, Polkadot Asset Hub, Astar, HydraDX, and many more from and to Interlay.' | ||
| }, | ||
| { | ||
| target: '[href="/lending"]', | ||
| title: 'Lending', | ||
| content: 'Onwards to DeFi! On the lending page you can lend IBTC, DOT, USDT and others to earn interest.' | ||
| }, | ||
| { | ||
| target: '[href="/lending"]', | ||
| title: 'Lending', | ||
| content: 'You can also borrow assets like IBTC, DOT, USDT and others.', | ||
| }, | ||
| { | ||
| target: '[href="/swap"]', | ||
| title: 'Swap', | ||
| content: 'On the swap page you can swap assets like IBTC, DOT, USDT and others.', | ||
| }, | ||
| { | ||
| target: '[href="/pools"]', | ||
| title: 'Pools', | ||
| content: 'On the pools page you can provide liquidity to earn rewards.', | ||
| }, | ||
| { | ||
| target: '[href="/staking"]', | ||
| title: 'Staking', | ||
| content: 'Here you can stake INTR to enable you to participate in Interlay governance.', | ||
| }, | ||
| { | ||
| target: '[data-key="info"]', | ||
| title: 'Onboarding', | ||
| content: 'All done! You can always redo this tutorial under "More" and "Onboarding".', | ||
| }, | ||
| { | ||
| target: '[href="/wallet"]', | ||
| title: 'Wallet', | ||
| content: 'As a first step, click on the wallet page and check the guide to get assets onto Interlay to join the DeFi hub.', | ||
| disableOverlayClose: true, | ||
| hideCloseButton: true, | ||
| hideFooter: true, | ||
| spotlightClicks: true, | ||
| }, | ||
| ]; | ||
|
|
||
| const Tutorial = ({ | ||
| disabled = false, | ||
| label = 'Start Tutorial', | ||
| }: TutorialProps): JSX.Element => { | ||
| const [run, setRun] = useState(false); | ||
|
|
||
| const handleStartTutorial = () => { | ||
| console.log('Starting tutorial...'); | ||
| setRun(true); | ||
| }; | ||
|
|
||
| const handleJoyrideCallback = (data: CallBackProps) => { | ||
| const { action, status } = data; | ||
| const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED]; | ||
|
|
||
| if (finishedStatuses.includes(status as string) || (action === 'close')) { | ||
| setRun(false); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <CTA | ||
| onPress={handleStartTutorial} | ||
| variant='primary' | ||
| disabled={disabled} | ||
| id='start-tutorial' | ||
| > | ||
| {label} | ||
| </CTA> | ||
| <Joyride | ||
| callback={handleJoyrideCallback} | ||
| continuous={true} | ||
| scrollToFirstStep={true} | ||
| showProgress={true} | ||
| showSkipButton={true} | ||
| steps={steps} | ||
| run={run} | ||
| styles={{ | ||
| options: { | ||
| primaryColor: theme.cta.primary.bg, | ||
| } | ||
| }} | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export { Tutorial }; | ||
| export type { TutorialProps }; |
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 @@ | ||
| export { Tutorial } from './Tutorial'; |
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,11 @@ | ||
| import styled from 'styled-components'; | ||
|
|
||
| import { Flex } from '@/component-library'; | ||
|
|
||
| const StyledWrapper = styled(Flex)` | ||
| max-width: 540px; | ||
| width: 100%; | ||
| margin: 0 auto; | ||
| `; | ||
|
|
||
| export { StyledWrapper }; |
Oops, something went wrong.
503736aThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
interbtc-ui-interlay-testnet – ./
interbtc-ui-interlay-testnet-interlay.vercel.app
interbtc-ui-interlay-testnet.vercel.app
interbtc-ui-interlay-testnet-git-master-interlay.vercel.app
testnet.interlay.io
503736aThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
interbtc-ui-kintsugi-testnet – ./
interbtc-ui-kintsugi-testnet-git-master-interlay.vercel.app
interbtc-ui-kintsugi-testnet-interlay.vercel.app
kintnet.interlay.io
interbtc-ui.vercel.app