Merge pull request #169 from JeremyTheintz/develop

📦 Bump packages version to latest

.github/CONTRIBUTING.md

@@ -0,0 +1,41 @@
+# Contributing
+
+Thank you for considering contributing to this project! Your contributions are greatly appreciated. In this document, you'll find guidelines and tips for making the contribution process smooth and efficient.
+
+## Creating a new template
+
+If you want to contribute a new template, follow these steps:
+
+1. Create a new folder in `./packages` with the name of your template.
+
+2. Create the following files, taking inspiration from other templates (see `./packages/base` for an example):
+
+   - `./packages/[template-name]/package.json`
+   - `./packages/[template-name]/pages/index.tsx`
+   - `./packages/[template-name]/tsconfig.json`
+   - `./packages/[template-name]/next.config.js`
+   - `./packages/[template-name]/next-env.d.ts`
+
+3. Open `./scripts/build.js` and add your template to the `templates` array (the name has to be the same as the template directory name in `./packages`).
+
+   - `const templates = ['base', 'mui', 'styled-components', 'new-template-name'];`
+
+4. Go to the project root directory `./` and run `npm run build` to copy the common files to the new template.
+
+5. Navigate to your template folder (`cd ./packages/[template-name]`) and start development with `npm run dev`.
+
+## Contribution Guidelines
+
+Please follow these guidelines to ensure a smooth contribution process:
+
+- Make sure your code follows the project's coding style and conventions.
+- Test your changes locally before submitting a pull request.
+- Keep your pull requests focused and limited to a single feature or bug fix.
+- Provide a clear and concise description of your changes in the pull request.
+- If your changes are related to an existing issue, reference the issue number in your pull request.
+
+## Getting Help
+
+If you need help or have questions about the project, feel free to open an issue or reach out to the maintainers.
+
+Again, thank you for your interest in contributing to this project. Your contributions will help improve the project for everyone!

.vscode/settings.json

@@ -41,5 +41,8 @@
 	"prettier.trailingComma": "none",
 	"[scss]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[css]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	}
 }

README.md

@@ -25,6 +25,7 @@ Here is the list of the available templates:
 - [Base](#base) (No UI kit)
 - [MUI](#mui)
 - [Styled Components](#styled-components)
+- [Tailwind](#tailwind)
 
 ## Quick start
 
@@ -53,6 +54,7 @@ Working configuration:
 - [base](#base)
 - [MUI](#mui)
 - [Styled Components](#styled-components)
+- [Tailwind](#tailwind)
 
 ### Base
 
@@ -73,24 +75,14 @@ npm install @mui/material
 
 Styled components is a popular CSS-in-JS library developed for React. It is configured with the [Styled Components](https://styled-components.com/) library.
 
-There are already base functions to add responsive padding, margin and frames to your components.
+There are already base functions to add responsive padding, margin, and frames to your components.
 
-> See IPadding, IMargin and IFrames available at `./interfaces/layout.ts`
+> See IPadding, IMargin, and IFrames available at `./interfaces/layout.ts`
 
 ---
 
-# Contributing
-
-### Creating a new template
-
-1. Create a new folder in `./packages` with the name of your template.
-2. Create the following files, inspired by other templates (see `./packages/base` for an example):
-   - `./packages/[template-name]/package.json`
-   - `./packages/[template-name]/pages/index.tsx`
-   - `./packages/[template-name]/tsconfig.json`
-   - `./packages/[template-name]/next.config.js`
-   - `./packages/[template-name]/next-env.d.ts`
-3. Open `./scripts/build.js` and add your template to the `templates` array (the name has to be the same as the template directory name in `./packages`).
-   - `const templates = ['base', 'mui', 'styled-components', 'new-template-name'];`
-4. Go to the project root directory `./` and run `npm run build` to copy the template common files to the new template.
-5. Go to your template (`cd ./packages/[template-name]`) and start development with `npm run dev`.
+### Tailwind
+
+The Tailwind template is based on the [Tailwind CSS](https://tailwindcss.com/) framework. It is configured with the [Tailwind CSS](https://tailwindcss.com/docs/installation) library. This template utilizes the utility-first approach to styling, providing a highly customizable and efficient way to build your Dapp.
+
+This template includes a base configuration file (`tailwind.config.js`) to get you started with customizing your styles. You can refer to the [Tailwind CSS documentation](https://tailwindcss.com/docs/configuration) for more information on how to extend and modify the default configuration.

common/contexts/Web3Context/Web3Context.tsx

@@ -1,8 +1,8 @@
 import Address from '@models/Address';
 import WalletConnectProvider from '@walletconnect/web3-provider';
-import { ethers, providers } from 'ethers';
+import { BrowserProvider, JsonRpcProvider } from 'ethers';
 import { IWallet } from 'interfaces/wallet';
-import React, { createContext, FC, ReactNode, useCallback, useEffect, useState } from 'react';
+import { FC, ReactNode, createContext, useCallback, useEffect, useState } from 'react';
 import { clearLocalStorage, getLocalStorage, setLocalStorage } from 'utils/global';
 import { checkIfNetworkIsValid, getWalletFromName } from './Web3Context.functions';
 import { IWeb3, IWeb3Provider } from './Web3Context.type';
@@ -85,7 +85,7 @@ const Web3Provider: FC<{ children: ReactNode }> = ({ children }) => {
 
 						setAddress(Address.from(accounts[0]));
 
-						const web3provider = new providers.Web3Provider(web3Instance);
+						const web3provider = new BrowserProvider(web3Instance);
 
 						setProvider({
 							web3Provider: web3provider,
@@ -107,7 +107,7 @@ const Web3Provider: FC<{ children: ReactNode }> = ({ children }) => {
 
 						await newProvider.enable();
 
-						const web3Provider = new providers.Web3Provider(newProvider);
+						const web3Provider = new BrowserProvider(newProvider);
 						setProvider({
 							web3Provider,
 							web3Instance: newProvider
@@ -172,16 +172,14 @@ const Web3Provider: FC<{ children: ReactNode }> = ({ children }) => {
 	}, [connectWallet]);
 
 	const checkIfUserHasEns = useCallback(
-		async (address: Address, web3Provider: ethers.providers.Web3Provider) => {
+		async (address: Address, web3Provider: JsonRpcProvider | BrowserProvider) => {
 			if (address && networkId) {
 				let ethereumProvider;
 
 				if (networkId === 1) {
 					ethereumProvider = web3Provider;
 				} else {
-					ethereumProvider = new ethers.providers.JsonRpcProvider(
-						process.env.RPC_ETHEREUM || 'https://rpc.ankr.com/eth'
-					);
+					ethereumProvider = new JsonRpcProvider(process.env.RPC_ETHEREUM || 'https://rpc.ankr.com/eth');
 				}
 
 				const resolver = await ethereumProvider?.lookupAddress(address.toString());

common/contexts/Web3Context/Web3Context.type.ts

@@ -1,7 +1,7 @@
 import { IWallet } from '@interfaces/wallet';
 import Address from '@models/Address';
 import WalletConnectProvider from '@walletconnect/web3-provider';
-import { providers } from 'ethers';
+import { BrowserProvider, JsonRpcProvider } from 'ethers';
 
 interface IWeb3 {
 	provider: IWeb3Provider;
@@ -19,7 +19,7 @@ interface IWeb3 {
 }
 
 interface IWeb3Provider {
-	web3Provider?: providers.Web3Provider;
+	web3Provider?: JsonRpcProvider | BrowserProvider;
 	web3Instance?: WalletConnectProvider | any;
 	isWallet?: boolean;
 	error?: boolean;

common/models/Address.ts

@@ -1,4 +1,4 @@
-import { utils } from 'ethers';
+import { getAddress, isAddress } from 'ethers';
 
 export type TAddress = Address | string | undefined;
 
@@ -11,10 +11,10 @@ class Address {
 		if (address instanceof Address) {
 			newAddress = address.toString();
 		} else if (typeof address === 'string') {
-			newAddress = utils.getAddress(address);
+			newAddress = getAddress(address);
 		}
 
-		if (!newAddress || !utils.isAddress(newAddress)) {
+		if (!newAddress || !isAddress(newAddress)) {
 			throw new Error('Invalid address');
 		}
 

common/types/react-app-env.d.ts

@@ -3,5 +3,4 @@
 // web3 injected by wallet
 interface Window {
 	ethereum: any;
-	'use-responsive-timeout': NodeJS.Timeout;
 }

package.json

@@ -1,12 +1,13 @@
 {
   "name": "create-nextjs-dapp",
-  "version": "1.1.1",
+  "version": "1.4.0",
   "private": false,
   "type": "module",
   "scripts": {
     "dev": "npm run dev:styled-components",
     "dev:mui": "cd ./packages/mui && npm run dev",
     "dev:base": "cd ./packages/base && npm run dev",
+    "dev:tailwind": "cd ./packages/tailwind && npm run dev",
     "dev:sc": "npm run dev:styled-components",
     "dev:styled-components": "cd ./packages/styled-components && npm run dev",
     "build": "node scripts/build.js"

packages/base/components/default/Button/Button.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useMemo, useState } from 'react';
-import { IButton } from './Button.type';
-import GradientContainer from '../GradientContainer';
-import { MdOutlineContentCopy, MdOutlineCheck } from 'react-icons/md';
-import { copy } from 'utils/global';
 import { EColor, EHtmlTag } from '@theme/theme.enum';
 import classNames from 'classnames';
+import { FC, useMemo, useState } from 'react';
+import { MdOutlineCheck, MdOutlineContentCopy } from 'react-icons/md';
+import { copy } from 'utils/global';
+import GradientContainer from '../GradientContainer';
+import { IButton } from './Button.type';
 
 import styles from './Button.module.scss';
 

packages/base/contexts/Web3Context/Web3Context.tsx

@@ -1,8 +1,8 @@
 import Address from '@models/Address';
 import WalletConnectProvider from '@walletconnect/web3-provider';
-import { ethers, providers } from 'ethers';
+import { BrowserProvider, JsonRpcProvider } from 'ethers';
 import { IWallet } from 'interfaces/wallet';
-import React, { createContext, FC, ReactNode, useCallback, useEffect, useState } from 'react';
+import { FC, ReactNode, createContext, useCallback, useEffect, useState } from 'react';
 import { clearLocalStorage, getLocalStorage, setLocalStorage } from 'utils/global';
 import { checkIfNetworkIsValid, getWalletFromName } from './Web3Context.functions';
 import { IWeb3, IWeb3Provider } from './Web3Context.type';
@@ -85,7 +85,7 @@ const Web3Provider: FC<{ children: ReactNode }> = ({ children }) => {
 
 						setAddress(Address.from(accounts[0]));
 
-						const web3provider = new providers.Web3Provider(web3Instance);
+						const web3provider = new BrowserProvider(web3Instance);
 
 						setProvider({
 							web3Provider: web3provider,
@@ -107,7 +107,7 @@ const Web3Provider: FC<{ children: ReactNode }> = ({ children }) => {
 
 						await newProvider.enable();
 
-						const web3Provider = new providers.Web3Provider(newProvider);
+						const web3Provider = new BrowserProvider(newProvider);
 						setProvider({
 							web3Provider,
 							web3Instance: newProvider
@@ -172,16 +172,14 @@ const Web3Provider: FC<{ children: ReactNode }> = ({ children }) => {
 	}, [connectWallet]);
 
 	const checkIfUserHasEns = useCallback(
-		async (address: Address, web3Provider: ethers.providers.Web3Provider) => {
+		async (address: Address, web3Provider: JsonRpcProvider | BrowserProvider) => {
 			if (address && networkId) {
 				let ethereumProvider;
 
 				if (networkId === 1) {
 					ethereumProvider = web3Provider;
 				} else {
-					ethereumProvider = new ethers.providers.JsonRpcProvider(
-						process.env.RPC_ETHEREUM || 'https://rpc.ankr.com/eth'
-					);
+					ethereumProvider = new JsonRpcProvider(process.env.RPC_ETHEREUM || 'https://rpc.ankr.com/eth');
 				}
 
 				const resolver = await ethereumProvider?.lookupAddress(address.toString());

packages/base/contexts/Web3Context/Web3Context.type.ts

@@ -1,7 +1,7 @@
 import { IWallet } from '@interfaces/wallet';
 import Address from '@models/Address';
 import WalletConnectProvider from '@walletconnect/web3-provider';
-import { providers } from 'ethers';
+import { BrowserProvider, JsonRpcProvider } from 'ethers';
 
 interface IWeb3 {
 	provider: IWeb3Provider;
@@ -19,7 +19,7 @@ interface IWeb3 {
 }
 
 interface IWeb3Provider {
-	web3Provider?: providers.Web3Provider;
+	web3Provider?: JsonRpcProvider | BrowserProvider;
 	web3Instance?: WalletConnectProvider | any;
 	isWallet?: boolean;
 	error?: boolean;

packages/base/models/Address.ts

@@ -1,4 +1,4 @@
-import { utils } from 'ethers';
+import { getAddress, isAddress } from 'ethers';
 
 export type TAddress = Address | string | undefined;
 
@@ -11,10 +11,10 @@ class Address {
 		if (address instanceof Address) {
 			newAddress = address.toString();
 		} else if (typeof address === 'string') {
-			newAddress = utils.getAddress(address);
+			newAddress = getAddress(address);
 		}
 
-		if (!newAddress || !utils.isAddress(newAddress)) {
+		if (!newAddress || !isAddress(newAddress)) {
 			throw new Error('Invalid address');
 		}