Merge pull request #26 from xdevguild/app-router-migration

switch to app router and shadcn

.editorconfig

@@ -7,4 +7,4 @@ root = true
 insert_final_newline = true
 indent_style = space
 indent_size = 2
-charset = utf-8
+charset = utf-8

.env.example

@@ -9,47 +9,9 @@ NEXT_PUBLIC_MULTIVERSX_CHAIN = devnet
 # Get yours at: https://cloud.walletconnect.com/sign-in
 NEXT_PUBLIC_WC_PROJECT_ID = be161e9c2764269adc6a5cf4304c3a22
 
-#
-# Either the public API endpoint of your MultiversX api
-# or the masked proxy that will be used instead.
-#
-# You have three options:
-#
-# 1. By commenting this out the dapp will use the default
-#    MultiversX api endpoint (e.g. https://devnet-api.multiversx.com)
-#
-#    Note: MULTIVERSX_PRIVATE_API must be removed/commented out.
-#
-# 2. Set this to an absolute address to use a custom MultiversX api endpoint
-#    (e.g. http://dev.mydomain.com)
-#
-#    Note: MULTIVERSX_PRIVATE_API must be removed/commented out.
-#
-# 3. Enter a relative path to proxy/mask your MultiversX api endpoint (e.g. /api/multiversx)
-#    Only current instance of the Dapp can use it if only API_ALLOWED_DAPP_HOST is set.
-#
-#    Note: MULTIVERSX_PRIVATE_API must include the actual MultiversX API endpoint.
-#
-# NEXT_PUBLIC_MULTIVERSX_API = /api/multiversx
-
 # This is basically the main domain of your dapp
 NEXT_PUBLIC_DAPP_HOST = http://localhost:3000
 
-# =============================================
-# Private variables (used on backend)
-# =============================================
-
-# The MultiversX api endpoint, that is being masked/proxied.
-# This can be either a custom api endpoint or the default MultiversX api endpoint.
-# You will have to delete this or comment this out, if you don't wanna
-# mask / proxy your MultiversX api endpoint.
-# MULTIVERSX_PRIVATE_API = https://devnet-api.multiversx.com
-
-# Only this host will be allowed to consume the API (optional)
-# It will work only inside the Dapp, no one will be able to use the endpoint, even in browser
-# When removed the API will be available for testing through browser, Postman etc.
-# API_ALLOWED_DAPP_HOST = http://localhost:3000
-
 # =============================================
 # Public variables for the demo only
 # =============================================

.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": ["next", "prettier", "plugin:@typescript-eslint/recommended"],
+  "plugins": ["@typescript-eslint"],
+  "parser": "@typescript-eslint/parser"
+}

.gitignore

@@ -25,15 +25,11 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
-
-.vscode
+next-env.d.ts

CHANGELOG.md

