From c2f840040712b5f487ec07238aaafb2ce60ea0a4 Mon Sep 17 00:00:00 2001 From: Nick Koukis Date: Wed, 4 Oct 2023 18:16:39 +0300 Subject: [PATCH] init project --- package.json | 11 +- src/api/net.config.ts | 18 +++ src/config.devnet.ts | 36 +++++ src/config.ts | 36 +++++ src/hoc/withDappProvider.tsx | 64 ++++++++ src/lib/auth.ts | 12 ++ src/pages/_app.tsx | 15 +- src/pages/api/auth/[...nextauth].ts | 14 ++ src/pages/api/hello.ts | 13 -- src/pages/index.tsx | 122 ++------------- src/styles/Home.module.css | 229 ---------------------------- src/styles/globals.css | 107 ------------- 12 files changed, 213 insertions(+), 464 deletions(-) create mode 100644 src/api/net.config.ts create mode 100644 src/config.devnet.ts create mode 100644 src/config.ts create mode 100644 src/hoc/withDappProvider.tsx create mode 100644 src/lib/auth.ts create mode 100644 src/pages/api/auth/[...nextauth].ts delete mode 100644 src/pages/api/hello.ts diff --git a/package.json b/package.json index d493624..3f0f91e 100644 --- a/package.json +++ b/package.json @@ -9,16 +9,19 @@ "lint": "next lint" }, "dependencies": { + "@multiversx/sdk-dapp": "^2.22.1", + "@multiversx/sdk-wallet": "^4.2.0", + "next": "13.5.4", + "next-auth": "^4.23.2", "react": "^18", - "react-dom": "^18", - "next": "13.5.4" + "react-dom": "^18" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", - "eslint-config-next": "13.5.4" + "eslint-config-next": "13.5.4", + "typescript": "^5" } } diff --git a/src/api/net.config.ts b/src/api/net.config.ts new file mode 100644 index 0000000..ddc71dd --- /dev/null +++ b/src/api/net.config.ts @@ -0,0 +1,18 @@ + +const { + network, + contractAddress, + GAS_LIMIT, + ENVIROMENT, + TOKENS_ID, + ChainID, + QXTAGSLINK +} = require("config.devnet"); + +export const tokensID = TOKENS_ID; +export const environment = ENVIROMENT; +export const contractAddr = contractAddress; +export const gasLimit = GAS_LIMIT; +export const ChainId = ChainID; +export const QxTagsLink = QXTAGSLINK; +export { network }; \ No newline at end of file diff --git a/src/config.devnet.ts b/src/config.devnet.ts new file mode 100644 index 0000000..8db7462 --- /dev/null +++ b/src/config.devnet.ts @@ -0,0 +1,36 @@ +export const contractAddress = { + hoot: '', + qxtags: "" +} +export const ENVIROMENT = "devnet"; + +export const ChainID = "D"; +export const network = { + id: "devnet", + name: "Devnet", + egldLabel: "xEGLD", + walletAddress: "https://devnet-wallet.multiversx.com", + apiAddress: "https://devnet-api.multiversx.com", + gatewayAddress: "https://devnet-api.multiversx.com", + explorerAddress: "http://devnet-explorer.multiversx.com", + graphQlAddress: "https://devnet-exchange-graph.multiversx.com/graphql", + apiTimeout: 10000, +}; + +export const GAS_LIMIT = 60000000; + +//general configs +export const apiTimeout = 6000; +export const TOOLS_API_URL = "https://tools.multiversx.com"; +export const sampleAuthenticatedDomains = [TOOLS_API_URL]; + +export const QXTAGSLINK = "https://quantum-original-dev.vercel.app/qtags" + +export const walletConnectBridge = "https://bridge.walletconnect.org"; + +export const walletConnectDeepLink = + "https://maiar.page.link/?apn=com.multiversx.maiar.wallet&isi=1519405832&ibi=com.multiversx.maiar.wallet&link=https://maiar.com/"; + +export const TOKENS_ID = { + wegld: "WEGLD-d7c6bb" +}; diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 0000000..8db7462 --- /dev/null +++ b/src/config.ts @@ -0,0 +1,36 @@ +export const contractAddress = { + hoot: '', + qxtags: "" +} +export const ENVIROMENT = "devnet"; + +export const ChainID = "D"; +export const network = { + id: "devnet", + name: "Devnet", + egldLabel: "xEGLD", + walletAddress: "https://devnet-wallet.multiversx.com", + apiAddress: "https://devnet-api.multiversx.com", + gatewayAddress: "https://devnet-api.multiversx.com", + explorerAddress: "http://devnet-explorer.multiversx.com", + graphQlAddress: "https://devnet-exchange-graph.multiversx.com/graphql", + apiTimeout: 10000, +}; + +export const GAS_LIMIT = 60000000; + +//general configs +export const apiTimeout = 6000; +export const TOOLS_API_URL = "https://tools.multiversx.com"; +export const sampleAuthenticatedDomains = [TOOLS_API_URL]; + +export const QXTAGSLINK = "https://quantum-original-dev.vercel.app/qtags" + +export const walletConnectBridge = "https://bridge.walletconnect.org"; + +export const walletConnectDeepLink = + "https://maiar.page.link/?apn=com.multiversx.maiar.wallet&isi=1519405832&ibi=com.multiversx.maiar.wallet&link=https://maiar.com/"; + +export const TOKENS_ID = { + wegld: "WEGLD-d7c6bb" +}; diff --git a/src/hoc/withDappProvider.tsx b/src/hoc/withDappProvider.tsx new file mode 100644 index 0000000..0323cb2 --- /dev/null +++ b/src/hoc/withDappProvider.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { DappProvider } from '@multiversx/sdk-dapp/wrappers/DappProvider'; +import type { AppProps } from 'next/app'; +import { network } from "../api/net.config"; +import dynamic from "next/dynamic"; +import { AxiosInterceptorContext } from "@multiversx/sdk-dapp/wrappers/AxiosInterceptorContext"; +import { sampleAuthenticatedDomains } from "../config"; + +const SignTransactionsModals: any = dynamic( + async () => { + return (await import("@multiversx/sdk-dapp/UI/SignTransactionsModals")) + .SignTransactionsModals; + }, + { ssr: false } +); +const NotificationModal: any = dynamic( + async () => { + return (await import("@multiversx/sdk-dapp/UI/NotificationModal")) + .NotificationModal; + }, + { ssr: false } +); +const TransactionsToastList: any = dynamic( + async () => { + return (await import("@multiversx/sdk-dapp/UI/TransactionsToastList")) + .TransactionsToastList; + }, + { ssr: false } +); + +const withDappProvider = (WrappedComponent: React.ComponentType) => { + const WithDappProvider: React.FC = (props) => { + return ( + + {/* @ts-ignore */} + + + <> + + + + + + + + + + ); + }; + + return WithDappProvider; +}; +export default withDappProvider; diff --git a/src/lib/auth.ts b/src/lib/auth.ts new file mode 100644 index 0000000..5a492d7 --- /dev/null +++ b/src/lib/auth.ts @@ -0,0 +1,12 @@ +import { NextAuthOptions, User } from "next-auth"; +import GoogleProvider from "next-auth/providers/google"; + + +export const authConfig: NextAuthOptions = { + providers: [ + GoogleProvider({ + clientId: process.env.GOOGLE_CLIENT_ID || "", + clientSecret: process.env.GOOGLE_CLIENT_SECRET || "", + }), + ], +}; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 021681f..dcaf062 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,13 @@ -import '@/styles/globals.css' +import { SessionProvider } from "next-auth/react" import type { AppProps } from 'next/app' -export default function App({ Component, pageProps }: AppProps) { - return -} +export default function App({ + Component, + pageProps: { session, ...pageProps }, +}: AppProps) { + return ( + + + + ) +} \ No newline at end of file diff --git a/src/pages/api/auth/[...nextauth].ts b/src/pages/api/auth/[...nextauth].ts new file mode 100644 index 0000000..6611b98 --- /dev/null +++ b/src/pages/api/auth/[...nextauth].ts @@ -0,0 +1,14 @@ +import NextAuth from "next-auth" +import GoogleProvider from "next-auth/providers/google" + +export const authOptions = { + providers: [ + GoogleProvider({ + clientId: process.env.GOOGLE_CLIENT_ID || "", + clientSecret: process.env.GOOGLE_CLIENT_SECRET || "", + }), + ], +} + +export default NextAuth(authOptions) + diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts deleted file mode 100644 index f8bcc7e..0000000 --- a/src/pages/api/hello.ts +++ /dev/null @@ -1,13 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction -import type { NextApiRequest, NextApiResponse } from 'next' - -type Data = { - name: string -} - -export default function handler( - req: NextApiRequest, - res: NextApiResponse -) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 27c489b..c584e41 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,114 +1,22 @@ -import Head from 'next/head' -import Image from 'next/image' -import { Inter } from 'next/font/google' -import styles from '@/styles/Home.module.css' - -const inter = Inter({ subsets: ['latin'] }) +import { useSession, signIn, signOut } from "next-auth/react" export default function Home() { + + const { data: session } = useSession() + console.log(session); + + if (session) { + return ( + <> + Signed in as {session?.user?.email}
+ + + ) + } return ( <> - - Create Next App - - - - -
-
-

- Get started by editing  - src/pages/index.tsx -

- -
- -
- Next.js Logo -
- - -
+ Not signed in
+ ) } diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css index 6676d2c..e69de29 100644 --- a/src/styles/Home.module.css +++ b/src/styles/Home.module.css @@ -1,229 +0,0 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 6rem; - min-height: 100vh; -} - -.description { - display: inherit; - justify-content: inherit; - align-items: inherit; - font-size: 0.85rem; - max-width: var(--max-width); - width: 100%; - z-index: 2; - font-family: var(--font-mono); -} - -.description a { - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; -} - -.description p { - position: relative; - margin: 0; - padding: 1rem; - background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); - border-radius: var(--border-radius); -} - -.code { - font-weight: 700; - font-family: var(--font-mono); -} - -.grid { - display: grid; - grid-template-columns: repeat(4, minmax(25%, auto)); - max-width: 100%; - width: var(--max-width); -} - -.card { - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0); - transition: background 200ms, border 200ms; -} - -.card span { - display: inline-block; - transition: transform 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; -} - -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - max-width: 30ch; -} - -.center { - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding: 4rem 0; -} - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; -} - -.center::after { - background: var(--primary-glow); - width: 240px; - height: 180px; - z-index: -1; -} - -.center::before, -.center::after { - content: ''; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); -} - -.logo { - position: relative; -} -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - .card:hover { - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - } - - .card:hover span { - transform: translateX(4px); - } -} - -@media (prefers-reduced-motion) { - .card:hover span { - transform: none; - } -} - -/* Mobile */ -@media (max-width: 700px) { - .content { - padding: 4rem; - } - - .grid { - grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; - text-align: center; - } - - .card { - padding: 1rem 2.5rem; - } - - .card h2 { - margin-bottom: 0.5rem; - } - - .center { - padding: 8rem 0 6rem; - } - - .center::before { - transform: none; - height: 300px; - } - - .description { - font-size: 0.8rem; - } - - .description a { - padding: 1rem; - } - - .description p, - .description div { - display: flex; - justify-content: center; - position: fixed; - width: 100%; - } - - .description p { - align-items: center; - inset: 0 0 auto; - padding: 2rem 1rem 1.4rem; - border-radius: 0; - border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); - background: linear-gradient( - to bottom, - rgba(var(--background-start-rgb), 1), - rgba(var(--callout-rgb), 0.5) - ); - background-clip: padding-box; - backdrop-filter: blur(24px); - } - - .description div { - align-items: flex-end; - pointer-events: none; - inset: auto 0 0; - padding: 2rem; - height: 200px; - background: linear-gradient( - to bottom, - transparent 0%, - rgb(var(--background-end-rgb)) 40% - ); - z-index: 1; - } -} - -/* Tablet and Smaller Desktop */ -@media (min-width: 701px) and (max-width: 1120px) { - .grid { - grid-template-columns: repeat(2, 50%); - } -} - -@media (prefers-color-scheme: dark) { - .vercelLogo { - filter: invert(1); - } - - .logo { - filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); - } -} - -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} diff --git a/src/styles/globals.css b/src/styles/globals.css index d4f491e..e69de29 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,107 +0,0 @@ -:root { - --max-width: 1100px; - --border-radius: 12px; - --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', - 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', - 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; - - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; - - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient( - rgba(255, 255, 255, 1), - rgba(255, 255, 255, 0) - ); - - --tile-start-rgb: 239, 245, 249; - --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); - - --callout-rgb: 238, 240, 241; - --callout-border-rgb: 172, 175, 176; - --card-rgb: 180, 185, 188; - --card-border-rgb: 131, 134, 135; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - - --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient( - to bottom right, - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0.3) - ); - - --tile-start-rgb: 2, 13, 46; - --tile-end-rgb: 2, 5, 19; - --tile-border: conic-gradient( - #ffffff80, - #ffffff40, - #ffffff30, - #ffffff20, - #ffffff10, - #ffffff10, - #ffffff80 - ); - - --callout-rgb: 20, 20, 20; - --callout-border-rgb: 108, 108, 108; - --card-rgb: 100, 100, 100; - --card-border-rgb: 200, 200, 200; - } -} - -* { - box-sizing: border-box; - padding: 0; - margin: 0; -} - -html, -body { - max-width: 100vw; - overflow-x: hidden; -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - -a { - color: inherit; - text-decoration: none; -} - -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } -}