d-bis/impersonator
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move to nextjs

Browse Source
This commit is contained in:
apoorvlathey
2024-05-07 00:18:18 +10:00
parent 602ae4389e
commit 032785a316
49 changed files with 9867 additions and 8425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.env.sample
View File

@@ -1,5 +1,5 @@
REACT_APP_INFURA_KEY= NEXT_PUBLIC_INFURA_KEY=
REACT_APP_WC_PROJECT_ID= NEXT_PUBLIC_WC_PROJECT_ID=
REACT_APP_GITCOIN_GRANTS_ACTIVE= NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE=
REACT_APP_GITCOIN_GRANTS_LINK= NEXT_PUBLIC_GITCOIN_GRANTS_LINK=
REACT_APP_DONATION_ADDRESS= NEXT_PUBLIC_DONATION_ADDRESS=

21
.gitignore vendored
View File

@@ -1,6 +1,4 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
.env
.vercel
# dependencies # dependencies
/node_modules /node_modules
@@ -10,17 +8,28 @@
# testing # testing
/coverage /coverage
# next.js
/.next/
/out/
# production # production
/build /build
# misc # misc
.DS_Store .DS_Store
.env.local *.pem
.env.development.local
.env.test.local
.env.production.local
# debug
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
# local env files
.env*.local
# vercel
.vercel .vercel
# typescript
*.tsbuildinfo
next-env.d.ts

2
.nvmrc
View File

@@ -1 +1 @@
v18.16.1 v18.17.0

0
public/logo.png → app/icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

17
app/layout.tsx Normal file
View File

@@ -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 <IndexLayoutC>{children}</IndexLayoutC>;
}

15
app/page.tsx Normal file
View File

@@ -0,0 +1,15 @@
import Body from "@/components/Body";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
const Home = () => {
return (
<div>
<Navbar />
<Body />
<Footer />
</div>
);
};
export default Home;

44
src/index.tsx → app/providers.tsx
View File

