Merge pull request #11 from matiasbenary/main

update frontend and add github page

.github/workflows/nextjs.yml

@@ -0,0 +1,61 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+env:
+  NODE_ENV: 'production'
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - name: Install and test modules
+        run: |
+          cd ./frontend
+          yarn
+          yarn next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./frontend/build
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

frontend/.gitignore

@@ -0,0 +1,2 @@
+**/node_modules
+**/.next

frontend/README.md

@@ -1,100 +1,36 @@
-near-blank-project
-==================
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-This app was initialized with [create-near-app]
+## Getting Started
 
+First, run the development server:
 
-Quick Start
-===========
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-If you haven't installed dependencies during setup:
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-    npm install
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
 
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-Build and deploy your contract to TestNet with a temporary dev account:
+## Learn More
 
-    npm run deploy
+To learn more about Next.js, take a look at the following resources:
 
-Test your contract:
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-    npm test
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-If you have a frontend, run `npm start`. This will run a dev server.
+## Deploy on Vercel
 
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Exploring The Code
-==================
-
-1. The smart-contract code lives in the `/contract` folder. See the README there for
-   more info. In blockchain apps the smart contract is the "backend" of your app.
-2. The frontend code lives in the `/frontend` folder. `/frontend/index.html` is a great
-   place to start exploring. Note that it loads in `/frontend/index.js`,
-   this is your entrypoint to learn how the frontend connects to the NEAR blockchain.
-3. Test your contract: `npm test`, this will run the tests in `integration-tests` directory.
-
-
-Deploy
-======
-
-Every smart contract in NEAR has its [own associated account][NEAR accounts]. 
-When you run `npm run deploy`, your smart contract gets deployed to the live NEAR TestNet with a temporary dev account.
-When you're ready to make it permanent, here's how:
-
-
-Step 0: Install near-cli (optional)
--------------------------------------
-
-[near-cli] is a command line interface (CLI) for interacting with the NEAR blockchain. It was installed to the local `node_modules` folder when you ran `npm install`, but for best ergonomics you may want to install it globally:
-
-    npm install --global near-cli
-
-Or, if you'd rather use the locally-installed version, you can prefix all `near` commands with `npx`
-
-Ensure that it's installed with `near --version` (or `npx near --version`)
-
-
-Step 1: Create an account for the contract
-------------------------------------------
-
-Each account on NEAR can have at most one contract deployed to it. If you've already created an account such as `your-name.testnet`, you can deploy your contract to `near-blank-project.your-name.testnet`. Assuming you've already created an account on [NEAR Wallet], here's how to create `near-blank-project.your-name.testnet`:
-
-1. Authorize NEAR CLI, following the commands it gives you:
-
-      near login
-
-2. Create a subaccount (replace `YOUR-NAME` below with your actual account name):
-
-      near create-account near-blank-project.YOUR-NAME.testnet --masterAccount YOUR-NAME.testnet
-
-Step 2: deploy the contract
----------------------------
-
-Use the CLI to deploy the contract to TestNet with your account ID.
-Replace `PATH_TO_WASM_FILE` with the `wasm` that was generated in `contract` build directory.
-
-    near deploy --accountId near-blank-project.YOUR-NAME.testnet --wasmFile PATH_TO_WASM_FILE
-
-
-Step 3: set contract name in your frontend code
------------------------------------------------
-
-Modify the line in `src/config.js` that sets the account name of the contract. Set it to the account id you used above.
-
-    const CONTRACT_NAME = process.env.CONTRACT_NAME || 'near-blank-project.YOUR-NAME.testnet'
-
-
-
-Troubleshooting
-===============
-
-On Windows, if you're seeing an error containing `EPERM` it may be related to spaces in your path. Please see [this issue](https://github.com/zkat/npx/issues/209) for more details.
-
-
-  [create-near-app]: https://github.com/near/create-near-app
-  [Node.js]: https://nodejs.org/en/download/package-manager/
-  [jest]: https://jestjs.io/
-  [NEAR accounts]: https://docs.near.org/concepts/basics/account
-  [NEAR Wallet]: https://wallet.testnet.near.org/
-  [near-cli]: https://github.com/near/near-cli
-  [gh-pages]: https://github.com/tschaub/gh-pages
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

frontend/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

frontend/next.config.js

@@ -0,0 +1,14 @@
+const isProduction = process.env.NODE_ENV === 'production'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    unoptimized: true,
+  },
+  basePath: isProduction? '/hello-near-examples' : '',
+  output: "export",
+  distDir: 'build',
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig;

frontend/package.json

@@ -1,45 +1,41 @@
 {
-  "name": "my-near-app",
+  "name": "hello-near",
   "version": "1.0.0",
-  "license": "(MIT AND Apache-2.0)",
-  "scripts": {
-    "dev": "webpack serve --open"
+  "private": true,
+  "engines": {
+    "node": ">=18"
   },
-  "devDependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-class-properties": "^7.23.3",
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-react": "^7.23.3",
-    "babel-loader": "^9.1.3",
-    "buffer": "^6.0.3",
-    "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "^6.10.0",
-    "html-webpack-plugin": "^5.6.0",
-    "https-browserify": "^1.0.0",
-    "process": "^0.11.10",
-    "stream-http": "^3.2.0",
-    "style-loader": "^3.3.4",
-    "url": "^0.11.3",
-    "webpack": "^5.90.3",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.2"
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
-    "@near-wallet-selector/core": "^8.9.5",
-    "@near-wallet-selector/here-wallet": "^8.9.5",
-    "@near-wallet-selector/ledger": "^8.9.5",
-    "@near-wallet-selector/modal-ui": "^8.9.5",
-    "@near-wallet-selector/my-near-wallet": "^8.9.5",
-    "crypto-browserify": "^3.12.0",
-    "near-api-js": "^3.0.3",
-    "near-social-vm": "github:NearSocial/VM#2.6.0",
-    "prop-types": "^15.8.1",
+    "@near-wallet-selector/core": "^8.9.7",
+    "@near-wallet-selector/here-wallet": "^8.9.7",
+    "@near-wallet-selector/modal-ui": "^8.9.7",
+    "@near-wallet-selector/my-near-wallet": "^8.9.7",
+    "@web3-onboard/core": "^2.21.5",
+    "@web3-onboard/injected-wallets": "^2.10.15",
+    "@web3-onboard/ledger": "^2.6.0",
+    "@web3-onboard/react": "^2.8.16",
+    "@web3-onboard/walletconnect": "^2.5.4",
+    "base64-js": "^1.5.1",
+    "ieee754": "^1.2.1",
+    "near-api-js": "^3.0.4",
+    "near-social-vm": "github:gagdiez/VM" ,
+    "next": "14.2.0",
+    "pino-pretty": "^11.0.0",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.10.2",
+    "react-bootstrap-icons": "^1.11.4",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.2",
-    "semantic-ui-react": "^2.1.5",
-    "stream": "^0.0.2",
-    "vm-browserify": "^1.1.2"
+    "react-singleton-hook": "^4.0.1",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "eslint": "^9.0",
+    "eslint-config-next": "14.2.0"
   }
 }