This repository has been archived by the owner on Aug 16, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
UI updates for flow dedicated template
- Loading branch information
Showing
23 changed files
with
809 additions
and
969 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
32 changes: 0 additions & 32 deletions
32
scaffolds/nextjs-flow-dedicated-wallet/template/public/background.svg
This file was deleted.
Oops, something went wrong.
3 changes: 3 additions & 0 deletions
3
scaffolds/nextjs-flow-dedicated-wallet/template/public/info.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions
3
scaffolds/nextjs-flow-dedicated-wallet/template/public/link_white.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions
9
scaffolds/nextjs-flow-dedicated-wallet/template/public/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 0 additions & 34 deletions
34
scaffolds/nextjs-flow-dedicated-wallet/template/public/magic_color_white.svg
This file was deleted.
Oops, something went wrong.
Binary file added
BIN
+1.3 MB
scaffolds/nextjs-flow-dedicated-wallet/template/public/redirect_bg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 23 additions & 25 deletions
48
scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Dashboard.tsx
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 |
|---|---|---|
| @@ -1,27 +1,25 @@ | ||
| import React from 'react' | ||
| import WalletMethods from './cards/WalletMethodsCard' | ||
| import SendTransaction from './cards/SendTransactionCard' | ||
| import Spacer from '@/components/ui/Spacer' | ||
| import {LoginProps} from '@/utils/types' | ||
| import UserInfo from './cards/UserInfoCard' | ||
| import DevLinks from './DevLinks' | ||
| import Header from './Header' | ||
| import React from 'react'; | ||
| import WalletMethods from './cards/WalletMethodsCard'; | ||
| import SendTransaction from './cards/SendTransactionCard'; | ||
| import Spacer from '@/components/ui/Spacer'; | ||
| import { LoginProps } from '@/utils/types'; | ||
| import UserInfo from './cards/UserInfoCard'; | ||
| import DevLinks from './DevLinks'; | ||
| import Header from './Header'; | ||
|
|
||
| export default function Dashboard({token, setToken}: LoginProps) { | ||
| return ( | ||
| <div className='home-page'> | ||
| <Header /> | ||
| <Spacer size={32} /> | ||
| <Spacer size={120} /> | ||
| <div className='cards-container'> | ||
| <SendTransaction /> | ||
| <Spacer size={10} /> | ||
| <UserInfo token={token} setToken={setToken} /> | ||
| <Spacer size={10} /> | ||
| <WalletMethods token={token} setToken={setToken} /> | ||
| <Spacer size={15} /> | ||
| </div> | ||
| <DevLinks primary /> | ||
| </div> | ||
| ) | ||
| export default function Dashboard({ token, setToken }: LoginProps) { | ||
| return ( | ||
| <div className="home-page"> | ||
| <Header /> | ||
| <div className="cards-container"> | ||
| <UserInfo token={token} setToken={setToken} /> | ||
| <Spacer size={10} /> | ||
| <SendTransaction /> | ||
| <Spacer size={10} /> | ||
| <WalletMethods token={token} setToken={setToken} /> | ||
| <Spacer size={15} /> | ||
| </div> | ||
| <DevLinks primary /> | ||
| </div> | ||
| ); | ||
| } |
33 changes: 17 additions & 16 deletions
33
scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Header.tsx
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 |
|---|---|---|
| @@ -1,19 +1,20 @@ | ||
| import Image from 'next/image' | ||
| import MagicColorWhite from 'public/magic_color_white.svg' | ||
| import {Dispatch, SetStateAction} from 'react' | ||
| import DevLinks from './DevLinks' | ||
| import Image from 'next/image'; | ||
| import Logo from 'public/logo.svg'; | ||
| import DevLinks from './DevLinks'; | ||
|
|
||
| const Header = () => { | ||
| return ( | ||
| <div className='app-header-container'> | ||
| <Image | ||
| className='h-[180] w-[120px] m-2' | ||
| src={MagicColorWhite} | ||
| alt='logo' | ||
| /> | ||
| <DevLinks /> | ||
| </div> | ||
| ) | ||
| } | ||
| return ( | ||
| <div className="app-header-container"> | ||
| <div className="flex flex-col gap-2.5 items-center"> | ||
| <Image src={Logo} alt="logo" /> | ||
| <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div> | ||
| <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal"> | ||
| Demo | ||
| </div> | ||
| </div> | ||
| <DevLinks /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Header | ||
| export default Header; |
28 changes: 14 additions & 14 deletions
28
scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Login.tsx
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 |
|---|---|---|
| @@ -1,22 +1,22 @@ | ||
| import {LoginProps} from '@/utils/types' | ||
| import { LoginProps } from '@/utils/types' | ||
| import Header from './Header' | ||
| <% loginMethods.forEach(authType => { %> | ||
| <%-`import ${authType.replaceAll(' ', '')} from './auth/${authType.replaceAll(' ', '')}';`-%> | ||
| <% }) %> | ||
|
|
||
| const Login = ({token, setToken}: LoginProps) => { | ||
| return ( | ||
| <div className='login-page'> | ||
| <Header /> | ||
| <div className='login-method-grid'> | ||
| <% loginMethods.forEach(authType => { %> | ||
| <% if (authType !== "Social Logins") { %> | ||
| <%-`<${authType.replaceAll(' ', '')} token={token} setToken={setToken} />`-%> | ||
| <% } %> | ||
| <% }) %> | ||
| </div> | ||
| </div> | ||
| ) | ||
| const Login = ({ token, setToken }: LoginProps) => { | ||
| return ( | ||
| <div className="login-page"> | ||
| <Header /> | ||
| <div className={`max-w-[100%] grid grid-cols-<%= Math.min(loginMethods.length, 3) %> grid-flow-row auto-rows-fr gap-5 p-4 mt-8`}> | ||
| <% loginMethods.forEach(authType => { %> | ||
| <% if (authType !== "Social Logins") { %> | ||
| <%-`<${authType.replaceAll(' ', '')} token={token} setToken={setToken} />`-%> | ||
| <% } %> | ||
| <% }) %> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Login |
70 changes: 39 additions & 31 deletions
70
...lds/nextjs-flow-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx
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 |
|---|---|---|
| @@ -1,35 +1,43 @@ | ||
| import React, {useCallback} from 'react' | ||
| import Spacer from '../ui/Spacer' | ||
| import Header from './Header' | ||
| import DevLinks from './DevLinks' | ||
| import React, { useCallback } from 'react'; | ||
| import DevLinks from './DevLinks'; | ||
| import Image from 'next/image'; | ||
| import Info from 'public/info.svg'; | ||
| import Link from 'public/link_white.svg'; | ||
| import Logo from 'public/logo.svg'; | ||
|
|
||
| const MagicDashboardRedirect = () => { | ||
| const onClick = useCallback(() => { | ||
| window.open('https://dashboard.magic.link/signup', '_blank') | ||
| }, []) | ||
| const onClick = useCallback(() => { | ||
| window.open('https://dashboard.magic.link/signup', '_blank'); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className='redirect-container'> | ||
| <Spacer size={32} /> | ||
| <Spacer size={20} /> | ||
| <div className='text-center'> | ||
| <h3 className='max-w-[500px] text-center text-[#ffffffcc] text-xl font-normal m-0'> | ||
| Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code>{' '} | ||
| environment variable in <code>.env</code>. You can get your | ||
| Magic API key from the Magic Dashboard. | ||
| </h3> | ||
| </div> | ||
| <Spacer size={32} /> | ||
| <div className='text-center'> | ||
| <button | ||
| className='login-button min-w-[300px]' | ||
| onClick={onClick}> | ||
| Go to Dashboard | ||
| </button> | ||
| </div> | ||
| <DevLinks /> | ||
| </div> | ||
| ) | ||
| } | ||
| return ( | ||
| <div className="redirect-container"> | ||
| <div className="flex flex-col mt-10 gap-2.5 items-center"> | ||
| <Image src={Logo} alt="logo" /> | ||
| <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div> | ||
| <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal"> | ||
| Demo | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-col items-center flex-1"> | ||
| <div className="redirect-card"> | ||
| <div className="flex gap-2 mx-4 my-2 "> | ||
| <Image src={Info} alt="logo" /> | ||
| <h3 className="max-w-[480px] text-[#4E4D52] text-base font-normal"> | ||
| Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code> environment variable in <code>.env</code>. You can | ||
| get your Magic API key from the Magic Dashboard. | ||
| </h3> | ||
| </div> | ||
| </div> | ||
|
|
||
| export default MagicDashboardRedirect | ||
| <button className="api-button" onClick={onClick} disabled={false}> | ||
| Get API keys | ||
| <Image src={Link} alt="link-icon" className="ml-[6px] my-auto" /> | ||
| </button> | ||
| </div> | ||
| <DevLinks /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MagicDashboardRedirect; |
Oops, something went wrong.