From 0a63308b387262196dca45ab48f697bb4a4802f2 Mon Sep 17 00:00:00 2001 From: Hunter Chang <716376+ChangoMan@users.noreply.github.com> Date: Fri, 10 Jan 2025 11:11:25 -0700 Subject: [PATCH] Adding Initial Design (#1) * adding raleway font * clean up providers component * clean up footer * adding components * adding design to homepage * adjust text color based on completion * Adding QR codes to desktop (#2) * adding app store qr codes * adding text to app store icons --- packages/nextjs/app/layout.tsx | 15 +- packages/nextjs/app/page.tsx | 358 ++++++++++++++---- packages/nextjs/components/Container.tsx | 9 + packages/nextjs/components/Footer.tsx | 36 -- packages/nextjs/components/Gradient.tsx | 14 + .../ScaffoldEthAppWithProviders.tsx | 23 +- .../RainbowKitCustomConnectButton/index.tsx | 2 +- packages/nextjs/public/logo-apple-apps.svg | 1 + packages/nextjs/public/logo-google-apps.svg | 1 + packages/nextjs/public/phone-mock.png | Bin 0 -> 216790 bytes packages/nextjs/public/qr-apple-app.svg | 1 + packages/nextjs/public/qr-google-app.svg | 1 + packages/nextjs/styles/globals.css | 5 + packages/nextjs/tailwind.config.js | 36 +- 14 files changed, 343 insertions(+), 159 deletions(-) create mode 100644 packages/nextjs/components/Container.tsx create mode 100644 packages/nextjs/components/Gradient.tsx create mode 100644 packages/nextjs/public/logo-apple-apps.svg create mode 100644 packages/nextjs/public/logo-google-apps.svg create mode 100644 packages/nextjs/public/phone-mock.png create mode 100644 packages/nextjs/public/qr-apple-app.svg create mode 100644 packages/nextjs/public/qr-google-app.svg diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx index b3b9821..1661d0b 100644 --- a/packages/nextjs/app/layout.tsx +++ b/packages/nextjs/app/layout.tsx @@ -1,9 +1,14 @@ +import { Raleway } from "next/font/google"; import "@rainbow-me/rainbowkit/styles.css"; import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders"; -import { ThemeProvider } from "~~/components/ThemeProvider"; import "~~/styles/globals.css"; import { getMetadata } from "~~/utils/scaffold-eth/getMetadata"; +const raleway = Raleway({ + subsets: ["latin"], + variable: "--font-raleway", +}); + export const metadata = getMetadata({ title: "Start Ethereum", description: "Start your journey into the world of Ethereum", @@ -11,11 +16,9 @@ export const metadata = getMetadata({ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => { return ( - - - - {children} - + + + {children} ); diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 8c5673a..5346d19 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -1,10 +1,14 @@ "use client"; import { useState } from "react"; +import Image from "next/image"; import Link from "next/link"; +import clsx from "clsx"; import type { NextPage } from "next"; import { useAccount, useSignTypedData } from "wagmi"; +import { XCircleIcon } from "@heroicons/react/24/outline"; import { CheckCircleIcon } from "@heroicons/react/24/solid"; +import { Container } from "~~/components/Container"; import { Address, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth"; import { useGlobalState } from "~~/services/store/store"; import { EIP_712_DOMAIN, EIP_712_TYPES__REGISTER } from "~~/utils/eip712"; @@ -49,89 +53,301 @@ const Home: NextPage = () => { }; return ( - <> -
-
-

- Welcome to - StartEthereum -

-

- Your journey into the world of Ethereum starts here. Learn how to use blockchain technology beyond trading - - from setting up your first wallet and signing transactions to exploring decentralized applications.{" "} -

+
+
+ +
+

+ Start Ethereum +

+

+ Your journey into the world of Ethereum starts here. Learn how to use blockchain technology beyond trading + - from setting up your first wallet and signing transactions to exploring decentralized applications. +

+

+ + Get Started + +

+
+ + +
+ +
+
+
+

+ 1. Crypto in your pocket +

+ {(hasWalletInstalled || isUserRegistered) && } +
+

+ Get A Wallet +

+

+ Download Rainbow wallet to start your Web3 journey +

+
+ +
+ {/* Mobile App Links */} +
+
+ + Apple App Store + iOS + +
+
+ + Android App Store + Android + +
+
+ + {/* Desktop QR Codes */} +
+
+ + + +
+

+ Scan or search for Rainbow Wallet +
on the Apple App Store +

+ QR code for Apple App Store +
+ +
+
+ +
+
+ -
-
-
-

1. Get your wallet!

- {(hasWalletInstalled || isUserRegistered) && } + +
+

+ Scan or search for Rainbow Wallet +
on the Google Play Store +

+ QR code for Google App Store +
+ +
+
+ +
+
-

Download Rainbow wallet to start your Web3 journey

- - Download Rainbow - -
- setHasWalletInstalled(e.target.checked)} +
+ Mobile Ethereum Wallet -
+ + +
-
-
-

2. Connect your wallet

- {(isConnected || isUserRegistered) && } -
- {!isConnected &&

Connect your wallet to this website

} -
- {!isConnected ? :
} -
+
+ +
+

+ 2. Sign in anywhere +

+ {(isConnected || isUserRegistered) && } +
+

Connect Your Wallet

+ {!isConnected && ( +

Connect your wallet to this website

+ )} +
+ {!isConnected ? :
}
+ + -
-
-

3. Sign your first message

- {isUserRegistered && } -
- {!isUserRegistered ? ( - <> -

Try out a simple off-chain signature - no gas fees!

- - - ) : ( - <> -

- You have signed the message successfully! Go to your profile to continue your journey: -

- - - - - )} + 3. Register A Profile + + {isUserRegistered && } +
+

+ Sign Your First Message +

+ + {!isUserRegistered ? ( + <> +

+ Try out a simple off-chain signature - no gas fees! +

+

+ +

+ + ) : ( + <> +

+ You have signed the message successfully! Go to your profile to continue your journey: +

+

+ + + +

+ + )} +
-
+ +
- +
); }; diff --git a/packages/nextjs/components/Container.tsx b/packages/nextjs/components/Container.tsx new file mode 100644 index 0000000..dc35ce6 --- /dev/null +++ b/packages/nextjs/components/Container.tsx @@ -0,0 +1,9 @@ +import { clsx } from "clsx"; + +export function Container({ className, children }: { className?: string; children: React.ReactNode }) { + return ( +
+
{children}
+
+ ); +} diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx index 92b3c62..83954a0 100644 --- a/packages/nextjs/components/Footer.tsx +++ b/packages/nextjs/components/Footer.tsx @@ -1,48 +1,12 @@ -import React from "react"; -import Link from "next/link"; -import { hardhat } from "viem/chains"; -import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { HeartIcon } from "@heroicons/react/24/outline"; -import { SwitchTheme } from "~~/components/SwitchTheme"; import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo"; -import { Faucet } from "~~/components/scaffold-eth"; -import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork"; -import { useGlobalState } from "~~/services/store/store"; /** * Site footer */ export const Footer = () => { - const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrency.price); - const { targetNetwork } = useTargetNetwork(); - const isLocalNetwork = targetNetwork.id === hardhat.id; - return (
-
-
-
- {nativeCurrencyPrice > 0 && ( -
-
- - {nativeCurrencyPrice.toFixed(2)} -
-
- )} - {isLocalNetwork && ( - <> - - - - Block Explorer - - - )} -
- -
-