diff --git a/app/ThemeProvider.js b/app/ThemeProvider.js new file mode 100644 index 000000000..057cbfb56 --- /dev/null +++ b/app/ThemeProvider.js @@ -0,0 +1,23 @@ +// React +import React, { createContext, useState, useContext } from 'react'; + +// Create a context for the theme +const ThemeContext = createContext(); + +// Create a provider that will hold the state and enable it to be modified +export const ThemeProvider = ({ children }) => { + const [theme, setTheme] = useState('light'); + + const toggleTheme = () => { + setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')); + }; + + return ( + + {children} + + ); +}; + +// Create a custom hook that will allow our components to easily access and modify the theme +export const useTheme = () => useContext(ThemeContext); \ No newline at end of file diff --git a/app/frontend/primtives/cards.jsx b/app/components/cards.js similarity index 100% rename from app/frontend/primtives/cards.jsx rename to app/components/cards.js diff --git a/app/App.jsx b/app/components/contracts/crowdfunding.jsx similarity index 100% rename from app/App.jsx rename to app/components/contracts/crowdfunding.jsx diff --git a/app/_app.jsx b/app/components/contracts/marketplace.jsx similarity index 100% rename from app/_app.jsx rename to app/components/contracts/marketplace.jsx diff --git a/app/frontend/styles/bitcellular.sass b/app/components/contracts/startups.jsx similarity index 100% rename from app/frontend/styles/bitcellular.sass rename to app/components/contracts/startups.jsx diff --git a/app/frontend/styles/layouts.sass b/app/components/layouts/BlendedMode/BlendedMode.tsx similarity index 100% rename from app/frontend/styles/layouts.sass rename to app/components/layouts/BlendedMode/BlendedMode.tsx diff --git a/app/frontend/styles/nano-node.sass b/app/components/layouts/BlendedWalletMode/BlendedWalletMode.tsx similarity index 100% rename from app/frontend/styles/nano-node.sass rename to app/components/layouts/BlendedWalletMode/BlendedWalletMode.tsx diff --git a/app/frontend/styles/socket-chat.sass b/app/components/layouts/FullScreenMode/FullScreenMode.tsx similarity index 100% rename from app/frontend/styles/socket-chat.sass rename to app/components/layouts/FullScreenMode/FullScreenMode.tsx diff --git a/app/frontend/styles/the-public.sass b/app/components/layouts/NormalMode/NormalMode.tsx similarity index 100% rename from app/frontend/styles/the-public.sass rename to app/components/layouts/NormalMode/NormalMode.tsx diff --git a/app/frontend/styles/txn-tracker.sass b/app/components/layouts/WalletMode/WalletMode.tsx similarity index 100% rename from app/frontend/styles/txn-tracker.sass rename to app/components/layouts/WalletMode/WalletMode.tsx diff --git a/app/frontend/primtives/navigation.jsx b/app/components/navigation.js similarity index 100% rename from app/frontend/primtives/navigation.jsx rename to app/components/navigation.js diff --git a/app/frontend/primtives/vm-component.jsx b/app/components/vm-component.js similarity index 100% rename from app/frontend/primtives/vm-component.jsx rename to app/components/vm-component.js diff --git a/app/config.js b/app/config.js new file mode 100644 index 000000000..c10fed91d --- /dev/null +++ b/app/config.js @@ -0,0 +1,21 @@ +export const NetworkId = 'testnet'; + +export const HelloNearContract = { + mainnet: 'hello.near-examples.near', + testnet: 'hello.near-examples.testnet', +} + +export const ComponentMap = { + mainnet: { + socialDB: 'social.near', + Lido: 'zavodil.near/widget/Lido', + HelloNear: 'gagdiez.near/widget/HelloNear', + LoveNear: 'gagdiez.near/widget/LoveNear', + }, + testnet: { + socialDB: 'v1.social08.testnet', + Lido: 'influencer.testnet/widget/Lido', + HelloNear: 'influencer.testnet/widget/HelloNear', + LoveNear: 'influencer.testnet/widget/LoveNear', + } +} \ No newline at end of file diff --git a/app/context/ThemeProvider.js b/app/context/ThemeProvider.js new file mode 100644 index 000000000..057cbfb56 --- /dev/null +++ b/app/context/ThemeProvider.js @@ -0,0 +1,23 @@ +// React +import React, { createContext, useState, useContext } from 'react'; + +// Create a context for the theme +const ThemeContext = createContext(); + +// Create a provider that will hold the state and enable it to be modified +export const ThemeProvider = ({ children }) => { + const [theme, setTheme] = useState('light'); + + const toggleTheme = () => { + setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')); + }; + + return ( + + {children} + + ); +}; + +// Create a custom hook that will allow our components to easily access and modify the theme +export const useTheme = () => useContext(ThemeContext); \ No newline at end of file diff --git a/app/frontend/cards.js b/app/frontend/cards.js new file mode 100644 index 000000000..0db202904 --- /dev/null +++ b/app/frontend/cards.js @@ -0,0 +1,46 @@ +import styles from '../contracts/app.module.css'; + +export const DocsCard = () => { + return ( + +

+ Near Docs -> +

+

Learn how this application works, and what you can build on Near.

+ ); +}; + +export const HelloNearCard = () => { + return ( + +

+ Near Integration -> +

+

Discover how simple it is to interact with a Near smart contract.

+ + ); +}; + +export const HelloComponentsCard = () => { + return ( + +

+ Web3 Components -> +

+

See how Web3 components can help you to create multi-chain apps.

+ + ); +}; \ No newline at end of file diff --git a/app/frontend/components/Contribute.tsx b/app/frontend/components/Contribute.tsx deleted file mode 100644 index bc2482aa1..000000000 --- a/app/frontend/components/Contribute.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import React from "react"; - -export const Box = (): JSX.Element => { - return ( -
-
-
-
-
- Next -
- Next -
-
-
-
- Previous -
- Previous -
-
-
-
-
- Apply Here -
-
-
-
-
-
-
- Grant Round Title -
-
- Project Title -
-
-
-
-
-
-
- Grant Round Title -
-
- Project Title -
-
-
-
-
-
-
- Grant Round Title -
-
- Project Title -
-
-
-
-
-
-
-
- Bulleted list - Funnel -
- Search -
-
-
-
-
- Current Grant Rounds -
-
- Gitcoin jpeg - Gitcoin svg -
-
-
-
-
-
-
- Start Ups -
-
- Crowdfunding -
-
- Menu toggle -
-
-
-
- ); -}; diff --git a/app/frontend/contracts/crowdfunding.jsx b/app/frontend/contracts/crowdfunding.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/app/frontend/contracts/marketplace.jsx b/app/frontend/contracts/marketplace.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/app/frontend/contracts/startups.jsx b/app/frontend/contracts/startups.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/app/frontend/layouts/NormalMode.tsx b/app/frontend/layouts/NormalMode.tsx index f7143c5ea..7540fef57 100644 --- a/app/frontend/layouts/NormalMode.tsx +++ b/app/frontend/layouts/NormalMode.tsx @@ -1,12 +1,10 @@ import React from 'react'; -import NormalModeHome from './../components/NormalMode/NormalModeHome'; -import NormalModeMarketplaceProductPage from './../components/NormalMode/NormalModeMarketplaceProductPage'; export const NormalMode = () => { return (
- - + + <
) } \ No newline at end of file diff --git a/app/frontend/navigation.js b/app/frontend/navigation.js new file mode 100644 index 000000000..44d793663 --- /dev/null +++ b/app/frontend/navigation.js @@ -0,0 +1,36 @@ +import Image from 'next/image'; +import Link from 'next/link'; +import { useEffect, useState } from 'react'; + +import NearLogo from 'public/near-logo.svg'; +import { useWallet } from '../wallets/wallet-selector'; + +export const Navigation = () => { + + const { signedAccountId, logOut, logIn } = useWallet(); + const [action, setAction] = useState(() => { }); + const [label, setLabel] = useState('Loading...'); + + useEffect(() => { + if (signedAccountId) { + setAction(() => logOut); + setLabel(`Logout ${signedAccountId}`); + } else { + setAction(() => logIn); + setLabel('Login'); + } + }, [signedAccountId, logOut, logIn, setAction, setLabel]); + + return ( + + ); +}; \ No newline at end of file diff --git a/app/frontend/primtives/NormalMode/NormalModeBitcellular.tsx b/app/frontend/primtives/NormalMode/NormalModeBitcellular.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/app/frontend/primtives/NormalMode/NormalModeCrowdfunding.tsx b/app/frontend/primtives/NormalMode/NormalModeCrowdfunding.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/app/frontend/primtives/NormalMode/NormalModeHome.tsx b/app/frontend/primtives/NormalMode/NormalModeHome.tsx new file mode 100644 index 000000000..a9f5c599c --- /dev/null +++ b/app/frontend/primtives/NormalMode/NormalModeHome.tsx @@ -0,0 +1,184 @@ +import React from "react"; + +export const NormalModeHome = (): JSX.Element => { + return ( +
+
+
+
+
+
+ EatTheBlocks - Blockchain Mastery +
+

+ Codedamn - Full-Stack, DSA, Web 3, Dev Ops +

+
+
+
+ EatTheBlocks - Blockchain Mastery +
+

+ Codedamn - Full-Stack, DSA, Web 3, Dev Ops +

+
+
+
+ EatTheBlocks - Blockchain Mastery +
+

+ Codedamn - Full-Stack, DSA, Web 3, Dev Ops +

+
+
+
+ EatTheBlocks - Blockchain Mastery +
+

+ Codedamn - Full-Stack, DSA, Web 3, Dev Ops +

+
+
+
+ EatTheBlocks - Blockchain Mastery +
+

+ Codedamn - Full-Stack, DSA, Web 3, Dev Ops +

+
+
+
+ EatTheBlocks - Blockchain Mastery +
+
+ EatTheBlocks - Blockchain Mastery +
+
+
+
+
+
+ EatTheBlocks - Blockchain Mastery +
+

+ Codedamn - Full-Stack, DSA, Web 3, Dev Ops +

+
+
+
+ EatTheBlocks - Blockchain Mastery +
+

+ Codedamn - Full-Stack, DSA, Web 3, Dev Ops +

+
+
+
+ EatTheBlocks - Blockchain Mastery +
+

+ Codedamn - Full-Stack, DSA, Web 3, Dev Ops +

+
+
+
+ EatTheBlocks - Blockchain Mastery +
+

+ Codedamn - Full-Stack, DSA, Web 3, Dev Ops +

+
+
+
+ EatTheBlocks - Blockchain Mastery +
+

+ Codedamn - Full-Stack, DSA, Web 3, Dev Ops +

+
+
+
+ EatTheBlocks - Blockchain Mastery +
+
+ EatTheBlocks - Blockchain Mastery +
+
+
+
+ COURSES & CERTIFICATIONS +
+
+
+
+
+
+ Github +
+ Git hub +
+
+
+ Github +
+ Git hub +
+
+
+
+
+ Github +
+ Git hub +
+
+
+ Github +
+ Git hub +
+
+
+
+
+ Github +
+ Git hub +
+
+
+ Github +
+ Git hub +
+
+
+
+
+
+ CEO/Founder and Co-Founder +
+

+ 24yo - UCSB - Geographic Information Systems +

+
+ Elias Estrada +
+
+
+
+
+
+
+ Marketplace +
+
+ Home +
+
+ Menu toggle +
+
+
+ ); +}; diff --git a/app/frontend/primtives/NormalMode/NormalModeMarketplaceProductListing.tsx b/app/frontend/primtives/NormalMode/NormalModeMarketplaceProductListing.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/app/frontend/primtives/NormalMode/NormalModeMarketplaceProductPage.tsx b/app/frontend/primtives/NormalMode/NormalModeMarketplaceProductPage.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/app/frontend/primtives/NormalMode/NormalModeNanoNodeMini.tsx b/app/frontend/primtives/NormalMode/NormalModeNanoNodeMini.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/app/frontend/primtives/NormalMode/NormalModeStartups.tsx b/app/frontend/primtives/NormalMode/NormalModeStartups.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/app/frontend/primtives/NormalMode/NormalModeTxnTrackerMini.tsx b/app/frontend/primtives/NormalMode/NormalModeTxnTrackerMini.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/app/frontend/vm-component.js b/app/frontend/vm-component.js new file mode 100644 index 000000000..9e26c23a8 --- /dev/null +++ b/app/frontend/vm-component.js @@ -0,0 +1,26 @@ +'use client'; +import { useEffect } from 'react'; +import { useInitNear, Widget, EthersProviderContext } from 'near-social-vm'; + +import { useWallet } from '../wallets/wallet-selector'; +import { useEthersProviderContext } from '../wallets/web3-wallet'; +import { NetworkId } from '../config'; + +export default function Component({ src }) { + const ethersContext = useEthersProviderContext(); + const { selector } = useWallet(); + const { initNear } = useInitNear(); + + useEffect(() => { + initNear && selector && initNear({ networkId: NetworkId, selector }); + }, [initNear, selector]); + + return ( +
+ + + +

Source: {src}

+
+ ); +} diff --git a/app/layout.ts b/app/layout.ts new file mode 100644 index 000000000..228135ab0 --- /dev/null +++ b/app/layout.ts @@ -0,0 +1,29 @@ +'use client'; +import './globals.css'; +import '@near-wallet-selector/modal-ui/styles.css'; + +import { NetworkId } from './config'; +<<<<<<< HEAD +<<<<<<< HEAD +import { Navigation } from './frontend/navigation'; +======= +import { Navigation } from './components/navigation'; +>>>>>>> 18e5a849 (Scaffold basic file structure) +======= +import { Navigation } from './components/navigation'; +>>>>>>> 9489c415 (Initial Commit) +import { useInitWallet } from './wallets/wallet-selector'; + +export default function RootLayout({ children }) { + + useInitWallet({ createAccessKeyFor: '', networkId: NetworkId }); + + return ( + + + + {children} + + + ); +} diff --git a/app/lib/lib.js b/app/lib/lib.js new file mode 100644 index 000000000..4275793d2 --- /dev/null +++ b/app/lib/lib.js @@ -0,0 +1,68 @@ +'use client'; +<<<<<<<< HEAD:app/lib/lib.js +import { DocsCard, HelloComponentsCard } from '../frontend/cards'; +======== +import { DocsCard, HelloComponentsCard } from '../components/cards'; +>>>>>>>> 18e5a849 (Scaffold basic file structure):app/lib/page.js +import { useWallet } from '../wallets/wallet-selector'; +import { useState, useEffect } from 'react'; +import { HelloNearContract, NetworkId } from '../../config'; +import styles from '../app.module.css'; + +// Contract that the app will interact with +const CONTRACT = HelloNearContract[NetworkId]; + +export default function HelloNear() { + const { signedAccountId, viewMethod, callMethod } = useWallet(); + + const [greeting, setGreeting] = useState('loading...'); + const [loggedIn, setLoggedIn] = useState(false); + const [showSpinner, setShowSpinner] = useState(false); + + useEffect(() => { + viewMethod && viewMethod(CONTRACT, 'get_greeting', {}).then( + greeting => setGreeting(greeting) + ); + }, [viewMethod]); + + useEffect(() => { + setLoggedIn(!!signedAccountId); + }, [signedAccountId]); + + const saveGreeting = async () => { + setShowSpinner(true); + await callMethod(CONTRACT, 'set_greeting', { greeting }); + setShowSpinner(false); + }; + + return ( +
+
+