@@ -1,7 +1,8 @@
"use client";
import "@rainbow-me/rainbowkit/styles.css"; import "@rainbow-me/rainbowkit/styles.css";
import ReactDOM from "react-dom"; import { CacheProvider } from "@chakra-ui/next-js";
import App from "./App";
import { ChakraProvider } from "@chakra-ui/react"; import { ChakraProvider } from "@chakra-ui/react";
import { import {
connectorsForWallets, connectorsForWallets,
@@ -17,8 +18,8 @@ import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { mainnet, optimism, base, arbitrum } from "wagmi/chains"; import { mainnet, optimism, base, arbitrum } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public"; import { publicProvider } from "wagmi/providers/public";
import theme from "./theme"; import theme from "@/style/theme";
import { SafeInjectProvider } from "./contexts/SafeInjectContext"; import { SafeInjectProvider } from "@/contexts/SafeInjectContext";
const { chains, publicClient } = configureChains( const { chains, publicClient } = configureChains(
// the first chain is used by rainbowWallet to determine which chain to use // the first chain is used by rainbowWallet to determine which chain to use
@@ -26,7 +27,7 @@ const { chains, publicClient } = configureChains(
[publicProvider()] [publicProvider()]
); );
const projectId = process.env.REACT_APP_WC_PROJECT_ID!; const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID!;
const connectors = connectorsForWallets([ const connectors = connectorsForWallets([
{ {
groupName: "Recommended", groupName: "Recommended",
@@ -44,19 +45,20 @@ export const wagmiConfig = createConfig({
publicClient, publicClient,
}); });
ReactDOM.render( export const Providers = ({ children }: { children: React.ReactNode }) => {
<ChakraProvider theme={theme}> return (
<WagmiConfig config={wagmiConfig}> <CacheProvider>
<RainbowKitProvider <ChakraProvider theme={theme}>
chains={chains} <WagmiConfig config={wagmiConfig}>
theme={darkTheme()} <RainbowKitProvider
modalSize={"compact"} chains={chains}
> theme={darkTheme()}
<SafeInjectProvider> modalSize={"compact"}
<App /> >
</SafeInjectProvider> <SafeInjectProvider>{children}</SafeInjectProvider>
</RainbowKitProvider> </RainbowKitProvider>
</WagmiConfig> </WagmiConfig>
</ChakraProvider>, </ChakraProvider>
document.getElementById("root") </CacheProvider>
); );
};

26
components/Analytics.tsx Normal file
View File

@@ -0,0 +1,26 @@
import Script from "next/script";
const GA_ID = "G-QFNMM9LXBY";
export const Analytics = () => {
return (
<>
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
/>
<Script
id="google-analytics"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_ID}');
`,
}}
/>
</>
);
};

0
src/components/Body/AddressInput/AddressBook/index.tsx → components/Body/AddressInput/AddressBook/index.tsx
View File

0
src/components/Body/AddressInput/index.tsx → components/Body/AddressInput/index.tsx
View File

0
src/components/Body/BrowserExtensionTab.tsx → components/Body/BrowserExtensionTab.tsx
View File

0
src/components/Body/CopyToClipboard.tsx → components/Body/CopyToClipboard.tsx
View File

0
src/components/Body/IFrameConnectTab/AppUrlLabel.tsx → components/Body/IFrameConnectTab/AppUrlLabel.tsx
View File

0
src/components/Body/IFrameConnectTab/ShareModal.tsx → components/Body/IFrameConnectTab/ShareModal.tsx
View File

0
src/components/Body/IFrameConnectTab/SupportedDapps/DappTile.tsx → components/Body/IFrameConnectTab/SupportedDapps/DappTile.tsx
View File

0
src/components/Body/IFrameConnectTab/SupportedDapps/DappsSearch.tsx → components/Body/IFrameConnectTab/SupportedDapps/DappsSearch.tsx
View File

0
src/components/Body/IFrameConnectTab/SupportedDapps/index.tsx → components/Body/IFrameConnectTab/SupportedDapps/index.tsx
View File

0
src/components/Body/IFrameConnectTab/index.tsx → components/Body/IFrameConnectTab/index.tsx
View File

0
src/components/Body/NetworkInput.tsx → components/Body/NetworkInput.tsx
View File

0
src/components/Body/NotificationBar.tsx → components/Body/NotificationBar.tsx
View File

0
src/components/Body/Tab.tsx → components/Body/Tab.tsx
View File

0
src/components/Body/TabsSelect.tsx → components/Body/TabsSelect.tsx
View File

0
src/components/Body/TenderlySettings.tsx → components/Body/TenderlySettings.tsx
View File

0
src/components/Body/TransactionRequests.tsx → components/Body/TransactionRequests.tsx
View File

0
src/components/Body/WalletConnectTab/ConnectionDetails.tsx → components/Body/WalletConnectTab/ConnectionDetails.tsx
View File

0
src/components/Body/WalletConnectTab/Loading.tsx → components/Body/WalletConnectTab/Loading.tsx
View File

0
src/components/Body/WalletConnectTab/URIInput.tsx → components/Body/WalletConnectTab/URIInput.tsx
View File

0
src/components/Body/WalletConnectTab/index.tsx → components/Body/WalletConnectTab/index.tsx
View File

17
src/components/Body/index.tsx → components/Body/index.tsx
View File

@@ -1,12 +1,7 @@
"use client";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { import { Container, useToast, Center, Spacer, Flex } from "@chakra-ui/react";
Container,
useColorMode,
useToast,
Center,
Spacer,
Flex,
} from "@chakra-ui/react";
import { SingleValue } from "chakra-react-select"; import { SingleValue } from "chakra-react-select";
// WC v2 // WC v2
@@ -37,7 +32,7 @@ const WCMetadata = {
}; };
const core = new Core({ const core = new Core({
projectId: process.env.REACT_APP_WC_PROJECT_ID, projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID,
}); });
const primaryNetworkIds = [ const primaryNetworkIds = [
@@ -70,8 +65,6 @@ const allNetworksOptions = [
]; ];
function Body() { function Body() {
const { colorMode } = useColorMode();
const bgColor = { light: "white", dark: "gray.700" };
const addressFromURL = new URLSearchParams(window.location.search).get( const addressFromURL = new URLSearchParams(window.location.search).get(
"address" "address"
); );
@@ -143,7 +136,7 @@ function Body() {
setProvider( setProvider(
new ethers.providers.JsonRpcProvider( new ethers.providers.JsonRpcProvider(
`https://mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}` `https://mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`
) )
); );

0
src/components/CustomConnectButton.tsx → components/CustomConnectButton.tsx
View File

14
src/components/Footer.tsx → components/Footer.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { useState } from "react"; import { useState } from "react";
import { import {
useColorMode,
Flex, Flex,
VStack, VStack,
Heading, Heading,
@@ -46,9 +47,6 @@ const Social = ({ icon, link }: { icon: IconProp; link: string }) => {
}; };
function Footer() { function Footer() {
const { colorMode } = useColorMode();
const underlineColor = { light: "gray.500", dark: "gray.400" };
const { isConnected } = useAccount(); const { isConnected } = useAccount();
const { chain } = useNetwork(); const { chain } = useNetwork();
@@ -64,7 +62,7 @@ function Footer() {
const handleDonate = async (value: string) => { const handleDonate = async (value: string) => {
try { try {
await sendTransaction({ await sendTransaction({
to: process.env.REACT_APP_DONATION_ADDRESS!, to: process.env.NEXT_PUBLIC_DONATION_ADDRESS!,
value: parseEther(value), value: parseEther(value),
}); });
launchConfetti(); launchConfetti();
@@ -79,7 +77,7 @@ function Footer() {
}; };
return ( return (
<Flex py="4" borderTop="2px" borderTopColor={underlineColor[colorMode]}> <Flex py="4" borderTop="2px" borderTopColor={"gray.400"}>
<Spacer flex="1" /> <Spacer flex="1" />
{showConfetti && ( {showConfetti && (
<Box zIndex={9999} position={"fixed"} top={0} left={0}> <Box zIndex={9999} position={"fixed"} top={0} left={0}>
@@ -102,11 +100,11 @@ function Footer() {
<Stack direction={{ base: "column", md: "row" }}> <Stack direction={{ base: "column", md: "row" }}>
<Center>Found the project helpful?</Center> <Center>Found the project helpful?</Center>
<HStack> <HStack>
{process.env.REACT_APP_GITCOIN_GRANTS_ACTIVE === "true" ? ( {process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE === "true" ? (
<> <>
<Text>Support it on</Text> <Text>Support it on</Text>
<Link <Link
href={process.env.REACT_APP_GITCOIN_GRANTS_LINK} href={process.env.NEXT_PUBLIC_GITCOIN_GRANTS_LINK}
isExternal isExternal
> >
<HStack fontWeight="bold" textDecor="underline"> <HStack fontWeight="bold" textDecor="underline">

7
src/components/Navbar.tsx → components/Navbar.tsx
View File

@@ -1,6 +1,5 @@
import { import {
Button, Button,
useColorMode,
Flex, Flex,
Heading, Heading,
Spacer, Spacer,
@@ -10,20 +9,16 @@ import {
Text, Text,
Image, Image,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { SunIcon, MoonIcon } from "@chakra-ui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons"; import { faGithub } from "@fortawesome/free-brands-svg-icons";
function Navbar() { function Navbar() {
const { colorMode } = useColorMode();
const underlineColor = { light: "gray.500", dark: "gray.400" };
return ( return (
<Flex <Flex
py="4" py="4"
px={["2", "4", "10", "10"]} px={["2", "4", "10", "10"]}
borderBottom="2px" borderBottom="2px"
borderBottomColor={underlineColor[colorMode]} borderBottomColor={"gray.400"}
> >
<Spacer flex="1" /> <Spacer flex="1" />
<Heading <Heading

30
components/layouts/IndexLayout.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { Providers } from "@/app/providers";
import { Analytics } from "@/components/Analytics";
export const IndexLayout = ({ children }: { children: React.ReactNode }) => {
return (
<html lang="en">
{/* Farcaster Frame */}
<head>
<meta property="fc:frame" content="vNext" />
<meta
property="fc:frame:image"
content="https://frame.impersonator.xyz/impersonator.gif"
/>
<meta
property="fc:frame:post_url"
content="https://frame.impersonator.xyz/api/frame"
/>
<meta
property="fc:frame:input:text"
content="Type ENS or Address to impersonate..."
/>
<meta property="fc:frame:button:1" content="🕵️ Start" />
</head>
<body>
<Analytics />
<Providers>{children}</Providers>
</body>
</html>
);
};

0
src/contexts/SafeInjectContext.tsx → contexts/SafeInjectContext.tsx
View File

0
src/helpers/communicator.ts → helpers/communicator.ts
View File

0
src/helpers/messageFormatter.ts → helpers/messageFormatter.ts
View File

0
src/helpers/utils.ts → helpers/utils.ts
View File

16
next.config.js Normal file
View File

@@ -0,0 +1,16 @@
const nextConfig = {
reactStrictMode: true,
webpack: (config) => {
config.resolve.fallback = { fs: false, net: false, tls: false };
config.externals.push("pino-pretty");
return config;
},
compiler: {
styledComponents: true,
},
experimental: {
windowHistorySupport: true,
},
};
module.exports = nextConfig;

43
package.json
View File

@@ -3,8 +3,15 @@
"version": "0.1.0", "version": "0.1.0",
"homepage": ".", "homepage": ".",
"private": true, "private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": { "dependencies": {
"@chakra-ui/icons": "^1.0.14", "@chakra-ui/icons": "^1.0.14",
"@chakra-ui/next-js": "^2.2.0",
"@chakra-ui/react": "^2.8.1", "@chakra-ui/react": "^2.8.1",
"@emotion/react": "^11", "@emotion/react": "^11",
"@emotion/styled": "^11", "@emotion/styled": "^11",
@@ -13,10 +20,6 @@
"@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.1.18", "@fortawesome/react-fontawesome": "^0.1.18",
"@rainbow-me/rainbowkit": "^1.0.11", "@rainbow-me/rainbowkit": "^1.0.11",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^27.4.0",
"@types/node": "^17.0.10", "@types/node": "^17.0.10",
"@types/react": "^17.0.38", "@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^17.0.11",
@@ -33,6 +36,7 @@
"ethers": "^5.4.5", "ethers": "^5.4.5",
"evm-rpcs-list": "^2.0.3", "evm-rpcs-list": "^2.0.3",
"framer-motion": "^4", "framer-motion": "^4",
"next": "^14.2.3",
"react": "^18.2.0", "react": "^18.2.0",
"react-confetti": "^6.1.0", "react-confetti": "^6.1.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
@@ -43,36 +47,7 @@
"wagmi": "^1.4.2", "wagmi": "^1.4.2",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
}, },
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
"chrome >= 67",
"edge >= 79",
"firefox >= 68",
"opera >= 54",
"safari >= 14"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"resolutions": {
"react-error-overlay": "6.0.9"
},
"devDependencies": { "devDependencies": {
"react-error-overlay": "6.0.9" "pino-pretty": "^11.0.0"
} }
} }

17855
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

93
public/index.html
View File

@@ -1,93 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-QFNMM9LXBY"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-QFNMM9LXBY");
</script>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- Primary Meta Tags -->
<title>Impersonator</title>
<meta name="title" content="Impersonator" />
<meta
name="description"
content="Impersonate any Ethereum Account and Login into DApps via WalletConnect!"
/>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.impersonator.xyz/" />
<meta property="og:title" content="Impersonator" />
<meta
property="og:description"
content="Impersonate any Ethereum Account and Login into DApps via WalletConnect!"
/>
<meta
property="og:image"
content="https://www.impersonator.xyz/metaIMG.PNG"
/>
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://www.impersonator.xyz/" />
<meta property="twitter:title" content="Impersonator" />
<meta
property="twitter:description"
content="Impersonate any Ethereum Account and Login into DApps via WalletConnect!"
/>
<meta
property="twitter:image"
content="https://www.impersonator.xyz/metaIMG.PNG"
/>
<!-- Farcaster Frame -->
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content="https://frame.impersonator.xyz/impersonator.gif" />
<meta property="fc:frame:post_url" content="https://frame.impersonator.xyz/api/frame" />
<meta property="fc:frame:input:text" content="Type ENS or Address to impersonate..." />
<meta property="fc:frame:button:1" content="🕵️ Start" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

15
public/manifest.json
View File

@@ -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"
}

15
src/App.tsx
View File

@@ -1,15 +0,0 @@
import Body from "./components/Body";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
function App() {
return (
<div>
<Navbar />
<Body />
<Footer />
</div>
);
}
export default App;

1
src/react-app-env.d.ts vendored
View File

@@ -1 +0,0 @@
/// <reference types="react-scripts" />

0
src/styles/scroll.css → style/scroll.css
View File

0
src/theme.ts → style/theme.ts
View File

23
tsconfig.json
View File

@@ -1,20 +1,29 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ESNext", "target": "ES2020",
"lib": ["dom", "dom.iterable", "esnext"], "lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true, "strict": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true, "noEmit": true,
"esModuleInterop": true,
"module": "esnext", "module": "esnext",
"moduleResolution": "node", "moduleResolution": "node",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"noEmit": true, "jsx": "preserve",
"jsx": "react-jsx" "incremental": true,
"plugins": [
{
"name": "next"
}
],
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}, },
"include": ["src"] "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
} }

0
src/types.ts → types.ts
View File

28
utils/index.ts Normal file
View File

@@ -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;
};