From 032785a31603681b41546cc4a236a049e2cfb653 Mon Sep 17 00:00:00 2001 From: apoorvlathey Date: Tue, 7 May 2024 00:18:18 +1000 Subject: [PATCH] feat: move to nextjs --- .env.sample | 10 +- .gitignore | 21 +- .nvmrc | 2 +- public/logo.png => app/icon.png | Bin app/layout.tsx | 17 + app/page.tsx | 15 + src/index.tsx => app/providers.tsx | 44 +- components/Analytics.tsx | 26 + .../Body/AddressInput/AddressBook/index.tsx | 0 .../Body/AddressInput/index.tsx | 0 .../Body/BrowserExtensionTab.tsx | 0 .../Body/CopyToClipboard.tsx | 0 .../Body/IFrameConnectTab/AppUrlLabel.tsx | 0 .../Body/IFrameConnectTab/ShareModal.tsx | 0 .../SupportedDapps/DappTile.tsx | 0 .../SupportedDapps/DappsSearch.tsx | 0 .../IFrameConnectTab/SupportedDapps/index.tsx | 0 .../Body/IFrameConnectTab/index.tsx | 0 .../Body/NetworkInput.tsx | 0 .../Body/NotificationBar.tsx | 0 {src/components => components}/Body/Tab.tsx | 0 .../Body/TabsSelect.tsx | 0 .../Body/TenderlySettings.tsx | 0 .../Body/TransactionRequests.tsx | 0 .../WalletConnectTab/ConnectionDetails.tsx | 0 .../Body/WalletConnectTab/Loading.tsx | 0 .../Body/WalletConnectTab/URIInput.tsx | 0 .../Body/WalletConnectTab/index.tsx | 0 {src/components => components}/Body/index.tsx | 17 +- .../CustomConnectButton.tsx | 0 {src/components => components}/Footer.tsx | 14 +- {src/components => components}/Navbar.tsx | 7 +- components/layouts/IndexLayout.tsx | 30 + .../SafeInjectContext.tsx | 0 {src/helpers => helpers}/communicator.ts | 0 {src/helpers => helpers}/messageFormatter.ts | 0 {src/helpers => helpers}/utils.ts | 0 next.config.js | 16 + package.json | 43 +- pnpm-lock.yaml | 17855 +++++++++------- public/index.html | 93 - public/manifest.json | 15 - src/App.tsx | 15 - src/react-app-env.d.ts | 1 - {src/styles => style}/scroll.css | 0 {src => style}/theme.ts | 0 tsconfig.json | 23 +- src/types.ts => types.ts | 0 utils/index.ts | 28 + 49 files changed, 9867 insertions(+), 8425 deletions(-) rename public/logo.png => app/icon.png (100%) create mode 100644 app/layout.tsx create mode 100644 app/page.tsx rename src/index.tsx => app/providers.tsx (59%) create mode 100644 components/Analytics.tsx rename {src/components => components}/Body/AddressInput/AddressBook/index.tsx (100%) rename {src/components => components}/Body/AddressInput/index.tsx (100%) rename {src/components => components}/Body/BrowserExtensionTab.tsx (100%) rename {src/components => components}/Body/CopyToClipboard.tsx (100%) rename {src/components => components}/Body/IFrameConnectTab/AppUrlLabel.tsx (100%) rename {src/components => components}/Body/IFrameConnectTab/ShareModal.tsx (100%) rename {src/components => components}/Body/IFrameConnectTab/SupportedDapps/DappTile.tsx (100%) rename {src/components => components}/Body/IFrameConnectTab/SupportedDapps/DappsSearch.tsx (100%) rename {src/components => components}/Body/IFrameConnectTab/SupportedDapps/index.tsx (100%) rename {src/components => components}/Body/IFrameConnectTab/index.tsx (100%) rename {src/components => components}/Body/NetworkInput.tsx (100%) rename {src/components => components}/Body/NotificationBar.tsx (100%) rename {src/components => components}/Body/Tab.tsx (100%) rename {src/components => components}/Body/TabsSelect.tsx (100%) rename {src/components => components}/Body/TenderlySettings.tsx (100%) rename {src/components => components}/Body/TransactionRequests.tsx (100%) rename {src/components => components}/Body/WalletConnectTab/ConnectionDetails.tsx (100%) rename {src/components => components}/Body/WalletConnectTab/Loading.tsx (100%) rename {src/components => components}/Body/WalletConnectTab/URIInput.tsx (100%) rename {src/components => components}/Body/WalletConnectTab/index.tsx (100%) rename {src/components => components}/Body/index.tsx (98%) rename {src/components => components}/CustomConnectButton.tsx (100%) rename {src/components => components}/Footer.tsx (94%) rename {src/components => components}/Navbar.tsx (82%) create mode 100644 components/layouts/IndexLayout.tsx rename {src/contexts => contexts}/SafeInjectContext.tsx (100%) rename {src/helpers => helpers}/communicator.ts (100%) rename {src/helpers => helpers}/messageFormatter.ts (100%) rename {src/helpers => helpers}/utils.ts (100%) create mode 100644 next.config.js delete mode 100644 public/index.html delete mode 100644 public/manifest.json delete mode 100644 src/App.tsx delete mode 100644 src/react-app-env.d.ts rename {src/styles => style}/scroll.css (100%) rename {src => style}/theme.ts (100%) rename src/types.ts => types.ts (100%) create mode 100644 utils/index.ts diff --git a/.env.sample b/.env.sample index cabc3c7..5af015e 100644 --- a/.env.sample +++ b/.env.sample @@ -1,5 +1,5 @@ -REACT_APP_INFURA_KEY= -REACT_APP_WC_PROJECT_ID= -REACT_APP_GITCOIN_GRANTS_ACTIVE= -REACT_APP_GITCOIN_GRANTS_LINK= -REACT_APP_DONATION_ADDRESS= \ No newline at end of file +NEXT_PUBLIC_INFURA_KEY= +NEXT_PUBLIC_WC_PROJECT_ID= +NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE= +NEXT_PUBLIC_GITCOIN_GRANTS_LINK= +NEXT_PUBLIC_DONATION_ADDRESS= \ No newline at end of file diff --git a/.gitignore b/.gitignore index 1dd4471..8f322f0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,4 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. -.env -.vercel # dependencies /node_modules @@ -10,17 +8,28 @@ # testing /coverage +# next.js +/.next/ +/out/ + # production /build # misc .DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local +*.pem +# debug npm-debug.log* yarn-debug.log* yarn-error.log* + +# local env files +.env*.local + +# vercel .vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/.nvmrc b/.nvmrc index 95d62e4..7950a44 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18.16.1 \ No newline at end of file +v18.17.0 diff --git a/public/logo.png b/app/icon.png similarity index 100% rename from public/logo.png rename to app/icon.png diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..94249a7 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,17 @@ +import { IndexLayout as IndexLayoutC } from "@/components/layouts/IndexLayout"; +import { getMetadata } from "@/utils"; + +export const metadata = getMetadata({ + title: "Impersonator", + description: + "Impersonate any Ethereum Account and Login into DApps via WalletConnect, iframe or Extension!", + images: "https://www.impersonator.xyz/metaIMG.PNG", +}); + +export default function IndexLayout({ + children, +}: { + children: React.ReactNode; +}) { + return {children}; +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..9c0ac0c --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,15 @@ +import Body from "@/components/Body"; +import Navbar from "@/components/Navbar"; +import Footer from "@/components/Footer"; + +const Home = () => { + return ( +
+ + +
+
+ ); +}; + +export default Home; diff --git a/src/index.tsx b/app/providers.tsx similarity index 59% rename from src/index.tsx rename to app/providers.tsx index cfb0a38..2e385c0 100644 --- a/src/index.tsx +++ b/app/providers.tsx @@ -1,7 +1,8 @@ +"use client"; + import "@rainbow-me/rainbowkit/styles.css"; -import ReactDOM from "react-dom"; -import App from "./App"; +import { CacheProvider } from "@chakra-ui/next-js"; import { ChakraProvider } from "@chakra-ui/react"; import { connectorsForWallets, @@ -17,8 +18,8 @@ import { configureChains, createConfig, WagmiConfig } from "wagmi"; import { mainnet, optimism, base, arbitrum } from "wagmi/chains"; import { publicProvider } from "wagmi/providers/public"; -import theme from "./theme"; -import { SafeInjectProvider } from "./contexts/SafeInjectContext"; +import theme from "@/style/theme"; +import { SafeInjectProvider } from "@/contexts/SafeInjectContext"; const { chains, publicClient } = configureChains( // the first chain is used by rainbowWallet to determine which chain to use @@ -26,7 +27,7 @@ const { chains, publicClient } = configureChains( [publicProvider()] ); -const projectId = process.env.REACT_APP_WC_PROJECT_ID!; +const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID!; const connectors = connectorsForWallets([ { groupName: "Recommended", @@ -44,19 +45,20 @@ export const wagmiConfig = createConfig({ publicClient, }); -ReactDOM.render( - - - - - - - - - , - document.getElementById("root") -); +export const Providers = ({ children }: { children: React.ReactNode }) => { + return ( + + + + + {children} + + + + + ); +}; diff --git a/components/Analytics.tsx b/components/Analytics.tsx new file mode 100644 index 0000000..23a0da6 --- /dev/null +++ b/components/Analytics.tsx @@ -0,0 +1,26 @@ +import Script from "next/script"; + +const GA_ID = "G-QFNMM9LXBY"; + +export const Analytics = () => { + return ( + <> + - - - - - - - - - - - - Impersonator - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index add95c1..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "short_name": "React App", - "name": "Impersonator", - "icons": [ - { - "src": "logo.png", - "type": "image/png", - "sizes": "418x418" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 1e5beab..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Body from "./components/Body"; -import Navbar from "./components/Navbar"; -import Footer from "./components/Footer"; - -function App() { - return ( -
- - -
-
- ); -} - -export default App; diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts deleted file mode 100644 index 6431bc5..0000000 --- a/src/react-app-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/src/styles/scroll.css b/style/scroll.css similarity index 100% rename from src/styles/scroll.css rename to style/scroll.css diff --git a/src/theme.ts b/style/theme.ts similarity index 100% rename from src/theme.ts rename to style/theme.ts diff --git a/tsconfig.json b/tsconfig.json index 4ccada2..1e74a72 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,20 +1,29 @@ { "compilerOptions": { - "target": "ESNext", + "target": "ES2020", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, + "noEmit": true, + "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "baseUrl": ".", + "paths": { + "@/*": ["./*"] + } }, - "include": ["src"] + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] } diff --git a/src/types.ts b/types.ts similarity index 100% rename from src/types.ts rename to types.ts diff --git a/utils/index.ts b/utils/index.ts new file mode 100644 index 0000000..6f1f0d4 --- /dev/null +++ b/utils/index.ts @@ -0,0 +1,28 @@ +import { Metadata } from "next"; + +export const getMetadata = (_metadata: { + title: string; + description: string; + images: string; +}) => { + const metadata: Metadata = { + title: _metadata.title, + description: _metadata.description, + twitter: { + card: "summary_large_image", + creator: "@apoorvlathey", + title: _metadata.title, + description: _metadata.description, + images: _metadata.images, + }, + openGraph: { + type: "website", + title: _metadata.title, + description: _metadata.description, + images: _metadata.images, + }, + robots: "index, follow", + }; + + return metadata; +};