diff --git a/package-lock.json b/package-lock.json index a3cdd22..c59a445 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,9 +16,11 @@ "bip39": "^3.1.0", "ed25519-hd-key": "^1.3.0", "ethers": "^6.13.2", + "lucide-react": "^0.446.0", "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.26.2", "tweetnacl": "^1.0.3", "vite-plugin-node-polyfills": "^0.22.0" }, @@ -1443,6 +1445,15 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@remix-run/router": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", + "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-inject": { "version": "5.0.5", "resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz", @@ -5249,6 +5260,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.446.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.446.0.tgz", + "integrity": "sha512-BU7gy8MfBMqvEdDPH79VhOXSEgyG8TSPOKWaExWGCQVqnGH7wGgDngPbofu+KdtVjPQBWbEmnfMTq90CTiiDRg==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" + } + }, "node_modules/magic-string": { "version": "0.30.11", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz", @@ -6221,6 +6241,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", + "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", + "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.2", + "react-router": "6.26.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index c891062..545c180 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,11 @@ "bip39": "^3.1.0", "ed25519-hd-key": "^1.3.0", "ethers": "^6.13.2", + "lucide-react": "^0.446.0", "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.26.2", "tweetnacl": "^1.0.3", "vite-plugin-node-polyfills": "^0.22.0" }, diff --git a/src/App.jsx b/src/App.jsx index 1e3ffed..70e9eed 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,54 +1,20 @@ -import { useState } from 'react'; -import { generateMnemonic } from 'bip39'; -import { SolanaWallet } from './components/SolanaWallet'; -import { EthWallet } from './components/ETHWallet'; -import MnemonicContainer from './components/MnemonicContainer'; +// App.jsx +import { Route, Routes } from 'react-router-dom'; import { Analytics } from '@vercel/analytics/react'; +import Home from './pages/Home'; +import DAppBrowserPage from './pages/DAppBrowserPage'; +import Navbar from './components/Navbar'; function App() { - const [mnemonic, setMnemonic] = useState(''); - const [buttonText, setButtonText] = useState('Create Seed Phrase'); - const [isMnemonicGenerated, setIsMnemonicGenerated] = useState(false); - - const handleGenerateMnemonic = async () => { - const mn = await generateMnemonic(); - setMnemonic(mn); - - // Only change text and color if it's not already generated - if (!isMnemonicGenerated) { - setButtonText('Phrase Changed!'); - setIsMnemonicGenerated(true); - - // Reset the button text after 2 seconds - setTimeout(() => { - setButtonText('Create Seed Phrase'); - setIsMnemonicGenerated(false); - }, 1000); - } - }; - return ( - <> - -
-

Wallet Generator

- - - - -
- {mnemonic && } - {mnemonic && } -
-
- + <> + + + + } /> + } /> + + ); } diff --git a/src/components/ETHWallet.jsx b/src/components/ETHWallet.jsx index 26d42fd..7fbab25 100644 --- a/src/components/ETHWallet.jsx +++ b/src/components/ETHWallet.jsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { mnemonicToSeed } from "bip39"; import { Wallet, HDNodeWallet } from "ethers"; -export const EthWallet = ({ mnemonic }) => { +const EthWallet = ({ mnemonic }) => { const [currentIndex, setCurrentIndex] = useState(0); const [addresses, setAddresses] = useState([]); const [buttonText, setButtonText] = useState('Add Ethereum Wallet'); @@ -49,3 +49,5 @@ export const EthWallet = ({ mnemonic }) => { ); }; + +export default EthWallet; diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx new file mode 100644 index 0000000..e5e5127 --- /dev/null +++ b/src/components/Navbar.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { Globe } from 'lucide-react'; + +const Navbar = () => { + return ( + + ); +}; + +export default Navbar; diff --git a/src/components/SolanaWallet.jsx b/src/components/SolanaWallet.jsx index 51df985..7810e87 100644 --- a/src/components/SolanaWallet.jsx +++ b/src/components/SolanaWallet.jsx @@ -4,7 +4,7 @@ import { derivePath } from "ed25519-hd-key"; import { Keypair } from "@solana/web3.js"; import nacl from "tweetnacl"; -export function SolanaWallet({ mnemonic }) { +function SolanaWallet({ mnemonic }) { const [currentIndex, setCurrentIndex] = useState(0); const [publicKeys, setPublicKeys] = useState([]); const [buttonText, setButtonText] = useState('Add Solana Wallet'); @@ -52,3 +52,5 @@ export function SolanaWallet({ mnemonic }) { ); } + +export default SolanaWallet; // Default export diff --git a/src/main.jsx b/src/main.jsx index 89f91e5..8a3b810 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,13 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import App from './App.jsx' -import './index.css' +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; +import { BrowserRouter } from 'react-router-dom'; +import App from './App.jsx'; +import './index.css'; createRoot(document.getElementById('root')).render( - - , -) + + + + +); diff --git a/src/pages/DAppBrowserPage.jsx b/src/pages/DAppBrowserPage.jsx new file mode 100644 index 0000000..7ce6658 --- /dev/null +++ b/src/pages/DAppBrowserPage.jsx @@ -0,0 +1,84 @@ +import React, { useState, useRef, Suspense, lazy } from 'react'; +import { Globe, Loader } from 'lucide-react'; + +const LazyIframe = lazy(() => new Promise(resolve => { + setTimeout(() => { + resolve({ + default: ({ src, title }) => ( +