+ Interacting with the contract:   + {CONTRACT} +

+
+ +
+

The contract says: {greeting}

+ + +
+
+ + +
+
+ ); +} diff --git a/app/lib/page.js b/app/lib/page.js new file mode 100644 index 000000000..be7c15e17 --- /dev/null +++ b/app/lib/page.js @@ -0,0 +1,72 @@ +'use client'; +<<<<<<< HEAD +<<<<<<<< HEAD:app/lib/lib.js +import { DocsCard, HelloComponentsCard } from '../frontend/cards'; +======== +import { DocsCard, HelloComponentsCard } from '../components/cards'; +>>>>>>>> 18e5a849 (Scaffold basic file structure):app/lib/page.js +======= +import { DocsCard, HelloComponentsCard } from '../components/cards'; +>>>>>>> 9489c415 (Initial Commit) +import { useWallet } from '../wallets/wallet-selector'; +import { useState, useEffect } from 'react'; +import { HelloNearContract, NetworkId } from '../../config'; +import styles from '../app.module.css'; + +// Contract that the app will interact with +const CONTRACT = HelloNearContract[NetworkId]; + +export default function HelloNear() { + const { signedAccountId, viewMethod, callMethod } = useWallet(); + + const [greeting, setGreeting] = useState('loading...'); + const [loggedIn, setLoggedIn] = useState(false); + const [showSpinner, setShowSpinner] = useState(false); + + useEffect(() => { + viewMethod && viewMethod(CONTRACT, 'get_greeting', {}).then( + greeting => setGreeting(greeting) + ); + }, [viewMethod]); + + useEffect(() => { + setLoggedIn(!!signedAccountId); + }, [signedAccountId]); + + const saveGreeting = async () => { + setShowSpinner(true); + await callMethod(CONTRACT, 'set_greeting', { greeting }); + setShowSpinner(false); + }; + + return ( +
+
+

+ Interacting with the contract:   + {CONTRACT} +

+
+ +
+

The contract says: {greeting}

+ + +
+
+ + +
+
+ ); +} diff --git a/app/page.ts b/app/page.ts new file mode 100644 index 000000000..a763c46cc --- /dev/null +++ b/app/page.ts @@ -0,0 +1,45 @@ +import Image from 'next/image'; +import styles from './app.module.css'; +<<<<<<< HEAD +<<<<<<< HEAD +import { DocsCard, HelloComponentsCard, HelloNearCard } from './frontend/cards'; +======= +import { DocsCard, HelloComponentsCard, HelloNearCard } from './components/cards'; +>>>>>>> 18e5a849 (Scaffold basic file structure) +======= +import { DocsCard, HelloComponentsCard, HelloNearCard } from './components/cards'; +>>>>>>> 9489c415 (Initial Commit) + +export default function Home() { + return ( +
+
+ +
+ Next.js Logo +

+

+ Next.js Logo +
+ +
+ + + +
+
+ ); +} diff --git a/app/pages/page.js b/app/pages/page.js new file mode 100644 index 000000000..1e7c1052a --- /dev/null +++ b/app/pages/page.js @@ -0,0 +1,44 @@ +import dynamic from 'next/dynamic'; + +import styles from '@/app/app.module.css'; +import { DocsCard, HelloNearCard } from '../components/cards'; +import { NetworkId, ComponentMap } from '../config'; + +const Component = dynamic(() => import('../components/vm-component'), { ssr: false }); + +const socialComponents = ComponentMap[NetworkId]; + +export default function HelloComponents() { + + return ( + <> +
+
+

+ Loading components from:   + {socialComponents.socialDB} +

+
+
+

Multi-chain Components Made Simple

+
+
+
+ +

 

+ +
+
+ +
+
+
+ +
+ + +
+
+ + ); +} \ No newline at end of file diff --git a/app/styles/bitcellular.sass b/app/styles/bitcellular.sass new file mode 100644 index 000000000..e69de29bb diff --git a/app/styles/layouts.sass b/app/styles/layouts.sass new file mode 100644 index 000000000..e69de29bb diff --git a/app/styles/nano-node.sass b/app/styles/nano-node.sass new file mode 100644 index 000000000..e69de29bb diff --git a/app/styles/socket-chat.sass b/app/styles/socket-chat.sass new file mode 100644 index 000000000..e69de29bb diff --git a/app/styles/the-public.sass b/app/styles/the-public.sass new file mode 100644 index 000000000..e69de29bb diff --git a/app/styles/txn-tracker.sass b/app/styles/txn-tracker.sass new file mode 100644 index 000000000..e69de29bb diff --git a/app/contracts/wallets/wallet-crowdfunding-interface.js b/app/wallets/wallet-crowdfunding-interface.js similarity index 100% rename from app/contracts/wallets/wallet-crowdfunding-interface.js rename to app/wallets/wallet-crowdfunding-interface.js diff --git a/app/contracts/wallets/wallet-data-models.js b/app/wallets/wallet-data-models.js similarity index 100% rename from app/contracts/wallets/wallet-data-models.js rename to app/wallets/wallet-data-models.js diff --git a/app/contracts/wallets/wallet-marketplace-interface.js b/app/wallets/wallet-marketplace-interface.js similarity index 100% rename from app/contracts/wallets/wallet-marketplace-interface.js rename to app/wallets/wallet-marketplace-interface.js diff --git a/app/contracts/wallets/wallet-selector.js b/app/wallets/wallet-selector.js similarity index 100% rename from app/contracts/wallets/wallet-selector.js rename to app/wallets/wallet-selector.js diff --git a/app/contracts/wallets/wallet-startups-interface.js b/app/wallets/wallet-startups-interface.js similarity index 100% rename from app/contracts/wallets/wallet-startups-interface.js rename to app/wallets/wallet-startups-interface.js diff --git a/app/contracts/wallets/web3-wallet.ts b/app/wallets/web3-wallet.ts similarity index 100% rename from app/contracts/wallets/web3-wallet.ts rename to app/wallets/web3-wallet.ts