@@ -1,3 +1,8 @@
+### [9.0.0](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v9.0.0) (2023-09-02)
+- switch to the Next.js App Router architecture
+- remove API proxy and rewrites, you can still have them, but it isn't implemented by default. It was too confusing.
+- remove the Chakra UI and switch to [Radix UI](https://www.radix-ui.com/) + [Tailwind](https://tailwindcss.com/), wrapped with [Shadcn UI](https://ui.shadcn.com/). I think these are more future proof solutions
+
 ### [8.4.0](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v8.4.0) (2023-07-28)
 - update useElven (guardians support)
 - update other dependencies

README.md

@@ -3,18 +3,18 @@
 - [multiversx-nextjs-dapp.netlify.com](https://multiversx-nextjs-dapp.netlify.com)
 
 Nextjs alternative to the [sdk-dapp](https://github.com/multiversx/mx-sdk-dapp).
-Based on [Elven Tools Dapp](https://www.elven.tools/docs/minter-dapp-introduction.html), (It is developed simultaneously, and at some stages, it will have more core functionality)
 
-The Dapp is built using Nextjs and a couple of helpful tools.
+The Dapp is built using Nextjs and a couple of helpful tools ([Shadcn UI](https://ui.shadcn.com/) ([Radix UI](https://www.radix-ui.com/)) + [Tailwind](https://tailwindcss.com/))
 It has straightforward and complete functionality.
 
+**For older Chakra UI version and Next.js Page Router architecture check the [v8.4.0](https://github.com/xdevguild/nextjs-dapp-template/tree/v8.4.0)**
+
 ### Main assumption for the dapp:
 
-- it works on Nextjs
-- it uses sdk-core without the dapp-core library.
-it uses backed-side redirections to hide the API endpoint. The only exposed one is `/api/multiversx` and it is used only by the dapp internally
+- it works with Next.js and new App Router architecture
+- it uses [sdk-core](https://github.com/multiversx/mx-sdk-js-core) **without** the [dapp-core](https://github.com/multiversx/mx-sdk-dapp) library. All through [useElven](https://www.useElven.com) library.
 - it uses the .env file - there is an example in the repo (for all configurations, also for the demo config)
-- it uses chakra-ui
+- it uses [Radix UI](https://www.radix-ui.com/) + [Tailwind](https://tailwindcss.com/), wrapped with [Shadcn UI](https://ui.shadcn.com/)
 
 ### How to start it locally:
 
@@ -29,7 +29,7 @@ Check how to deploy a very similar dapp using the Netlify services: https://www.
 
 ### Howto
 
-For simplicity, the template uses the main index page with demo components built using the core building blocks. Below you will find the list of most essential utilities, hooks, and components with examples that are actual code from the template. You can search them in the code to better understand how they work.
+Below you will find the list of most essential utilities, hooks, and components with examples that are actual code from the template. You can search them in the code to better understand how they work.
 
 There are much more hooks and tools, but most of them are already used in the ones listed below.
 
@@ -65,18 +65,11 @@ It can display the spinner and also the fallback React element.
 <Authenticated
   spinnerCentered
   fallback={
-    <>
-      <Text fontWeight="bold" fontSize="2xl" textAlign="center" mt={8}>
-        Connect your wallet!
-      </Text>
-      <Flex mt={4} justifyContent="center">
-        <LoginModalButton />
-      </Flex>
-    </>
+    <div className="font-bold text-2xl text-center mt-8">
+      Connect your wallet!
+    </div>
   }
 >
-  <Box>Do something here in the auth context...</Box>
-</Authenticated>
 ```
 
 ### ProtectedPageWrapper
@@ -89,8 +82,8 @@ import { ProtectedPageWrapper } from './components/tools/ProtectedPageWrapper';
 const Profile = () => {
   return (
     <ProtectedPageWrapper>
-      <Text>The content for logged-in only!</Text>
-      <Text>For example the profile page or any other that should be accessible only for logged-in users</Text>
+      <div>The content for logged-in only!</div>
+      <div>For example the profile page or any other that should be accessible only for logged-in users</div>
     </ProtectedPageWrapper>
   );
 };
@@ -100,18 +93,9 @@ export default Profile;
 
 ### Working with the API
 
-By default, the Dapp provides the `.env.example`, configured not to use the API rewrites and configured to use the official public MultiversX API endpoint. 
-
-You have three options:
+By default, the Dapp provides the `.env.example`, configured to use the official public MultiversX API endpoint. 
 
-1. By commenting this out the dapp will use the default MultiversX api endpoint (e.g. https://devnet-api.multiversx.com) \
-  **Note**: `MULTIVERSX_PRIVATE_API` needs to be removed/commented out.
-2. Set this to an absolute address to use a custom MultiversX api endpoint
-   (e.g. http://dev.mydomain.com) \
-  **Note**: `MULTIVERSX_PRIVATE_API` needs to be removed/commented out.
-3. Enter a relative path to proxy/mask your MultiversX api endpoint (e.g. /api/multiversx)
-   Only current instance of the Dapp can use it if only `API_ALLOWED_DAPP_HOST` is set.  \
-  **Note**: `MULTIVERSX_PRIVATE_API` must include the actual MultiversX API endpoint.
+You can use the public API, but it is always recommended to maintain your own instance of the API, or you can also use some third party services.
 
 ### Working with the .env and config files
 
@@ -131,56 +115,18 @@ NEXT_PUBLIC_MULTIVERSX_CHAIN = devnet
 # Get yours at: https://cloud.walletconnect.com/sign-in
 NEXT_PUBLIC_WC_PROJECT_ID = be161e9c2764269adc6a5cf4304c3a22
 
-#
-# Either the public API endpoint of your MultiversX api
-# or the masked proxy that will be used instead.
-#
-# You have three options:
-#
-# 1. By commenting this out the dapp will use the default
-#    MultiversX api endpoint (e.g. https://devnet-api.multiversx.com)
-#
-#    Note: MULTIVERSX_PRIVATE_API needs to be removed/commented out.
-#
-# 2. Set this to an absolute address to use a custom MultiversX api endpoint
-#    (e.g. http://dev.mydomain.com)
-#
-#    Note: MULTIVERSX_PRIVATE_API needs to be removed/commented out.
-#
-# 3. Enter a relative path to proxy/mask your MultiversX api endpoint (e.g. /api/multiversx)
-#    Only current instance of the Dapp can use it if only API_ALLOWED_DAPP_HOST is set.
-#
-#    Note: MULTIVERSX_PRIVATE_API must include the actual MultiversX API endpoint.
-#
-NEXT_PUBLIC_MULTIVERSX_API = /api/multiversx
-
 # This is basically the main domain of your dapp
 NEXT_PUBLIC_DAPP_HOST = http://localhost:3000
 
 # =============================================
-# Private variables (used on the backend)
-# =============================================
-
-# The MultiversX api endpoint, that is being masked/proxied.
-# This can be either a custom api endpoint or the default MultiversX api endpoint.
-# You will have to delete this or comment this out, if you don't wanna
-# mask / proxy your MultiversX api endpoint.
-MULTIVERSX_PRIVATE_API = https://devnet-api.multiversx.com
-
-# Only this host will be allowed to consume the API (optional)
-# It will work only inside the Dapp, no one will be able to use the endpoint, even in browser
-# When removed the API will be available for testing through browser, Postman etc.
-API_ALLOWED_DAPP_HOST = http://localhost:3000
-
-# =============================================
-# Public variables for the the demo only
+# Public variables for the demo only
 # =============================================
 
 # The wallet address used for the demo EGLD transaction on the devnet
 NEXT_PUBLIC_EGLD_TRANSFER_ADDRESS = erd17a4wydhhd6t3hhssvcp9g23ppn7lgkk4g2tww3eqzx4mlq95dukss0g50f
 
 # The smart contract address used for minting the NFT token (as example deployed Elven Tools Smart Contract)
-NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS = erd1qqqqqqqqqqqqqpgq5za2pty2tlfqhj20z9qmrrpjmyt6advcgtkscm7xep
+NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS = erd1qqqqqqqqqqqqqpgqztp5vpqrxe2tha224jwsa3sv2800a88zgtksar2kc8
 
 # The function/endpoint name for minting on the smart contract
 NEXT_PUBLIC_MINT_FUNCTION_NAME = mint
@@ -193,13 +139,14 @@ NEXT_PUBLIC_MINT_PAYMENT_PER_TOKEN = 0.01
 
 # The amount of EGLD to send in the demo transfer (0.001 EGLD)
 NEXT_PUBLIC_EGLD_TRANSFER_AMOUNT = 0.001
+
 ```
 
 All variables which start with `NEXT_PUBLIC_` will be readable on the frontend side of the dapp. So please don't use them for any secret keys and data. If you need something to be available only on the backend side, don't use the `NEXT_PUBLIC_` prefix.
 
-You can set up the chain type here. Use `NEXT_PUBLIC_MULTIVERSX_CHAIN` to set devnet, testnet or mainnet.
+You can set up the chain type. Use `NEXT_PUBLIC_MULTIVERSX_CHAIN` to set `devnet`, `testnet` or `mainnet`.
 
-Each hosting provider will have a different way of doing that. We will take a look at how Netlify is doing that below.
+Each hosting provider will have a different way of setting the env variables. We will take a look at how Netlify is doing that below.
 
 ### Deployment
 
@@ -215,26 +162,23 @@ Read more about it here: https://www.elven.tools/docs/dapp-deployment.html
 
 Here are other deployment solutions: [NextJS Deployment](https://nextjs.org/docs/deployment).
 
-### Other solutions
-
-The same dapp, but with Tailwind instead Chakra UI:
-
-- [nextjs-dapp-template-tw](https://github.com/xdevguild/nextjs-dapp-template-tw)
+### Other tools
 
 If you would like to test other templates check:
 
 - [erd-next-starter](https://github.com/Elrond-Giants/erd-next-starter)
-- [dapp-template]https://github.com/multiversx/mx-template-dapp)
-
-Dapps using the template (send the links if you used it, use issues here on GitHub):
-
-- [Elven Tools Dapp](https://dapp-demo.elven.tools/)
-- [MultiversX ESDT Faucet Dapp](https://devnet-multiversx-esdt-faucet.netlify.app/)
+- [dapp-template](https://github.com/multiversx/mx-template-dapp)
 
 Compact MultiversX SDK for browsers (no build steps required)
 
 - [Elven.js](https://www.elvenjs.com)
 
+Tools that can help you with interactions:
+
+- [Buildo Begins](https://github.com/xdevguild/buildo-begins)
+- [Elven Tools](https://www.elven.tools)
+
 ### Contact
 
-- [xDevGuild](https://github.com/xdevguild)
+- [julian.io](https://www.julian.io)
+

app/docs/page.tsx

@@ -0,0 +1,7 @@
+import { NextPage } from 'next';
+
+const Docs: NextPage = () => {
+  return <div>Docs TODO</div>;
+};
+
+export default Docs;

app/globals.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}