├── common ├── hooks │ ├── useWeb3 │ │ ├── index.ts │ │ └── useWeb3.ts │ └── useResponsive │ │ ├── index.ts │ │ └── useResponsive.ts ├── components │ └── common │ │ ├── Meta │ │ ├── index.ts │ │ └── Meta.type.ts │ │ └── Portal │ │ ├── index.ts │ │ ├── Portal.type.ts │ │ └── Portal.tsx ├── .eslintrc.json ├── contexts │ ├── Web3Context │ │ ├── index.ts │ │ ├── Web3Context.functions.ts │ │ └── Web3Context.type.ts │ └── ResponsiveContext │ │ ├── index.tsx │ │ ├── ResponsiveContext.type.ts │ │ └── ResponsiveContext.functions.ts ├── public │ ├── favicon.ico │ ├── thumbnail.png │ └── assets │ │ ├── logo-blocknative.svg │ │ ├── logo-ethers.svg │ │ └── logo-react.svg ├── interfaces │ ├── wallet.ts │ └── network.ts ├── types │ └── react-app-env.d.ts ├── env.example └── models │ └── Address.ts ├── packages ├── base │ ├── hooks │ │ ├── useWeb3 │ │ │ ├── index.ts │ │ │ └── useWeb3.ts │ │ └── useResponsive │ │ │ ├── index.ts │ │ │ └── useResponsive.ts │ ├── components │ │ ├── common │ │ │ ├── Meta │ │ │ │ ├── index.ts │ │ │ │ └── Meta.type.ts │ │ │ └── Portal │ │ │ │ ├── index.ts │ │ │ │ ├── Portal.type.ts │ │ │ │ └── Portal.tsx │ │ ├── default │ │ │ ├── CTA │ │ │ │ ├── index.ts │ │ │ │ ├── CTA.type.ts │ │ │ │ ├── CTA.module.scss │ │ │ │ └── CTA.tsx │ │ │ ├── Text │ │ │ │ ├── index.ts │ │ │ │ ├── Text.enum.ts │ │ │ │ ├── Text.type.ts │ │ │ │ └── Text.tsx │ │ │ ├── Button │ │ │ │ ├── index.ts │ │ │ │ └── Button.type.ts │ │ │ ├── Navbar │ │ │ │ ├── index.ts │ │ │ │ ├── Navbar.module.scss │ │ │ │ └── Navbar.tsx │ │ │ ├── Tagline │ │ │ │ ├── index.ts │ │ │ │ ├── Tagline.module.scss │ │ │ │ └── Tagline.type.ts │ │ │ ├── WalletModal │ │ │ │ ├── index.ts │ │ │ │ └── WalletModal.type.ts │ │ │ ├── Technologies │ │ │ │ ├── index.ts │ │ │ │ ├── Technologies.type.ts │ │ │ │ └── Technologies.module.scss │ │ │ ├── WalletButton │ │ │ │ ├── index.ts │ │ │ │ └── WalletButton.type.ts │ │ │ └── GradientContainer │ │ │ │ ├── index.ts │ │ │ │ ├── GradientContainer.module.scss │ │ │ │ ├── GradientContainer.type.ts │ │ │ │ └── GradientContainer.tsx │ │ ├── example │ │ │ └── ExampleComponent │ │ │ │ ├── index.ts │ │ │ │ ├── ExampleComponent.styles.css │ │ │ │ ├── ExampleComponent.type.ts │ │ │ │ └── ExampleComponent.tsx │ │ └── pages │ │ │ └── home │ │ │ └── HomePage │ │ │ ├── HomePage.type.ts │ │ │ ├── HomePage.module.scss │ │ │ └── HomePage.tsx │ ├── .eslintrc.json │ ├── contexts │ │ ├── Web3Context │ │ │ ├── index.ts │ │ │ ├── Web3Context.functions.ts │ │ │ └── Web3Context.type.ts │ │ └── ResponsiveContext │ │ │ ├── index.tsx │ │ │ ├── ResponsiveContext.type.ts │ │ │ └── ResponsiveContext.functions.ts │ ├── public │ │ ├── favicon.ico │ │ ├── thumbnail.png │ │ └── assets │ │ │ ├── logo-blocknative.svg │ │ │ ├── logo-ethers.svg │ │ │ └── logo-react.svg │ ├── interfaces │ │ ├── wallet.ts │ │ └── network.ts │ ├── pages │ │ ├── index.tsx │ │ ├── api │ │ │ └── hello.ts │ │ ├── 404.tsx │ │ ├── 500.tsx │ │ └── _document.tsx │ ├── types │ │ └── react-app-env.d.ts │ ├── next-env.d.ts │ ├── env.example │ ├── README.md │ ├── next.config.js │ ├── theme │ │ ├── variables.scss │ │ └── theme.enum.ts │ ├── tsconfig.json │ ├── package.json │ └── models │ │ └── Address.ts ├── mui │ ├── components │ │ ├── default │ │ │ ├── CTA │ │ │ │ ├── index.ts │ │ │ │ ├── CTA.type.ts │ │ │ │ └── CTA.styles.ts │ │ │ ├── Text │ │ │ │ ├── index.ts │ │ │ │ ├── Text.enum.ts │ │ │ │ ├── Text.type.ts │ │ │ │ └── Text.tsx │ │ │ ├── Button │ │ │ │ ├── index.ts │ │ │ │ └── Button.type.ts │ │ │ ├── Navbar │ │ │ │ └── index.ts │ │ │ ├── Tagline │ │ │ │ ├── index.ts │ │ │ │ ├── Tagline.type.ts │ │ │ │ └── Tagline.styles.ts │ │ │ ├── WalletModal │ │ │ │ ├── index.ts │ │ │ │ └── WalletModal.type.ts │ │ │ ├── Technologies │ │ │ │ ├── index.ts │ │ │ │ ├── Technologies.type.ts │ │ │ │ └── Technologies.styles.ts │ │ │ ├── WalletButton │ │ │ │ ├── index.ts │ │ │ │ ├── WalletButton.type.ts │ │ │ │ └── WalletButton.styles.ts │ │ │ └── GradientContainer │ │ │ │ ├── index.ts │ │ │ │ ├── GradientContainer.type.ts │ │ │ │ ├── GradientContainer.tsx │ │ │ │ └── GradientContainer.styles.ts │ │ ├── common │ │ │ ├── Meta │ │ │ │ ├── index.ts │ │ │ │ └── Meta.type.ts │ │ │ └── Portal │ │ │ │ ├── index.ts │ │ │ │ ├── Portal.type.ts │ │ │ │ └── Portal.tsx │ │ ├── example │ │ │ └── ExampleComponent │ │ │ │ ├── index.ts │ │ │ │ ├── ExampleComponent.type.ts │ │ │ │ ├── ExampleComponent.styles.ts │ │ │ │ └── ExampleComponent.tsx │ │ └── pages │ │ │ └── home │ │ │ └── HomePage │ │ │ ├── HomePage.type.ts │ │ │ ├── HomePage.styles.ts │ │ │ └── HomePage.tsx │ ├── hooks │ │ ├── useWeb3 │ │ │ ├── index.ts │ │ │ └── useWeb3.ts │ │ └── useResponsive │ │ │ ├── index.ts │ │ │ └── useResponsive.ts │ ├── .eslintrc.json │ ├── contexts │ │ ├── Web3Context │ │ │ ├── index.ts │ │ │ ├── Web3Context.functions.ts │ │ │ └── Web3Context.type.ts │ │ └── ResponsiveContext │ │ │ ├── index.tsx │ │ │ ├── ResponsiveContext.type.ts │ │ │ └── ResponsiveContext.functions.ts │ ├── public │ │ ├── favicon.ico │ │ ├── thumbnail.png │ │ └── assets │ │ │ ├── logo-blocknative.svg │ │ │ ├── logo-ethers.svg │ │ │ └── logo-react.svg │ ├── interfaces │ │ ├── wallet.ts │ │ └── network.ts │ ├── webpack.alias.js │ ├── pages │ │ ├── index.tsx │ │ ├── api │ │ │ └── hello.ts │ │ ├── 404.tsx │ │ └── 500.tsx │ ├── types │ │ ├── react-app-env.d.ts │ │ └── theme.d.ts │ ├── next-env.d.ts │ ├── env.example │ ├── theme │ │ └── theme.enum.ts │ ├── README.md │ ├── utils │ │ └── functions.ts │ ├── tsconfig.json │ ├── models │ │ └── Address.ts │ ├── next.config.js │ └── package.json ├── example │ ├── hooks │ │ ├── useWeb3 │ │ │ ├── index.ts │ │ │ └── useWeb3.ts │ │ └── useResponsive │ │ │ ├── index.ts │ │ │ └── useResponsive.ts │ ├── components │ │ ├── common │ │ │ ├── Meta │ │ │ │ ├── index.ts │ │ │ │ └── Meta.type.ts │ │ │ └── Portal │ │ │ │ ├── index.ts │ │ │ │ ├── Portal.type.ts │ │ │ │ └── Portal.tsx │ │ └── pages │ │ │ └── home │ │ │ └── HomePage │ │ │ └── HomePage.tsx │ ├── .eslintrc.json │ ├── contexts │ │ ├── Web3Context │ │ │ ├── index.ts │ │ │ ├── Web3Context.functions.ts │ │ │ └── Web3Context.type.ts │ │ └── ResponsiveContext │ │ │ ├── index.tsx │ │ │ ├── ResponsiveContext.type.ts │ │ │ └── ResponsiveContext.functions.ts │ ├── public │ │ ├── favicon.ico │ │ ├── thumbnail.png │ │ └── assets │ │ │ ├── logo-blocknative.svg │ │ │ ├── logo-ethers.svg │ │ │ └── logo-react.svg │ ├── interfaces │ │ ├── wallet.ts │ │ └── network.ts │ ├── pages │ │ ├── index.tsx │ │ ├── api │ │ │ └── hello.ts │ │ ├── 404.tsx │ │ ├── 500.tsx │ │ └── _document.tsx │ ├── types │ │ └── react-app-env.d.ts │ ├── next-env.d.ts │ ├── env.example │ ├── next.config.js │ ├── package.json │ ├── tsconfig.json │ └── models │ │ └── Address.ts ├── stylex │ ├── app │ │ ├── _components │ │ │ ├── home │ │ │ │ ├── CTA │ │ │ │ │ └── index.ts │ │ │ │ ├── HomePage │ │ │ │ │ ├── index.ts │ │ │ │ │ └── HomePage.tsx │ │ │ │ ├── Tagline │ │ │ │ │ ├── index.ts │ │ │ │ │ └── Tagline.type.ts │ │ │ │ └── Technologies │ │ │ │ │ ├── index.ts │ │ │ │ │ └── Technologies.type.ts │ │ │ ├── Portal │ │ │ │ ├── index.ts │ │ │ │ ├── Portal.type.ts │ │ │ │ └── Portal.tsx │ │ │ ├── theme │ │ │ │ ├── Text │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── Text.enum.ts │ │ │ │ │ ├── Text.type.ts │ │ │ │ │ └── Text.variables.ts │ │ │ │ └── Button │ │ │ │ │ ├── index.ts │ │ │ │ │ └── Button.type.ts │ │ │ └── navbar │ │ │ │ ├── Navbar │ │ │ │ └── index.ts │ │ │ │ ├── WalletButton │ │ │ │ ├── index.ts │ │ │ │ └── WalletButton.type.ts │ │ │ │ └── WalletModal │ │ │ │ ├── index.ts │ │ │ │ └── WalletModal.type.ts │ │ ├── page.tsx │ │ └── providers.tsx │ ├── components │ │ └── common │ │ │ ├── Meta │ │ │ ├── index.ts │ │ │ └── Meta.type.ts │ │ │ └── Portal │ │ │ ├── index.ts │ │ │ ├── Portal.type.ts │ │ │ └── Portal.tsx │ ├── hooks │ │ ├── useWeb3 │ │ │ ├── index.ts │ │ │ └── useWeb3.ts │ │ └── useResponsive │ │ │ ├── index.ts │ │ │ └── useResponsive.ts │ ├── .eslintrc.json │ ├── contexts │ │ ├── Web3Context │ │ │ ├── index.ts │ │ │ ├── Web3Context.functions.ts │ │ │ └── Web3Context.type.ts │ │ └── ResponsiveContext │ │ │ ├── index.tsx │ │ │ ├── ResponsiveContext.type.ts │ │ │ └── ResponsiveContext.functions.ts │ ├── public │ │ ├── favicon.ico │ │ ├── thumbnail.png │ │ └── assets │ │ │ ├── logo-blocknative.svg │ │ │ ├── logo-ethers.svg │ │ │ └── logo-react.svg │ ├── interfaces │ │ ├── wallet.ts │ │ └── network.ts │ ├── types │ │ └── react-app-env.d.ts │ ├── next-env.d.ts │ ├── env.example │ ├── .babelrc.js │ ├── tsconfig.json │ ├── models │ │ └── Address.ts │ ├── styles │ │ └── theme.enum.ts │ └── next.config.js ├── tailwind │ ├── components │ │ ├── default │ │ │ ├── CTA │ │ │ │ ├── index.ts │ │ │ │ ├── CTA.type.ts │ │ │ │ └── CTA.tsx │ │ │ ├── Text │ │ │ │ ├── index.ts │ │ │ │ ├── Text.enum.ts │ │ │ │ ├── Text.type.ts │ │ │ │ └── Text.tsx │ │ │ ├── Button │ │ │ │ ├── index.ts │ │ │ │ └── Button.type.ts │ │ │ ├── Navbar │ │ │ │ ├── index.ts │ │ │ │ └── Navbar.tsx │ │ │ ├── Tagline │ │ │ │ ├── index.ts │ │ │ │ └── Tagline.type.ts │ │ │ ├── WalletModal │ │ │ │ ├── index.ts │ │ │ │ └── WalletModal.type.ts │ │ │ ├── Technologies │ │ │ │ ├── index.ts │ │ │ │ └── Technologies.type.ts │ │ │ ├── WalletButton │ │ │ │ ├── index.ts │ │ │ │ └── WalletButton.type.ts │ │ │ └── GradientContainer │ │ │ │ ├── index.ts │ │ │ │ ├── GradientContainer.type.ts │ │ │ │ └── GradientContainer.tsx │ │ ├── common │ │ │ ├── Meta │ │ │ │ ├── index.ts │ │ │ │ └── Meta.type.ts │ │ │ └── Portal │ │ │ │ ├── index.ts │ │ │ │ ├── Portal.type.ts │ │ │ │ └── Portal.tsx │ │ ├── example │ │ │ └── ExampleComponent │ │ │ │ ├── index.ts │ │ │ │ ├── ExampleComponent.type.ts │ │ │ │ └── ExampleComponent.tsx │ │ └── pages │ │ │ └── home │ │ │ └── HomePage │ │ │ ├── HomePage.type.ts │ │ │ └── HomePage.tsx │ ├── hooks │ │ ├── useWeb3 │ │ │ ├── index.ts │ │ │ └── useWeb3.ts │ │ └── useResponsive │ │ │ ├── index.ts │ │ │ └── useResponsive.ts │ ├── .eslintrc.json │ ├── contexts │ │ ├── Web3Context │ │ │ ├── index.ts │ │ │ ├── Web3Context.functions.ts │ │ │ └── Web3Context.type.ts │ │ └── ResponsiveContext │ │ │ ├── index.tsx │ │ │ ├── ResponsiveContext.type.ts │ │ │ └── ResponsiveContext.functions.ts │ ├── public │ │ ├── favicon.ico │ │ ├── thumbnail.png │ │ └── assets │ │ │ ├── logo-blocknative.svg │ │ │ ├── logo-ethers.svg │ │ │ └── logo-react.svg │ ├── interfaces │ │ ├── wallet.ts │ │ └── network.ts │ ├── pages │ │ ├── index.tsx │ │ ├── api │ │ │ └── hello.ts │ │ ├── 404.tsx │ │ ├── 500.tsx │ │ └── _document.tsx │ ├── types │ │ └── react-app-env.d.ts │ ├── postcss.config.js │ ├── next-env.d.ts │ ├── env.example │ ├── README.md │ ├── next.config.js │ ├── tsconfig.json │ ├── package.json │ └── models │ │ └── Address.ts └── styled-components │ ├── components │ ├── default │ │ ├── CTA │ │ │ ├── index.ts │ │ │ ├── CTA.type.ts │ │ │ ├── CTA.styles.ts │ │ │ └── CTA.tsx │ │ ├── Text │ │ │ ├── index.ts │ │ │ ├── Text.enum.ts │ │ │ ├── Text.type.ts │ │ │ └── Text.tsx │ │ ├── Button │ │ │ ├── index.ts │ │ │ └── Button.type.ts │ │ ├── Navbar │ │ │ ├── index.ts │ │ │ ├── Navbar.styles.ts │ │ │ └── Navbar.tsx │ │ ├── Tagline │ │ │ ├── index.ts │ │ │ ├── Tagline.type.ts │ │ │ └── Tagline.styles.ts │ │ ├── WalletModal │ │ │ ├── index.ts │ │ │ └── WalletModal.type.ts │ │ ├── Technologies │ │ │ ├── index.ts │ │ │ └── Technologies.type.ts │ │ ├── WalletButton │ │ │ ├── index.ts │ │ │ ├── WalletButton.type.ts │ │ │ └── WalletButton.styles.ts │ │ └── GradientContainer │ │ │ ├── index.ts │ │ │ ├── GradientContainer.type.ts │ │ │ ├── GradientContainer.tsx │ │ │ └── GradientContainer.styles.ts │ ├── common │ │ ├── Meta │ │ │ ├── index.ts │ │ │ └── Meta.type.ts │ │ └── Portal │ │ │ ├── index.ts │ │ │ ├── Portal.type.ts │ │ │ └── Portal.tsx │ ├── layout │ │ └── Flex │ │ │ ├── index.ts │ │ │ ├── Flex.tsx │ │ │ └── Flex.enum.ts │ ├── example │ │ └── ExampleComponent │ │ │ ├── index.ts │ │ │ ├── ExampleComponent.type.ts │ │ │ ├── ExampleComponent.styles.ts │ │ │ └── ExampleComponent.tsx │ └── pages │ │ └── home │ │ └── HomePage │ │ ├── HomePage.type.ts │ │ ├── HomePage.styles.ts │ │ └── HomePage.tsx │ ├── hooks │ ├── useWeb3 │ │ ├── index.ts │ │ └── useWeb3.ts │ └── useResponsive │ │ ├── index.ts │ │ └── useResponsive.ts │ ├── .eslintrc.json │ ├── contexts │ ├── Web3Context │ │ ├── index.ts │ │ ├── Web3Context.functions.ts │ │ └── Web3Context.type.ts │ └── ResponsiveContext │ │ ├── index.tsx │ │ ├── ResponsiveContext.type.ts │ │ └── ResponsiveContext.functions.ts │ ├── interfaces │ ├── wallet.ts │ └── network.ts │ ├── public │ ├── favicon.ico │ ├── thumbnail.png │ └── assets │ │ ├── logo-blocknative.svg │ │ └── logo-ethers.svg │ ├── pages │ ├── index.tsx │ ├── api │ │ └── hello.ts │ ├── 404.tsx │ └── 500.tsx │ ├── types │ ├── react-app-env.d.ts │ ├── functions.type.ts │ └── theme.d.ts │ ├── next-env.d.ts │ ├── env.example │ ├── theme │ └── theme.enum.ts │ ├── next.config.js │ ├── tsconfig.json │ ├── package.json │ └── models │ └── Address.ts ├── doc └── tagline.png ├── commitlint.config.cjs ├── funding.json ├── tests └── snapshots │ ├── diffs │ ├── desktop-mui-template-diff.png │ ├── mobile-base-template-diff.png │ ├── mobile-mui-template-diff.png │ ├── desktop-base-template-diff.png │ ├── mobile-stylex-template-diff.png │ ├── desktop-stylex-template-diff.png │ ├── desktop-tailwind-template-diff.png │ ├── mobile-tailwind-template-diff.png │ ├── desktop-styled-components-template-diff.png │ └── mobile-styled-components-template-diff.png │ ├── actuals │ ├── desktop-base-template-actual.png │ ├── desktop-mui-template-actual.png │ ├── mobile-base-template-actual.png │ ├── mobile-mui-template-actual.png │ ├── desktop-stylex-template-actual.png │ ├── mobile-stylex-template-actual.png │ ├── desktop-tailwind-template-actual.png │ ├── mobile-tailwind-template-actual.png │ ├── mobile-styled-components-template-actual.png │ └── desktop-styled-components-template-actual.png │ ├── gh_desktop-template-snapshot-expectation.png │ ├── gh_mobile-template-snapshot-expectation.png │ ├── local_desktop-template-snapshot-expectation.png │ └── local_mobile-template-snapshot-expectation.png ├── .github ├── FUNDING.yml ├── workflows │ ├── pr_labels.yml │ └── release.yml └── PULL_REQUEST_TEMPLATE.md ├── versions.json ├── .gitignore ├── playwright.config.ts ├── .releaserc.json ├── LICENSE └── Makefile /common/hooks/useWeb3/index.ts: -------------------------------------------------------------------------------- 1 | export { useWeb3 as default } from './useWeb3'; 2 | -------------------------------------------------------------------------------- /common/components/common/Meta/index.ts: -------------------------------------------------------------------------------- 1 | export { Meta as default } from './Meta'; 2 | -------------------------------------------------------------------------------- /packages/base/hooks/useWeb3/index.ts: -------------------------------------------------------------------------------- 1 | export { useWeb3 as default } from './useWeb3'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/default/CTA/index.ts: -------------------------------------------------------------------------------- 1 | export { CTA as default } from './CTA'; 2 | -------------------------------------------------------------------------------- /packages/mui/hooks/useWeb3/index.ts: -------------------------------------------------------------------------------- 1 | export { useWeb3 as default } from './useWeb3'; 2 | -------------------------------------------------------------------------------- /common/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals", 3 | "rules": {} 4 | } 5 | -------------------------------------------------------------------------------- /common/components/common/Portal/index.ts: -------------------------------------------------------------------------------- 1 | export { Portal as default } from './Portal'; 2 | -------------------------------------------------------------------------------- /doc/tagline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/doc/tagline.png -------------------------------------------------------------------------------- /packages/base/components/common/Meta/index.ts: -------------------------------------------------------------------------------- 1 | export { Meta as default } from './Meta'; 2 | -------------------------------------------------------------------------------- /packages/base/components/default/CTA/index.ts: -------------------------------------------------------------------------------- 1 | export { CTA as default } from './CTA'; 2 | -------------------------------------------------------------------------------- /packages/base/components/default/Text/index.ts: -------------------------------------------------------------------------------- 1 | export { Text as default } from './Text'; 2 | -------------------------------------------------------------------------------- /packages/example/hooks/useWeb3/index.ts: -------------------------------------------------------------------------------- 1 | export { useWeb3 as default } from './useWeb3'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/common/Meta/index.ts: -------------------------------------------------------------------------------- 1 | export { Meta as default } from './Meta'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/default/Text/index.ts: -------------------------------------------------------------------------------- 1 | export { Text as default } from './Text'; 2 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/home/CTA/index.ts: -------------------------------------------------------------------------------- 1 | export { CTA as default } from './CTA'; 2 | -------------------------------------------------------------------------------- /packages/stylex/components/common/Meta/index.ts: -------------------------------------------------------------------------------- 1 | export { Meta as default } from './Meta'; 2 | -------------------------------------------------------------------------------- /packages/stylex/hooks/useWeb3/index.ts: -------------------------------------------------------------------------------- 1 | export { useWeb3 as default } from './useWeb3'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/CTA/index.ts: -------------------------------------------------------------------------------- 1 | export { CTA as default } from './CTA'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/hooks/useWeb3/index.ts: -------------------------------------------------------------------------------- 1 | export { useWeb3 as default } from './useWeb3'; 2 | -------------------------------------------------------------------------------- /common/contexts/Web3Context/index.ts: -------------------------------------------------------------------------------- 1 | export { Web3Provider as default } from './Web3Context'; 2 | -------------------------------------------------------------------------------- /packages/base/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals", 3 | "rules": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/base/components/common/Portal/index.ts: -------------------------------------------------------------------------------- 1 | export { Portal as default } from './Portal'; 2 | -------------------------------------------------------------------------------- /packages/base/components/default/Button/index.ts: -------------------------------------------------------------------------------- 1 | export { Button as default } from './Button'; 2 | -------------------------------------------------------------------------------- /packages/base/components/default/Navbar/index.ts: -------------------------------------------------------------------------------- 1 | export { Navbar as default } from './Navbar'; 2 | -------------------------------------------------------------------------------- /packages/example/components/common/Meta/index.ts: -------------------------------------------------------------------------------- 1 | export { Meta as default } from './Meta'; 2 | -------------------------------------------------------------------------------- /packages/mui/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals", 3 | "rules": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/mui/components/common/Portal/index.ts: -------------------------------------------------------------------------------- 1 | export { Portal as default } from './Portal'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/default/Button/index.ts: -------------------------------------------------------------------------------- 1 | export { Button as default } from './Button'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/default/Navbar/index.ts: -------------------------------------------------------------------------------- 1 | export { Navbar as default } from './Navbar'; 2 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/Portal/index.ts: -------------------------------------------------------------------------------- 1 | export { Portal as default } from './Portal'; 2 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/theme/Text/index.ts: -------------------------------------------------------------------------------- 1 | export { Text as default } from './Text'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/common/Meta/index.ts: -------------------------------------------------------------------------------- 1 | export { Meta as default } from './Meta'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/Text/index.ts: -------------------------------------------------------------------------------- 1 | export { Text as default } from './Text'; 2 | -------------------------------------------------------------------------------- /commitlint.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'] 3 | }; 4 | -------------------------------------------------------------------------------- /common/hooks/useResponsive/index.ts: -------------------------------------------------------------------------------- 1 | export { useResponsive as default } from './useResponsive'; 2 | -------------------------------------------------------------------------------- /packages/base/components/default/Tagline/index.ts: -------------------------------------------------------------------------------- 1 | export { Tagline as default } from './Tagline'; 2 | -------------------------------------------------------------------------------- /packages/example/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals", 3 | "rules": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/example/components/common/Portal/index.ts: -------------------------------------------------------------------------------- 1 | export { Portal as default } from './Portal'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/default/Tagline/index.ts: -------------------------------------------------------------------------------- 1 | export { Tagline as default } from './Tagline'; 2 | -------------------------------------------------------------------------------- /packages/mui/contexts/Web3Context/index.ts: -------------------------------------------------------------------------------- 1 | export { Web3Provider as default } from './Web3Context'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/CTA/index.ts: -------------------------------------------------------------------------------- 1 | export { CTA as default } from './CTA'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/hooks/useWeb3/index.ts: -------------------------------------------------------------------------------- 1 | export { useWeb3 as default } from './useWeb3'; 2 | -------------------------------------------------------------------------------- /packages/stylex/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals", 3 | "rules": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/theme/Button/index.ts: -------------------------------------------------------------------------------- 1 | export { Button as default } from './Button'; 2 | -------------------------------------------------------------------------------- /packages/stylex/components/common/Portal/index.ts: -------------------------------------------------------------------------------- 1 | export { Portal as default } from './Portal'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals", 3 | "rules": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/tailwind/components/common/Portal/index.ts: -------------------------------------------------------------------------------- 1 | export { Portal as default } from './Portal'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/Button/index.ts: -------------------------------------------------------------------------------- 1 | export { Button as default } from './Button'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/Navbar/index.ts: -------------------------------------------------------------------------------- 1 | export { Navbar as default } from './Navbar'; 2 | -------------------------------------------------------------------------------- /packages/base/components/default/CTA/CTA.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ICTA {} 3 | 4 | export type { ICTA } 5 | -------------------------------------------------------------------------------- /packages/base/components/default/Tagline/Tagline.module.scss: -------------------------------------------------------------------------------- 1 | .text { 2 | margin-bottom: 12px; 3 | } 4 | -------------------------------------------------------------------------------- /packages/base/contexts/Web3Context/index.ts: -------------------------------------------------------------------------------- 1 | export { Web3Provider as default } from './Web3Context'; 2 | -------------------------------------------------------------------------------- /packages/base/hooks/useResponsive/index.ts: -------------------------------------------------------------------------------- 1 | export { useResponsive as default } from './useResponsive'; 2 | -------------------------------------------------------------------------------- /packages/example/contexts/Web3Context/index.ts: -------------------------------------------------------------------------------- 1 | export { Web3Provider as default } from './Web3Context'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/default/CTA/CTA.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ICTA {} 3 | 4 | export type { ICTA } 5 | -------------------------------------------------------------------------------- /packages/mui/hooks/useResponsive/index.ts: -------------------------------------------------------------------------------- 1 | export { useResponsive as default } from './useResponsive'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/components/common/Meta/index.ts: -------------------------------------------------------------------------------- 1 | export { Meta as default } from './Meta'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Text/index.ts: -------------------------------------------------------------------------------- 1 | export { Text as default } from './Text'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/components/layout/Flex/index.ts: -------------------------------------------------------------------------------- 1 | export { Flex as default } from './Flex'; 2 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/home/HomePage/index.ts: -------------------------------------------------------------------------------- 1 | export { HomePage as default } from './HomePage'; 2 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/home/Tagline/index.ts: -------------------------------------------------------------------------------- 1 | export { Tagline as default } from './Tagline'; 2 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/navbar/Navbar/index.ts: -------------------------------------------------------------------------------- 1 | export { Navbar as default } from './Navbar'; 2 | -------------------------------------------------------------------------------- /packages/stylex/contexts/Web3Context/index.ts: -------------------------------------------------------------------------------- 1 | export { Web3Provider as default } from './Web3Context'; 2 | -------------------------------------------------------------------------------- /packages/stylex/hooks/useResponsive/index.ts: -------------------------------------------------------------------------------- 1 | export { useResponsive as default } from './useResponsive'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/Tagline/index.ts: -------------------------------------------------------------------------------- 1 | export { Tagline as default } from './Tagline'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/contexts/Web3Context/index.ts: -------------------------------------------------------------------------------- 1 | export { Web3Provider as default } from './Web3Context'; 2 | -------------------------------------------------------------------------------- /common/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/common/public/favicon.ico -------------------------------------------------------------------------------- /packages/base/components/default/WalletModal/index.ts: -------------------------------------------------------------------------------- 1 | export { WalletModal as default } from './WalletModal'; 2 | -------------------------------------------------------------------------------- /packages/example/hooks/useResponsive/index.ts: -------------------------------------------------------------------------------- 1 | export { useResponsive as default } from './useResponsive'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/default/WalletModal/index.ts: -------------------------------------------------------------------------------- 1 | export { WalletModal as default } from './WalletModal'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals", 3 | "rules": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/styled-components/components/common/Portal/index.ts: -------------------------------------------------------------------------------- 1 | export { Portal as default } from './Portal'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Button/index.ts: -------------------------------------------------------------------------------- 1 | export { Button as default } from './Button'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Navbar/index.ts: -------------------------------------------------------------------------------- 1 | export { Navbar as default } from './Navbar'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/CTA/CTA.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ICTA {} 3 | 4 | export type { ICTA } 5 | -------------------------------------------------------------------------------- /packages/tailwind/hooks/useResponsive/index.ts: -------------------------------------------------------------------------------- 1 | export { useResponsive as default } from './useResponsive'; 2 | -------------------------------------------------------------------------------- /common/contexts/ResponsiveContext/index.tsx: -------------------------------------------------------------------------------- 1 | export { ResponsiveProvider as default } from './ResponsiveContext'; 2 | -------------------------------------------------------------------------------- /common/public/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/common/public/thumbnail.png -------------------------------------------------------------------------------- /packages/base/components/default/Technologies/index.ts: -------------------------------------------------------------------------------- 1 | export { Technologies as default } from './Technologies'; 2 | -------------------------------------------------------------------------------- /packages/base/components/default/WalletButton/index.ts: -------------------------------------------------------------------------------- 1 | export { WalletButton as default } from './WalletButton'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/default/Technologies/index.ts: -------------------------------------------------------------------------------- 1 | export { Technologies as default } from './Technologies'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/default/WalletButton/index.ts: -------------------------------------------------------------------------------- 1 | export { WalletButton as default } from './WalletButton'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/CTA/CTA.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ICTA {} 3 | 4 | export type { ICTA } 5 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Tagline/index.ts: -------------------------------------------------------------------------------- 1 | export { Tagline as default } from './Tagline'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/contexts/Web3Context/index.ts: -------------------------------------------------------------------------------- 1 | export { Web3Provider as default } from './Web3Context'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/WalletModal/index.ts: -------------------------------------------------------------------------------- 1 | export { WalletModal as default } from './WalletModal'; 2 | -------------------------------------------------------------------------------- /packages/base/components/default/Tagline/Tagline.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ITagline {} 3 | 4 | export type { ITagline } 5 | -------------------------------------------------------------------------------- /packages/base/contexts/ResponsiveContext/index.tsx: -------------------------------------------------------------------------------- 1 | export { ResponsiveProvider as default } from './ResponsiveContext'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/default/Tagline/Tagline.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ITagline {} 3 | 4 | export type { ITagline } 5 | -------------------------------------------------------------------------------- /packages/mui/contexts/ResponsiveContext/index.tsx: -------------------------------------------------------------------------------- 1 | export { ResponsiveProvider as default } from './ResponsiveContext'; 2 | -------------------------------------------------------------------------------- /packages/mui/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/packages/mui/public/favicon.ico -------------------------------------------------------------------------------- /packages/styled-components/hooks/useResponsive/index.ts: -------------------------------------------------------------------------------- 1 | export { useResponsive as default } from './useResponsive'; 2 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/home/Technologies/index.ts: -------------------------------------------------------------------------------- 1 | export { Technologies as default } from './Technologies'; 2 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/navbar/WalletButton/index.ts: -------------------------------------------------------------------------------- 1 | export { WalletButton as default } from './WalletButton'; 2 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/navbar/WalletModal/index.ts: -------------------------------------------------------------------------------- 1 | export { WalletModal as default } from './WalletModal'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/Technologies/index.ts: -------------------------------------------------------------------------------- 1 | export { Technologies as default } from './Technologies'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/WalletButton/index.ts: -------------------------------------------------------------------------------- 1 | export { WalletButton as default } from './WalletButton'; 2 | -------------------------------------------------------------------------------- /packages/base/components/example/ExampleComponent/index.ts: -------------------------------------------------------------------------------- 1 | export { ExampleComponent as default } from './ExampleComponent'; 2 | -------------------------------------------------------------------------------- /packages/base/components/pages/home/HomePage/HomePage.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IHomePage {} 3 | 4 | export type { IHomePage } 5 | -------------------------------------------------------------------------------- /packages/base/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/packages/base/public/favicon.ico -------------------------------------------------------------------------------- /packages/example/contexts/ResponsiveContext/index.tsx: -------------------------------------------------------------------------------- 1 | export { ResponsiveProvider as default } from './ResponsiveContext'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/example/ExampleComponent/index.ts: -------------------------------------------------------------------------------- 1 | export { ExampleComponent as default } from './ExampleComponent'; 2 | -------------------------------------------------------------------------------- /packages/mui/components/pages/home/HomePage/HomePage.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IHomePage {} 3 | 4 | export type { IHomePage } 5 | -------------------------------------------------------------------------------- /packages/mui/public/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/packages/mui/public/thumbnail.png -------------------------------------------------------------------------------- /packages/styled-components/components/default/WalletModal/index.ts: -------------------------------------------------------------------------------- 1 | export { WalletModal as default } from './WalletModal'; 2 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/home/Tagline/Tagline.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ITagline {} 3 | 4 | export type { ITagline } 5 | -------------------------------------------------------------------------------- /packages/stylex/contexts/ResponsiveContext/index.tsx: -------------------------------------------------------------------------------- 1 | export { ResponsiveProvider as default } from './ResponsiveContext'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/Tagline/Tagline.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ITagline {} 3 | 4 | export type { ITagline } 5 | -------------------------------------------------------------------------------- /packages/tailwind/contexts/ResponsiveContext/index.tsx: -------------------------------------------------------------------------------- 1 | export { ResponsiveProvider as default } from './ResponsiveContext'; 2 | -------------------------------------------------------------------------------- /common/components/common/Portal/Portal.type.ts: -------------------------------------------------------------------------------- 1 | interface IPortal { 2 | selector: string; 3 | } 4 | 5 | export type { IPortal }; 6 | -------------------------------------------------------------------------------- /common/interfaces/wallet.ts: -------------------------------------------------------------------------------- 1 | interface IWallet { 2 | name: string; 3 | srcLogo: string; 4 | } 5 | 6 | export type { IWallet }; 7 | -------------------------------------------------------------------------------- /packages/base/components/default/GradientContainer/index.ts: -------------------------------------------------------------------------------- 1 | export { GradientContainer as default } from './GradientContainer'; 2 | -------------------------------------------------------------------------------- /packages/base/components/example/ExampleComponent/ExampleComponent.styles.css: -------------------------------------------------------------------------------- 1 | .example-component { 2 | position: relative; 3 | } -------------------------------------------------------------------------------- /packages/base/public/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/packages/base/public/thumbnail.png -------------------------------------------------------------------------------- /packages/example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/packages/example/public/favicon.ico -------------------------------------------------------------------------------- /packages/mui/components/default/GradientContainer/index.ts: -------------------------------------------------------------------------------- 1 | export { GradientContainer as default } from './GradientContainer'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Technologies/index.ts: -------------------------------------------------------------------------------- 1 | export { Technologies as default } from './Technologies'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/WalletButton/index.ts: -------------------------------------------------------------------------------- 1 | export { WalletButton as default } from './WalletButton'; 2 | -------------------------------------------------------------------------------- /packages/stylex/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/packages/stylex/public/favicon.ico -------------------------------------------------------------------------------- /packages/stylex/public/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/packages/stylex/public/thumbnail.png -------------------------------------------------------------------------------- /packages/tailwind/components/example/ExampleComponent/index.ts: -------------------------------------------------------------------------------- 1 | export { ExampleComponent as default } from './ExampleComponent'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/pages/home/HomePage/HomePage.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IHomePage {} 3 | 4 | export type { IHomePage } 5 | -------------------------------------------------------------------------------- /packages/tailwind/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/packages/tailwind/public/favicon.ico -------------------------------------------------------------------------------- /funding.json: -------------------------------------------------------------------------------- 1 | { 2 | "opRetro": { 3 | "projectId": "0x04a524f19ec36576d699e7452f642a4f22cea4ba6b318b84bd4e6df2df4e8b60" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/example/public/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/packages/example/public/thumbnail.png -------------------------------------------------------------------------------- /packages/mui/interfaces/wallet.ts: -------------------------------------------------------------------------------- 1 | interface IWallet { 2 | name: string; 3 | srcLogo: string; 4 | } 5 | 6 | export type { IWallet }; 7 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Tagline/Tagline.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ITagline {} 3 | 4 | export type { ITagline } 5 | -------------------------------------------------------------------------------- /packages/styled-components/contexts/ResponsiveContext/index.tsx: -------------------------------------------------------------------------------- 1 | export { ResponsiveProvider as default } from './ResponsiveContext'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/GradientContainer/index.ts: -------------------------------------------------------------------------------- 1 | export { GradientContainer as default } from './GradientContainer'; 2 | -------------------------------------------------------------------------------- /packages/tailwind/public/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/packages/tailwind/public/thumbnail.png -------------------------------------------------------------------------------- /packages/base/components/common/Portal/Portal.type.ts: -------------------------------------------------------------------------------- 1 | interface IPortal { 2 | selector: string; 3 | } 4 | 5 | export type { IPortal }; 6 | -------------------------------------------------------------------------------- /packages/base/components/default/Technologies/Technologies.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ITechnologies {} 3 | 4 | export type { ITechnologies } 5 | -------------------------------------------------------------------------------- /packages/base/components/default/WalletButton/WalletButton.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IWalletButton {} 3 | 4 | export type { IWalletButton } 5 | -------------------------------------------------------------------------------- /packages/base/interfaces/wallet.ts: -------------------------------------------------------------------------------- 1 | interface IWallet { 2 | name: string; 3 | srcLogo: string; 4 | } 5 | 6 | export type { IWallet }; 7 | -------------------------------------------------------------------------------- /packages/example/components/common/Portal/Portal.type.ts: -------------------------------------------------------------------------------- 1 | interface IPortal { 2 | selector: string; 3 | } 4 | 5 | export type { IPortal }; 6 | -------------------------------------------------------------------------------- /packages/example/interfaces/wallet.ts: -------------------------------------------------------------------------------- 1 | interface IWallet { 2 | name: string; 3 | srcLogo: string; 4 | } 5 | 6 | export type { IWallet }; 7 | -------------------------------------------------------------------------------- /packages/mui/components/common/Portal/Portal.type.ts: -------------------------------------------------------------------------------- 1 | interface IPortal { 2 | selector: string; 3 | } 4 | 5 | export type { IPortal }; 6 | -------------------------------------------------------------------------------- /packages/mui/components/default/Technologies/Technologies.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ITechnologies {} 3 | 4 | export type { ITechnologies } 5 | -------------------------------------------------------------------------------- /packages/mui/components/default/WalletButton/WalletButton.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IWalletButton {} 3 | 4 | export type { IWalletButton } 5 | -------------------------------------------------------------------------------- /packages/styled-components/components/example/ExampleComponent/index.ts: -------------------------------------------------------------------------------- 1 | export { ExampleComponent as default } from './ExampleComponent'; 2 | -------------------------------------------------------------------------------- /packages/styled-components/components/pages/home/HomePage/HomePage.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IHomePage {} 3 | 4 | export type { IHomePage } 5 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/Portal/Portal.type.ts: -------------------------------------------------------------------------------- 1 | interface IPortal { 2 | selector: string; 3 | } 4 | 5 | export type { IPortal }; 6 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/home/Technologies/Technologies.type.ts: -------------------------------------------------------------------------------- 1 | interface ITechnologies {} 2 | 3 | export type { ITechnologies }; 4 | -------------------------------------------------------------------------------- /packages/stylex/components/common/Portal/Portal.type.ts: -------------------------------------------------------------------------------- 1 | interface IPortal { 2 | selector: string; 3 | } 4 | 5 | export type { IPortal }; 6 | -------------------------------------------------------------------------------- /packages/stylex/interfaces/wallet.ts: -------------------------------------------------------------------------------- 1 | interface IWallet { 2 | name: string; 3 | srcLogo: string; 4 | } 5 | 6 | export type { IWallet }; 7 | -------------------------------------------------------------------------------- /packages/tailwind/interfaces/wallet.ts: -------------------------------------------------------------------------------- 1 | interface IWallet { 2 | name: string; 3 | srcLogo: string; 4 | } 5 | 6 | export type { IWallet }; 7 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/GradientContainer/index.ts: -------------------------------------------------------------------------------- 1 | export { GradientContainer as default } from './GradientContainer'; 2 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/navbar/WalletButton/WalletButton.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IWalletButton {} 3 | 4 | export type { IWalletButton } 5 | -------------------------------------------------------------------------------- /packages/tailwind/components/common/Portal/Portal.type.ts: -------------------------------------------------------------------------------- 1 | interface IPortal { 2 | selector: string; 3 | } 4 | 5 | export type { IPortal }; 6 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/Technologies/Technologies.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ITechnologies {} 3 | 4 | export type { ITechnologies } 5 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/WalletButton/WalletButton.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IWalletButton {} 3 | 4 | export type { IWalletButton } 5 | -------------------------------------------------------------------------------- /packages/styled-components/components/common/Portal/Portal.type.ts: -------------------------------------------------------------------------------- 1 | interface IPortal { 2 | selector: string; 3 | } 4 | 5 | export type { IPortal }; 6 | -------------------------------------------------------------------------------- /packages/styled-components/interfaces/wallet.ts: -------------------------------------------------------------------------------- 1 | interface IWallet { 2 | name: string; 3 | srcLogo: string; 4 | } 5 | 6 | export type { IWallet }; 7 | -------------------------------------------------------------------------------- /packages/styled-components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/packages/styled-components/public/favicon.ico -------------------------------------------------------------------------------- /packages/base/components/example/ExampleComponent/ExampleComponent.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IExampleComponent {} 3 | 4 | export type { IExampleComponent } 5 | -------------------------------------------------------------------------------- /packages/mui/components/example/ExampleComponent/ExampleComponent.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IExampleComponent {} 3 | 4 | export type { IExampleComponent } 5 | -------------------------------------------------------------------------------- /packages/mui/webpack.alias.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | resolve: { 3 | alias: { 4 | '@mui/styled-engine': '@mui/styled-engine-sc' 5 | } 6 | } 7 | }; 8 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Technologies/Technologies.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface ITechnologies {} 3 | 4 | export type { ITechnologies } 5 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/WalletButton/WalletButton.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IWalletButton {} 3 | 4 | export type { IWalletButton } 5 | -------------------------------------------------------------------------------- /packages/styled-components/public/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/packages/styled-components/public/thumbnail.png -------------------------------------------------------------------------------- /packages/stylex/app/page.tsx: -------------------------------------------------------------------------------- 1 | import HomePage from '@components/home/HomePage'; 2 | 3 | export default function Page() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /common/types/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // web3 injected by wallet 4 | interface Window { 5 | ethereum: any; 6 | } 7 | -------------------------------------------------------------------------------- /packages/base/pages/index.tsx: -------------------------------------------------------------------------------- 1 | // export the home page component as default 2 | export { HomePage as default } from '@components/pages/home/HomePage/HomePage'; 3 | -------------------------------------------------------------------------------- /packages/mui/pages/index.tsx: -------------------------------------------------------------------------------- 1 | // export the home page component as default 2 | export { HomePage as default } from '@components/pages/home/HomePage/HomePage'; 3 | -------------------------------------------------------------------------------- /packages/tailwind/components/example/ExampleComponent/ExampleComponent.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IExampleComponent {} 3 | 4 | export type { IExampleComponent } 5 | -------------------------------------------------------------------------------- /tests/snapshots/diffs/desktop-mui-template-diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/diffs/desktop-mui-template-diff.png -------------------------------------------------------------------------------- /tests/snapshots/diffs/mobile-base-template-diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/diffs/mobile-base-template-diff.png -------------------------------------------------------------------------------- /tests/snapshots/diffs/mobile-mui-template-diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/diffs/mobile-mui-template-diff.png -------------------------------------------------------------------------------- /packages/base/types/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // web3 injected by wallet 4 | interface Window { 5 | ethereum: any; 6 | } 7 | -------------------------------------------------------------------------------- /packages/example/pages/index.tsx: -------------------------------------------------------------------------------- 1 | // export the home page component as default 2 | export { HomePage as default } from '@components/pages/home/HomePage/HomePage'; 3 | -------------------------------------------------------------------------------- /packages/mui/types/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // web3 injected by wallet 4 | interface Window { 5 | ethereum: any; 6 | } 7 | -------------------------------------------------------------------------------- /packages/tailwind/pages/index.tsx: -------------------------------------------------------------------------------- 1 | // export the home page component as default 2 | export { HomePage as default } from '@components/pages/home/HomePage/HomePage'; 3 | -------------------------------------------------------------------------------- /tests/snapshots/diffs/desktop-base-template-diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/diffs/desktop-base-template-diff.png -------------------------------------------------------------------------------- /tests/snapshots/diffs/mobile-stylex-template-diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/diffs/mobile-stylex-template-diff.png -------------------------------------------------------------------------------- /common/interfaces/network.ts: -------------------------------------------------------------------------------- 1 | interface INetwork { 2 | id: number; 3 | label: string; 4 | token: string; 5 | rpcUrl: string; 6 | } 7 | 8 | export type { INetwork }; 9 | -------------------------------------------------------------------------------- /packages/example/types/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // web3 injected by wallet 4 | interface Window { 5 | ethereum: any; 6 | } 7 | -------------------------------------------------------------------------------- /packages/styled-components/components/example/ExampleComponent/ExampleComponent.type.ts: -------------------------------------------------------------------------------- 1 | 2 | interface IExampleComponent {} 3 | 4 | export type { IExampleComponent } 5 | -------------------------------------------------------------------------------- /packages/stylex/types/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // web3 injected by wallet 4 | interface Window { 5 | ethereum: any; 6 | } 7 | -------------------------------------------------------------------------------- /packages/tailwind/types/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // web3 injected by wallet 4 | interface Window { 5 | ethereum: any; 6 | } 7 | -------------------------------------------------------------------------------- /tests/snapshots/actuals/desktop-base-template-actual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/actuals/desktop-base-template-actual.png -------------------------------------------------------------------------------- /tests/snapshots/actuals/desktop-mui-template-actual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/actuals/desktop-mui-template-actual.png -------------------------------------------------------------------------------- /tests/snapshots/actuals/mobile-base-template-actual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/actuals/mobile-base-template-actual.png -------------------------------------------------------------------------------- /tests/snapshots/actuals/mobile-mui-template-actual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/actuals/mobile-mui-template-actual.png -------------------------------------------------------------------------------- /tests/snapshots/diffs/desktop-stylex-template-diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/diffs/desktop-stylex-template-diff.png -------------------------------------------------------------------------------- /tests/snapshots/diffs/desktop-tailwind-template-diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/diffs/desktop-tailwind-template-diff.png -------------------------------------------------------------------------------- /tests/snapshots/diffs/mobile-tailwind-template-diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/diffs/mobile-tailwind-template-diff.png -------------------------------------------------------------------------------- /packages/mui/interfaces/network.ts: -------------------------------------------------------------------------------- 1 | interface INetwork { 2 | id: number; 3 | label: string; 4 | token: string; 5 | rpcUrl: string; 6 | } 7 | 8 | export type { INetwork }; 9 | -------------------------------------------------------------------------------- /packages/styled-components/pages/index.tsx: -------------------------------------------------------------------------------- 1 | // export the home page component as default 2 | export { HomePage as default } from '@components/pages/home/HomePage/HomePage'; 3 | -------------------------------------------------------------------------------- /tests/snapshots/actuals/desktop-stylex-template-actual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/actuals/desktop-stylex-template-actual.png -------------------------------------------------------------------------------- /tests/snapshots/actuals/mobile-stylex-template-actual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/actuals/mobile-stylex-template-actual.png -------------------------------------------------------------------------------- /common/components/common/Meta/Meta.type.ts: -------------------------------------------------------------------------------- 1 | interface IMeta { 2 | title: string; 3 | description?: string; 4 | children?: React.ReactNode; 5 | } 6 | 7 | export type { IMeta }; 8 | -------------------------------------------------------------------------------- /packages/base/interfaces/network.ts: -------------------------------------------------------------------------------- 1 | interface INetwork { 2 | id: number; 3 | label: string; 4 | token: string; 5 | rpcUrl: string; 6 | } 7 | 8 | export type { INetwork }; 9 | -------------------------------------------------------------------------------- /packages/example/interfaces/network.ts: -------------------------------------------------------------------------------- 1 | interface INetwork { 2 | id: number; 3 | label: string; 4 | token: string; 5 | rpcUrl: string; 6 | } 7 | 8 | export type { INetwork }; 9 | -------------------------------------------------------------------------------- /packages/styled-components/types/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // web3 injected by wallet 4 | interface Window { 5 | ethereum: any; 6 | } 7 | -------------------------------------------------------------------------------- /packages/stylex/interfaces/network.ts: -------------------------------------------------------------------------------- 1 | interface INetwork { 2 | id: number; 3 | label: string; 4 | token: string; 5 | rpcUrl: string; 6 | } 7 | 8 | export type { INetwork }; 9 | -------------------------------------------------------------------------------- /packages/tailwind/interfaces/network.ts: -------------------------------------------------------------------------------- 1 | interface INetwork { 2 | id: number; 3 | label: string; 4 | token: string; 5 | rpcUrl: string; 6 | } 7 | 8 | export type { INetwork }; 9 | -------------------------------------------------------------------------------- /tests/snapshots/actuals/desktop-tailwind-template-actual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/actuals/desktop-tailwind-template-actual.png -------------------------------------------------------------------------------- /tests/snapshots/actuals/mobile-tailwind-template-actual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/actuals/mobile-tailwind-template-actual.png -------------------------------------------------------------------------------- /tests/snapshots/gh_desktop-template-snapshot-expectation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/gh_desktop-template-snapshot-expectation.png -------------------------------------------------------------------------------- /tests/snapshots/gh_mobile-template-snapshot-expectation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/gh_mobile-template-snapshot-expectation.png -------------------------------------------------------------------------------- /packages/mui/components/common/Meta/Meta.type.ts: -------------------------------------------------------------------------------- 1 | interface IMeta { 2 | title: string; 3 | description?: string; 4 | children?: React.ReactNode; 5 | } 6 | 7 | export type { IMeta }; 8 | -------------------------------------------------------------------------------- /tests/snapshots/local_desktop-template-snapshot-expectation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/local_desktop-template-snapshot-expectation.png -------------------------------------------------------------------------------- /tests/snapshots/local_mobile-template-snapshot-expectation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/local_mobile-template-snapshot-expectation.png -------------------------------------------------------------------------------- /packages/base/components/common/Meta/Meta.type.ts: -------------------------------------------------------------------------------- 1 | interface IMeta { 2 | title: string; 3 | description?: string; 4 | children?: React.ReactNode; 5 | } 6 | 7 | export type { IMeta }; 8 | -------------------------------------------------------------------------------- /packages/example/components/common/Meta/Meta.type.ts: -------------------------------------------------------------------------------- 1 | interface IMeta { 2 | title: string; 3 | description?: string; 4 | children?: React.ReactNode; 5 | } 6 | 7 | export type { IMeta }; 8 | -------------------------------------------------------------------------------- /packages/mui/components/default/Tagline/Tagline.styles.ts: -------------------------------------------------------------------------------- 1 | 2 | import styled from 'styled-components'; 3 | 4 | export const StyledTagline = styled.div` 5 | position: relative; 6 | `; 7 | -------------------------------------------------------------------------------- /packages/styled-components/interfaces/network.ts: -------------------------------------------------------------------------------- 1 | interface INetwork { 2 | id: number; 3 | label: string; 4 | token: string; 5 | rpcUrl: string; 6 | } 7 | 8 | export type { INetwork }; 9 | -------------------------------------------------------------------------------- /packages/stylex/components/common/Meta/Meta.type.ts: -------------------------------------------------------------------------------- 1 | interface IMeta { 2 | title: string; 3 | description?: string; 4 | children?: React.ReactNode; 5 | } 6 | 7 | export type { IMeta }; 8 | -------------------------------------------------------------------------------- /packages/tailwind/components/common/Meta/Meta.type.ts: -------------------------------------------------------------------------------- 1 | interface IMeta { 2 | title: string; 3 | description?: string; 4 | children?: React.ReactNode; 5 | } 6 | 7 | export type { IMeta }; 8 | -------------------------------------------------------------------------------- /tests/snapshots/diffs/desktop-styled-components-template-diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/diffs/desktop-styled-components-template-diff.png -------------------------------------------------------------------------------- /tests/snapshots/diffs/mobile-styled-components-template-diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/diffs/mobile-styled-components-template-diff.png -------------------------------------------------------------------------------- /packages/mui/components/pages/home/HomePage/HomePage.styles.ts: -------------------------------------------------------------------------------- 1 | 2 | import styled from 'styled-components'; 3 | 4 | export const StyledHomePage = styled.div` 5 | position: relative; 6 | `; 7 | -------------------------------------------------------------------------------- /packages/tailwind/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-import': {}, 4 | 'tailwindcss/nesting': {}, 5 | tailwindcss: {}, 6 | autoprefixer: {} 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /tests/snapshots/actuals/mobile-styled-components-template-actual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/actuals/mobile-styled-components-template-actual.png -------------------------------------------------------------------------------- /packages/styled-components/components/common/Meta/Meta.type.ts: -------------------------------------------------------------------------------- 1 | interface IMeta { 2 | title: string; 3 | description?: string; 4 | children?: React.ReactNode; 5 | } 6 | 7 | export type { IMeta }; 8 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Tagline/Tagline.styles.ts: -------------------------------------------------------------------------------- 1 | 2 | import styled from 'styled-components'; 3 | 4 | export const StyledTagline = styled.div` 5 | position: relative; 6 | `; 7 | -------------------------------------------------------------------------------- /tests/snapshots/actuals/desktop-styled-components-template-actual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiiny/create-nextjs-dapp/HEAD/tests/snapshots/actuals/desktop-styled-components-template-actual.png -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: swiiny 4 | ko_fi: swiiny 5 | custom: ['https://etherscan.io/address/0xDE90360cff973CE0672706B432fd8062e5C83941'] 6 | 7 | -------------------------------------------------------------------------------- /packages/mui/components/default/WalletButton/WalletButton.styles.ts: -------------------------------------------------------------------------------- 1 | 2 | import styled from 'styled-components'; 3 | 4 | export const StyledWalletButton = styled.div` 5 | position: relative; 6 | `; 7 | -------------------------------------------------------------------------------- /versions.json: -------------------------------------------------------------------------------- 1 | { 2 | "1.4.x": "Eclipse", 3 | "1.5.x": "Blaze", 4 | "1.6.x": "Lightning", 5 | "1.7.x": "Hurricane", 6 | "1.8.x": "Cyclone", 7 | "1.9.x": "Gale", 8 | "1.10.x": "Typhoon" 9 | } 10 | -------------------------------------------------------------------------------- /packages/mui/components/example/ExampleComponent/ExampleComponent.styles.ts: -------------------------------------------------------------------------------- 1 | 2 | import styled from 'styled-components'; 3 | 4 | export const StyledExampleComponent = styled.div` 5 | position: relative; 6 | `; 7 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/WalletButton/WalletButton.styles.ts: -------------------------------------------------------------------------------- 1 | 2 | import styled from 'styled-components'; 3 | 4 | export const StyledWalletButton = styled.div` 5 | position: relative; 6 | `; 7 | -------------------------------------------------------------------------------- /packages/base/components/default/WalletModal/WalletModal.type.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | 3 | interface IWalletModal { 4 | isOpen: boolean; 5 | onClose: () => void; 6 | } 7 | 8 | export type { IWalletModal }; 9 | -------------------------------------------------------------------------------- /packages/mui/components/default/WalletModal/WalletModal.type.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | 3 | interface IWalletModal { 4 | isOpen: boolean; 5 | onClose: () => void; 6 | } 7 | 8 | export type { IWalletModal }; 9 | -------------------------------------------------------------------------------- /packages/styled-components/components/example/ExampleComponent/ExampleComponent.styles.ts: -------------------------------------------------------------------------------- 1 | 2 | import styled from 'styled-components'; 3 | 4 | export const StyledExampleComponent = styled.div` 5 | position: relative; 6 | `; 7 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/navbar/WalletModal/WalletModal.type.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | 3 | interface IWalletModal { 4 | isOpen: boolean; 5 | onClose: () => void; 6 | } 7 | 8 | export type { IWalletModal }; 9 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/WalletModal/WalletModal.type.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | 3 | interface IWalletModal { 4 | isOpen: boolean; 5 | onClose: () => void; 6 | } 7 | 8 | export type { IWalletModal }; 9 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/WalletModal/WalletModal.type.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | 3 | interface IWalletModal { 4 | isOpen: boolean; 5 | onClose: () => void; 6 | } 7 | 8 | export type { IWalletModal }; 9 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/GradientContainer/GradientContainer.type.ts: -------------------------------------------------------------------------------- 1 | import { IFlex } from '@components/layout/Flex/Flex.type'; 2 | 3 | interface IGradientContainer extends IFlex {} 4 | 5 | export type { IGradientContainer }; 6 | -------------------------------------------------------------------------------- /packages/base/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. 6 | -------------------------------------------------------------------------------- /packages/mui/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. 6 | -------------------------------------------------------------------------------- /packages/stylex/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. 6 | -------------------------------------------------------------------------------- /packages/example/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. 6 | -------------------------------------------------------------------------------- /packages/tailwind/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. 6 | -------------------------------------------------------------------------------- /packages/mui/components/default/GradientContainer/GradientContainer.type.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | import { BoxProps } from '@mui/system'; 3 | 4 | interface IGradientContainer extends BoxProps { 5 | children: ReactNode; 6 | } 7 | 8 | export type { IGradientContainer }; 9 | -------------------------------------------------------------------------------- /packages/styled-components/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. 6 | -------------------------------------------------------------------------------- /packages/styled-components/types/functions.type.ts: -------------------------------------------------------------------------------- 1 | import { EMediaQuery } from '@theme/theme.enum'; 2 | 3 | type THiddenRangeValue = EMediaQuery | string | undefined; 4 | type THiddenRange = [THiddenRangeValue, THiddenRangeValue]; 5 | 6 | export type { THiddenRange, THiddenRangeValue }; 7 | -------------------------------------------------------------------------------- /common/env.example: -------------------------------------------------------------------------------- 1 | # RPC 2 | RPC_ETHEREUM=https://rpc.ankr.com/eth 3 | RPC_GOERLI=https://rpc.ankr.com/eth_goerli 4 | RPC_OPTIMISM=https://rpc.ankr.com/optimism 5 | RPC_GOERLI_OPTIMISM=https://rpc.ankr.com/optimism_testnet 6 | 7 | WALLET_CONNECT_PROJECT_ID=1234567890abcdef1234567890abcdef 8 | -------------------------------------------------------------------------------- /packages/stylex/app/providers.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import Web3Provider from '@contexts/Web3Context'; 4 | import { ReactNode } from 'react'; 5 | 6 | export const ClientProviders = ({ children }: { children: ReactNode }) => { 7 | return {children}; 8 | }; 9 | -------------------------------------------------------------------------------- /packages/base/env.example: -------------------------------------------------------------------------------- 1 | # RPC 2 | RPC_ETHEREUM=https://rpc.ankr.com/eth 3 | RPC_GOERLI=https://rpc.ankr.com/eth_goerli 4 | RPC_OPTIMISM=https://rpc.ankr.com/optimism 5 | RPC_GOERLI_OPTIMISM=https://rpc.ankr.com/optimism_testnet 6 | 7 | WALLET_CONNECT_PROJECT_ID=1234567890abcdef1234567890abcdef 8 | -------------------------------------------------------------------------------- /packages/mui/env.example: -------------------------------------------------------------------------------- 1 | # RPC 2 | RPC_ETHEREUM=https://rpc.ankr.com/eth 3 | RPC_GOERLI=https://rpc.ankr.com/eth_goerli 4 | RPC_OPTIMISM=https://rpc.ankr.com/optimism 5 | RPC_GOERLI_OPTIMISM=https://rpc.ankr.com/optimism_testnet 6 | 7 | WALLET_CONNECT_PROJECT_ID=1234567890abcdef1234567890abcdef 8 | -------------------------------------------------------------------------------- /packages/stylex/env.example: -------------------------------------------------------------------------------- 1 | # RPC 2 | RPC_ETHEREUM=https://rpc.ankr.com/eth 3 | RPC_GOERLI=https://rpc.ankr.com/eth_goerli 4 | RPC_OPTIMISM=https://rpc.ankr.com/optimism 5 | RPC_GOERLI_OPTIMISM=https://rpc.ankr.com/optimism_testnet 6 | 7 | WALLET_CONNECT_PROJECT_ID=1234567890abcdef1234567890abcdef 8 | -------------------------------------------------------------------------------- /packages/example/env.example: -------------------------------------------------------------------------------- 1 | # RPC 2 | RPC_ETHEREUM=https://rpc.ankr.com/eth 3 | RPC_GOERLI=https://rpc.ankr.com/eth_goerli 4 | RPC_OPTIMISM=https://rpc.ankr.com/optimism 5 | RPC_GOERLI_OPTIMISM=https://rpc.ankr.com/optimism_testnet 6 | 7 | WALLET_CONNECT_PROJECT_ID=1234567890abcdef1234567890abcdef 8 | -------------------------------------------------------------------------------- /packages/tailwind/env.example: -------------------------------------------------------------------------------- 1 | # RPC 2 | RPC_ETHEREUM=https://rpc.ankr.com/eth 3 | RPC_GOERLI=https://rpc.ankr.com/eth_goerli 4 | RPC_OPTIMISM=https://rpc.ankr.com/optimism 5 | RPC_GOERLI_OPTIMISM=https://rpc.ankr.com/optimism_testnet 6 | 7 | WALLET_CONNECT_PROJECT_ID=1234567890abcdef1234567890abcdef 8 | -------------------------------------------------------------------------------- /packages/mui/components/default/CTA/CTA.styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Text from '../Text'; 3 | 4 | const TextEx = styled(Text)` 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | justify-content: center; 9 | `; 10 | 11 | export { TextEx }; 12 | -------------------------------------------------------------------------------- /packages/styled-components/env.example: -------------------------------------------------------------------------------- 1 | # RPC 2 | RPC_ETHEREUM=https://rpc.ankr.com/eth 3 | RPC_GOERLI=https://rpc.ankr.com/eth_goerli 4 | RPC_OPTIMISM=https://rpc.ankr.com/optimism 5 | RPC_GOERLI_OPTIMISM=https://rpc.ankr.com/optimism_testnet 6 | 7 | WALLET_CONNECT_PROJECT_ID=1234567890abcdef1234567890abcdef 8 | -------------------------------------------------------------------------------- /packages/base/README.md: -------------------------------------------------------------------------------- 1 | # Base Template 2 | 3 | The base template has no UI framework configured. The default style is based on `.scss` with examples of how to use it. 4 | 5 | ## Quick Start 6 | 7 | You can quickly start a new project with this template by running: 8 | 9 | ```bash 10 | npx create-nextjs-dapp base 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/base/components/default/GradientContainer/GradientContainer.module.scss: -------------------------------------------------------------------------------- 1 | @import '@theme/variables'; 2 | 3 | .gradientContainer { 4 | position: relative; 5 | 6 | border-radius: 13px; 7 | background: $darkGradient; 8 | border: 1px solid $darkGray; 9 | box-shadow: 0px 5px 20px 10px rgba($darkGray, 0.31); 10 | } 11 | -------------------------------------------------------------------------------- /packages/base/components/default/GradientContainer/GradientContainer.type.ts: -------------------------------------------------------------------------------- 1 | import { EHtmlTag } from '@theme/theme.enum'; 2 | import { ReactNode } from 'react'; 3 | 4 | interface IGradientContainer { 5 | children: ReactNode; 6 | component?: EHtmlTag; 7 | className?: string; 8 | } 9 | 10 | export type { IGradientContainer }; 11 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/GradientContainer/GradientContainer.type.ts: -------------------------------------------------------------------------------- 1 | import { EHtmlTag } from '@theme/theme.enum'; 2 | import { ReactNode } from 'react'; 3 | 4 | interface IGradientContainer { 5 | children: ReactNode; 6 | component?: EHtmlTag; 7 | className?: string; 8 | } 9 | 10 | export type { IGradientContainer }; 11 | -------------------------------------------------------------------------------- /common/hooks/useWeb3/useWeb3.ts: -------------------------------------------------------------------------------- 1 | import { Web3Context } from '@contexts/Web3Context/Web3Context'; 2 | import { useContext } from 'react'; 3 | 4 | export function useWeb3() { 5 | const context = useContext(Web3Context); 6 | if (context === undefined) { 7 | throw new Error('unable to find Web3Context'); 8 | } 9 | 10 | return context; 11 | } 12 | -------------------------------------------------------------------------------- /packages/base/hooks/useWeb3/useWeb3.ts: -------------------------------------------------------------------------------- 1 | import { Web3Context } from '@contexts/Web3Context/Web3Context'; 2 | import { useContext } from 'react'; 3 | 4 | export function useWeb3() { 5 | const context = useContext(Web3Context); 6 | if (context === undefined) { 7 | throw new Error('unable to find Web3Context'); 8 | } 9 | 10 | return context; 11 | } 12 | -------------------------------------------------------------------------------- /packages/mui/hooks/useWeb3/useWeb3.ts: -------------------------------------------------------------------------------- 1 | import { Web3Context } from '@contexts/Web3Context/Web3Context'; 2 | import { useContext } from 'react'; 3 | 4 | export function useWeb3() { 5 | const context = useContext(Web3Context); 6 | if (context === undefined) { 7 | throw new Error('unable to find Web3Context'); 8 | } 9 | 10 | return context; 11 | } 12 | -------------------------------------------------------------------------------- /packages/example/hooks/useWeb3/useWeb3.ts: -------------------------------------------------------------------------------- 1 | import { Web3Context } from '@contexts/Web3Context/Web3Context'; 2 | import { useContext } from 'react'; 3 | 4 | export function useWeb3() { 5 | const context = useContext(Web3Context); 6 | if (context === undefined) { 7 | throw new Error('unable to find Web3Context'); 8 | } 9 | 10 | return context; 11 | } 12 | -------------------------------------------------------------------------------- /packages/stylex/hooks/useWeb3/useWeb3.ts: -------------------------------------------------------------------------------- 1 | import { Web3Context } from '@contexts/Web3Context/Web3Context'; 2 | import { useContext } from 'react'; 3 | 4 | export function useWeb3() { 5 | const context = useContext(Web3Context); 6 | if (context === undefined) { 7 | throw new Error('unable to find Web3Context'); 8 | } 9 | 10 | return context; 11 | } 12 | -------------------------------------------------------------------------------- /packages/tailwind/hooks/useWeb3/useWeb3.ts: -------------------------------------------------------------------------------- 1 | import { Web3Context } from '@contexts/Web3Context/Web3Context'; 2 | import { useContext } from 'react'; 3 | 4 | export function useWeb3() { 5 | const context = useContext(Web3Context); 6 | if (context === undefined) { 7 | throw new Error('unable to find Web3Context'); 8 | } 9 | 10 | return context; 11 | } 12 | -------------------------------------------------------------------------------- /packages/styled-components/hooks/useWeb3/useWeb3.ts: -------------------------------------------------------------------------------- 1 | import { Web3Context } from '@contexts/Web3Context/Web3Context'; 2 | import { useContext } from 'react'; 3 | 4 | export function useWeb3() { 5 | const context = useContext(Web3Context); 6 | if (context === undefined) { 7 | throw new Error('unable to find Web3Context'); 8 | } 9 | 10 | return context; 11 | } 12 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/theme/Button/Button.type.ts: -------------------------------------------------------------------------------- 1 | import { StyleXStyles } from '@stylexjs/stylex'; 2 | import { ReactNode } from 'react'; 3 | 4 | interface IButton { 5 | children: ReactNode; 6 | onClick?: () => void; 7 | valueToCopy?: string; 8 | href?: string; 9 | icon?: ReactNode; 10 | style?: StyleXStyles; 11 | } 12 | 13 | export type { IButton }; 14 | -------------------------------------------------------------------------------- /common/contexts/ResponsiveContext/ResponsiveContext.type.ts: -------------------------------------------------------------------------------- 1 | interface IFrames { 2 | width: number; 3 | height: number; 4 | } 5 | 6 | interface IUseResponsive { 7 | screenFrames?: IFrames; 8 | isBiggerThanSm?: boolean; 9 | isBiggerThanMd?: boolean; 10 | isBiggerThanLg?: boolean; 11 | isBiggerThanXl?: boolean; 12 | } 13 | 14 | export type { IUseResponsive, IFrames }; 15 | -------------------------------------------------------------------------------- /packages/base/contexts/ResponsiveContext/ResponsiveContext.type.ts: -------------------------------------------------------------------------------- 1 | interface IFrames { 2 | width: number; 3 | height: number; 4 | } 5 | 6 | interface IUseResponsive { 7 | screenFrames?: IFrames; 8 | isBiggerThanSm?: boolean; 9 | isBiggerThanMd?: boolean; 10 | isBiggerThanLg?: boolean; 11 | isBiggerThanXl?: boolean; 12 | } 13 | 14 | export type { IUseResponsive, IFrames }; 15 | -------------------------------------------------------------------------------- /packages/mui/contexts/ResponsiveContext/ResponsiveContext.type.ts: -------------------------------------------------------------------------------- 1 | interface IFrames { 2 | width: number; 3 | height: number; 4 | } 5 | 6 | interface IUseResponsive { 7 | screenFrames?: IFrames; 8 | isBiggerThanSm?: boolean; 9 | isBiggerThanMd?: boolean; 10 | isBiggerThanLg?: boolean; 11 | isBiggerThanXl?: boolean; 12 | } 13 | 14 | export type { IUseResponsive, IFrames }; 15 | -------------------------------------------------------------------------------- /packages/styled-components/components/layout/Flex/Flex.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react'; 2 | import { StyledFlex } from './Flex.styles'; 3 | import { IFlex } from './Flex.type'; 4 | 5 | // see IFlex to see all Flex props 6 | const Flex: FC = ({ children, ...otherProps }) => { 7 | return {children}; 8 | }; 9 | 10 | export { Flex }; 11 | -------------------------------------------------------------------------------- /packages/example/contexts/ResponsiveContext/ResponsiveContext.type.ts: -------------------------------------------------------------------------------- 1 | interface IFrames { 2 | width: number; 3 | height: number; 4 | } 5 | 6 | interface IUseResponsive { 7 | screenFrames?: IFrames; 8 | isBiggerThanSm?: boolean; 9 | isBiggerThanMd?: boolean; 10 | isBiggerThanLg?: boolean; 11 | isBiggerThanXl?: boolean; 12 | } 13 | 14 | export type { IUseResponsive, IFrames }; 15 | -------------------------------------------------------------------------------- /packages/stylex/contexts/ResponsiveContext/ResponsiveContext.type.ts: -------------------------------------------------------------------------------- 1 | interface IFrames { 2 | width: number; 3 | height: number; 4 | } 5 | 6 | interface IUseResponsive { 7 | screenFrames?: IFrames; 8 | isBiggerThanSm?: boolean; 9 | isBiggerThanMd?: boolean; 10 | isBiggerThanLg?: boolean; 11 | isBiggerThanXl?: boolean; 12 | } 13 | 14 | export type { IUseResponsive, IFrames }; 15 | -------------------------------------------------------------------------------- /packages/tailwind/contexts/ResponsiveContext/ResponsiveContext.type.ts: -------------------------------------------------------------------------------- 1 | interface IFrames { 2 | width: number; 3 | height: number; 4 | } 5 | 6 | interface IUseResponsive { 7 | screenFrames?: IFrames; 8 | isBiggerThanSm?: boolean; 9 | isBiggerThanMd?: boolean; 10 | isBiggerThanLg?: boolean; 11 | isBiggerThanXl?: boolean; 12 | } 13 | 14 | export type { IUseResponsive, IFrames }; 15 | -------------------------------------------------------------------------------- /packages/base/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /packages/example/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /packages/mui/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /packages/styled-components/components/layout/Flex/Flex.enum.ts: -------------------------------------------------------------------------------- 1 | enum EFlex { 2 | row = 'row', 3 | rowReverse = 'row-reverse', 4 | column = 'column', 5 | columnReverse = 'column-reverse', 6 | start = 'flex-start', 7 | end = 'flex-end', 8 | between = 'space-between', 9 | evenly = 'space-evenly', 10 | around = 'space-around', 11 | center = 'center' 12 | } 13 | 14 | export { EFlex }; 15 | -------------------------------------------------------------------------------- /packages/styled-components/contexts/ResponsiveContext/ResponsiveContext.type.ts: -------------------------------------------------------------------------------- 1 | interface IFrames { 2 | width: number; 3 | height: number; 4 | } 5 | 6 | interface IUseResponsive { 7 | screenFrames?: IFrames; 8 | isBiggerThanSm?: boolean; 9 | isBiggerThanMd?: boolean; 10 | isBiggerThanLg?: boolean; 11 | isBiggerThanXl?: boolean; 12 | } 13 | 14 | export type { IUseResponsive, IFrames }; 15 | -------------------------------------------------------------------------------- /packages/tailwind/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /packages/styled-components/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /packages/base/components/example/ExampleComponent/ExampleComponent.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IExampleComponent } from './ExampleComponent.type'; 3 | import './ExampleComponent.styles'; 4 | 5 | const ExampleComponent: FC = () => { 6 | return ( 7 |
8 | <> 9 |
10 | ); 11 | }; 12 | 13 | export { ExampleComponent }; 14 | -------------------------------------------------------------------------------- /packages/tailwind/components/example/ExampleComponent/ExampleComponent.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IExampleComponent } from './ExampleComponent.type'; 3 | import './ExampleComponent.styles'; 4 | 5 | const ExampleComponent: FC = () => { 6 | return ( 7 |
8 | <> 9 |
10 | ); 11 | }; 12 | 13 | export { ExampleComponent }; 14 | -------------------------------------------------------------------------------- /common/hooks/useResponsive/useResponsive.ts: -------------------------------------------------------------------------------- 1 | import { ResponsiveContext } from '@contexts/ResponsiveContext/ResponsiveContext'; 2 | import { useContext } from 'react'; 3 | 4 | function useResponsive() { 5 | const context = useContext(ResponsiveContext); 6 | if (context === undefined) { 7 | throw new Error('unable to find ResponsiveContext'); 8 | } 9 | 10 | return context; 11 | } 12 | 13 | export { useResponsive }; 14 | -------------------------------------------------------------------------------- /packages/base/hooks/useResponsive/useResponsive.ts: -------------------------------------------------------------------------------- 1 | import { ResponsiveContext } from '@contexts/ResponsiveContext/ResponsiveContext'; 2 | import { useContext } from 'react'; 3 | 4 | function useResponsive() { 5 | const context = useContext(ResponsiveContext); 6 | if (context === undefined) { 7 | throw new Error('unable to find ResponsiveContext'); 8 | } 9 | 10 | return context; 11 | } 12 | 13 | export { useResponsive }; 14 | -------------------------------------------------------------------------------- /packages/mui/hooks/useResponsive/useResponsive.ts: -------------------------------------------------------------------------------- 1 | import { ResponsiveContext } from '@contexts/ResponsiveContext/ResponsiveContext'; 2 | import { useContext } from 'react'; 3 | 4 | function useResponsive() { 5 | const context = useContext(ResponsiveContext); 6 | if (context === undefined) { 7 | throw new Error('unable to find ResponsiveContext'); 8 | } 9 | 10 | return context; 11 | } 12 | 13 | export { useResponsive }; 14 | -------------------------------------------------------------------------------- /packages/stylex/hooks/useResponsive/useResponsive.ts: -------------------------------------------------------------------------------- 1 | import { ResponsiveContext } from '@contexts/ResponsiveContext/ResponsiveContext'; 2 | import { useContext } from 'react'; 3 | 4 | function useResponsive() { 5 | const context = useContext(ResponsiveContext); 6 | if (context === undefined) { 7 | throw new Error('unable to find ResponsiveContext'); 8 | } 9 | 10 | return context; 11 | } 12 | 13 | export { useResponsive }; 14 | -------------------------------------------------------------------------------- /packages/example/hooks/useResponsive/useResponsive.ts: -------------------------------------------------------------------------------- 1 | import { ResponsiveContext } from '@contexts/ResponsiveContext/ResponsiveContext'; 2 | import { useContext } from 'react'; 3 | 4 | function useResponsive() { 5 | const context = useContext(ResponsiveContext); 6 | if (context === undefined) { 7 | throw new Error('unable to find ResponsiveContext'); 8 | } 9 | 10 | return context; 11 | } 12 | 13 | export { useResponsive }; 14 | -------------------------------------------------------------------------------- /packages/mui/components/default/Text/Text.enum.ts: -------------------------------------------------------------------------------- 1 | enum ETextType { 2 | h1 = 'h1', 3 | h2 = 'h2', 4 | h3 = 'h3', 5 | h4 = 'h4', 6 | h5 = 'h5', 7 | h6 = 'h6', 8 | p = 'p', 9 | span = 'span' 10 | } 11 | 12 | enum EFontWeight { 13 | regular = 400, 14 | bold = 700 15 | } 16 | 17 | enum ETextAlign { 18 | left = 'left', 19 | center = 'center', 20 | right = 'right' 21 | } 22 | 23 | export { ETextType, EFontWeight, ETextAlign }; 24 | -------------------------------------------------------------------------------- /packages/tailwind/hooks/useResponsive/useResponsive.ts: -------------------------------------------------------------------------------- 1 | import { ResponsiveContext } from '@contexts/ResponsiveContext/ResponsiveContext'; 2 | import { useContext } from 'react'; 3 | 4 | function useResponsive() { 5 | const context = useContext(ResponsiveContext); 6 | if (context === undefined) { 7 | throw new Error('unable to find ResponsiveContext'); 8 | } 9 | 10 | return context; 11 | } 12 | 13 | export { useResponsive }; 14 | -------------------------------------------------------------------------------- /packages/base/components/default/Text/Text.enum.ts: -------------------------------------------------------------------------------- 1 | enum ETextType { 2 | h1 = 'h1', 3 | h2 = 'h2', 4 | h3 = 'h3', 5 | h4 = 'h4', 6 | h5 = 'h5', 7 | h6 = 'h6', 8 | p = 'p', 9 | span = 'span' 10 | } 11 | 12 | enum EFontWeight { 13 | regular = 'regular', 14 | bold = 'bold' 15 | } 16 | 17 | enum ETextAlign { 18 | left = 'left', 19 | center = 'center', 20 | right = 'right' 21 | } 22 | 23 | export { ETextType, EFontWeight, ETextAlign }; 24 | -------------------------------------------------------------------------------- /packages/styled-components/hooks/useResponsive/useResponsive.ts: -------------------------------------------------------------------------------- 1 | import { ResponsiveContext } from '@contexts/ResponsiveContext/ResponsiveContext'; 2 | import { useContext } from 'react'; 3 | 4 | function useResponsive() { 5 | const context = useContext(ResponsiveContext); 6 | if (context === undefined) { 7 | throw new Error('unable to find ResponsiveContext'); 8 | } 9 | 10 | return context; 11 | } 12 | 13 | export { useResponsive }; 14 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Text/Text.enum.ts: -------------------------------------------------------------------------------- 1 | enum ETextType { 2 | h1 = 'h1', 3 | h2 = 'h2', 4 | h3 = 'h3', 5 | h4 = 'h4', 6 | h5 = 'h5', 7 | h6 = 'h6', 8 | p = 'p', 9 | span = 'span' 10 | } 11 | 12 | enum EFontWeight { 13 | regular = 400, 14 | bold = 700 15 | } 16 | 17 | enum ETextAlign { 18 | left = 'left', 19 | center = 'center', 20 | right = 'right' 21 | } 22 | 23 | export { ETextType, EFontWeight, ETextAlign }; 24 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/theme/Text/Text.enum.ts: -------------------------------------------------------------------------------- 1 | enum ETextType { 2 | h1 = 'h1', 3 | h2 = 'h2', 4 | h3 = 'h3', 5 | h4 = 'h4', 6 | h5 = 'h5', 7 | h6 = 'h6', 8 | p = 'p', 9 | span = 'span' 10 | } 11 | 12 | enum EFontWeight { 13 | regular = 'regular', 14 | bold = 'bold' 15 | } 16 | 17 | enum ETextAlign { 18 | left = 'left', 19 | center = 'center', 20 | right = 'right' 21 | } 22 | 23 | export { EFontWeight, ETextAlign, ETextType }; 24 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/Text/Text.enum.ts: -------------------------------------------------------------------------------- 1 | enum ETextType { 2 | h1 = 'h1', 3 | h2 = 'h2', 4 | h3 = 'h3', 5 | h4 = 'h4', 6 | h5 = 'h5', 7 | h6 = 'h6', 8 | p = 'p', 9 | span = 'span' 10 | } 11 | 12 | enum EFontWeight { 13 | normal = 'normal', 14 | bold = 'bold' 15 | } 16 | 17 | enum ETextAlign { 18 | left = 'left', 19 | center = 'center', 20 | right = 'right' 21 | } 22 | 23 | export { EFontWeight, ETextAlign, ETextType }; 24 | -------------------------------------------------------------------------------- /packages/tailwind/README.md: -------------------------------------------------------------------------------- 1 | # Tailwind CSS Template 2 | 3 | The Tailwind CSS template is based on the [Tailwind CSS](https://tailwindcss.com/) framework. It is configured with the [Next.js](https://nextjs.org/) framework to provide a highly customizable CSS solution with utility-first styles. 4 | 5 | ## Quick Start 6 | 7 | You can quickly start a new project with this template by running: 8 | 9 | ```bash 10 | npx create-nextjs-dapp tailwind 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/mui/pages/404.tsx: -------------------------------------------------------------------------------- 1 | import Meta from '@components/common/Meta'; 2 | import { useRouter } from 'next/router'; 3 | import React, { FC, useEffect } from 'react'; 4 | 5 | const Error404: FC = () => { 6 | const router = useRouter(); 7 | 8 | useEffect(() => { 9 | // Redirect to home page 10 | router.push('/'); 11 | }, [router]); 12 | 13 | return ( 14 | <> 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Error404; 21 | -------------------------------------------------------------------------------- /packages/mui/pages/500.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, useEffect } from 'react'; 2 | import Meta from '@components/common/Meta'; 3 | import { useRouter } from 'next/router'; 4 | 5 | const Error500: FC = () => { 6 | const router = useRouter(); 7 | 8 | useEffect(() => { 9 | // Redirect to home page 10 | router.push('/'); 11 | }, [router]); 12 | 13 | return ( 14 | <> 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Error500; 21 | -------------------------------------------------------------------------------- /packages/base/pages/404.tsx: -------------------------------------------------------------------------------- 1 | import Meta from '@components/common/Meta'; 2 | import { useRouter } from 'next/router'; 3 | import React, { FC, useEffect } from 'react'; 4 | 5 | const Error404: FC = () => { 6 | const router = useRouter(); 7 | 8 | useEffect(() => { 9 | // Redirect to home page 10 | router.push('/'); 11 | }, [router]); 12 | 13 | return ( 14 | <> 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Error404; 21 | -------------------------------------------------------------------------------- /packages/base/pages/500.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, useEffect } from 'react'; 2 | import Meta from '@components/common/Meta'; 3 | import { useRouter } from 'next/router'; 4 | 5 | const Error500: FC = () => { 6 | const router = useRouter(); 7 | 8 | useEffect(() => { 9 | // Redirect to home page 10 | router.push('/'); 11 | }, [router]); 12 | 13 | return ( 14 | <> 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Error500; 21 | -------------------------------------------------------------------------------- /packages/example/pages/404.tsx: -------------------------------------------------------------------------------- 1 | import Meta from '@components/common/Meta'; 2 | import { useRouter } from 'next/router'; 3 | import React, { FC, useEffect } from 'react'; 4 | 5 | const Error404: FC = () => { 6 | const router = useRouter(); 7 | 8 | useEffect(() => { 9 | // Redirect to home page 10 | router.push('/'); 11 | }, [router]); 12 | 13 | return ( 14 | <> 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Error404; 21 | -------------------------------------------------------------------------------- /packages/example/pages/500.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, useEffect } from 'react'; 2 | import Meta from '@components/common/Meta'; 3 | import { useRouter } from 'next/router'; 4 | 5 | const Error500: FC = () => { 6 | const router = useRouter(); 7 | 8 | useEffect(() => { 9 | // Redirect to home page 10 | router.push('/'); 11 | }, [router]); 12 | 13 | return ( 14 | <> 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Error500; 21 | -------------------------------------------------------------------------------- /packages/tailwind/pages/404.tsx: -------------------------------------------------------------------------------- 1 | import Meta from '@components/common/Meta'; 2 | import { useRouter } from 'next/router'; 3 | import React, { FC, useEffect } from 'react'; 4 | 5 | const Error404: FC = () => { 6 | const router = useRouter(); 7 | 8 | useEffect(() => { 9 | // Redirect to home page 10 | router.push('/'); 11 | }, [router]); 12 | 13 | return ( 14 | <> 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Error404; 21 | -------------------------------------------------------------------------------- /packages/tailwind/pages/500.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, useEffect } from 'react'; 2 | import Meta from '@components/common/Meta'; 3 | import { useRouter } from 'next/router'; 4 | 5 | const Error500: FC = () => { 6 | const router = useRouter(); 7 | 8 | useEffect(() => { 9 | // Redirect to home page 10 | router.push('/'); 11 | }, [router]); 12 | 13 | return ( 14 | <> 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Error500; 21 | -------------------------------------------------------------------------------- /common/public/assets/logo-blocknative.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/mui/components/default/GradientContainer/GradientContainer.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IGradientContainer } from './GradientContainer.type'; 3 | import { StyledGradientContainer } from './GradientContainer.styles'; 4 | 5 | const GradientContainer: FC = ({ children, ...otherProps }) => { 6 | return {children}; 7 | }; 8 | 9 | export { GradientContainer }; 10 | -------------------------------------------------------------------------------- /packages/styled-components/pages/404.tsx: -------------------------------------------------------------------------------- 1 | import Meta from '@components/common/Meta'; 2 | import { useRouter } from 'next/router'; 3 | import React, { FC, useEffect } from 'react'; 4 | 5 | const Error404: FC = () => { 6 | const router = useRouter(); 7 | 8 | useEffect(() => { 9 | // Redirect to home page 10 | router.push('/'); 11 | }, [router]); 12 | 13 | return ( 14 | <> 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Error404; 21 | -------------------------------------------------------------------------------- /packages/styled-components/pages/500.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, useEffect } from 'react'; 2 | import Meta from '@components/common/Meta'; 3 | import { useRouter } from 'next/router'; 4 | 5 | const Error500: FC = () => { 6 | const router = useRouter(); 7 | 8 | useEffect(() => { 9 | // Redirect to home page 10 | router.push('/'); 11 | }, [router]); 12 | 13 | return ( 14 | <> 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Error500; 21 | -------------------------------------------------------------------------------- /packages/base/public/assets/logo-blocknative.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/example/public/assets/logo-blocknative.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/mui/public/assets/logo-blocknative.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/stylex/public/assets/logo-blocknative.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/GradientContainer/GradientContainer.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IGradientContainer } from './GradientContainer.type'; 3 | import { StyledGradientContainer } from './GradientContainer.styles'; 4 | 5 | const GradientContainer: FC = ({ children, ...otherProps }) => { 6 | return {children}; 7 | }; 8 | 9 | export { GradientContainer }; 10 | -------------------------------------------------------------------------------- /packages/tailwind/public/assets/logo-blocknative.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/base/components/default/Text/Text.type.ts: -------------------------------------------------------------------------------- 1 | import { ESize } from 'theme/theme.enum'; 2 | import { ReactNode } from 'react'; 3 | import { EFontWeight, ETextAlign, ETextType } from './Text.enum'; 4 | 5 | interface IText { 6 | component?: ETextType; 7 | children?: string | ReactNode; 8 | type?: ETextType; 9 | weight?: EFontWeight; 10 | align?: ETextAlign; 11 | size?: ESize.s | ESize.m | ESize.l; 12 | color?: string; 13 | className?: string; 14 | } 15 | 16 | export type { IText }; 17 | -------------------------------------------------------------------------------- /packages/mui/components/default/GradientContainer/GradientContainer.styles.ts: -------------------------------------------------------------------------------- 1 | import { Box } from '@mui/system'; 2 | import styled, { css } from 'styled-components'; 3 | 4 | export const StyledGradientContainer = styled(Box)` 5 | ${(p) => css` 6 | position: relative; 7 | 8 | border-radius: 13px; 9 | background: ${p.theme.colors.darkGradient}; 10 | border: 1px solid ${p.theme.colors.darkGray}; 11 | box-shadow: 0px 5px 20px 10px ${p.theme.colors.darkGray + '50'}; 12 | `} 13 | `; 14 | -------------------------------------------------------------------------------- /packages/styled-components/public/assets/logo-blocknative.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /common/contexts/Web3Context/Web3Context.functions.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { VALID_CHAIN_IDS, WALLETS_ARRAY } from './Web3Context.variables'; 3 | 4 | const getWalletFromName = (name: string): IWallet | undefined => { 5 | return WALLETS_ARRAY.find((w) => w.name === name); 6 | }; 7 | 8 | const checkIfNetworkIsValid = (networkId: number) => { 9 | return VALID_CHAIN_IDS.includes(networkId); 10 | }; 11 | 12 | export { getWalletFromName, checkIfNetworkIsValid }; 13 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/theme/Text/Text.type.ts: -------------------------------------------------------------------------------- 1 | import { StyleXStyles } from '@stylexjs/stylex'; 2 | import { EColor, ESize } from '../../../../styles/theme.enum'; 3 | import { EFontWeight, ETextAlign, ETextType } from './Text.enum'; 4 | 5 | interface IText { 6 | component?: ETextType; 7 | type?: ETextType; 8 | weight?: EFontWeight; 9 | align?: ETextAlign; 10 | size?: ESize.s | ESize.m | ESize.l; 11 | color?: EColor; 12 | style?: StyleXStyles; 13 | } 14 | 15 | export type { IText }; 16 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/Text/Text.type.ts: -------------------------------------------------------------------------------- 1 | import { ESize } from 'theme/theme.enum'; 2 | import { ReactNode } from 'react'; 3 | import { EFontWeight, ETextAlign, ETextType } from './Text.enum'; 4 | 5 | interface IText { 6 | component?: ETextType; 7 | children?: string | ReactNode; 8 | type?: ETextType; 9 | weight?: EFontWeight; 10 | align?: ETextAlign; 11 | size?: ESize.s | ESize.m | ESize.l; 12 | color?: string; 13 | className?: string; 14 | } 15 | 16 | export type { IText }; 17 | -------------------------------------------------------------------------------- /packages/base/contexts/Web3Context/Web3Context.functions.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { VALID_CHAIN_IDS, WALLETS_ARRAY } from './Web3Context.variables'; 3 | 4 | const getWalletFromName = (name: string): IWallet | undefined => { 5 | return WALLETS_ARRAY.find((w) => w.name === name); 6 | }; 7 | 8 | const checkIfNetworkIsValid = (networkId: number) => { 9 | return VALID_CHAIN_IDS.includes(networkId); 10 | }; 11 | 12 | export { getWalletFromName, checkIfNetworkIsValid }; 13 | -------------------------------------------------------------------------------- /packages/mui/components/default/Text/Text.type.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | import { ESize } from 'theme/theme.enum'; 3 | import { EFontWeight, ETextAlign, ETextType } from './Text.enum'; 4 | 5 | interface IText { 6 | component?: ETextType; 7 | children?: string | ReactNode; 8 | type?: ETextType; 9 | weight?: EFontWeight; 10 | align?: ETextAlign; 11 | size?: ESize.s | ESize.m | ESize.l; 12 | color?: string; 13 | style?: React.CSSProperties; 14 | } 15 | 16 | export type { IText }; 17 | -------------------------------------------------------------------------------- /packages/mui/contexts/Web3Context/Web3Context.functions.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { VALID_CHAIN_IDS, WALLETS_ARRAY } from './Web3Context.variables'; 3 | 4 | const getWalletFromName = (name: string): IWallet | undefined => { 5 | return WALLETS_ARRAY.find((w) => w.name === name); 6 | }; 7 | 8 | const checkIfNetworkIsValid = (networkId: number) => { 9 | return VALID_CHAIN_IDS.includes(networkId); 10 | }; 11 | 12 | export { getWalletFromName, checkIfNetworkIsValid }; 13 | -------------------------------------------------------------------------------- /packages/stylex/contexts/Web3Context/Web3Context.functions.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { VALID_CHAIN_IDS, WALLETS_ARRAY } from './Web3Context.variables'; 3 | 4 | const getWalletFromName = (name: string): IWallet | undefined => { 5 | return WALLETS_ARRAY.find((w) => w.name === name); 6 | }; 7 | 8 | const checkIfNetworkIsValid = (networkId: number) => { 9 | return VALID_CHAIN_IDS.includes(networkId); 10 | }; 11 | 12 | export { getWalletFromName, checkIfNetworkIsValid }; 13 | -------------------------------------------------------------------------------- /packages/base/components/default/CTA/CTA.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../../theme/mixins.scss'; 2 | 3 | .text { 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: center; 8 | 9 | & > button { 10 | margin-top: 32px; 11 | } 12 | } 13 | 14 | .container { 15 | display: flex; 16 | flex-direction: column; 17 | align-items: center; 18 | justify-content: center; 19 | 20 | transform: scale(0.9); 21 | 22 | @include sm() { 23 | transform: scale(1); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/example/contexts/Web3Context/Web3Context.functions.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { VALID_CHAIN_IDS, WALLETS_ARRAY } from './Web3Context.variables'; 3 | 4 | const getWalletFromName = (name: string): IWallet | undefined => { 5 | return WALLETS_ARRAY.find((w) => w.name === name); 6 | }; 7 | 8 | const checkIfNetworkIsValid = (networkId: number) => { 9 | return VALID_CHAIN_IDS.includes(networkId); 10 | }; 11 | 12 | export { getWalletFromName, checkIfNetworkIsValid }; 13 | -------------------------------------------------------------------------------- /packages/tailwind/contexts/Web3Context/Web3Context.functions.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { VALID_CHAIN_IDS, WALLETS_ARRAY } from './Web3Context.variables'; 3 | 4 | const getWalletFromName = (name: string): IWallet | undefined => { 5 | return WALLETS_ARRAY.find((w) => w.name === name); 6 | }; 7 | 8 | const checkIfNetworkIsValid = (networkId: number) => { 9 | return VALID_CHAIN_IDS.includes(networkId); 10 | }; 11 | 12 | export { getWalletFromName, checkIfNetworkIsValid }; 13 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/GradientContainer/GradientContainer.styles.ts: -------------------------------------------------------------------------------- 1 | import Flex from '@components/layout/Flex'; 2 | import styled, { css } from 'styled-components'; 3 | 4 | export const StyledGradientContainer = styled(Flex)` 5 | ${(p) => css` 6 | position: relative; 7 | 8 | border-radius: 13px; 9 | background: ${p.theme.colors.darkGradient}; 10 | border: 1px solid ${p.theme.colors.darkGray}; 11 | box-shadow: 0px 5px 20px 10px ${p.theme.colors.darkGray + '50'}; 12 | `} 13 | `; 14 | -------------------------------------------------------------------------------- /packages/styled-components/contexts/Web3Context/Web3Context.functions.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { VALID_CHAIN_IDS, WALLETS_ARRAY } from './Web3Context.variables'; 3 | 4 | const getWalletFromName = (name: string): IWallet | undefined => { 5 | return WALLETS_ARRAY.find((w) => w.name === name); 6 | }; 7 | 8 | const checkIfNetworkIsValid = (networkId: number) => { 9 | return VALID_CHAIN_IDS.includes(networkId); 10 | }; 11 | 12 | export { getWalletFromName, checkIfNetworkIsValid }; 13 | -------------------------------------------------------------------------------- /packages/stylex/.babelrc.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | presets: ['next/babel'], 5 | plugins: [ 6 | [ 7 | '@stylexjs/babel-plugin', 8 | { 9 | dev: process.env.NODE_ENV === 'development', 10 | genConditionalClasses: true, 11 | treeshakeCompensation: true, 12 | unstable_moduleResolution: { 13 | type: 'commonJS', 14 | rootDir: path.join(__dirname, '../..') 15 | } 16 | } 17 | ], 18 | '@babel/plugin-transform-private-methods' 19 | ] 20 | }; 21 | -------------------------------------------------------------------------------- /common/contexts/Web3Context/Web3Context.type.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { WalletState } from '@web3-onboard/core'; 3 | 4 | interface IWeb3 { 5 | provider: WalletState['provider'] | null; 6 | accounts: WalletState['accounts']; 7 | networkId: number | undefined; 8 | isWalletModalOpen: boolean; 9 | setIsWalletModalOpen: (newState: boolean) => void; 10 | isValidNetwork: boolean; 11 | connectWallet: (wallet: IWallet) => void; 12 | disconnectWallet: () => void; 13 | } 14 | 15 | export type { IWeb3 }; 16 | -------------------------------------------------------------------------------- /packages/base/components/pages/home/HomePage/HomePage.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../theme/mixins'; 2 | 3 | .mainContainer { 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: space-evenly; 7 | 8 | height: 100dvh; 9 | 10 | padding-top: 32px; 11 | 12 | padding-left: 15px; 13 | padding-right: 15px; 14 | 15 | @include md() { 16 | padding-left: 32px; 17 | padding-right: 32px; 18 | padding-top: 32px; 19 | } 20 | 21 | @include lg() { 22 | padding-left: 64px; 23 | padding-right: 64px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/base/contexts/Web3Context/Web3Context.type.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { WalletState } from '@web3-onboard/core'; 3 | 4 | interface IWeb3 { 5 | provider: WalletState['provider'] | null; 6 | accounts: WalletState['accounts']; 7 | networkId: number | undefined; 8 | isWalletModalOpen: boolean; 9 | setIsWalletModalOpen: (newState: boolean) => void; 10 | isValidNetwork: boolean; 11 | connectWallet: (wallet: IWallet) => void; 12 | disconnectWallet: () => void; 13 | } 14 | 15 | export type { IWeb3 }; 16 | -------------------------------------------------------------------------------- /packages/mui/contexts/Web3Context/Web3Context.type.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { WalletState } from '@web3-onboard/core'; 3 | 4 | interface IWeb3 { 5 | provider: WalletState['provider'] | null; 6 | accounts: WalletState['accounts']; 7 | networkId: number | undefined; 8 | isWalletModalOpen: boolean; 9 | setIsWalletModalOpen: (newState: boolean) => void; 10 | isValidNetwork: boolean; 11 | connectWallet: (wallet: IWallet) => void; 12 | disconnectWallet: () => void; 13 | } 14 | 15 | export type { IWeb3 }; 16 | -------------------------------------------------------------------------------- /packages/example/contexts/Web3Context/Web3Context.type.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { WalletState } from '@web3-onboard/core'; 3 | 4 | interface IWeb3 { 5 | provider: WalletState['provider'] | null; 6 | accounts: WalletState['accounts']; 7 | networkId: number | undefined; 8 | isWalletModalOpen: boolean; 9 | setIsWalletModalOpen: (newState: boolean) => void; 10 | isValidNetwork: boolean; 11 | connectWallet: (wallet: IWallet) => void; 12 | disconnectWallet: () => void; 13 | } 14 | 15 | export type { IWeb3 }; 16 | -------------------------------------------------------------------------------- /packages/mui/components/example/ExampleComponent/ExampleComponent.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IExampleComponent } from './ExampleComponent.type'; 3 | import { StyledExampleComponent } from './ExampleComponent.styles'; 4 | 5 | // This components has been generated using the command: make component name=ExampleComponent 6 | const ExampleComponent: FC = () => { 7 | return ( 8 | 9 | <> 10 | 11 | ); 12 | }; 13 | 14 | export { ExampleComponent }; 15 | -------------------------------------------------------------------------------- /packages/stylex/contexts/Web3Context/Web3Context.type.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { WalletState } from '@web3-onboard/core'; 3 | 4 | interface IWeb3 { 5 | provider: WalletState['provider'] | null; 6 | accounts: WalletState['accounts']; 7 | networkId: number | undefined; 8 | isWalletModalOpen: boolean; 9 | setIsWalletModalOpen: (newState: boolean) => void; 10 | isValidNetwork: boolean; 11 | connectWallet: (wallet: IWallet) => void; 12 | disconnectWallet: () => void; 13 | } 14 | 15 | export type { IWeb3 }; 16 | -------------------------------------------------------------------------------- /packages/tailwind/contexts/Web3Context/Web3Context.type.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { WalletState } from '@web3-onboard/core'; 3 | 4 | interface IWeb3 { 5 | provider: WalletState['provider'] | null; 6 | accounts: WalletState['accounts']; 7 | networkId: number | undefined; 8 | isWalletModalOpen: boolean; 9 | setIsWalletModalOpen: (newState: boolean) => void; 10 | isValidNetwork: boolean; 11 | connectWallet: (wallet: IWallet) => void; 12 | disconnectWallet: () => void; 13 | } 14 | 15 | export type { IWeb3 }; 16 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/CTA/CTA.styles.ts: -------------------------------------------------------------------------------- 1 | import Flex from '@components/layout/Flex'; 2 | import { EMediaQuery } from '@theme/theme.enum'; 3 | import { mq } from '@utils/functions'; 4 | import styled from 'styled-components'; 5 | import Text from '../Text'; 6 | 7 | export const StyledCTA = styled(Flex)` 8 | ${mq(EMediaQuery.sm, 'transform: scale(0.9);', 'max')} 9 | `; 10 | 11 | export const TextEx = styled(Text)` 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | `; 17 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Navbar/Navbar.styles.ts: -------------------------------------------------------------------------------- 1 | import { EMediaQuery } from '@theme/theme.enum'; 2 | import { mq } from '@utils/functions'; 3 | import styled from 'styled-components'; 4 | 5 | export const StyledNavbar = styled.nav` 6 | position: fixed; 7 | left: 0; 8 | top: 0; 9 | z-index: 100; 10 | 11 | display: flex; 12 | justify-content: flex-end; 13 | 14 | width: 100%; 15 | 16 | padding: 1rem; 17 | 18 | ${mq(EMediaQuery.sm, 'justify-content: space-between;')} 19 | ${mq(EMediaQuery.md, 'padding: 2rem;')} 20 | `; 21 | -------------------------------------------------------------------------------- /packages/styled-components/contexts/Web3Context/Web3Context.type.ts: -------------------------------------------------------------------------------- 1 | import { IWallet } from '@interfaces/wallet'; 2 | import { WalletState } from '@web3-onboard/core'; 3 | 4 | interface IWeb3 { 5 | provider: WalletState['provider'] | null; 6 | accounts: WalletState['accounts']; 7 | networkId: number | undefined; 8 | isWalletModalOpen: boolean; 9 | setIsWalletModalOpen: (newState: boolean) => void; 10 | isValidNetwork: boolean; 11 | connectWallet: (wallet: IWallet) => void; 12 | disconnectWallet: () => void; 13 | } 14 | 15 | export type { IWeb3 }; 16 | -------------------------------------------------------------------------------- /packages/styled-components/components/example/ExampleComponent/ExampleComponent.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IExampleComponent } from './ExampleComponent.type'; 3 | import { StyledExampleComponent } from './ExampleComponent.styles'; 4 | 5 | // This components has been generated using the command: make component name=ExampleComponent 6 | const ExampleComponent: FC = () => { 7 | return ( 8 | 9 | <> 10 | 11 | ); 12 | }; 13 | 14 | export { ExampleComponent }; 15 | -------------------------------------------------------------------------------- /packages/example/components/pages/home/HomePage/HomePage.tsx: -------------------------------------------------------------------------------- 1 | import Meta from '@components/common/Meta'; 2 | import { NextPage } from 'next'; 3 | 4 | const HomePage: NextPage = () => { 5 | return ( 6 | <> 7 | 11 | 12 |
13 |
{/* add home page content here */}
14 | 15 |
16 |
17 | 18 | ); 19 | }; 20 | 21 | export { HomePage }; 22 | -------------------------------------------------------------------------------- /packages/mui/theme/theme.enum.ts: -------------------------------------------------------------------------------- 1 | enum ESize { 2 | unset = 'unset', 3 | '6xs' = '6xs', 4 | '5xs' = '5xs', 5 | '4xs' = '4xs', 6 | '3xs' = '3xs', 7 | '2xs' = '2xs', 8 | xs = 'xs', 9 | s = 's', 10 | m = 'm', 11 | l = 'l', 12 | xl = 'xl', 13 | '2xl' = '2xl', 14 | '3xl' = '3xl', 15 | '4xl' = '4xl', 16 | '5xl' = '5xl', 17 | '6xl' = '6xl', 18 | '7xl' = '7xl', 19 | '8xl' = '8xl' 20 | } 21 | 22 | enum EMediaQuery { 23 | xs = '0px', 24 | sm = '600px', 25 | md = '900px', 26 | lg = '1200px', 27 | xl = '1536px' 28 | } 29 | 30 | export { ESize, EMediaQuery }; 31 | -------------------------------------------------------------------------------- /packages/styled-components/theme/theme.enum.ts: -------------------------------------------------------------------------------- 1 | enum ESize { 2 | unset = 'unset', 3 | '6xs' = '6xs', 4 | '5xs' = '5xs', 5 | '4xs' = '4xs', 6 | '3xs' = '3xs', 7 | '2xs' = '2xs', 8 | xs = 'xs', 9 | s = 's', 10 | m = 'm', 11 | l = 'l', 12 | xl = 'xl', 13 | '2xl' = '2xl', 14 | '3xl' = '3xl', 15 | '4xl' = '4xl', 16 | '5xl' = '5xl', 17 | '6xl' = '6xl', 18 | '7xl' = '7xl', 19 | '8xl' = '8xl' 20 | } 21 | 22 | enum EMediaQuery { 23 | xs = '0px', 24 | sm = '600px', 25 | md = '900px', 26 | lg = '1200px', 27 | xl = '1536px' 28 | } 29 | 30 | export { ESize, EMediaQuery }; 31 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Text/Text.type.ts: -------------------------------------------------------------------------------- 1 | import { IHiddenRanges, IMargin, IPadding } from '@interfaces/layout'; 2 | import { ReactNode } from 'react'; 3 | import { ESize } from 'theme/theme.enum'; 4 | import { EFontWeight, ETextAlign, ETextType } from './Text.enum'; 5 | 6 | interface IText extends IMargin, IPadding, IHiddenRanges { 7 | component?: ETextType; 8 | children?: string | ReactNode; 9 | type?: ETextType; 10 | weight?: EFontWeight; 11 | align?: ETextAlign; 12 | size?: ESize.s | ESize.m | ESize.l; 13 | color?: string; 14 | } 15 | 16 | export type { IText }; 17 | -------------------------------------------------------------------------------- /packages/mui/components/default/Text/Text.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react'; 2 | import { ETextType } from './Text.enum'; 3 | import { StyledText } from './Text.styles'; 4 | import { IText } from './Text.type'; 5 | 6 | const Text: FC = ({ children, type = ETextType.p, component, size, weight, align, color, ...otherProps }) => { 7 | return ( 8 | 17 | {children} 18 | 19 | ); 20 | }; 21 | 22 | export { Text }; 23 | -------------------------------------------------------------------------------- /packages/base/components/default/Navbar/Navbar.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../../theme/mixins'; 2 | 3 | .navbar { 4 | position: fixed; 5 | left: 0; 6 | top: 0; 7 | 8 | display: flex; 9 | justify-content: flex-end; 10 | 11 | width: 100%; 12 | 13 | padding: 1rem; 14 | 15 | @include md() { 16 | padding: 2rem; 17 | } 18 | 19 | & h1 { 20 | display: none; 21 | } 22 | 23 | @include sm() { 24 | justify-content: space-between; 25 | 26 | & h1 { 27 | display: initial; 28 | } 29 | } 30 | } 31 | 32 | .mdVisible { 33 | display: none; 34 | 35 | @include md() { 36 | display: inline-block; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | .next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | .env 31 | 32 | # vercel 33 | .vercel 34 | 35 | # typescript 36 | *.tsbuildinfo 37 | 38 | package-lock.json 39 | 40 | 41 | /test-results 42 | 43 | 44 | playwright-report-* -------------------------------------------------------------------------------- /packages/styled-components/components/pages/home/HomePage/HomePage.styles.ts: -------------------------------------------------------------------------------- 1 | import { EMediaQuery } from '@theme/theme.enum'; 2 | import { mq } from '@utils/functions'; 3 | import styled from 'styled-components'; 4 | 5 | export const StyledMainContainer = styled.div` 6 | position: relative; 7 | 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: space-evenly; 11 | 12 | height: 100dvh; 13 | 14 | padding-top: 32px; 15 | padding-left: 15px; 16 | padding-right: 15px; 17 | 18 | ${mq(EMediaQuery.md, 'padding-left: 32px; padding-right: 32px;')} 19 | ${mq(EMediaQuery.lg, 'padding-left: 64px; padding-right: 64px;')} 20 | `; 21 | -------------------------------------------------------------------------------- /common/components/common/Portal/Portal.tsx: -------------------------------------------------------------------------------- 1 | import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react'; 2 | import { createPortal } from 'react-dom'; 3 | import { IPortal } from './Portal.type'; 4 | 5 | // client only portal 6 | const Portal: FC> = ({ children, selector }) => { 7 | const ref = useRef(); 8 | const [mounted, setMounted] = useState(false); 9 | 10 | useEffect(() => { 11 | ref.current = document.querySelector(selector); 12 | setMounted(true); 13 | }, [selector]); 14 | 15 | return mounted ? createPortal(children, ref.current) : null; 16 | }; 17 | 18 | export { Portal }; 19 | -------------------------------------------------------------------------------- /packages/mui/components/common/Portal/Portal.tsx: -------------------------------------------------------------------------------- 1 | import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react'; 2 | import { createPortal } from 'react-dom'; 3 | import { IPortal } from './Portal.type'; 4 | 5 | // client only portal 6 | const Portal: FC> = ({ children, selector }) => { 7 | const ref = useRef(); 8 | const [mounted, setMounted] = useState(false); 9 | 10 | useEffect(() => { 11 | ref.current = document.querySelector(selector); 12 | setMounted(true); 13 | }, [selector]); 14 | 15 | return mounted ? createPortal(children, ref.current) : null; 16 | }; 17 | 18 | export { Portal }; 19 | -------------------------------------------------------------------------------- /packages/base/components/common/Portal/Portal.tsx: -------------------------------------------------------------------------------- 1 | import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react'; 2 | import { createPortal } from 'react-dom'; 3 | import { IPortal } from './Portal.type'; 4 | 5 | // client only portal 6 | const Portal: FC> = ({ children, selector }) => { 7 | const ref = useRef(); 8 | const [mounted, setMounted] = useState(false); 9 | 10 | useEffect(() => { 11 | ref.current = document.querySelector(selector); 12 | setMounted(true); 13 | }, [selector]); 14 | 15 | return mounted ? createPortal(children, ref.current) : null; 16 | }; 17 | 18 | export { Portal }; 19 | -------------------------------------------------------------------------------- /packages/example/components/common/Portal/Portal.tsx: -------------------------------------------------------------------------------- 1 | import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react'; 2 | import { createPortal } from 'react-dom'; 3 | import { IPortal } from './Portal.type'; 4 | 5 | // client only portal 6 | const Portal: FC> = ({ children, selector }) => { 7 | const ref = useRef(); 8 | const [mounted, setMounted] = useState(false); 9 | 10 | useEffect(() => { 11 | ref.current = document.querySelector(selector); 12 | setMounted(true); 13 | }, [selector]); 14 | 15 | return mounted ? createPortal(children, ref.current) : null; 16 | }; 17 | 18 | export { Portal }; 19 | -------------------------------------------------------------------------------- /packages/mui/components/default/Button/Button.type.ts: -------------------------------------------------------------------------------- 1 | import { ButtonProps } from '@mui/base'; 2 | import { BoxProps } from '@mui/system'; 3 | import { ReactNode } from 'react'; 4 | import { DefaultTheme } from 'styled-components'; 5 | 6 | interface IButton extends ButtonProps { 7 | children: ReactNode; 8 | onClick?: () => void; 9 | valueToCopy?: string; 10 | noPaddingResponsive?: boolean; 11 | icon?: ReactNode; 12 | iconColor?: string; 13 | gradientContainerProps?: BoxProps; 14 | } 15 | 16 | interface ISharedButtonProps { 17 | theme: DefaultTheme; 18 | iconColor?: string; 19 | color?: string; 20 | } 21 | 22 | export type { IButton, ISharedButtonProps }; 23 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/Portal/Portal.tsx: -------------------------------------------------------------------------------- 1 | import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react'; 2 | import { createPortal } from 'react-dom'; 3 | import { IPortal } from './Portal.type'; 4 | 5 | // client only portal 6 | const Portal: FC> = ({ children, selector }) => { 7 | const ref = useRef(); 8 | const [mounted, setMounted] = useState(false); 9 | 10 | useEffect(() => { 11 | ref.current = document.querySelector(selector); 12 | setMounted(true); 13 | }, [selector]); 14 | 15 | return mounted ? createPortal(children, ref.current) : null; 16 | }; 17 | 18 | export { Portal }; 19 | -------------------------------------------------------------------------------- /packages/stylex/components/common/Portal/Portal.tsx: -------------------------------------------------------------------------------- 1 | import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react'; 2 | import { createPortal } from 'react-dom'; 3 | import { IPortal } from './Portal.type'; 4 | 5 | // client only portal 6 | const Portal: FC> = ({ children, selector }) => { 7 | const ref = useRef(); 8 | const [mounted, setMounted] = useState(false); 9 | 10 | useEffect(() => { 11 | ref.current = document.querySelector(selector); 12 | setMounted(true); 13 | }, [selector]); 14 | 15 | return mounted ? createPortal(children, ref.current) : null; 16 | }; 17 | 18 | export { Portal }; 19 | -------------------------------------------------------------------------------- /packages/tailwind/components/common/Portal/Portal.tsx: -------------------------------------------------------------------------------- 1 | import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react'; 2 | import { createPortal } from 'react-dom'; 3 | import { IPortal } from './Portal.type'; 4 | 5 | // client only portal 6 | const Portal: FC> = ({ children, selector }) => { 7 | const ref = useRef(); 8 | const [mounted, setMounted] = useState(false); 9 | 10 | useEffect(() => { 11 | ref.current = document.querySelector(selector); 12 | setMounted(true); 13 | }, [selector]); 14 | 15 | return mounted ? createPortal(children, ref.current) : null; 16 | }; 17 | 18 | export { Portal }; 19 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/Button/Button.type.ts: -------------------------------------------------------------------------------- 1 | import { EColor } from '@theme/theme.enum'; 2 | import { ReactNode } from 'react'; 3 | import { IGradientContainer } from '../GradientContainer/GradientContainer.type'; 4 | 5 | interface IButton { 6 | children: ReactNode; 7 | onClick?: () => void; 8 | valueToCopy?: string; 9 | noPaddingResponsive?: boolean; 10 | icon?: ReactNode; 11 | color?: EColor; 12 | href?: string; 13 | gradientContainerProps?: IGradientContainer; 14 | customClasses?: string; 15 | } 16 | 17 | interface ISharedButtonProps { 18 | iconColor?: string; 19 | color?: string; 20 | } 21 | 22 | export type { IButton, ISharedButtonProps }; 23 | -------------------------------------------------------------------------------- /packages/styled-components/components/common/Portal/Portal.tsx: -------------------------------------------------------------------------------- 1 | import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react'; 2 | import { createPortal } from 'react-dom'; 3 | import { IPortal } from './Portal.type'; 4 | 5 | // client only portal 6 | const Portal: FC> = ({ children, selector }) => { 7 | const ref = useRef(); 8 | const [mounted, setMounted] = useState(false); 9 | 10 | useEffect(() => { 11 | ref.current = document.querySelector(selector); 12 | setMounted(true); 13 | }, [selector]); 14 | 15 | return mounted ? createPortal(children, ref.current) : null; 16 | }; 17 | 18 | export { Portal }; 19 | -------------------------------------------------------------------------------- /packages/mui/README.md: -------------------------------------------------------------------------------- 1 | # MUI Tempalte 2 | 3 | The MUI template is based on the [MUI](https://mui.com/) framework. It is configured with the [MUI System](https://mui.com/system/getting-started/overview/) and the [MUI Base](https://mui.com/base/getting-started/overview/). 4 | 5 | All is configured to work with the [Material UI](https://mui.com/material-ui/getting-started/overview/). 6 | 7 | ## Quick Start 8 | 9 | You can quickly start a new project with this template by running: 10 | 11 | ```bash 12 | npx create-nextjs-dapp mui 13 | ``` 14 | 15 | ## Install Material UI 16 | 17 | You can run the following command to install it: 18 | 19 | ```bash 20 | npm install @mui/material 21 | ``` 22 | -------------------------------------------------------------------------------- /packages/base/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | compiler: { 5 | removeConsole: process.env.NODE_ENV === 'production', // remove all console.* 6 | swcMinify: true // minify the bundle 7 | }, 8 | exclude: ['node_modules'], 9 | images: { 10 | minimumCacheTTL: 60 * 10, 11 | deviceSizes: [660, 900, 1200, 1600, 1800] 12 | }, 13 | experimental: { 14 | runtime: 'nodejs' 15 | }, 16 | env: { 17 | RPC_ETHEREUM: process.env.RPC_ETHEREUM, 18 | RPC_AVALANCHE: process.env.RPC_AVALANCHE, 19 | WALLET_CONNECT_PROJECT_ID: process.env.WALLET_CONNECT_PROJECT_ID 20 | } 21 | }; 22 | 23 | module.exports = nextConfig; 24 | -------------------------------------------------------------------------------- /packages/example/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | compiler: { 5 | removeConsole: process.env.NODE_ENV === 'production', // remove all console.* 6 | swcMinify: true // minify the bundle 7 | }, 8 | exclude: ['node_modules'], 9 | images: { 10 | minimumCacheTTL: 60 * 10, 11 | deviceSizes: [660, 900, 1200, 1600, 1800] 12 | }, 13 | experimental: { 14 | runtime: 'nodejs' 15 | }, 16 | env: { 17 | RPC_ETHEREUM: process.env.RPC_ETHEREUM, 18 | RPC_AVALANCHE: process.env.RPC_AVALANCHE, 19 | WALLET_CONNECT_PROJECT_ID: process.env.WALLET_CONNECT_PROJECT_ID 20 | } 21 | }; 22 | 23 | module.exports = nextConfig; 24 | -------------------------------------------------------------------------------- /packages/tailwind/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | compiler: { 5 | removeConsole: process.env.NODE_ENV === 'production', // remove all console.* 6 | swcMinify: true // minify the bundle 7 | }, 8 | exclude: ['node_modules'], 9 | images: { 10 | minimumCacheTTL: 60 * 10, 11 | deviceSizes: [660, 900, 1200, 1600, 1800] 12 | }, 13 | experimental: { 14 | runtime: 'nodejs' 15 | }, 16 | env: { 17 | RPC_ETHEREUM: process.env.RPC_ETHEREUM, 18 | RPC_AVALANCHE: process.env.RPC_AVALANCHE, 19 | WALLET_CONNECT_PROJECT_ID: process.env.WALLET_CONNECT_PROJECT_ID 20 | } 21 | }; 22 | 23 | module.exports = nextConfig; 24 | -------------------------------------------------------------------------------- /packages/base/components/default/Button/Button.type.ts: -------------------------------------------------------------------------------- 1 | import { EColor } from '@theme/theme.enum'; 2 | import classNames from 'classnames'; 3 | import { ReactNode } from 'react'; 4 | import { IGradientContainer } from '../GradientContainer/GradientContainer.type'; 5 | 6 | interface IButton { 7 | children: ReactNode; 8 | onClick?: () => void; 9 | valueToCopy?: string; 10 | noPaddingResponsive?: boolean; 11 | icon?: ReactNode; 12 | color?: EColor; 13 | iconColor?: EColor; 14 | href?: string; 15 | gradientContainerProps?: IGradientContainer; 16 | customClasses?: string; 17 | } 18 | 19 | interface ISharedButtonProps { 20 | iconColor?: string; 21 | color?: string; 22 | } 23 | 24 | export type { IButton, ISharedButtonProps }; 25 | -------------------------------------------------------------------------------- /packages/base/components/default/GradientContainer/GradientContainer.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IGradientContainer } from './GradientContainer.type'; 3 | import styles from './GradientContainer.module.scss'; 4 | import classNames from 'classnames'; 5 | import { EHtmlTag } from '@theme/theme.enum'; 6 | 7 | const GradientContainer: FC = ({ 8 | children, 9 | component = EHtmlTag.div, 10 | className = '', 11 | ...otherProps 12 | }) => { 13 | const ContainerTag = component; 14 | 15 | return ( 16 | 17 | {children} 18 | 19 | ); 20 | }; 21 | 22 | export { GradientContainer }; 23 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Text/Text.tsx: -------------------------------------------------------------------------------- 1 | import { ESize } from '@theme/theme.enum'; 2 | import { FC } from 'react'; 3 | import { ETextType } from './Text.enum'; 4 | import { StyledText } from './Text.styles'; 5 | import { IText } from './Text.type'; 6 | 7 | const Text: FC = ({ 8 | children, 9 | type = ETextType.p, 10 | component, 11 | size = ESize.m, 12 | weight, 13 | align, 14 | color, 15 | ...otherProps 16 | }) => { 17 | return ( 18 | 27 | {children} 28 | 29 | ); 30 | }; 31 | 32 | export { Text }; 33 | -------------------------------------------------------------------------------- /common/public/assets/logo-ethers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/base/public/assets/logo-ethers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/mui/public/assets/logo-ethers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/styled-components/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | compiler: { 5 | styledComponents: true, // ssr and displayName are configured by default 6 | removeConsole: process.env.NODE_ENV === 'production', // remove all console.* 7 | swcMinify: true // minify the bundle 8 | }, 9 | exclude: ['node_modules'], 10 | images: { 11 | minimumCacheTTL: 60 * 10, 12 | deviceSizes: [660, 900, 1200, 1600, 1800] 13 | }, 14 | experimental: { 15 | runtime: 'nodejs' 16 | }, 17 | env: { 18 | RPC_ETHEREUM: process.env.RPC_ETHEREUM, 19 | RPC_AVALANCHE: process.env.RPC_AVALANCHE, 20 | WALLET_CONNECT_PROJECT_ID: process.env.WALLET_CONNECT_PROJECT_ID 21 | } 22 | }; 23 | 24 | module.exports = nextConfig; 25 | -------------------------------------------------------------------------------- /packages/example/public/assets/logo-ethers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/stylex/public/assets/logo-ethers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/tailwind/public/assets/logo-ethers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/styled-components/public/assets/logo-ethers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/mui/types/theme.d.ts: -------------------------------------------------------------------------------- 1 | import 'styled-components'; 2 | 3 | declare module 'styled-components' { 4 | export interface DefaultTheme { 5 | grid: { 6 | unset: string; 7 | '6xs': string; 8 | '5xs': string; 9 | '4xs': string; 10 | '3xs': string; 11 | '2xs': string; 12 | xs: string; 13 | s: string; 14 | m: string; 15 | l: string; 16 | xl: string; 17 | '2xl': string; 18 | '3xl': string; 19 | '4xl': string; 20 | '5xl': string; 21 | '6xl': string; 22 | '7xl': string; 23 | '8xl': string; 24 | }; 25 | colors: { 26 | white: string; 27 | black: string; 28 | darkGray: string; 29 | gray: string; 30 | blue: string; 31 | lightBlue: string; 32 | blueGradient: string; 33 | darkGradient: string; 34 | success: string; 35 | }; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/GradientContainer/GradientContainer.tsx: -------------------------------------------------------------------------------- 1 | import { EColor, EHtmlTag } from '@theme/theme.enum'; 2 | import { FC } from 'react'; 3 | import { IGradientContainer } from './GradientContainer.type'; 4 | 5 | const GradientContainer: FC = ({ 6 | children, 7 | component = EHtmlTag.div, 8 | className = '', 9 | ...otherProps 10 | }) => { 11 | const ContainerTag = component; 12 | 13 | return ( 14 | 22 | {children} 23 | 24 | ); 25 | }; 26 | 27 | export { GradientContainer }; 28 | -------------------------------------------------------------------------------- /packages/styled-components/types/theme.d.ts: -------------------------------------------------------------------------------- 1 | import 'styled-components'; 2 | 3 | declare module 'styled-components' { 4 | export interface DefaultTheme { 5 | spacing: { 6 | unset: string; 7 | '6xs': string; 8 | '5xs': string; 9 | '4xs': string; 10 | '3xs': string; 11 | '2xs': string; 12 | xs: string; 13 | s: string; 14 | m: string; 15 | l: string; 16 | xl: string; 17 | '2xl': string; 18 | '3xl': string; 19 | '4xl': string; 20 | '5xl': string; 21 | '6xl': string; 22 | '7xl': string; 23 | '8xl': string; 24 | }; 25 | colors: { 26 | white: string; 27 | black: string; 28 | darkGray: string; 29 | gray: string; 30 | blue: string; 31 | lightBlue: string; 32 | blueGradient: string; 33 | darkGradient: string; 34 | success: string; 35 | }; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/base/theme/variables.scss: -------------------------------------------------------------------------------- 1 | // media queries 2 | $screen-xs: 0px; 3 | $screen-sm: 600px; 4 | $screen-md: 900px; 5 | $screen-lg: 1200px; 6 | $screen-xl: 1536px; 7 | 8 | // colors 9 | $white: #ffffff; 10 | $black: #121314; 11 | $darkGray: #1e1f20; 12 | $gray: #979797; 13 | $blue: #2467df; 14 | $lightBlue: #00b1ea; 15 | $success: #24df9c; 16 | $yellow: #e3b341; 17 | $blueGradient: linear-gradient(90deg, #2467df 0%, #00b1ea 100%); 18 | $darkGradient: linear-gradient(180deg, #232424 0%, #171717 100%); 19 | 20 | // spacing 21 | $s-6xs: 2px; 22 | $s-5xs: 4px; 23 | $s-4xs: 8px; 24 | $s-3xs: 12px; 25 | $s-2xs: 16px; 26 | $s-xs: 20px; 27 | $s-s: 24px; 28 | $s-m: 32px; 29 | $s-l: 40px; 30 | $s-xl: 48px; 31 | $s-2xl: 64px; 32 | $s-3xl: 80px; 33 | $s-4xl: 100px; 34 | $s-5xl: 120px; 35 | $s-6xl: 140px; 36 | $s-7xl: 160px; 37 | $s-8xl: 180px; 38 | -------------------------------------------------------------------------------- /.github/workflows/pr_labels.yml: -------------------------------------------------------------------------------- 1 | name: PR Labels 2 | 3 | on: 4 | pull_request: 5 | types: 6 | - opened 7 | - edited 8 | - synchronize 9 | 10 | permissions: 11 | contents: read 12 | pull-requests: write 13 | 14 | jobs: 15 | label: 16 | runs-on: ubuntu-latest 17 | name: PR Labels 18 | 19 | steps: 20 | - name: Checkout 21 | uses: actions/checkout@v3 22 | 23 | - name: Set up Node.js 24 | uses: actions/setup-node@v3 25 | with: 26 | node-version: '18' 27 | 28 | - name: Install dependencies 29 | run: npm install @octokit/rest 30 | 31 | - name: Run label script 32 | working-directory: ./ 33 | env: 34 | TOKEN: ${{ secrets.GITHUB_TOKEN }} 35 | run: | 36 | node ./scripts/pr_labels_automation.js 37 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Button/Button.type.ts: -------------------------------------------------------------------------------- 1 | import { IFrames, IHiddenRanges, IMargin, IPadding } from '@interfaces/layout'; 2 | import { ReactNode } from 'react'; 3 | import { DefaultTheme } from 'styled-components'; 4 | import { IGradientContainer } from '../GradientContainer/GradientContainer.type'; 5 | 6 | interface IButton extends IFrames, IHiddenRanges, IPadding, IMargin { 7 | children: ReactNode; 8 | onClick?: () => void; 9 | valueToCopy?: string; 10 | href?: string; 11 | color?: string; 12 | noPaddingResponsive?: boolean; 13 | icon?: ReactNode; 14 | iconColor?: string; 15 | gradientContainerProps?: IGradientContainer; 16 | } 17 | 18 | interface ISharedButtonProps { 19 | theme: DefaultTheme; 20 | iconColor?: string; 21 | color?: string; 22 | } 23 | 24 | export type { IButton, ISharedButtonProps }; 25 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/theme/Text/Text.variables.ts: -------------------------------------------------------------------------------- 1 | import { ESize } from 'styles/theme.enum'; 2 | import { ETextType } from './Text.enum'; 3 | 4 | export const textTypeStylexKeyMap = (size: ESize) => ({ 5 | [ETextType.h1]: 'headingOne' + size.charAt(0).toUpperCase() + size.slice(1), 6 | [ETextType.h2]: 'headingTwo' + size.charAt(0).toUpperCase() + size.slice(1), 7 | [ETextType.h3]: 'headingThree' + size.charAt(0).toUpperCase() + size.slice(1), 8 | [ETextType.h4]: 'headingFour' + size.charAt(0).toUpperCase() + size.slice(1), 9 | [ETextType.h5]: 'headingFive' + size.charAt(0).toUpperCase() + size.slice(1), 10 | [ETextType.h6]: 'headingSix' + size.charAt(0).toUpperCase() + size.slice(1), 11 | [ETextType.p]: 'p' + size.charAt(0).toUpperCase() + size.slice(1), 12 | [ETextType.span]: 'p' + size.charAt(0).toUpperCase() + size.slice(1) 13 | }); 14 | -------------------------------------------------------------------------------- /packages/example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-nextjs-dapp-example", 3 | "version": "1.3.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "ethers": "^6.13.5", 13 | "next": "14.2.23", 14 | "react": "18.3.1", 15 | "react-dom": "18.3.1", 16 | "react-icons": "^5.4.0", 17 | "@web3-onboard/core": "^2.23.1", 18 | "@web3-onboard/frame": "^2.1.1", 19 | "@web3-onboard/injected-wallets": "^2.11.3", 20 | "@web3-onboard/walletconnect": "^2.6.2" 21 | }, 22 | "devDependencies": { 23 | "@types/node": "22.10.5", 24 | "@types/react": "18.3.18", 25 | "@types/react-dom": "18.3.5", 26 | "eslint": "^8.57.1", 27 | "eslint-config-next": "^14.2.23", 28 | "prettier": "3.4.2", 29 | "typescript": "5.7.3" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/base/components/pages/home/HomePage/HomePage.tsx: -------------------------------------------------------------------------------- 1 | import Meta from '@components/common/Meta'; 2 | import CTA from '@components/default/CTA'; 3 | import Tagline from '@components/default/Tagline'; 4 | import Technologies from '@components/default/Technologies'; 5 | import { FC } from 'react'; 6 | import styles from './HomePage.module.scss'; 7 | import { IHomePage } from './HomePage.type'; 8 | 9 | const HomePage: FC = () => { 10 | return ( 11 | <> 12 | 16 | 17 |
18 |
19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 | ); 28 | }; 29 | 30 | export { HomePage }; 31 | -------------------------------------------------------------------------------- /packages/base/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "baseUrl": ".", 17 | "paths": { 18 | "@components/*": ["components/*"], 19 | "@utils/*": ["utils/*"], 20 | "@theme/*": ["theme/*"], 21 | "@hooks/*": ["hooks/*"], 22 | "@contexts/*": ["contexts/*"], 23 | "@interfaces/*": ["interfaces/*"], 24 | "@models/*": ["models/*"] 25 | }, 26 | "moduleResolution": "node" 27 | }, 28 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 29 | "exclude": ["node_modules"] 30 | } 31 | -------------------------------------------------------------------------------- /packages/example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "baseUrl": ".", 17 | "paths": { 18 | "@components/*": ["components/*"], 19 | "@utils/*": ["utils/*"], 20 | "@theme/*": ["theme/*"], 21 | "@hooks/*": ["hooks/*"], 22 | "@contexts/*": ["contexts/*"], 23 | "@interfaces/*": ["interfaces/*"], 24 | "@models/*": ["models/*"] 25 | }, 26 | "moduleResolution": "node" 27 | }, 28 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 29 | "exclude": ["node_modules"] 30 | } 31 | -------------------------------------------------------------------------------- /packages/tailwind/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "baseUrl": ".", 17 | "paths": { 18 | "@components/*": ["components/*"], 19 | "@utils/*": ["utils/*"], 20 | "@theme/*": ["theme/*"], 21 | "@hooks/*": ["hooks/*"], 22 | "@contexts/*": ["contexts/*"], 23 | "@interfaces/*": ["interfaces/*"], 24 | "@models/*": ["models/*"] 25 | }, 26 | "moduleResolution": "node" 27 | }, 28 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 29 | "exclude": ["node_modules"] 30 | } 31 | -------------------------------------------------------------------------------- /packages/tailwind/components/pages/home/HomePage/HomePage.tsx: -------------------------------------------------------------------------------- 1 | import Meta from '@components/common/Meta'; 2 | import CTA from '@components/default/CTA'; 3 | import Tagline from '@components/default/Tagline'; 4 | import Technologies from '@components/default/Technologies'; 5 | import { FC } from 'react'; 6 | import { IHomePage } from './HomePage.type'; 7 | 8 | const HomePage: FC = () => { 9 | return ( 10 | <> 11 | 15 | 16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 | ); 27 | }; 28 | 29 | export { HomePage }; 30 | -------------------------------------------------------------------------------- /packages/base/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-nextjs-dapp-base", 3 | "version": "1.1.4", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@web3-onboard/core": "^2.23.1", 13 | "@web3-onboard/frame": "^2.1.1", 14 | "@web3-onboard/injected-wallets": "^2.11.3", 15 | "@web3-onboard/walletconnect": "^2.6.2", 16 | "classnames": "^2.5.1", 17 | "ethers": "^6.13.5", 18 | "next": "14.2.23", 19 | "react": "18.3.1", 20 | "react-dom": "18.3.1", 21 | "react-icons": "^5.4.0", 22 | "sass": "^1.83.1" 23 | }, 24 | "devDependencies": { 25 | "@types/node": "22.10.5", 26 | "@types/react": "18.3.18", 27 | "@types/react-dom": "18.3.5", 28 | "eslint": "^8.57.1", 29 | "eslint-config-next": "^14.2.23", 30 | "prettier": "3.4.2", 31 | "typescript": "5.7.3" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - develop 8 | 9 | permissions: 10 | contents: write 11 | pull-requests: write 12 | 13 | jobs: 14 | create-release: 15 | runs-on: ubuntu-latest 16 | steps: 17 | - name: Checkout 18 | uses: actions/checkout@v4 19 | 20 | - name: Semantic Release 21 | uses: cycjimmy/semantic-release-action@v4 22 | id: semantic 23 | env: 24 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 25 | 26 | - name: Set up Node.js 27 | uses: actions/setup-node@v3 28 | with: 29 | node-version: '18' 30 | 31 | - name: Install dependencies 32 | run: npm install @octokit/rest 33 | 34 | - name: Rename release 35 | run: node scripts/rename_release.js 36 | env: 37 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 38 | -------------------------------------------------------------------------------- /packages/styled-components/components/pages/home/HomePage/HomePage.tsx: -------------------------------------------------------------------------------- 1 | import Meta from '@components/common/Meta'; 2 | import CTA from '@components/default/CTA'; 3 | import Tagline from '@components/default/Tagline'; 4 | import Technologies from '@components/default/Technologies'; 5 | import { FC } from 'react'; 6 | import { StyledMainContainer } from './HomePage.styles'; 7 | import { IHomePage } from './HomePage.type'; 8 | 9 | const HomePage: FC = () => { 10 | return ( 11 | <> 12 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 | ); 29 | }; 30 | 31 | export { HomePage }; 32 | -------------------------------------------------------------------------------- /packages/styled-components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "baseUrl": ".", 18 | "paths": { 19 | "@components/*": ["components/*"], 20 | "@utils/*": ["utils/*"], 21 | "@hooks/*": ["hooks/*"], 22 | "@graphql/*": ["graphql/*"], 23 | "@contexts/*": ["contexts/*"], 24 | "@theme/*": ["theme/*"], 25 | "@interfaces/*": ["interfaces/*"], 26 | "@models/*": ["models/*"] 27 | } 28 | }, 29 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 30 | "exclude": ["node_modules"] 31 | } 32 | -------------------------------------------------------------------------------- /packages/base/components/default/Navbar/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import Button from '@components/default/Button'; 2 | import Text from '@components/default/Text'; 3 | import { ETextType } from '@components/default/Text/Text.enum'; 4 | import { FaStar } from 'react-icons/fa'; 5 | import { EColor, ESize } from 'theme/theme.enum'; 6 | import WalletButton from '../WalletButton'; 7 | import styles from './Navbar.module.scss'; 8 | 9 | const repoUrl = 'https://github.com/swiiny/create-nextjs-dapp'; 10 | 11 | const Navbar = () => { 12 | return ( 13 | 26 | ); 27 | }; 28 | 29 | export { Navbar }; 30 | -------------------------------------------------------------------------------- /packages/base/components/default/CTA/CTA.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { ICTA } from './CTA.type'; 3 | import Text from '../Text'; 4 | import { EColor, ESize } from 'theme/theme.enum'; 5 | import { ETextType, EFontWeight, ETextAlign } from '../Text/Text.enum'; 6 | import Button from '../Button'; 7 | import styles from './CTA.module.scss'; 8 | 9 | const cloneCmd = 'npx create-nextjs-dapp'; 10 | 11 | const CTA: FC = () => { 12 | return ( 13 |
14 | 22 | Start coding is easy as 23 | 26 | 27 |
28 | ); 29 | }; 30 | 31 | export { CTA }; 32 | -------------------------------------------------------------------------------- /packages/mui/utils/functions.ts: -------------------------------------------------------------------------------- 1 | import { EMediaQuery } from '@theme/theme.enum'; 2 | import { CSSProp } from 'styled-components'; 3 | 4 | // media queries 5 | export const mq = (mediaQuery: EMediaQuery, children: string | CSSProp, minOrMax = 'min') => { 6 | return `@media only screen and (${minOrMax}-width: ${mediaQuery}) { 7 | ${children} 8 | }`; 9 | }; 10 | 11 | export const mqV = (mediaQuery: EMediaQuery | string, children: string | CSSProp, minOrMax = 'min') => { 12 | return `@media only screen and (${minOrMax}-height: ${mediaQuery}) { 13 | ${children} 14 | }`; 15 | }; 16 | 17 | // add transition 18 | export const addTransition = ( 19 | target: string = 'all', 20 | duration: number = 0.4, 21 | delay: number = 0, 22 | timingFunction: string = 'ease' 23 | ) => { 24 | return ` 25 | @media screen and (prefers-reduced-motion: no-preference) { 26 | transition: ${target} ${duration}s ${delay + 's'} ${timingFunction}; 27 | } 28 | `; 29 | }; 30 | -------------------------------------------------------------------------------- /packages/stylex/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "baseUrl": ".", 17 | "paths": { 18 | "@components/*": ["app/_components/*"], 19 | "@utils/*": ["utils/*"], 20 | "@hooks/*": ["hooks/*"], 21 | "@contexts/*": ["contexts/*"], 22 | "@interfaces/*": ["interfaces/*"], 23 | "@models/*": ["models/*"] 24 | }, 25 | "moduleResolution": "node", 26 | "plugins": [ 27 | { 28 | "name": "next" 29 | } 30 | ] 31 | }, 32 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 33 | "exclude": ["node_modules"] 34 | } 35 | -------------------------------------------------------------------------------- /playwright.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, devices } from '@playwright/test'; 2 | import dotenv from 'dotenv'; 3 | 4 | dotenv.config({ path: '.env', override: true }); 5 | 6 | const isCIEnv = !!process.env.CI; 7 | 8 | export default defineConfig({ 9 | testDir: './tests', 10 | snapshotDir: './tests/snapshots', 11 | workers: isCIEnv ? 2 : 5, 12 | retries: 2, 13 | reporter: [ 14 | ['list', {}], 15 | ['html', { open: 'on-failure' }] 16 | ], 17 | use: { 18 | trace: 'retain-on-failure', 19 | deviceScaleFactor: 1 20 | }, 21 | projects: [ 22 | { 23 | name: 'chromium_desktop', 24 | testMatch: '**/*.desktop.spec.ts', 25 | use: { 26 | headless: true, 27 | ...devices['Desktop Chrome HiDPI'], 28 | viewport: { width: 1280, height: 720 } 29 | } 30 | }, 31 | { 32 | name: 'safari_mobile', 33 | testMatch: '**/*.mobile.spec.ts', 34 | use: { headless: true, ...devices['iPhone 13'], hasTouch: true, isMobile: true } 35 | } 36 | ] 37 | }); 38 | -------------------------------------------------------------------------------- /packages/base/components/default/Text/Text.tsx: -------------------------------------------------------------------------------- 1 | import { ESize } from '@theme/theme.enum'; 2 | import classNames from 'classnames'; 3 | import { FC } from 'react'; 4 | import { ETextType } from './Text.enum'; 5 | import styles from './Text.module.scss'; 6 | import { IText } from './Text.type'; 7 | 8 | const Text: FC = ({ 9 | children, 10 | type = ETextType.p, 11 | component, 12 | size = ESize.m, 13 | weight, 14 | align, 15 | color, 16 | className = '', 17 | ...otherProps 18 | }) => { 19 | const TextTag = component || type; 20 | 21 | return ( 22 | 33 | {children} 34 | 35 | ); 36 | }; 37 | 38 | export { Text }; 39 | -------------------------------------------------------------------------------- /packages/mui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "baseUrl": ".", 18 | "paths": { 19 | "@components/*": ["components/*"], 20 | "@utils/*": ["utils/*"], 21 | "@hooks/*": ["hooks/*"], 22 | "@graphql/*": ["graphql/*"], 23 | "@contexts/*": ["contexts/*"], 24 | "@theme/*": ["theme/*"], 25 | "@interfaces/*": ["interfaces/*"], 26 | "@models/*": ["models/*"], 27 | "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"] 28 | } 29 | }, 30 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 31 | "exclude": ["node_modules"] 32 | } 33 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/CTA/CTA.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react'; 2 | import { EColor, ESize } from 'theme/theme.enum'; 3 | import Button from '../Button'; 4 | import Text from '../Text'; 5 | import { EFontWeight, ETextAlign, ETextType } from '../Text/Text.enum'; 6 | import { ICTA } from './CTA.type'; 7 | 8 | const cloneCmd = 'npx create-nextjs-dapp'; 9 | 10 | const CTA: FC = () => { 11 | return ( 12 |
13 | 21 | Start coding is easy as 22 | 25 | 26 |
27 | ); 28 | }; 29 | 30 | export { CTA }; 31 | -------------------------------------------------------------------------------- /packages/styled-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-nextjs-dapp-styled-components", 3 | "version": "1.2.6", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@vercel/analytics": "^1.4.1", 13 | "@web3-onboard/core": "^2.23.1", 14 | "@web3-onboard/frame": "^2.1.1", 15 | "@web3-onboard/injected-wallets": "^2.11.3", 16 | "@web3-onboard/walletconnect": "^2.6.2", 17 | "ethers": "^6.13.5", 18 | "next": "14.2.23", 19 | "next-transpile-modules": "^10.0.1", 20 | "react": "18.3.1", 21 | "react-dom": "18.3.1", 22 | "react-icons": "^5.4.0", 23 | "styled-components": "^6.1.14" 24 | }, 25 | "devDependencies": { 26 | "@types/styled-components": "^5.1.34", 27 | "@types/node": "22.10.5", 28 | "@types/react": "18.3.18", 29 | "@types/react-dom": "18.3.5", 30 | "eslint": "^8.57.1", 31 | "eslint-config-next": "^14.2.23", 32 | "prettier": "3.4.2", 33 | "typescript": "5.7.3" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /.releaserc.json: -------------------------------------------------------------------------------- 1 | { 2 | "branches": ["main", { "name": "develop", "prerelease": true }], 3 | "plugins": [ 4 | [ 5 | "@semantic-release/commit-analyzer", 6 | { 7 | "preset": "angular", 8 | "releaseRules": [ 9 | { "type": "feat", "section": "Features", "release": "minor" }, 10 | { "type": "fix", "section": "Bug Fixes", "release": "patch" }, 11 | { "type": "chore", "section": "Maintenance", "release": "patch" }, 12 | { "type": "docs", "release": "patch" }, 13 | { "type": "style", "release": "patch" }, 14 | { "type": "refactor", "section": "♻️ Refactor", "release": "patch" }, 15 | { "type": "perf", "release": "patch" }, 16 | { "type": "test", "hidden": true, "release": "patch" } 17 | ], 18 | "parserOpts": { 19 | "noteKeywords": ["BREAKING CHANGE", "BREAKING CHANGES"] 20 | } 21 | } 22 | ], 23 | "@semantic-release/release-notes-generator", 24 | "@semantic-release/changelog", 25 | "@semantic-release/npm", 26 | "@semantic-release/git", 27 | "@semantic-release/github" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /packages/tailwind/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-nextjs-dapp-tailwind", 3 | "version": "1.1.4", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "clsx": "^2.1.1", 13 | "ethers": "^6.13.5", 14 | "next": "14.2.23", 15 | "postcss-import": "^16.1.0", 16 | "react": "18.3.1", 17 | "react-dom": "18.3.1", 18 | "react-icons": "^5.4.0", 19 | "@web3-onboard/core": "^2.23.1", 20 | "@web3-onboard/frame": "^2.1.1", 21 | "@web3-onboard/injected-wallets": "^2.11.3", 22 | "@web3-onboard/walletconnect": "^2.6.2" 23 | }, 24 | "devDependencies": { 25 | "@types/node": "22.7.9", 26 | "@types/react": "18.3.18", 27 | "@types/react-dom": "18.3.5", 28 | "autoprefixer": "^10.4.20", 29 | "eslint": "^8.57.1", 30 | "eslint-config-next": "^14.2.23", 31 | "postcss": "^8.4.49", 32 | "postcss-nesting": "^13.0.1", 33 | "prettier": "3.3.3", 34 | "tailwindcss": "^3.4.17", 35 | "typescript": "5.7.3" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/base/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Head, Html, Main, NextScript } from 'next/document'; 2 | 3 | export default function CreateNextjsDappDocument() { 4 | return ( 5 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /packages/example/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Head, Html, Main, NextScript } from 'next/document'; 2 | 3 | export default function CreateNextjsDappDocument() { 4 | return ( 5 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /common/models/Address.ts: -------------------------------------------------------------------------------- 1 | import { getAddress, isAddress } from 'ethers'; 2 | 3 | export type TAddress = Address | string | undefined; 4 | 5 | // inspired by Hop Protocol https://github.com/hop-protocol/hop 6 | class Address { 7 | public readonly address: string; 8 | 9 | constructor(address: TAddress) { 10 | let newAddress; 11 | if (address instanceof Address) { 12 | newAddress = address.toString(); 13 | } else if (typeof address === 'string') { 14 | newAddress = getAddress(address); 15 | } 16 | 17 | if (!newAddress || !isAddress(newAddress)) { 18 | throw new Error('Invalid address'); 19 | } 20 | 21 | this.address = newAddress; 22 | } 23 | 24 | static from(address: TAddress): Address { 25 | return new Address(address); 26 | } 27 | 28 | toString(): string { 29 | return this.address; 30 | } 31 | 32 | truncate(): string { 33 | return this.address.slice(0, 6) + '...' + this.address.slice(38, 42); 34 | } 35 | 36 | toLowercase(): string { 37 | return this.address.toLowerCase(); 38 | } 39 | } 40 | 41 | export default Address; 42 | -------------------------------------------------------------------------------- /packages/tailwind/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Head, Html, Main, NextScript } from 'next/document'; 2 | 3 | export default function CreateNextjsDappDocument() { 4 | return ( 5 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /packages/base/components/default/Technologies/Technologies.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../../theme/mixins'; 2 | 3 | .technologies { 4 | display: flex; 5 | flex-wrap: wrap; 6 | justify-content: center; 7 | align-items: center; 8 | 9 | gap: 28px; 10 | 11 | @include md() { 12 | gap: 40px; 13 | } 14 | 15 | @include lg() { 16 | gap: 50px; 17 | } 18 | } 19 | 20 | .logoContainer { 21 | position: relative; 22 | 23 | border-radius: 12px; 24 | 25 | @include transition(); 26 | 27 | & > img { 28 | width: auto; 29 | height: 30px; 30 | 31 | @include md() { 32 | width: auto; 33 | height: 45px; 34 | } 35 | } 36 | 37 | &::before { 38 | content: ' '; 39 | position: absolute; 40 | top: -15px; 41 | left: -20px; 42 | right: -20px; 43 | bottom: -15px; 44 | z-index: -1; 45 | 46 | border-radius: inherit; 47 | transition: inherit; 48 | 49 | background-color: $black; 50 | } 51 | 52 | &:hover { 53 | opacity: 1 !important; 54 | 55 | transform: scale(1.05); 56 | } 57 | } 58 | 59 | .link { 60 | position: absolute; 61 | inset: 0; 62 | } 63 | -------------------------------------------------------------------------------- /packages/base/models/Address.ts: -------------------------------------------------------------------------------- 1 | import { getAddress, isAddress } from 'ethers'; 2 | 3 | export type TAddress = Address | string | undefined; 4 | 5 | // inspired by Hop Protocol https://github.com/hop-protocol/hop 6 | class Address { 7 | public readonly address: string; 8 | 9 | constructor(address: TAddress) { 10 | let newAddress; 11 | if (address instanceof Address) { 12 | newAddress = address.toString(); 13 | } else if (typeof address === 'string') { 14 | newAddress = getAddress(address); 15 | } 16 | 17 | if (!newAddress || !isAddress(newAddress)) { 18 | throw new Error('Invalid address'); 19 | } 20 | 21 | this.address = newAddress; 22 | } 23 | 24 | static from(address: TAddress): Address { 25 | return new Address(address); 26 | } 27 | 28 | toString(): string { 29 | return this.address; 30 | } 31 | 32 | truncate(): string { 33 | return this.address.slice(0, 6) + '...' + this.address.slice(38, 42); 34 | } 35 | 36 | toLowercase(): string { 37 | return this.address.toLowerCase(); 38 | } 39 | } 40 | 41 | export default Address; 42 | -------------------------------------------------------------------------------- /packages/mui/models/Address.ts: -------------------------------------------------------------------------------- 1 | import { getAddress, isAddress } from 'ethers'; 2 | 3 | export type TAddress = Address | string | undefined; 4 | 5 | // inspired by Hop Protocol https://github.com/hop-protocol/hop 6 | class Address { 7 | public readonly address: string; 8 | 9 | constructor(address: TAddress) { 10 | let newAddress; 11 | if (address instanceof Address) { 12 | newAddress = address.toString(); 13 | } else if (typeof address === 'string') { 14 | newAddress = getAddress(address); 15 | } 16 | 17 | if (!newAddress || !isAddress(newAddress)) { 18 | throw new Error('Invalid address'); 19 | } 20 | 21 | this.address = newAddress; 22 | } 23 | 24 | static from(address: TAddress): Address { 25 | return new Address(address); 26 | } 27 | 28 | toString(): string { 29 | return this.address; 30 | } 31 | 32 | truncate(): string { 33 | return this.address.slice(0, 6) + '...' + this.address.slice(38, 42); 34 | } 35 | 36 | toLowercase(): string { 37 | return this.address.toLowerCase(); 38 | } 39 | } 40 | 41 | export default Address; 42 | -------------------------------------------------------------------------------- /packages/stylex/models/Address.ts: -------------------------------------------------------------------------------- 1 | import { getAddress, isAddress } from 'ethers'; 2 | 3 | export type TAddress = Address | string | undefined; 4 | 5 | // inspired by Hop Protocol https://github.com/hop-protocol/hop 6 | class Address { 7 | public readonly address: string; 8 | 9 | constructor(address: TAddress) { 10 | let newAddress; 11 | if (address instanceof Address) { 12 | newAddress = address.toString(); 13 | } else if (typeof address === 'string') { 14 | newAddress = getAddress(address); 15 | } 16 | 17 | if (!newAddress || !isAddress(newAddress)) { 18 | throw new Error('Invalid address'); 19 | } 20 | 21 | this.address = newAddress; 22 | } 23 | 24 | static from(address: TAddress): Address { 25 | return new Address(address); 26 | } 27 | 28 | toString(): string { 29 | return this.address; 30 | } 31 | 32 | truncate(): string { 33 | return this.address.slice(0, 6) + '...' + this.address.slice(38, 42); 34 | } 35 | 36 | toLowercase(): string { 37 | return this.address.toLowerCase(); 38 | } 39 | } 40 | 41 | export default Address; 42 | -------------------------------------------------------------------------------- /packages/example/models/Address.ts: -------------------------------------------------------------------------------- 1 | import { getAddress, isAddress } from 'ethers'; 2 | 3 | export type TAddress = Address | string | undefined; 4 | 5 | // inspired by Hop Protocol https://github.com/hop-protocol/hop 6 | class Address { 7 | public readonly address: string; 8 | 9 | constructor(address: TAddress) { 10 | let newAddress; 11 | if (address instanceof Address) { 12 | newAddress = address.toString(); 13 | } else if (typeof address === 'string') { 14 | newAddress = getAddress(address); 15 | } 16 | 17 | if (!newAddress || !isAddress(newAddress)) { 18 | throw new Error('Invalid address'); 19 | } 20 | 21 | this.address = newAddress; 22 | } 23 | 24 | static from(address: TAddress): Address { 25 | return new Address(address); 26 | } 27 | 28 | toString(): string { 29 | return this.address; 30 | } 31 | 32 | truncate(): string { 33 | return this.address.slice(0, 6) + '...' + this.address.slice(38, 42); 34 | } 35 | 36 | toLowercase(): string { 37 | return this.address.toLowerCase(); 38 | } 39 | } 40 | 41 | export default Address; 42 | -------------------------------------------------------------------------------- /packages/mui/next.config.js: -------------------------------------------------------------------------------- 1 | const withTM = require('next-transpile-modules')(['@mui/system', '@mui/base', '@mui/styled-engine-sc']); 2 | 3 | /** @type {import('next').NextConfig} */ 4 | const nextConfig = withTM({ 5 | reactStrictMode: true, 6 | compiler: { 7 | styledComponents: true, // ssr and displayName are configured by default 8 | removeConsole: process.env.NODE_ENV === 'production', // remove all console.* 9 | swcMinify: true // minify the bundle 10 | }, 11 | exclude: ['node_modules'], 12 | images: { 13 | minimumCacheTTL: 60 * 10, 14 | deviceSizes: [660, 900, 1200, 1600, 1800] 15 | }, 16 | experimental: { 17 | runtime: 'nodejs' 18 | }, 19 | env: { 20 | RPC_ETHEREUM: process.env.RPC_ETHEREUM, 21 | RPC_AVALANCHE: process.env.RPC_AVALANCHE, 22 | WALLET_CONNECT_PROJECT_ID: process.env.WALLET_CONNECT_PROJECT_ID 23 | }, 24 | webpack: (config) => { 25 | config.resolve.alias = { 26 | ...config.resolve.alias, 27 | '@mui/styled-engine': '@mui/styled-engine-sc' 28 | }; 29 | return config; 30 | } 31 | }); 32 | 33 | module.exports = nextConfig; 34 | -------------------------------------------------------------------------------- /packages/tailwind/models/Address.ts: -------------------------------------------------------------------------------- 1 | import { getAddress, isAddress } from 'ethers'; 2 | 3 | export type TAddress = Address | string | undefined; 4 | 5 | // inspired by Hop Protocol https://github.com/hop-protocol/hop 6 | class Address { 7 | public readonly address: string; 8 | 9 | constructor(address: TAddress) { 10 | let newAddress; 11 | if (address instanceof Address) { 12 | newAddress = address.toString(); 13 | } else if (typeof address === 'string') { 14 | newAddress = getAddress(address); 15 | } 16 | 17 | if (!newAddress || !isAddress(newAddress)) { 18 | throw new Error('Invalid address'); 19 | } 20 | 21 | this.address = newAddress; 22 | } 23 | 24 | static from(address: TAddress): Address { 25 | return new Address(address); 26 | } 27 | 28 | toString(): string { 29 | return this.address; 30 | } 31 | 32 | truncate(): string { 33 | return this.address.slice(0, 6) + '...' + this.address.slice(38, 42); 34 | } 35 | 36 | toLowercase(): string { 37 | return this.address.toLowerCase(); 38 | } 39 | } 40 | 41 | export default Address; 42 | -------------------------------------------------------------------------------- /packages/base/theme/theme.enum.ts: -------------------------------------------------------------------------------- 1 | enum ESize { 2 | unset = 'unset', 3 | '6xs' = '6xs', 4 | '5xs' = '5xs', 5 | '4xs' = '4xs', 6 | '3xs' = '3xs', 7 | '2xs' = '2xs', 8 | xs = 'xs', 9 | s = 'small', 10 | m = 'medium', 11 | l = 'large', 12 | xl = 'xl', 13 | '2xl' = '2xl', 14 | '3xl' = '3xl', 15 | '4xl' = '4xl', 16 | '5xl' = '5xl', 17 | '6xl' = '6xl', 18 | '7xl' = '7xl', 19 | '8xl' = '8xl' 20 | } 21 | 22 | enum EMediaQuery { 23 | xs = '0px', 24 | sm = '600px', 25 | md = '900px', 26 | lg = '1200px', 27 | xl = '1536px' 28 | } 29 | 30 | enum EHtmlTag { 31 | span = 'span', 32 | div = 'div', 33 | p = 'p', 34 | h1 = 'h1', 35 | h2 = 'h2', 36 | h3 = 'h3', 37 | h4 = 'h4', 38 | h5 = 'h5', 39 | h6 = 'h6' 40 | } 41 | 42 | enum EColor { 43 | white = 'white', 44 | black = 'black', 45 | darkGray = 'darkGray', 46 | gray = 'gray', 47 | blue = 'blue', 48 | lightBlue = 'lightBlue', 49 | success = 'success', 50 | yellow = 'yellow', 51 | blueGradient = 'blueGradient', 52 | darkGradient = 'darkGradient' 53 | } 54 | 55 | export { ESize, EMediaQuery, EColor, EHtmlTag }; 56 | -------------------------------------------------------------------------------- /packages/styled-components/models/Address.ts: -------------------------------------------------------------------------------- 1 | import { getAddress, isAddress } from 'ethers'; 2 | 3 | export type TAddress = Address | string | undefined; 4 | 5 | // inspired by Hop Protocol https://github.com/hop-protocol/hop 6 | class Address { 7 | public readonly address: string; 8 | 9 | constructor(address: TAddress) { 10 | let newAddress; 11 | if (address instanceof Address) { 12 | newAddress = address.toString(); 13 | } else if (typeof address === 'string') { 14 | newAddress = getAddress(address); 15 | } 16 | 17 | if (!newAddress || !isAddress(newAddress)) { 18 | throw new Error('Invalid address'); 19 | } 20 | 21 | this.address = newAddress; 22 | } 23 | 24 | static from(address: TAddress): Address { 25 | return new Address(address); 26 | } 27 | 28 | toString(): string { 29 | return this.address; 30 | } 31 | 32 | truncate(): string { 33 | return this.address.slice(0, 6) + '...' + this.address.slice(38, 42); 34 | } 35 | 36 | toLowercase(): string { 37 | return this.address.toLowerCase(); 38 | } 39 | } 40 | 41 | export default Address; 42 | -------------------------------------------------------------------------------- /packages/stylex/styles/theme.enum.ts: -------------------------------------------------------------------------------- 1 | enum ESize { 2 | unset = 'unset', 3 | '6xs' = '6xs', 4 | '5xs' = '5xs', 5 | '4xs' = '4xs', 6 | '3xs' = '3xs', 7 | '2xs' = '2xs', 8 | xs = 'xs', 9 | s = 'small', 10 | m = 'medium', 11 | l = 'large', 12 | xl = 'xl', 13 | '2xl' = '2xl', 14 | '3xl' = '3xl', 15 | '4xl' = '4xl', 16 | '5xl' = '5xl', 17 | '6xl' = '6xl', 18 | '7xl' = '7xl', 19 | '8xl' = '8xl' 20 | } 21 | 22 | enum EMediaQuery { 23 | xs = '0px', 24 | sm = '600px', 25 | md = '900px', 26 | lg = '1200px', 27 | xl = '1536px' 28 | } 29 | 30 | enum EHtmlTag { 31 | span = 'span', 32 | div = 'div', 33 | p = 'p', 34 | h1 = 'h1', 35 | h2 = 'h2', 36 | h3 = 'h3', 37 | h4 = 'h4', 38 | h5 = 'h5', 39 | h6 = 'h6' 40 | } 41 | 42 | enum EColor { 43 | white = 'white', 44 | black = 'black', 45 | darkGray = 'darkGray', 46 | gray = 'gray', 47 | blue = 'blue', 48 | lightBlue = 'lightBlue', 49 | success = 'success', 50 | yellow = 'yellow', 51 | blueGradient = 'blueGradient', 52 | darkGradient = 'darkGradient' 53 | } 54 | 55 | export { EColor, EHtmlTag, EMediaQuery, ESize }; 56 | -------------------------------------------------------------------------------- /packages/mui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-nextjs-dapp-mui", 3 | "version": "1.1.5", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@mui/base": "5.0.0-beta.59", 13 | "@mui/styled-engine-sc": "^6.3.1", 14 | "@mui/system": "^6.3.1", 15 | "ethers": "^6.13.5", 16 | "next": "14.2.23", 17 | "next-transpile-modules": "^10.0.1", 18 | "react": "18.3.1", 19 | "react-dom": "18.3.1", 20 | "react-icons": "^5.4.0", 21 | "styled-components": "6.1.13", 22 | "@web3-onboard/core": "^2.23.1", 23 | "@web3-onboard/frame": "^2.1.1", 24 | "@web3-onboard/injected-wallets": "^2.11.3", 25 | "@web3-onboard/walletconnect": "^2.6.2" 26 | }, 27 | "devDependencies": { 28 | "@types/node": "22.10.5", 29 | "@types/react": "18.3.18", 30 | "@types/react-dom": "18.3.5", 31 | "@types/styled-components": "^5.1.34", 32 | "eslint": "^8.57.1", 33 | "eslint-config-next": "^14.2.23", 34 | "prettier": "3.4.2", 35 | "typescript": "5.7.3" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/mui/components/pages/home/HomePage/HomePage.tsx: -------------------------------------------------------------------------------- 1 | import Meta from '@components/common/Meta'; 2 | import CTA from '@components/default/CTA'; 3 | import Tagline from '@components/default/Tagline'; 4 | import Technologies from '@components/default/Technologies'; 5 | import { Box } from '@mui/system'; 6 | import { FC } from 'react'; 7 | import { IHomePage } from './HomePage.type'; 8 | 9 | const boxStyles = { 10 | display: 'flex', 11 | flexDirection: 'column', 12 | justifyContent: 'space-evenly', 13 | paddingX: { xs: '15px', md: '32px', lg: '64px' }, 14 | paddingTop: '32px', 15 | height: '100dvh' 16 | }; 17 | 18 | const HomePage: FC = () => { 19 | return ( 20 | <> 21 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 |
36 | 37 | ); 38 | }; 39 | 40 | export { HomePage }; 41 | -------------------------------------------------------------------------------- /packages/mui/components/default/Technologies/Technologies.styles.ts: -------------------------------------------------------------------------------- 1 | import { addTransition, mq } from 'utils/functions'; 2 | import styled, { css } from 'styled-components'; 3 | import { EMediaQuery } from '@theme/theme.enum'; 4 | 5 | export const StyledLogoContainer = styled.div` 6 | ${(p) => css` 7 | position: relative; 8 | 9 | border-radius: 12px; 10 | 11 | ${addTransition()} 12 | 13 | & > img { 14 | width: auto; 15 | height: 30px; 16 | 17 | ${mq(EMediaQuery.md, 'height: 45px;')} 18 | } 19 | 20 | &::before { 21 | content: ' '; 22 | position: absolute; 23 | top: -15px; 24 | left: -20px; 25 | right: -20px; 26 | bottom: -15px; 27 | z-index: -1; 28 | 29 | border-radius: inherit; 30 | transition: inherit; 31 | 32 | background-color: ${(p) => p.theme.colors.black}; 33 | } 34 | 35 | &:hover { 36 | opacity: 1 !important; 37 | 38 | transform: scale(1.05); 39 | } 40 | `} 41 | `; 42 | 43 | export const StyledLink = styled.a` 44 | position: relative; 45 | 46 | position: absolute; 47 | top: 0; 48 | left: 0; 49 | right: 0; 50 | bottom: 0; 51 | `; 52 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/Text/Text.tsx: -------------------------------------------------------------------------------- 1 | import { EColor, ESize } from '@theme/theme.enum'; 2 | import clsx from 'clsx'; 3 | import { FC } from 'react'; 4 | import { EFontWeight, ETextAlign, ETextType } from './Text.enum'; 5 | import { IText } from './Text.type'; 6 | 7 | const Text: FC = ({ 8 | children, 9 | type = ETextType.p, 10 | component, 11 | size = ESize.m, 12 | weight, 13 | align, 14 | color = EColor.white, 15 | className = '', 16 | ...otherProps 17 | }) => { 18 | const TextTag = component || type; 19 | 20 | return ( 21 | 37 | {children} 38 | 39 | ); 40 | }; 41 | 42 | export { Text }; 43 | -------------------------------------------------------------------------------- /packages/stylex/app/_components/home/HomePage/HomePage.tsx: -------------------------------------------------------------------------------- 1 | import * as stylex from '@stylexjs/stylex'; 2 | import { spacing } from '../../../../styles/theme.stylex'; 3 | import CTA from '../CTA'; 4 | import Tagline from '../Tagline'; 5 | import Technologies from '../Technologies'; 6 | 7 | const MD = '@media only screen and (min-width: 900px) and (max-width: 1199px)'; 8 | const LG = '@media only screen and (min-width: 1200px)'; 9 | 10 | const styles = stylex.create({ 11 | main: { 12 | display: 'flex', 13 | flexDirection: 'column', 14 | justifyContent: 'space-evenly', 15 | alignItems: 'center', 16 | height: '100dvh', 17 | paddingTop: spacing.m, 18 | paddingLeft: { 19 | default: '15px', 20 | [MD]: spacing.m, 21 | [LG]: spacing['2xl'] 22 | }, 23 | paddingRight: { 24 | default: '15px', 25 | [MD]: spacing.m, 26 | [LG]: spacing['2xl'] 27 | } 28 | } 29 | }); 30 | 31 | const HomePage = () => { 32 | return ( 33 |
34 | 35 | 36 | 37 | 38 | 39 |
40 | ); 41 | }; 42 | 43 | export { HomePage }; 44 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Pull Request Template 2 | 3 | ## Description 4 | 5 | Please include a clear and concise description of what this pull request accomplishes. 6 | 7 | ## Type of Change 8 | 9 | - [ ] Bug Fix 10 | - [ ] New Feature 11 | - [ ] Breaking Change 12 | - [ ] Refactor 13 | - [ ] Documentation 14 | - [ ] Other (Please describe) 15 | 16 | ## Steps to Test 17 | 18 | Please list the steps that should be taken to test the changes introduced in this PR. 19 | 20 | 1. 21 | 2. 22 | 3. 23 | 24 | ## Expected Behavior 25 | 26 | Describe the expected outcome after the changes have been applied. 27 | 28 | ## Additional Information 29 | 30 | Please provide any additional information or context about this pull request here. 31 | 32 | ## Checklist 33 | 34 | - [ ] I have commented my code, especially in areas that may be hard to understand for others. 35 | - [ ] My changes generate no new warnings. 36 | - [ ] I have added tests that demonstrate my changes are effective or that my feature works. 37 | 38 | ## Screenshots (If Applicable) 39 | 40 | Drop in any relevant screenshots to help visualize your changes. 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Jeremy Theintz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | # make component name=ExampleComponent 2 | # will create a directory called ExampleComponent 3 | # and put these files in there. 4 | # ExampleComponent 5 | # |- index.ts 6 | # |- ExampleComponent.tsx 7 | # |- ExampleComponent.styles.ts 8 | # |- ExampleComponent.type.ts 9 | # 10 | # the files are set up with the minimum code needed to get the component working. 11 | # The new component is placed into the ./components directory 12 | 13 | # How to create a component with the CLI : make component name=ExampleComponent 14 | component: 15 | sh scripts/create_component.sh ${name} 16 | 17 | # same command for windows 18 | win-component: 19 | sh scripts/win_create_component.sh ${name} 20 | 21 | # run tests before build 22 | build: 23 | npm run build 24 | 25 | init: 26 | npm install 27 | npm run dev 28 | 29 | start: 30 | npm run dev 31 | 32 | reset: 33 | rm -rf .next 34 | rm -rf node_modules 35 | rm -rf package-lock.json 36 | npm install 37 | 38 | restart: 39 | rm -rf .next 40 | rm -rf node_modules 41 | rm -rf package-lock.json 42 | npm install 43 | npm run dev 44 | 45 | push: 46 | npm run lint 47 | npm run build 48 | git push 49 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/Navbar/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import Button from '@components/default/Button'; 2 | import Text from '@components/default/Text'; 3 | import { ETextType } from '@components/default/Text/Text.enum'; 4 | import Flex from '@components/layout/Flex'; 5 | import { EFlex } from '@components/layout/Flex/Flex.enum'; 6 | import { FaStar } from 'react-icons/fa'; 7 | import { EMediaQuery, ESize } from 'theme/theme.enum'; 8 | import WalletButton from '../WalletButton'; 9 | import { StyledNavbar } from './Navbar.styles'; 10 | 11 | const repoUrl = 'https://github.com/swiiny/create-nextjs-dapp'; 12 | 13 | const Navbar = () => { 14 | return ( 15 | 16 | 17 | Create Nextjs Dapp 18 | 19 | 20 | 21 | 29 | 30 | 31 | 32 | 33 | ); 34 | }; 35 | 36 | export { Navbar }; 37 | -------------------------------------------------------------------------------- /packages/styled-components/components/default/CTA/CTA.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { ICTA } from './CTA.type'; 3 | import { useTheme } from 'styled-components'; 4 | import { ESize } from 'theme/theme.enum'; 5 | import { ETextType, EFontWeight, ETextAlign } from '../Text/Text.enum'; 6 | import Button from '../Button'; 7 | import { StyledCTA, TextEx } from './CTA.styles'; 8 | import { EFlex } from '@components/layout/Flex/Flex.enum'; 9 | 10 | const cloneCmd = 'npx create-nextjs-dapp'; 11 | 12 | const CTA: FC = () => { 13 | const theme = useTheme(); 14 | 15 | return ( 16 | 17 | 24 | Start coding is easy as 25 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | export { CTA }; 39 | -------------------------------------------------------------------------------- /packages/stylex/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const stylexPlugin = require('@stylexjs/nextjs-plugin'); 3 | const babelrc = require('./.babelrc.js'); 4 | const plugins = babelrc.plugins; 5 | const [_name, options] = plugins.find((plugin) => Array.isArray(plugin) && plugin[0] === '@stylexjs/babel-plugin'); 6 | const rootDir = options.unstable_moduleResolution.rootDir ?? __dirname; 7 | 8 | /** @type {import('next').NextConfig} */ 9 | const nextConfig = { 10 | reactStrictMode: true, 11 | compiler: { 12 | removeConsole: process.env.NODE_ENV === 'production', // remove all console.* 13 | swcMinify: true // minify the bundle 14 | }, 15 | exclude: ['node_modules'], 16 | images: { 17 | minimumCacheTTL: 60 * 10, 18 | deviceSizes: [660, 900, 1200, 1600, 1800] 19 | } /* 20 | experimental: { 21 | runtime: 'nodejs' 22 | }, */, 23 | env: { 24 | RPC_ETHEREUM: process.env.RPC_ETHEREUM, 25 | RPC_AVALANCHE: process.env.RPC_AVALANCHE, 26 | WALLET_CONNECT_PROJECT_ID: process.env.WALLET_CONNECT_PROJECT_ID 27 | } 28 | }; 29 | 30 | module.exports = stylexPlugin({ 31 | rootDir, 32 | useCSSLayers: true 33 | })({ 34 | ...nextConfig, 35 | transpilePackages: ['@stylexjs/open-props'] 36 | }); 37 | -------------------------------------------------------------------------------- /common/contexts/ResponsiveContext/ResponsiveContext.functions.ts: -------------------------------------------------------------------------------- 1 | import { IFrames } from './ResponsiveContext.type'; 2 | 3 | function getResponsive(): IFrames { 4 | if (typeof window === 'undefined') { 5 | return { 6 | width: 1200, 7 | height: 900 8 | }; 9 | } 10 | 11 | const { innerWidth: width, innerHeight: height } = window; 12 | 13 | return { 14 | width, 15 | height 16 | }; 17 | } 18 | 19 | /** 20 | * Create a function that will delay the execution of the passed 21 | * function for at least `wait` milliseconds. 22 | * 23 | * @param {Function} func The function to delay execution of. 24 | * @param {Number} wait The number of milliseconds to delay execution by. 25 | * @returns {Function} A new function that, when executed, will delay the 26 | * execution of `func` for at least `wait` milliseconds. 27 | */ 28 | function debounce(func: (...args: any[]) => void, wait: number): () => void { 29 | let timeout: ReturnType; 30 | return function executedFunction(...args: any[]) { 31 | const later = () => { 32 | clearTimeout(timeout); 33 | func(...args); 34 | }; 35 | clearTimeout(timeout); 36 | timeout = setTimeout(later, wait); 37 | }; 38 | } 39 | 40 | export { getResponsive, debounce }; 41 | -------------------------------------------------------------------------------- /packages/tailwind/components/default/Navbar/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import Button from '@components/default/Button'; 2 | import Text from '@components/default/Text'; 3 | import { EFontWeight, ETextType } from '@components/default/Text/Text.enum'; 4 | import { FaStar } from 'react-icons/fa'; 5 | import { EColor, ESize } from 'theme/theme.enum'; 6 | import WalletButton from '../WalletButton'; 7 | 8 | const repoUrl = 'https://github.com/swiiny/create-nextjs-dapp'; 9 | 10 | const Navbar = () => { 11 | return ( 12 | 34 | ); 35 | }; 36 | 37 | export { Navbar }; 38 | -------------------------------------------------------------------------------- /packages/base/contexts/ResponsiveContext/ResponsiveContext.functions.ts: -------------------------------------------------------------------------------- 1 | import { IFrames } from './ResponsiveContext.type'; 2 | 3 | function getResponsive(): IFrames { 4 | if (typeof window === 'undefined') { 5 | return { 6 | width: 1200, 7 | height: 900 8 | }; 9 | } 10 | 11 | const { innerWidth: width, innerHeight: height } = window; 12 | 13 | return { 14 | width, 15 | height 16 | }; 17 | } 18 | 19 | /** 20 | * Create a function that will delay the execution of the passed 21 | * function for at least `wait` milliseconds. 22 | * 23 | * @param {Function} func The function to delay execution of. 24 | * @param {Number} wait The number of milliseconds to delay execution by. 25 | * @returns {Function} A new function that, when executed, will delay the 26 | * execution of `func` for at least `wait` milliseconds. 27 | */ 28 | function debounce(func: (...args: any[]) => void, wait: number): () => void { 29 | let timeout: ReturnType; 30 | return function executedFunction(...args: any[]) { 31 | const later = () => { 32 | clearTimeout(timeout); 33 | func(...args); 34 | }; 35 | clearTimeout(timeout); 36 | timeout = setTimeout(later, wait); 37 | }; 38 | } 39 | 40 | export { getResponsive, debounce }; 41 | -------------------------------------------------------------------------------- /packages/mui/contexts/ResponsiveContext/ResponsiveContext.functions.ts: -------------------------------------------------------------------------------- 1 | import { IFrames } from './ResponsiveContext.type'; 2 | 3 | function getResponsive(): IFrames { 4 | if (typeof window === 'undefined') { 5 | return { 6 | width: 1200, 7 | height: 900 8 | }; 9 | } 10 | 11 | const { innerWidth: width, innerHeight: height } = window; 12 | 13 | return { 14 | width, 15 | height 16 | }; 17 | } 18 | 19 | /** 20 | * Create a function that will delay the execution of the passed 21 | * function for at least `wait` milliseconds. 22 | * 23 | * @param {Function} func The function to delay execution of. 24 | * @param {Number} wait The number of milliseconds to delay execution by. 25 | * @returns {Function} A new function that, when executed, will delay the 26 | * execution of `func` for at least `wait` milliseconds. 27 | */ 28 | function debounce(func: (...args: any[]) => void, wait: number): () => void { 29 | let timeout: ReturnType; 30 | return function executedFunction(...args: any[]) { 31 | const later = () => { 32 | clearTimeout(timeout); 33 | func(...args); 34 | }; 35 | clearTimeout(timeout); 36 | timeout = setTimeout(later, wait); 37 | }; 38 | } 39 | 40 | export { getResponsive, debounce }; 41 | -------------------------------------------------------------------------------- /packages/example/contexts/ResponsiveContext/ResponsiveContext.functions.ts: -------------------------------------------------------------------------------- 1 | import { IFrames } from './ResponsiveContext.type'; 2 | 3 | function getResponsive(): IFrames { 4 | if (typeof window === 'undefined') { 5 | return { 6 | width: 1200, 7 | height: 900 8 | }; 9 | } 10 | 11 | const { innerWidth: width, innerHeight: height } = window; 12 | 13 | return { 14 | width, 15 | height 16 | }; 17 | } 18 | 19 | /** 20 | * Create a function that will delay the execution of the passed 21 | * function for at least `wait` milliseconds. 22 | * 23 | * @param {Function} func The function to delay execution of. 24 | * @param {Number} wait The number of milliseconds to delay execution by. 25 | * @returns {Function} A new function that, when executed, will delay the 26 | * execution of `func` for at least `wait` milliseconds. 27 | */ 28 | function debounce(func: (...args: any[]) => void, wait: number): () => void { 29 | let timeout: ReturnType; 30 | return function executedFunction(...args: any[]) { 31 | const later = () => { 32 | clearTimeout(timeout); 33 | func(...args); 34 | }; 35 | clearTimeout(timeout); 36 | timeout = setTimeout(later, wait); 37 | }; 38 | } 39 | 40 | export { getResponsive, debounce }; 41 | -------------------------------------------------------------------------------- /packages/stylex/contexts/ResponsiveContext/ResponsiveContext.functions.ts: -------------------------------------------------------------------------------- 1 | import { IFrames } from './ResponsiveContext.type'; 2 | 3 | function getResponsive(): IFrames { 4 | if (typeof window === 'undefined') { 5 | return { 6 | width: 1200, 7 | height: 900 8 | }; 9 | } 10 | 11 | const { innerWidth: width, innerHeight: height } = window; 12 | 13 | return { 14 | width, 15 | height 16 | }; 17 | } 18 | 19 | /** 20 | * Create a function that will delay the execution of the passed 21 | * function for at least `wait` milliseconds. 22 | * 23 | * @param {Function} func The function to delay execution of. 24 | * @param {Number} wait The number of milliseconds to delay execution by. 25 | * @returns {Function} A new function that, when executed, will delay the 26 | * execution of `func` for at least `wait` milliseconds. 27 | */ 28 | function debounce(func: (...args: any[]) => void, wait: number): () => void { 29 | let timeout: ReturnType; 30 | return function executedFunction(...args: any[]) { 31 | const later = () => { 32 | clearTimeout(timeout); 33 | func(...args); 34 | }; 35 | clearTimeout(timeout); 36 | timeout = setTimeout(later, wait); 37 | }; 38 | } 39 | 40 | export { getResponsive, debounce }; 41 | -------------------------------------------------------------------------------- /packages/tailwind/contexts/ResponsiveContext/ResponsiveContext.functions.ts: -------------------------------------------------------------------------------- 1 | import { IFrames } from './ResponsiveContext.type'; 2 | 3 | function getResponsive(): IFrames { 4 | if (typeof window === 'undefined') { 5 | return { 6 | width: 1200, 7 | height: 900 8 | }; 9 | } 10 | 11 | const { innerWidth: width, innerHeight: height } = window; 12 | 13 | return { 14 | width, 15 | height 16 | }; 17 | } 18 | 19 | /** 20 | * Create a function that will delay the execution of the passed 21 | * function for at least `wait` milliseconds. 22 | * 23 | * @param {Function} func The function to delay execution of. 24 | * @param {Number} wait The number of milliseconds to delay execution by. 25 | * @returns {Function} A new function that, when executed, will delay the 26 | * execution of `func` for at least `wait` milliseconds. 27 | */ 28 | function debounce(func: (...args: any[]) => void, wait: number): () => void { 29 | let timeout: ReturnType; 30 | return function executedFunction(...args: any[]) { 31 | const later = () => { 32 | clearTimeout(timeout); 33 | func(...args); 34 | }; 35 | clearTimeout(timeout); 36 | timeout = setTimeout(later, wait); 37 | }; 38 | } 39 | 40 | export { getResponsive, debounce }; 41 | -------------------------------------------------------------------------------- /packages/styled-components/contexts/ResponsiveContext/ResponsiveContext.functions.ts: -------------------------------------------------------------------------------- 1 | import { IFrames } from './ResponsiveContext.type'; 2 | 3 | function getResponsive(): IFrames { 4 | if (typeof window === 'undefined') { 5 | return { 6 | width: 1200, 7 | height: 900 8 | }; 9 | } 10 | 11 | const { innerWidth: width, innerHeight: height } = window; 12 | 13 | return { 14 | width, 15 | height 16 | }; 17 | } 18 | 19 | /** 20 | * Create a function that will delay the execution of the passed 21 | * function for at least `wait` milliseconds. 22 | * 23 | * @param {Function} func The function to delay execution of. 24 | * @param {Number} wait The number of milliseconds to delay execution by. 25 | * @returns {Function} A new function that, when executed, will delay the 26 | * execution of `func` for at least `wait` milliseconds. 27 | */ 28 | function debounce(func: (...args: any[]) => void, wait: number): () => void { 29 | let timeout: ReturnType; 30 | return function executedFunction(...args: any[]) { 31 | const later = () => { 32 | clearTimeout(timeout); 33 | func(...args); 34 | }; 35 | clearTimeout(timeout); 36 | timeout = setTimeout(later, wait); 37 | }; 38 | } 39 | 40 | export { getResponsive, debounce }; 41 | -------------------------------------------------------------------------------- /common/public/assets/logo-react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/base/public/assets/logo-react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/mui/public/assets/logo-react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/example/public/assets/logo-react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/stylex/public/assets/logo-react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/tailwind/public/assets/logo-react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | --------------------------------------------------------------------------------