├── .gitattributes ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── config.yml │ └── feature_report.md ├── pull_request_template.md └── workflows │ └── secrets_scanner.yaml ├── .gitignore ├── LICENSE ├── README.md └── templates ├── react ├── next-ethers │ ├── .eslintrc.json │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── components │ │ │ ├── Account.tsx │ │ │ ├── Balance.tsx │ │ │ ├── BlockNumber.tsx │ │ │ ├── Connect.tsx │ │ │ ├── Context.tsx │ │ │ ├── NetworkSwitcher.tsx │ │ │ ├── ReadContract.tsx │ │ │ ├── SendTransaction.tsx │ │ │ ├── SendTransactionPrepared.tsx │ │ │ ├── SignMessage.tsx │ │ │ ├── SignTypedData.tsx │ │ │ ├── Token.tsx │ │ │ ├── WatchContractEvents.tsx │ │ │ ├── WatchPendingTransactions.tsx │ │ │ ├── WriteContract.tsx │ │ │ ├── WriteContractPrepared.tsx │ │ │ └── contracts.ts │ │ ├── hooks │ │ │ └── useAsync.ts │ │ └── utils │ │ │ └── stringify.ts │ └── tsconfig.json ├── next-ethers5 │ ├── .eslintrc.json │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── components │ │ │ ├── Account.tsx │ │ │ ├── Balance.tsx │ │ │ ├── BlockNumber.tsx │ │ │ ├── Connect.tsx │ │ │ ├── Context.tsx │ │ │ ├── NetworkSwitcher.tsx │ │ │ ├── ReadContract.tsx │ │ │ ├── SendTransaction.tsx │ │ │ ├── SendTransactionPrepared.tsx │ │ │ ├── SignMessage.tsx │ │ │ ├── SignTypedData.tsx │ │ │ ├── Token.tsx │ │ │ ├── WatchContractEvents.tsx │ │ │ ├── WatchPendingTransactions.tsx │ │ │ ├── WriteContract.tsx │ │ │ ├── WriteContractPrepared.tsx │ │ │ └── contracts.ts │ │ ├── hooks │ │ │ └── useAsync.ts │ │ └── utils │ │ │ └── stringify.ts │ └── tsconfig.json ├── next-wagmi-rainbowkit │ ├── .env.example │ ├── .eslintrc.json │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── layout.tsx │ │ │ ├── page.tsx │ │ │ └── providers.tsx │ │ ├── components │ │ │ ├── Account.tsx │ │ │ ├── Balance.tsx │ │ │ ├── BlockNumber.tsx │ │ │ ├── ConnectButton.tsx │ │ │ ├── Connected.tsx │ │ │ ├── NetworkSwitcher.tsx │ │ │ ├── ReadContract.tsx │ │ │ ├── ReadContracts.tsx │ │ │ ├── SendTransaction.tsx │ │ │ ├── SendTransactionPrepared.tsx │ │ │ ├── SignMessage.tsx │ │ │ ├── SignTypedData.tsx │ │ │ ├── Token.tsx │ │ │ ├── WatchContractEvents.tsx │ │ │ ├── WatchPendingTransactions.tsx │ │ │ ├── WriteContract.tsx │ │ │ ├── WriteContractPrepared.tsx │ │ │ └── contracts.ts │ │ ├── hooks │ │ │ └── useDebounce.ts │ │ ├── utils │ │ │ └── stringify.ts │ │ └── wagmi.ts │ └── tsconfig.json ├── next-wagmi-web3modal │ ├── .env.example │ ├── .eslintrc.json │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── layout.tsx │ │ │ ├── page.tsx │ │ │ └── providers.tsx │ │ ├── components │ │ │ ├── Account.tsx │ │ │ ├── Balance.tsx │ │ │ ├── BlockNumber.tsx │ │ │ ├── Connected.tsx │ │ │ ├── NetworkSwitcher.tsx │ │ │ ├── ReadContract.tsx │ │ │ ├── ReadContracts.tsx │ │ │ ├── SendTransaction.tsx │ │ │ ├── SendTransactionPrepared.tsx │ │ │ ├── SignMessage.tsx │ │ │ ├── SignTypedData.tsx │ │ │ ├── Token.tsx │ │ │ ├── WatchContractEvents.tsx │ │ │ ├── WatchPendingTransactions.tsx │ │ │ ├── WriteContract.tsx │ │ │ ├── WriteContractPrepared.tsx │ │ │ └── contracts.ts │ │ ├── hooks │ │ │ └── useDebounce.ts │ │ ├── utils │ │ │ └── stringify.ts │ │ └── wagmi.ts │ └── tsconfig.json ├── next-wagmi │ ├── .eslintrc.json │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── layout.tsx │ │ │ ├── page.tsx │ │ │ └── providers.tsx │ │ ├── components │ │ │ ├── Account.tsx │ │ │ ├── Balance.tsx │ │ │ ├── BlockNumber.tsx │ │ │ ├── Connect.tsx │ │ │ ├── Connected.tsx │ │ │ ├── EstimateGas.tsx │ │ │ ├── NetworkSwitcher.tsx │ │ │ ├── ReadContract.tsx │ │ │ ├── ReadContracts.tsx │ │ │ ├── SendTransaction.tsx │ │ │ ├── SignMessage.tsx │ │ │ ├── SignTypedData.tsx │ │ │ ├── WatchContractEvents.tsx │ │ │ ├── WatchPendingTransactions.tsx │ │ │ ├── WriteContract.tsx │ │ │ ├── WriteContractPrepared.tsx │ │ │ └── contracts.ts │ │ ├── hooks │ │ │ └── useDebounce.ts │ │ ├── utils │ │ │ └── stringify.ts │ │ └── wagmi.ts │ └── tsconfig.json ├── next-web3js │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.mjs │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── next.svg │ │ └── vercel.svg │ ├── src │ │ ├── components │ │ │ ├── Account.tsx │ │ │ ├── Balance.tsx │ │ │ ├── BlockNumber.tsx │ │ │ ├── Connect.tsx │ │ │ ├── Context.tsx │ │ │ ├── EstimateGas.tsx │ │ │ ├── NetworkSwitcher.tsx │ │ │ ├── ReadContract.tsx │ │ │ ├── SendTransaction.tsx │ │ │ ├── SendTransactionPrepared.tsx │ │ │ ├── SignMessage.tsx │ │ │ ├── SignTypedData.tsx │ │ │ ├── Token.tsx │ │ │ ├── WatchContractEvents.tsx │ │ │ ├── WatchPendingTransactions.tsx │ │ │ ├── WriteContract.tsx │ │ │ ├── WriteContractPrepared.tsx │ │ │ └── contracts.ts │ │ ├── hooks │ │ │ └── useAsync.ts │ │ ├── pages │ │ │ ├── _app.tsx │ │ │ ├── _document.tsx │ │ │ └── index.tsx │ │ └── styles │ │ │ ├── Home.module.css │ │ │ └── globals.css │ └── tsconfig.json ├── vite-ethers │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── polyfills.ts │ ├── src │ │ ├── App.tsx │ │ ├── components │ │ │ ├── Account.tsx │ │ │ ├── Balance.tsx │ │ │ ├── BlockNumber.tsx │ │ │ ├── Connect.tsx │ │ │ ├── Context.tsx │ │ │ ├── NetworkSwitcher.tsx │ │ │ ├── ReadContract.tsx │ │ │ ├── SendTransaction.tsx │ │ │ ├── SendTransactionPrepared.tsx │ │ │ ├── SignMessage.tsx │ │ │ ├── SignTypedData.tsx │ │ │ ├── Token.tsx │ │ │ ├── WatchContractEvents.tsx │ │ │ ├── WatchPendingTransactions.tsx │ │ │ ├── WriteContract.tsx │ │ │ ├── WriteContractPrepared.tsx │ │ │ └── contracts.ts │ │ ├── hooks │ │ │ └── useAsync.ts │ │ ├── main.tsx │ │ ├── utils │ │ │ └── stringify.ts │ │ └── vite-env.d.ts │ ├── tsconfig.json │ └── vite.config.ts ├── vite-ethers5 │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── polyfills.ts │ ├── src │ │ ├── App.tsx │ │ ├── components │ │ │ ├── Account.tsx │ │ │ ├── Balance.tsx │ │ │ ├── BlockNumber.tsx │ │ │ ├── Connect.tsx │ │ │ ├── Context.tsx │ │ │ ├── NetworkSwitcher.tsx │ │ │ ├── ReadContract.tsx │ │ │ ├── SendTransaction.tsx │ │ │ ├── SendTransactionPrepared.tsx │ │ │ ├── SignMessage.tsx │ │ │ ├── SignTypedData.tsx │ │ │ ├── Token.tsx │ │ │ ├── WatchContractEvents.tsx │ │ │ ├── WatchPendingTransactions.tsx │ │ │ ├── WriteContract.tsx │ │ │ ├── WriteContractPrepared.tsx │ │ │ └── contracts.ts │ │ ├── hooks │ │ │ └── useAsync.ts │ │ ├── main.tsx │ │ ├── utils │ │ │ └── stringify.ts │ │ └── vite-env.d.ts │ ├── tsconfig.json │ └── vite.config.ts ├── vite-wagmi-web3modal │ ├── .env.example │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── polyfills.ts │ ├── src │ │ ├── App.tsx │ │ ├── components │ │ │ ├── Account.tsx │ │ │ ├── Balance.tsx │ │ │ ├── BlockNumber.tsx │ │ │ ├── Connected.tsx │ │ │ ├── NetworkSwitcher.tsx │ │ │ ├── ReadContract.tsx │ │ │ ├── ReadContracts.tsx │ │ │ ├── SendTransaction.tsx │ │ │ ├── SendTransactionPrepared.tsx │ │ │ ├── SignMessage.tsx │ │ │ ├── SignTypedData.tsx │ │ │ ├── Token.tsx │ │ │ ├── WatchContractEvents.tsx │ │ │ ├── WatchPendingTransactions.tsx │ │ │ ├── WriteContract.tsx │ │ │ ├── WriteContractPrepared.tsx │ │ │ └── contracts.ts │ │ ├── hooks │ │ │ └── useDebounce.ts │ │ ├── main.tsx │ │ ├── utils │ │ │ └── stringify.ts │ │ ├── vite-env.d.ts │ │ └── wagmi.ts │ ├── tsconfig.json │ └── vite.config.ts ├── vite-wagmi │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── polyfills.ts │ ├── src │ │ ├── App.tsx │ │ ├── components │ │ │ ├── Account.tsx │ │ │ ├── Balance.tsx │ │ │ ├── BlockNumber.tsx │ │ │ ├── Connect.tsx │ │ │ ├── Connected.tsx │ │ │ ├── EstimateGas.tsx │ │ │ ├── NetworkSwitcher.tsx │ │ │ ├── ReadContract.tsx │ │ │ ├── ReadContracts.tsx │ │ │ ├── SendTransaction.tsx │ │ │ ├── SignMessage.tsx │ │ │ ├── SignTypedData.tsx │ │ │ ├── WatchContractEvents.tsx │ │ │ ├── WatchPendingTransactions.tsx │ │ │ ├── WriteContract.tsx │ │ │ ├── WriteContractPrepared.tsx │ │ │ └── contracts.ts │ │ ├── hooks │ │ │ └── useDebounce.ts │ │ ├── main.tsx │ │ ├── utils │ │ │ └── stringify.ts │ │ ├── vite-env.d.ts │ │ └── wagmi.ts │ ├── tsconfig.json │ └── vite.config.ts └── vite-web3js │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .prettierrc.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.tsx │ ├── components │ │ ├── Account.tsx │ │ ├── Balance.tsx │ │ ├── BlockNumber.tsx │ │ ├── Connect.tsx │ │ ├── Home.tsx │ │ ├── NetworkSwitcher.tsx │ │ ├── ReadContract.tsx │ │ ├── SendTransaction.tsx │ │ ├── SendTransactionPrepared.tsx │ │ ├── SignMessage.tsx │ │ ├── SignTypedData.tsx │ │ ├── Token.tsx │ │ ├── WatchContractEvents.tsx │ │ ├── WatchPendingTransactions.tsx │ │ ├── WriteContract.tsx │ │ └── WriteContractPrepared.tsx │ ├── hooks │ │ └── use-async.ts │ ├── main.tsx │ ├── services │ │ ├── constants.ts │ │ ├── contracts.ts │ │ ├── ethereum │ │ │ ├── EthereumContext.tsx │ │ │ ├── context.ts │ │ │ └── types.ts │ │ └── utils.ts │ ├── styles │ │ ├── globals.css │ │ └── home.module.css │ ├── types │ │ ├── index.d.ts │ │ └── web3.ts │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── svelte ├── sveltekit-ethers │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── package.json │ ├── src │ │ ├── app.d.ts │ │ ├── app.html │ │ ├── components │ │ │ ├── Account.svelte │ │ │ ├── Balance.svelte │ │ │ ├── BlockNumber.svelte │ │ │ ├── Connect.svelte │ │ │ ├── Connected.svelte │ │ │ ├── FindBalance.svelte │ │ │ ├── NetworkSwitcher.svelte │ │ │ ├── ReadTokenBalance.svelte │ │ │ ├── ReadTokenSupply.svelte │ │ │ ├── SendTransaction.svelte │ │ │ ├── SendTransactionPrepared.svelte │ │ │ ├── SignMessage.svelte │ │ │ ├── SignTypedData.svelte │ │ │ ├── Token.svelte │ │ │ ├── WatchContractEvents.svelte │ │ │ ├── WatchPendingTransactions.svelte │ │ │ ├── WriteContract.svelte │ │ │ └── WriteContractPrepared.svelte │ │ ├── composables │ │ │ └── useAsync.ts │ │ ├── routes │ │ │ ├── +layout.ts │ │ │ └── +page.svelte │ │ ├── stores │ │ │ └── ethers.ts │ │ └── utils │ │ │ ├── contracts.ts │ │ │ └── formatters.ts │ ├── static │ │ └── favicon.png │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── sveltekit-ethers5 │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── package.json │ ├── src │ │ ├── app.d.ts │ │ ├── app.html │ │ ├── components │ │ │ ├── Account.svelte │ │ │ ├── Balance.svelte │ │ │ ├── BlockNumber.svelte │ │ │ ├── Connect.svelte │ │ │ ├── Connected.svelte │ │ │ ├── FindBalance.svelte │ │ │ ├── NetworkSwitcher.svelte │ │ │ ├── ReadTokenBalance.svelte │ │ │ ├── ReadTokenSupply.svelte │ │ │ ├── SendTransaction.svelte │ │ │ ├── SendTransactionPrepared.svelte │ │ │ ├── SignMessage.svelte │ │ │ ├── SignTypedData.svelte │ │ │ ├── Token.svelte │ │ │ ├── WatchContractEvents.svelte │ │ │ ├── WatchPendingTransactions.svelte │ │ │ ├── WriteContract.svelte │ │ │ └── WriteContractPrepared.svelte │ │ ├── composables │ │ │ └── useAsync.ts │ │ ├── routes │ │ │ ├── +layout.ts │ │ │ └── +page.svelte │ │ ├── stores │ │ │ └── ethers.ts │ │ └── utils │ │ │ ├── contracts.ts │ │ │ └── formatters.ts │ ├── static │ │ └── favicon.png │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── sveltekit-wagmi-web3modal │ ├── .env.example │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── package.json │ ├── src │ │ ├── app.d.ts │ │ ├── app.html │ │ ├── components │ │ │ ├── Account.svelte │ │ │ ├── Balance.svelte │ │ │ ├── BlockNumber.svelte │ │ │ ├── Connected.svelte │ │ │ ├── FindBalance.svelte │ │ │ ├── NetworkSwitcher.svelte │ │ │ ├── ReadContracts.svelte │ │ │ ├── ReadTokenBalance.svelte │ │ │ ├── ReadTokenSupply.svelte │ │ │ ├── SendTransaction.svelte │ │ │ ├── SendTransactionPrepared.svelte │ │ │ ├── SignMessage.svelte │ │ │ ├── SignTypedData.svelte │ │ │ ├── Token.svelte │ │ │ ├── WatchContractEvents.svelte │ │ │ ├── WatchPendingTransactions.svelte │ │ │ ├── WriteContract.svelte │ │ │ └── WriteContractPrepared.svelte │ │ ├── composables │ │ │ └── useAsync.ts │ │ ├── routes │ │ │ ├── +layout.ts │ │ │ └── +page.svelte │ │ ├── stores │ │ │ └── wagmi.ts │ │ └── utils │ │ │ ├── contracts.ts │ │ │ └── formatters.ts │ ├── static │ │ └── favicon.png │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── sveltekit-wagmi │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── package.json │ ├── src │ │ ├── app.d.ts │ │ ├── app.html │ │ ├── components │ │ │ ├── Account.svelte │ │ │ ├── Balance.svelte │ │ │ ├── BlockNumber.svelte │ │ │ ├── Connect.svelte │ │ │ ├── Connected.svelte │ │ │ ├── FindBalance.svelte │ │ │ ├── NetworkSwitcher.svelte │ │ │ ├── ReadContracts.svelte │ │ │ ├── ReadTokenBalance.svelte │ │ │ ├── ReadTokenSupply.svelte │ │ │ ├── SendTransaction.svelte │ │ │ ├── SendTransactionPrepared.svelte │ │ │ ├── SignMessage.svelte │ │ │ ├── SignTypedData.svelte │ │ │ ├── Token.svelte │ │ │ ├── WatchContractEvents.svelte │ │ │ ├── WatchPendingTransactions.svelte │ │ │ ├── WriteContract.svelte │ │ │ └── WriteContractPrepared.svelte │ │ ├── composables │ │ │ └── useAsync.ts │ │ ├── routes │ │ │ ├── +layout.ts │ │ │ └── +page.svelte │ │ ├── stores │ │ │ └── wagmi.ts │ │ └── utils │ │ │ ├── contracts.ts │ │ │ └── formatters.ts │ ├── static │ │ └── favicon.png │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── vite-ethers │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.svelte │ │ ├── components │ │ │ ├── Account.svelte │ │ │ ├── Balance.svelte │ │ │ ├── BlockNumber.svelte │ │ │ ├── Connect.svelte │ │ │ ├── Connected.svelte │ │ │ ├── FindBalance.svelte │ │ │ ├── NetworkSwitcher.svelte │ │ │ ├── ReadTokenBalance.svelte │ │ │ ├── ReadTokenSupply.svelte │ │ │ ├── SendTransaction.svelte │ │ │ ├── SendTransactionPrepared.svelte │ │ │ ├── SignMessage.svelte │ │ │ ├── SignTypedData.svelte │ │ │ ├── Token.svelte │ │ │ ├── WatchContractEvents.svelte │ │ │ ├── WatchPendingTransactions.svelte │ │ │ ├── WriteContract.svelte │ │ │ └── WriteContractPrepared.svelte │ │ ├── composables │ │ │ └── useAsync.ts │ │ ├── ethers.ts │ │ ├── main.ts │ │ ├── utils │ │ │ ├── contracts.ts │ │ │ └── formatters.ts │ │ └── vite-env.d.ts │ ├── svelte.config.js │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── vite-ethers5 │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.svelte │ │ ├── components │ │ │ ├── Account.svelte │ │ │ ├── Balance.svelte │ │ │ ├── BlockNumber.svelte │ │ │ ├── Connect.svelte │ │ │ ├── Connected.svelte │ │ │ ├── FindBalance.svelte │ │ │ ├── NetworkSwitcher.svelte │ │ │ ├── ReadTokenBalance.svelte │ │ │ ├── ReadTokenSupply.svelte │ │ │ ├── SendTransaction.svelte │ │ │ ├── SendTransactionPrepared.svelte │ │ │ ├── SignMessage.svelte │ │ │ ├── SignTypedData.svelte │ │ │ ├── Token.svelte │ │ │ ├── WatchContractEvents.svelte │ │ │ ├── WatchPendingTransactions.svelte │ │ │ ├── WriteContract.svelte │ │ │ └── WriteContractPrepared.svelte │ │ ├── composables │ │ │ └── useAsync.ts │ │ ├── ethers.ts │ │ ├── main.ts │ │ ├── utils │ │ │ ├── contracts.ts │ │ │ └── formatters.ts │ │ └── vite-env.d.ts │ ├── svelte.config.js │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── vite-wagmi-web3modal │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.svelte │ │ ├── components │ │ │ ├── Account.svelte │ │ │ ├── Balance.svelte │ │ │ ├── BlockNumber.svelte │ │ │ ├── Connected.svelte │ │ │ ├── FindBalance.svelte │ │ │ ├── NetworkSwitcher.svelte │ │ │ ├── ReadContracts.svelte │ │ │ ├── ReadTokenBalance.svelte │ │ │ ├── ReadTokenSupply.svelte │ │ │ ├── SendTransaction.svelte │ │ │ ├── SendTransactionPrepared.svelte │ │ │ ├── SignMessage.svelte │ │ │ ├── SignTypedData.svelte │ │ │ ├── Token.svelte │ │ │ ├── WatchContractEvents.svelte │ │ │ ├── WatchPendingTransactions.svelte │ │ │ ├── WriteContract.svelte │ │ │ └── WriteContractPrepared.svelte │ │ ├── composables │ │ │ └── useAsync.ts │ │ ├── main.ts │ │ ├── utils │ │ │ ├── contracts.ts │ │ │ └── formatters.ts │ │ ├── vite-env.d.ts │ │ └── wagmi.ts │ ├── svelte.config.js │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── vite-wagmi │ ├── .gitignore │ ├── .vscode │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.svelte │ ├── components │ │ ├── Account.svelte │ │ ├── Balance.svelte │ │ ├── BlockNumber.svelte │ │ ├── Connect.svelte │ │ ├── Connected.svelte │ │ ├── FindBalance.svelte │ │ ├── NetworkSwitcher.svelte │ │ ├── ReadContracts.svelte │ │ ├── ReadTokenBalance.svelte │ │ ├── ReadTokenSupply.svelte │ │ ├── SendTransaction.svelte │ │ ├── SendTransactionPrepared.svelte │ │ ├── SignMessage.svelte │ │ ├── SignTypedData.svelte │ │ ├── Token.svelte │ │ ├── WatchContractEvents.svelte │ │ ├── WatchPendingTransactions.svelte │ │ ├── WriteContract.svelte │ │ └── WriteContractPrepared.svelte │ ├── composables │ │ └── useAsync.ts │ ├── main.ts │ ├── utils │ │ ├── contracts.ts │ │ └── formatters.ts │ ├── vite-env.d.ts │ └── wagmi.ts │ ├── svelte.config.js │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── vue ├── nuxt3-ethers ├── .gitignore ├── README.md ├── app.vue ├── components │ ├── Account.vue │ ├── Balance.vue │ ├── BlockNumber.vue │ ├── Connect.vue │ ├── Connected.vue │ ├── FindBalance.vue │ ├── NetworkSwitcher.vue │ ├── ReadTokenBalance.vue │ ├── ReadTokenSupply.vue │ ├── SendTransaction.vue │ ├── SendTransactionPrepared.vue │ ├── SignMessage.vue │ ├── SignTypedData.vue │ ├── Token.vue │ ├── WatchContractEvents.vue │ ├── WatchPendingTransactions.vue │ ├── WriteContract.vue │ └── WriteContractPrepared.vue ├── composables │ └── useAsync.ts ├── nuxt.config.ts ├── package.json ├── pages │ └── index.vue ├── public │ └── favicon.ico ├── store │ └── ethers.ts ├── tsconfig.json └── utils │ ├── contracts.ts │ └── formatters.ts ├── nuxt3-ethers5 ├── .gitignore ├── README.md ├── app.vue ├── components │ ├── Account.vue │ ├── Balance.vue │ ├── BlockNumber.vue │ ├── Connect.vue │ ├── Connected.vue │ ├── FindBalance.vue │ ├── NetworkSwitcher.vue │ ├── ReadTokenBalance.vue │ ├── ReadTokenSupply.vue │ ├── SendTransaction.vue │ ├── SendTransactionPrepared.vue │ ├── SignMessage.vue │ ├── SignTypedData.vue │ ├── Token.vue │ ├── WatchContractEvents.vue │ ├── WatchPendingTransactions.vue │ ├── WriteContract.vue │ └── WriteContractPrepared.vue ├── composables │ └── useAsync.ts ├── nuxt.config.ts ├── package.json ├── pages │ └── index.vue ├── public │ └── favicon.ico ├── store │ └── ethers.ts ├── tsconfig.json └── utils │ ├── contracts.ts │ └── formatters.ts ├── nuxt3-wagmi-web3modal ├── .env.example ├── .gitignore ├── README.md ├── app.vue ├── components │ ├── Account.vue │ ├── Balance.vue │ ├── BlockNumber.vue │ ├── Connected.vue │ ├── FindBalance.vue │ ├── NetworkSwitcher.vue │ ├── ReadContracts.vue │ ├── ReadTokenBalance.vue │ ├── ReadTokenSupply.vue │ ├── SendTransaction.vue │ ├── SendTransactionPrepared.vue │ ├── SignMessage.vue │ ├── SignTypedData.vue │ ├── Token.vue │ ├── WatchContractEvents.vue │ ├── WatchPendingTransactions.vue │ ├── WriteContract.vue │ └── WriteContractPrepared.vue ├── composables │ └── useAsync.ts ├── nuxt.config.ts ├── package.json ├── pages │ └── index.vue ├── public │ └── favicon.ico ├── store │ └── wagmi.ts ├── tsconfig.json └── utils │ ├── contracts.ts │ └── formatters.ts ├── nuxt3-wagmi ├── .gitignore ├── README.md ├── app.vue ├── components │ ├── Account.vue │ ├── Balance.vue │ ├── BlockNumber.vue │ ├── Connect.vue │ ├── Connected.vue │ ├── FindBalance.vue │ ├── NetworkSwitcher.vue │ ├── ReadContracts.vue │ ├── ReadTokenBalance.vue │ ├── ReadTokenSupply.vue │ ├── SendTransaction.vue │ ├── SendTransactionPrepared.vue │ ├── SignMessage.vue │ ├── SignTypedData.vue │ ├── Token.vue │ ├── WatchContractEvents.vue │ ├── WatchPendingTransactions.vue │ ├── WriteContract.vue │ └── WriteContractPrepared.vue ├── composables │ └── useAsync.ts ├── nuxt.config.ts ├── package.json ├── pages │ └── index.vue ├── public │ └── favicon.ico ├── store │ └── wagmi.ts ├── tsconfig.json └── utils │ ├── contracts.ts │ └── formatters.ts ├── vite-ethers ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.vue │ ├── assets │ │ └── vue.svg │ ├── components │ │ ├── Account.vue │ │ ├── Balance.vue │ │ ├── BlockNumber.vue │ │ ├── Connect.vue │ │ ├── Connected.vue │ │ ├── FindBalance.vue │ │ ├── NetworkSwitcher.vue │ │ ├── ReadTokenBalance.vue │ │ ├── ReadTokenSupply.vue │ │ ├── SendTransaction.vue │ │ ├── SendTransactionPrepared.vue │ │ ├── SignMessage.vue │ │ ├── SignTypedData.vue │ │ ├── Token.vue │ │ ├── WatchContractEvents.vue │ │ ├── WatchPendingTransactions.vue │ │ ├── WriteContract.vue │ │ └── WriteContractPrepared.vue │ ├── composables │ │ └── useAsync.ts │ ├── ethers.ts │ ├── main.ts │ ├── style.css │ ├── utils │ │ ├── contracts.ts │ │ └── formatters.ts │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── vite-ethers5 ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.vue │ ├── assets │ │ └── vue.svg │ ├── components │ │ ├── Account.vue │ │ ├── Balance.vue │ │ ├── BlockNumber.vue │ │ ├── Connect.vue │ │ ├── Connected.vue │ │ ├── FindBalance.vue │ │ ├── NetworkSwitcher.vue │ │ ├── ReadTokenBalance.vue │ │ ├── ReadTokenSupply.vue │ │ ├── SendTransaction.vue │ │ ├── SendTransactionPrepared.vue │ │ ├── SignMessage.vue │ │ ├── SignTypedData.vue │ │ ├── Token.vue │ │ ├── WatchContractEvents.vue │ │ ├── WatchPendingTransactions.vue │ │ ├── WriteContract.vue │ │ └── WriteContractPrepared.vue │ ├── composables │ │ └── useAsync.ts │ ├── ethers.ts │ ├── main.ts │ ├── style.css │ ├── utils │ │ ├── contracts.ts │ │ └── formatters.ts │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── vite-wagmi-web3modal ├── .env.example ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.vue │ ├── assets │ │ └── vue.svg │ ├── components │ │ ├── Account.vue │ │ ├── Balance.vue │ │ ├── BlockNumber.vue │ │ ├── Connected.vue │ │ ├── FindBalance.vue │ │ ├── NetworkSwitcher.vue │ │ ├── ReadContracts.vue │ │ ├── ReadTokenBalance.vue │ │ ├── ReadTokenSupply.vue │ │ ├── SendTransaction.vue │ │ ├── SendTransactionPrepared.vue │ │ ├── SignMessage.vue │ │ ├── SignTypedData.vue │ │ ├── Token.vue │ │ ├── WatchContractEvents.vue │ │ ├── WatchPendingTransactions.vue │ │ ├── WriteContract.vue │ │ └── WriteContractPrepared.vue │ ├── composables │ │ └── useAsync.ts │ ├── main.ts │ ├── style.css │ ├── utils │ │ ├── contracts.ts │ │ └── formatters.ts │ ├── vite-env.d.ts │ └── wagmi.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts └── vite-wagmi ├── .gitignore ├── .vscode └── extensions.json ├── README.md ├── index.html ├── package.json ├── public └── vite.svg ├── src ├── App.vue ├── assets │ └── vue.svg ├── components │ ├── Account.vue │ ├── Balance.vue │ ├── BlockNumber.vue │ ├── Connect.vue │ ├── Connected.vue │ ├── FindBalance.vue │ ├── NetworkSwitcher.vue │ ├── ReadContracts.vue │ ├── ReadTokenBalance.vue │ ├── ReadTokenSupply.vue │ ├── SendTransaction.vue │ ├── SendTransactionPrepared.vue │ ├── SignMessage.vue │ ├── SignTypedData.vue │ ├── Token.vue │ ├── WatchContractEvents.vue │ ├── WatchPendingTransactions.vue │ ├── WriteContract.vue │ └── WriteContractPrepared.vue ├── composables │ └── useAsync.ts ├── main.ts ├── style.css ├── utils │ ├── contracts.ts │ └── formatters.ts ├── vite-env.d.ts └── wagmi.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # This CODEOWNERS file sets the individuals responsible for code in the zksync-frontend-templates repository. 2 | 3 | # These users are the default owners for everything in the repo. 4 | # They will be requested for review when someone opens a pull request. 5 | * @matter-labs/devxp 6 | 7 | # You can also specify code owners for specific directories or files. 8 | # For example: 9 | # /src/ @developer1 @developer2 10 | # /docs/ @documenter -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | contact_links: 3 | - name: zksync-developers Discussion 4 | url: https://github.com/zkSync-Community-Hub/zkync-developers/discussions 5 | about: Please provide feedback, and ask questions here. 6 | - name: zkSync CLI documentation page 7 | url: https://era.zksync.io/docs/tools/zksync-cli 8 | about: Please refer to the documentation for immediate answers. -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Use this template for requesting features 4 | title: "" 5 | labels: feat 6 | assignees: '' 7 | 8 | --- 9 | 10 | ### 🌟 Feature Request 11 | 12 | #### 📝 Description 13 | 14 | Provide a clear and concise description of the feature you'd like to see. 15 | 16 | #### 🤔 Rationale 17 | 18 | Explain why this feature is important and how it benefits the project. 19 | 20 | #### 🖼️ Mockups/Examples 21 | 22 | If applicable, provide mockups or examples of how the feature would work. 23 | 24 | #### 📋 Additional Context 25 | 26 | Add any other context or information about the feature request here. -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | # What :computer: 2 | * First thing updated with this PR 3 | * Second thing updated with this PR 4 | * Third thing updated with this PR 5 | 6 | # Why :hand: 7 | * Reason why first thing was added to PR 8 | * Reason why second thing was added to PR 9 | * Reason why third thing was added to PR 10 | 11 | # Evidence :camera: 12 | Include screenshots, screen recordings, or `console` output here demonstrating that your changes work as intended 13 | 14 | 15 | 16 | # Notes :memo: 17 | * Any notes/thoughts that the reviewers should know prior to reviewing the code? -------------------------------------------------------------------------------- /.github/workflows/secrets_scanner.yaml: -------------------------------------------------------------------------------- 1 | name: Leaked Secrets Scan 2 | on: [pull_request] 3 | jobs: 4 | TruffleHog: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Checkout code 8 | uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3 9 | with: 10 | fetch-depth: 0 11 | - name: TruffleHog OSS 12 | uses: trufflesecurity/trufflehog@0c66d30c1f4075cee1aada2e1ab46dabb1b0071a 13 | with: 14 | path: ./ 15 | base: ${{ github.event.repository.default_branch }} 16 | head: HEAD 17 | extra_args: --debug --only-verified 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | package-lock.json -------------------------------------------------------------------------------- /templates/react/next-ethers/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /templates/react/next-ethers/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | 11 | /coverage 12 | 13 | # next.js 14 | 15 | /.next/ 16 | /out/ 17 | 18 | # production 19 | 20 | /build 21 | 22 | # misc 23 | 24 | .DS_Store 25 | \*.pem 26 | 27 | # debug 28 | 29 | npm-debug.log* 30 | yarn-debug.log* 31 | yarn-error.log* 32 | .pnpm-debug.log* 33 | 34 | # local env files 35 | 36 | .env 37 | .env\*.local 38 | 39 | # vercel 40 | 41 | .vercel 42 | 43 | # typescript 44 | 45 | \*.tsbuildinfo 46 | next-env.d.ts 47 | -------------------------------------------------------------------------------- /templates/react/next-ethers/.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies = false 2 | legacy-peer-deps = true -------------------------------------------------------------------------------- /templates/react/next-ethers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-next-wagmi", 3 | "version": "0.0.1", 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.9.2", 13 | "next": "^13.4.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "zksync-ethers": "^6.0.0" 17 | }, 18 | "devDependencies": { 19 | "@types/node": "^17.0.31", 20 | "@types/react": "^18.0.9", 21 | "@types/react-dom": "^18.0.3", 22 | "eslint": "^8.15.0", 23 | "eslint-config-next": "^12.1.6", 24 | "typescript": "^5.0.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /templates/react/next-ethers/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import { EthereumProvider } from '../components/Context' 2 | 3 | export const metadata = { 4 | title: 'zkSync + ethers + Next.js', 5 | } 6 | 7 | export default function RootLayout({ 8 | children, 9 | }: { 10 | children: React.ReactNode 11 | }) { 12 | return ( 13 | 14 | 15 | 16 | {children} 17 | 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /templates/react/next-ethers/src/components/Account.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useEthereum } from './Context'; 4 | 5 | export function Account() { 6 | const { account } = useEthereum(); 7 | 8 | return ( 9 |
10 | {account.address} 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /templates/react/next-ethers/src/components/Connect.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useEthereum } from './Context'; 4 | 5 | export function Connect() { 6 | const { account, connect, disconnect } = useEthereum(); 7 | 8 | return ( 9 |
10 | {account.isConnected ? ( 11 | 14 | ) : ( 15 | 18 | )} 19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /templates/react/next-ethers/src/components/contracts.ts: -------------------------------------------------------------------------------- 1 | import IERC20 from "zksync-ethers/abi/IERC20.json"; 2 | 3 | export const erc20ABI = IERC20.abi; 4 | 5 | export const daiContractConfig = { 6 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20ABI, 8 | } as const; 9 | -------------------------------------------------------------------------------- /templates/react/next-ethers/src/utils/stringify.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | return typeof replacer === 'function' ? replacer(key, value_) : value_ 6 | }, 7 | space, 8 | ) 9 | -------------------------------------------------------------------------------- /templates/react/next-ethers/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 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 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ] 22 | }, 23 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 24 | "exclude": ["node_modules"] 25 | } 26 | -------------------------------------------------------------------------------- /templates/react/next-ethers5/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /templates/react/next-ethers5/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | 11 | /coverage 12 | 13 | # next.js 14 | 15 | /.next/ 16 | /out/ 17 | 18 | # production 19 | 20 | /build 21 | 22 | # misc 23 | 24 | .DS_Store 25 | \*.pem 26 | 27 | # debug 28 | 29 | npm-debug.log* 30 | yarn-debug.log* 31 | yarn-error.log* 32 | .pnpm-debug.log* 33 | 34 | # local env files 35 | 36 | .env 37 | .env\*.local 38 | 39 | # vercel 40 | 41 | .vercel 42 | 43 | # typescript 44 | 45 | \*.tsbuildinfo 46 | next-env.d.ts 47 | -------------------------------------------------------------------------------- /templates/react/next-ethers5/.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies = false 2 | legacy-peer-deps = true -------------------------------------------------------------------------------- /templates/react/next-ethers5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-next-wagmi", 3 | "version": "0.0.1", 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": "^5.7.2", 13 | "next": "^13.4.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "zksync-ethers": "^5.0.0" 17 | }, 18 | "devDependencies": { 19 | "@types/node": "^17.0.31", 20 | "@types/react": "^18.0.9", 21 | "@types/react-dom": "^18.0.3", 22 | "eslint": "^8.15.0", 23 | "eslint-config-next": "^12.1.6", 24 | "typescript": "^5.0.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /templates/react/next-ethers5/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import { EthereumProvider } from '../components/Context' 2 | 3 | export const metadata = { 4 | title: 'zkSync + ethers v5 + Next.js', 5 | } 6 | 7 | export default function RootLayout({ 8 | children, 9 | }: { 10 | children: React.ReactNode 11 | }) { 12 | return ( 13 | 14 | 15 | 16 | {children} 17 | 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /templates/react/next-ethers5/src/components/Account.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useEthereum } from './Context'; 4 | 5 | export function Account() { 6 | const { account } = useEthereum(); 7 | 8 | return ( 9 |
10 | {account.address} 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /templates/react/next-ethers5/src/components/Connect.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useEthereum } from './Context'; 4 | 5 | export function Connect() { 6 | const { account, connect, disconnect } = useEthereum(); 7 | 8 | return ( 9 |
10 | {account.isConnected ? ( 11 | 14 | ) : ( 15 | 18 | )} 19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /templates/react/next-ethers5/src/components/contracts.ts: -------------------------------------------------------------------------------- 1 | import IERC20 from "zksync-ethers/abi/IERC20.json"; 2 | 3 | export const erc20ABI = IERC20; 4 | 5 | export const daiContractConfig = { 6 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20ABI, 8 | } as const; 9 | -------------------------------------------------------------------------------- /templates/react/next-ethers5/src/utils/stringify.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | return typeof replacer === 'function' ? replacer(key, value_) : value_ 6 | }, 7 | space, 8 | ) 9 | -------------------------------------------------------------------------------- /templates/react/next-ethers5/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 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 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ] 22 | }, 23 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 24 | "exclude": ["node_modules"] 25 | } 26 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/.env.example: -------------------------------------------------------------------------------- 1 | WALLET_CONNECT_PROJECT_ID= 2 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | 11 | /coverage 12 | 13 | # next.js 14 | 15 | /.next/ 16 | /out/ 17 | 18 | # production 19 | 20 | /build 21 | 22 | # misc 23 | 24 | .DS_Store 25 | \*.pem 26 | 27 | # debug 28 | 29 | npm-debug.log* 30 | yarn-debug.log* 31 | yarn-error.log* 32 | .pnpm-debug.log* 33 | 34 | # local env files 35 | 36 | .env 37 | .env\*.local 38 | 39 | # vercel 40 | 41 | .vercel 42 | 43 | # typescript 44 | 45 | \*.tsbuildinfo 46 | next-env.d.ts 47 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies = false 2 | legacy-peer-deps = true -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | module.exports = { 3 | reactStrictMode: true, 4 | webpack: (config) => { 5 | config.resolve.fallback = { fs: false, net: false, tls: false } 6 | return config 7 | }, 8 | } 9 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-next-rainbowkit", 3 | "version": "0.0.1", 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 | "@rainbow-me/rainbowkit": "^1.2.0", 13 | "next": "^13.4.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "viem": "^1.20.3", 17 | "wagmi": "^1.4.12" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "^17.0.31", 21 | "@types/react": "^18.0.9", 22 | "@types/react-dom": "^18.0.3", 23 | "eslint": "^8.15.0", 24 | "eslint-config-next": "^12.1.6", 25 | "typescript": "^5.0.4" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import '@rainbow-me/rainbowkit/styles.css' 2 | import { Providers } from './providers' 3 | 4 | export const metadata = { 5 | title: 'zkSync + wagmi + RainbowKit + Next.js', 6 | } 7 | 8 | export default function RootLayout({ 9 | children, 10 | }: { 11 | children: React.ReactNode 12 | }) { 13 | return ( 14 | 15 | 16 | {children} 17 | 18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/src/app/providers.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { RainbowKitProvider } from '@rainbow-me/rainbowkit' 4 | import * as React from 'react' 5 | import { WagmiConfig } from 'wagmi' 6 | 7 | import { chains, config } from '../wagmi' 8 | 9 | export function Providers({ children }: { children: React.ReactNode }) { 10 | const [mounted, setMounted] = React.useState(false) 11 | React.useEffect(() => setMounted(true), []) 12 | return ( 13 | 14 | 15 | {mounted && children} 16 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/src/components/Account.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useAccount } from 'wagmi' 4 | 5 | export function Account() { 6 | const { address } = useAccount() 7 | 8 | return ( 9 |
10 | {address} 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/src/components/BlockNumber.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useBlockNumber } from 'wagmi' 4 | 5 | export function BlockNumber() { 6 | const { data } = useBlockNumber({ watch: true }) 7 | return
{data?.toString()}
8 | } 9 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/src/components/ConnectButton.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import { ConnectButton } from '@rainbow-me/rainbowkit'; 3 | 4 | export { ConnectButton } 5 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/src/components/Connected.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useAccount } from 'wagmi' 4 | 5 | export function Connected({ children }: { children: React.ReactNode }) { 6 | const { isConnected } = useAccount() 7 | 8 | if (!isConnected) return null 9 | return <>{children} 10 | } 11 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/src/components/WatchPendingTransactions.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useState } from 'react' 4 | import type { Hex } from 'viem' 5 | import { useWatchPendingTransactions } from 'wagmi' 6 | 7 | export function WatchPendingTransactions() { 8 | const [hashes, setHashes] = useState([]) 9 | useWatchPendingTransactions({ 10 | listener: (hashes) => setHashes((x) => [...x, ...hashes]), 11 | }) 12 | 13 | return ( 14 |
15 |
16 | {hashes.length} hashes logged 17 | {hashes.reverse().join('\n')} 18 |
19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/src/components/contracts.ts: -------------------------------------------------------------------------------- 1 | import { erc20ABI } from "wagmi"; 2 | 3 | export const daiContractConfig = { 4 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 5 | abi: erc20ABI, 6 | } as const; 7 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/src/hooks/useDebounce.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | 3 | export function useDebounce(value: T, delay?: number): T { 4 | const [debouncedValue, setDebouncedValue] = useState(value) 5 | 6 | useEffect(() => { 7 | const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500) 8 | return () => clearTimeout(timer) 9 | }, [value, delay]) 10 | 11 | return debouncedValue 12 | } 13 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/src/utils/stringify.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === 'bigint' ? value_.toString() : value_ 6 | return typeof replacer === 'function' ? replacer(key, value) : value 7 | }, 8 | space, 9 | ) 10 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-rainbowkit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 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 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ] 22 | }, 23 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 24 | "exclude": ["node_modules"] 25 | } 26 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/.env.example: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID= 2 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | 11 | /coverage 12 | 13 | # next.js 14 | 15 | /.next/ 16 | /out/ 17 | 18 | # production 19 | 20 | /build 21 | 22 | # misc 23 | 24 | .DS_Store 25 | \*.pem 26 | 27 | # debug 28 | 29 | npm-debug.log* 30 | yarn-debug.log* 31 | yarn-error.log* 32 | .pnpm-debug.log* 33 | 34 | # local env files 35 | 36 | .env 37 | .env\*.local 38 | 39 | # vercel 40 | 41 | .vercel 42 | 43 | # typescript 44 | 45 | \*.tsbuildinfo 46 | next-env.d.ts 47 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies = false 2 | legacy-peer-deps = true -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | module.exports = { 3 | reactStrictMode: true, 4 | webpack: (config) => { 5 | config.resolve.fallback = { fs: false, net: false, tls: false } 6 | return config 7 | }, 8 | } 9 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next", 3 | "version": "0.0.1", 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 | "@web3modal/wagmi": "^3.5.1", 13 | "next": "^13.4.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "viem": "^1.20.3", 17 | "wagmi": "^1.4.12" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "^17.0.31", 21 | "@types/react": "^18.0.9", 22 | "@types/react-dom": "^18.0.3", 23 | "eslint": "^8.15.0", 24 | "eslint-config-next": "^12.1.6", 25 | "typescript": "^5.0.4" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Providers } from './providers' 2 | 3 | export const metadata = { 4 | title: 'zkSync + wagmi + Web3Modal + Next.js', 5 | } 6 | 7 | export default function RootLayout({ 8 | children, 9 | }: { 10 | children: React.ReactNode 11 | }) { 12 | return ( 13 | 14 | 15 | {children} 16 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/src/app/providers.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import * as React from 'react' 4 | import { WagmiConfig } from 'wagmi' 5 | 6 | import { config } from '../wagmi' 7 | 8 | export function Providers({ children }: { children: React.ReactNode }) { 9 | const [mounted, setMounted] = React.useState(false) 10 | React.useEffect(() => setMounted(true), []) 11 | return ( 12 | 13 | {mounted && children} 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/src/components/Account.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useAccount } from 'wagmi' 4 | 5 | export function Account() { 6 | const { address } = useAccount() 7 | 8 | return ( 9 |
10 | {address} 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/src/components/BlockNumber.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useBlockNumber } from 'wagmi' 4 | 5 | export function BlockNumber() { 6 | const { data } = useBlockNumber({ watch: true }) 7 | return
{data?.toString()}
8 | } 9 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/src/components/Connected.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useAccount } from 'wagmi' 4 | 5 | export function Connected({ children }: { children: React.ReactNode }) { 6 | const { isConnected } = useAccount() 7 | 8 | if (!isConnected) return null 9 | return <>{children} 10 | } 11 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/src/components/WatchPendingTransactions.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useState } from 'react' 4 | import type { Hex } from 'viem' 5 | import { useWatchPendingTransactions } from 'wagmi' 6 | 7 | export function WatchPendingTransactions() { 8 | const [hashes, setHashes] = useState([]) 9 | useWatchPendingTransactions({ 10 | listener: (hashes) => setHashes((x) => [...x, ...hashes]), 11 | }) 12 | 13 | return ( 14 |
15 |
16 | {hashes.length} hashes logged 17 | {hashes.reverse().join('\n')} 18 |
19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/src/components/contracts.ts: -------------------------------------------------------------------------------- 1 | import { erc20ABI } from "wagmi"; 2 | 3 | export const daiContractConfig = { 4 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 5 | abi: erc20ABI, 6 | } as const; 7 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/src/hooks/useDebounce.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | 3 | export function useDebounce(value: T, delay?: number): T { 4 | const [debouncedValue, setDebouncedValue] = useState(value) 5 | 6 | useEffect(() => { 7 | const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500) 8 | return () => clearTimeout(timer) 9 | }, [value, delay]) 10 | 11 | return debouncedValue 12 | } 13 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/src/utils/stringify.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === 'bigint' ? value_.toString() : value_ 6 | return typeof replacer === 'function' ? replacer(key, value) : value 7 | }, 8 | space, 9 | ) 10 | -------------------------------------------------------------------------------- /templates/react/next-wagmi-web3modal/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 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 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ] 22 | }, 23 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 24 | "exclude": ["node_modules"] 25 | } 26 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | 11 | /coverage 12 | 13 | # next.js 14 | 15 | /.next/ 16 | /out/ 17 | 18 | # production 19 | 20 | /build 21 | 22 | # misc 23 | 24 | .DS_Store 25 | \*.pem 26 | 27 | # debug 28 | 29 | npm-debug.log* 30 | yarn-debug.log* 31 | yarn-error.log* 32 | .pnpm-debug.log* 33 | 34 | # local env files 35 | 36 | .env 37 | .env\*.local 38 | 39 | # vercel 40 | 41 | .vercel 42 | 43 | # typescript 44 | 45 | \*.tsbuildinfo 46 | next-env.d.ts 47 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies = false 2 | legacy-peer-deps = true -------------------------------------------------------------------------------- /templates/react/next-wagmi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-next-wagmi", 3 | "version": "0.0.1", 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 | "next": "^13.4.0", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "viem": "^2.7.1", 16 | "wagmi": "^2.5.5" 17 | }, 18 | "devDependencies": { 19 | "@tanstack/react-query": "^5.18.1", 20 | "@types/node": "^17.0.31", 21 | "@types/react": "^18.0.9", 22 | "@types/react-dom": "^18.0.3", 23 | "eslint": "^8.15.0", 24 | "eslint-config-next": "^12.1.6", 25 | "typescript": "^5.0.4" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Providers } from './providers' 2 | 3 | export const metadata = { 4 | title: 'zkSync + wagmi + Next.js', 5 | } 6 | 7 | export default function RootLayout({ 8 | children, 9 | }: { 10 | children: React.ReactNode 11 | }) { 12 | return ( 13 | 14 | 15 | {children} 16 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/src/app/providers.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import * as React from 'react' 4 | import { WagmiProvider } from 'wagmi' 5 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 6 | 7 | import { config } from '../wagmi' 8 | 9 | const queryClient = new QueryClient() 10 | 11 | export function Providers({ children }: { children: React.ReactNode }) { 12 | const [mounted, setMounted] = React.useState(false) 13 | React.useEffect(() => setMounted(true), []) 14 | return ( 15 | 16 | 17 | {mounted && children} 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/src/components/Account.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useAccount } from 'wagmi' 4 | 5 | export function Account() { 6 | const { address } = useAccount() 7 | 8 | return ( 9 |
10 | {address} 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/src/components/BlockNumber.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useBlockNumber } from 'wagmi' 4 | 5 | export function BlockNumber() { 6 | const { data } = useBlockNumber({ watch: true }) 7 | return
{data?.toString()}
8 | } 9 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/src/components/Connected.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useAccount } from 'wagmi' 4 | 5 | export function Connected({ children }: { children: React.ReactNode }) { 6 | const { isConnected } = useAccount() 7 | 8 | if (!isConnected) return null 9 | return <>{children} 10 | } 11 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/src/components/WatchPendingTransactions.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useState } from 'react' 4 | import type { Hex } from 'viem' 5 | import { useWatchPendingTransactions } from 'wagmi' 6 | 7 | export function WatchPendingTransactions() { 8 | const [hashes, setHashes] = useState([]) 9 | useWatchPendingTransactions({ 10 | onTransactions: (hashes) => setHashes((x) => [...x, ...hashes]), 11 | }) 12 | 13 | return ( 14 |
15 |
16 | {hashes.length} hashes logged 17 | {hashes.reverse().join('\n')} 18 |
19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/src/components/contracts.ts: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { erc20Abi } from 'viem' 4 | 5 | export const daiContractConfig = { 6 | address: '0x6Ff473f001877D553833B6e312C89b3c8fACa7Ac', // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20Abi, 8 | } as const 9 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/src/hooks/useDebounce.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | 3 | export function useDebounce(value: T, delay?: number): T { 4 | const [debouncedValue, setDebouncedValue] = useState(value) 5 | 6 | useEffect(() => { 7 | const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500) 8 | return () => clearTimeout(timer) 9 | }, [value, delay]) 10 | 11 | return debouncedValue 12 | } 13 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/src/utils/stringify.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === 'bigint' ? value_.toString() : value_ 6 | return typeof replacer === 'function' ? replacer(key, value) : value 7 | }, 8 | space, 9 | ) 10 | -------------------------------------------------------------------------------- /templates/react/next-wagmi/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 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 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ] 22 | }, 23 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 24 | "exclude": ["node_modules"] 25 | } 26 | -------------------------------------------------------------------------------- /templates/react/next-web3js/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /templates/react/next-web3js/.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 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /templates/react/next-web3js/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | }; 5 | 6 | export default nextConfig; 7 | -------------------------------------------------------------------------------- /templates/react/next-web3js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-web3js", 3 | "version": "0.1.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 | "next": "14.2.5", 13 | "react": "^18", 14 | "react-dom": "^18", 15 | "web3-plugin-zksync": "^1.0.3", 16 | "web3-types": "^1.7.0", 17 | "web3-utils": "^4.3.1" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "^20", 21 | "@types/react": "^18", 22 | "@types/react-dom": "^18", 23 | "eslint": "^8", 24 | "eslint-config-next": "14.2.5", 25 | "typescript": "^5" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /templates/react/next-web3js/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/react/next-web3js/public/favicon.ico -------------------------------------------------------------------------------- /templates/react/next-web3js/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/react/next-web3js/src/components/Account.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useEthereum } from './Context'; 4 | 5 | export function Account() { 6 | const { account } = useEthereum(); 7 | 8 | return ( 9 |
10 | {account.address} 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /templates/react/next-web3js/src/components/Connect.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useEthereum } from './Context'; 4 | 5 | export function Connect() { 6 | const { account, connect, disconnect } = useEthereum(); 7 | 8 | return ( 9 |
10 | {account.isConnected ? ( 11 | 14 | ) : ( 15 | 18 | )} 19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /templates/react/next-web3js/src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import "@/styles/globals.css"; 2 | import type { AppProps } from "next/app"; 3 | import { EthereumProvider } from '../components/Context'; 4 | 5 | export default function App({ Component, pageProps }: AppProps) { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /templates/react/next-web3js/src/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; 2 | 3 | class MyDocument extends Document { 4 | static async getInitialProps(ctx: DocumentContext) { 5 | const initialProps = await Document.getInitialProps(ctx); 6 | return { ...initialProps }; 7 | } 8 | 9 | render() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | ); 22 | } 23 | } 24 | 25 | export default MyDocument; 26 | -------------------------------------------------------------------------------- /templates/react/next-web3js/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "paths": { 16 | "@/*": ["./src/*"] 17 | } 18 | }, 19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 20 | "exclude": ["node_modules"] 21 | } 22 | -------------------------------------------------------------------------------- /templates/react/vite-ethers/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | 11 | /coverage 12 | 13 | # vite 14 | 15 | dist 16 | dist-ssr 17 | 18 | # production 19 | 20 | /build 21 | 22 | # misc 23 | 24 | .DS_Store 25 | \*.pem 26 | *.local 27 | 28 | # debug 29 | 30 | npm-debug.log* 31 | yarn-debug.log* 32 | yarn-error.log* 33 | .pnpm-debug.log* 34 | 35 | # local env files 36 | 37 | .env 38 | .env\*.local 39 | 40 | # vercel 41 | 42 | .vercel 43 | 44 | # typescript 45 | 46 | \*.tsbuildinfo 47 | next-env.d.ts 48 | -------------------------------------------------------------------------------- /templates/react/vite-ethers/.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies = false 2 | legacy-peer-deps = true -------------------------------------------------------------------------------- /templates/react/vite-ethers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | zkSync + ethers + Vite 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/react/vite-ethers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react0vite", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "buffer": "^6.0.3", 12 | "ethers": "^6.9.2", 13 | "process": "^0.11.10", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "util": "^0.12.4", 17 | "zksync-ethers": "^6.0.0" 18 | }, 19 | "devDependencies": { 20 | "@types/react": "^18.0.9", 21 | "@types/react-dom": "^18.0.3", 22 | "@vitejs/plugin-react": "^4.0.0", 23 | "typescript": "^5.0.4", 24 | "vite": "^4.3.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /templates/react/vite-ethers/polyfills.ts: -------------------------------------------------------------------------------- 1 | import { Buffer } from 'buffer' 2 | import process from 'process' 3 | 4 | window.global = window 5 | window.process = process 6 | window.Buffer = Buffer 7 | -------------------------------------------------------------------------------- /templates/react/vite-ethers/src/components/Account.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useEthereum } from './Context'; 4 | 5 | export function Account() { 6 | const { account } = useEthereum(); 7 | 8 | return ( 9 |
10 | {account.address} 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /templates/react/vite-ethers/src/components/Connect.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useEthereum } from './Context'; 4 | 5 | export function Connect() { 6 | const { account, connect, disconnect } = useEthereum(); 7 | 8 | return ( 9 |
10 | {account.isConnected ? ( 11 | 14 | ) : ( 15 | 18 | )} 19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /templates/react/vite-ethers/src/components/contracts.ts: -------------------------------------------------------------------------------- 1 | import IERC20 from "zksync-ethers/abi/IERC20.json"; 2 | 3 | export const erc20ABI = IERC20; 4 | 5 | export const daiContractConfig = { 6 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20ABI, 8 | } as const; 9 | -------------------------------------------------------------------------------- /templates/react/vite-ethers/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import * as ReactDOM from 'react-dom/client' 3 | 4 | import { App } from './App' 5 | import { EthereumProvider } from './components/Context' 6 | 7 | ReactDOM.createRoot(document.getElementById('root')!).render( 8 | 9 | 10 | 11 | 12 | , 13 | ) 14 | -------------------------------------------------------------------------------- /templates/react/vite-ethers/src/utils/stringify.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | return typeof replacer === 'function' ? replacer(key, value_) : value_ 6 | }, 7 | space, 8 | ) 9 | -------------------------------------------------------------------------------- /templates/react/vite-ethers/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/react/vite-ethers/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": false, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": false, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "react-jsx", 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "Node", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "useDefineForClassFields": true 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /templates/react/vite-ethers/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react' 2 | import { defineConfig } from 'vite' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | define: { 7 | global: 'globalThis', 8 | }, 9 | resolve: { 10 | alias: { 11 | process: 'process/browser', 12 | util: 'util', 13 | }, 14 | }, 15 | plugins: [react()], 16 | }) 17 | -------------------------------------------------------------------------------- /templates/react/vite-ethers5/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | 11 | /coverage 12 | 13 | # vite 14 | 15 | dist 16 | dist-ssr 17 | 18 | # production 19 | 20 | /build 21 | 22 | # misc 23 | 24 | .DS_Store 25 | \*.pem 26 | *.local 27 | 28 | # debug 29 | 30 | npm-debug.log* 31 | yarn-debug.log* 32 | yarn-error.log* 33 | .pnpm-debug.log* 34 | 35 | # local env files 36 | 37 | .env 38 | .env\*.local 39 | 40 | # vercel 41 | 42 | .vercel 43 | 44 | # typescript 45 | 46 | \*.tsbuildinfo 47 | next-env.d.ts 48 | -------------------------------------------------------------------------------- /templates/react/vite-ethers5/.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies = false 2 | legacy-peer-deps = true -------------------------------------------------------------------------------- /templates/react/vite-ethers5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | zkSync + ethers v5 + Vite 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/react/vite-ethers5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react0vite", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "buffer": "^6.0.3", 12 | "ethers": "^5.7.2", 13 | "process": "^0.11.10", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "util": "^0.12.4", 17 | "zksync-ethers": "^5.0.0" 18 | }, 19 | "devDependencies": { 20 | "@types/react": "^18.0.9", 21 | "@types/react-dom": "^18.0.3", 22 | "@vitejs/plugin-react": "^4.0.0", 23 | "typescript": "^5.0.4", 24 | "vite": "^4.3.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /templates/react/vite-ethers5/polyfills.ts: -------------------------------------------------------------------------------- 1 | import { Buffer } from 'buffer' 2 | import process from 'process' 3 | 4 | window.global = window 5 | window.process = process 6 | window.Buffer = Buffer 7 | -------------------------------------------------------------------------------- /templates/react/vite-ethers5/src/components/Account.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useEthereum } from './Context'; 4 | 5 | export function Account() { 6 | const { account } = useEthereum(); 7 | 8 | return ( 9 |
10 | {account.address} 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /templates/react/vite-ethers5/src/components/Connect.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useEthereum } from './Context'; 4 | 5 | export function Connect() { 6 | const { account, connect, disconnect } = useEthereum(); 7 | 8 | return ( 9 |
10 | {account.isConnected ? ( 11 | 14 | ) : ( 15 | 18 | )} 19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /templates/react/vite-ethers5/src/components/contracts.ts: -------------------------------------------------------------------------------- 1 | import IERC20 from "zksync-ethers/abi/IERC20.json"; 2 | 3 | export const erc20ABI = IERC20; 4 | 5 | export const daiContractConfig = { 6 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20ABI, 8 | } as const; 9 | -------------------------------------------------------------------------------- /templates/react/vite-ethers5/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import * as ReactDOM from 'react-dom/client' 3 | 4 | import { App } from './App' 5 | import { EthereumProvider } from './components/Context' 6 | 7 | ReactDOM.createRoot(document.getElementById('root')!).render( 8 | 9 | 10 | 11 | 12 | , 13 | ) 14 | -------------------------------------------------------------------------------- /templates/react/vite-ethers5/src/utils/stringify.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | return typeof replacer === 'function' ? replacer(key, value_) : value_ 6 | }, 7 | space, 8 | ) 9 | -------------------------------------------------------------------------------- /templates/react/vite-ethers5/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/react/vite-ethers5/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": false, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": false, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "react-jsx", 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "Node", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "useDefineForClassFields": true 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /templates/react/vite-ethers5/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react' 2 | import { defineConfig } from 'vite' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | define: { 7 | global: 'globalThis', 8 | }, 9 | resolve: { 10 | alias: { 11 | process: 'process/browser', 12 | util: 'util', 13 | }, 14 | }, 15 | plugins: [react()], 16 | }) 17 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/.env.example: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID= -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | 11 | /coverage 12 | 13 | # vite 14 | 15 | dist 16 | dist-ssr 17 | 18 | # production 19 | 20 | /build 21 | 22 | # misc 23 | 24 | .DS_Store 25 | \*.pem 26 | *.local 27 | 28 | # debug 29 | 30 | npm-debug.log* 31 | yarn-debug.log* 32 | yarn-error.log* 33 | .pnpm-debug.log* 34 | 35 | # local env files 36 | 37 | .env 38 | .env\*.local 39 | 40 | # vercel 41 | 42 | .vercel 43 | 44 | # typescript 45 | 46 | \*.tsbuildinfo 47 | next-env.d.ts 48 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies = false 2 | legacy-peer-deps = true -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | zkSync + wagmi + Web3Modal + Vite 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@web3modal/wagmi": "^3.5.1", 12 | "buffer": "^6.0.3", 13 | "process": "^0.11.10", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "util": "^0.12.4", 17 | "viem": "^1.20.3", 18 | "wagmi": "^1.4.12" 19 | }, 20 | "devDependencies": { 21 | "@types/react": "^18.0.9", 22 | "@types/react-dom": "^18.0.3", 23 | "@vitejs/plugin-react": "^4.0.0", 24 | "typescript": "^5.0.4", 25 | "vite": "^4.3.5" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/polyfills.ts: -------------------------------------------------------------------------------- 1 | import { Buffer } from 'buffer' 2 | import process from 'process' 3 | 4 | window.global = window 5 | window.process = process 6 | window.Buffer = Buffer 7 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/src/components/Account.tsx: -------------------------------------------------------------------------------- 1 | import { useAccount } from 'wagmi' 2 | 3 | export function Account() { 4 | const { address } = useAccount() 5 | 6 | return ( 7 |
8 | {address} 9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/src/components/BlockNumber.tsx: -------------------------------------------------------------------------------- 1 | import { useBlockNumber } from 'wagmi' 2 | 3 | export function BlockNumber() { 4 | const { data } = useBlockNumber({ watch: true }) 5 | return
{data?.toString()}
6 | } 7 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/src/components/Connected.tsx: -------------------------------------------------------------------------------- 1 | import { useAccount } from 'wagmi' 2 | 3 | export function Connected({ children }: { children: React.ReactNode }) { 4 | const { isConnected } = useAccount() 5 | 6 | if (!isConnected) return null 7 | return <>{children} 8 | } 9 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/src/components/WatchPendingTransactions.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import type { Hex } from 'viem' 3 | import { useWatchPendingTransactions } from 'wagmi' 4 | 5 | export function WatchPendingTransactions() { 6 | const [hashes, setHashes] = useState([]) 7 | useWatchPendingTransactions({ 8 | listener: (hashes) => setHashes((x) => [...x, ...hashes]), 9 | }) 10 | 11 | return ( 12 |
13 |
14 | {hashes.length} hashes logged 15 | {hashes.reverse().join('\n')} 16 |
17 |
18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/src/components/contracts.ts: -------------------------------------------------------------------------------- 1 | import { erc20ABI } from "wagmi"; 2 | 3 | export const daiContractConfig = { 4 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 5 | abi: erc20ABI, 6 | } as const; 7 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/src/hooks/useDebounce.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | 3 | export function useDebounce(value: T, delay?: number): T { 4 | const [debouncedValue, setDebouncedValue] = useState(value) 5 | 6 | useEffect(() => { 7 | const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500) 8 | return () => clearTimeout(timer) 9 | }, [value, delay]) 10 | 11 | return debouncedValue 12 | } 13 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import * as ReactDOM from 'react-dom/client' 3 | import { WagmiConfig } from 'wagmi' 4 | import { App } from './App' 5 | import { config } from './wagmi' 6 | 7 | ReactDOM.createRoot(document.getElementById('root')!).render( 8 | 9 | 10 | 11 | 12 | , 13 | ) 14 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/src/utils/stringify.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === 'bigint' ? value_.toString() : value_ 6 | return typeof replacer === 'function' ? replacer(key, value) : value 7 | }, 8 | space, 9 | ) 10 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": false, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": false, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "react-jsx", 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "Node", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "useDefineForClassFields": true 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi-web3modal/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react' 2 | import { defineConfig } from 'vite' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | define: { 7 | global: 'globalThis', 8 | }, 9 | resolve: { 10 | alias: { 11 | process: 'process/browser', 12 | util: 'util', 13 | }, 14 | }, 15 | plugins: [react()], 16 | }) 17 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | 11 | /coverage 12 | 13 | # vite 14 | 15 | dist 16 | dist-ssr 17 | 18 | # production 19 | 20 | /build 21 | 22 | # misc 23 | 24 | .DS_Store 25 | \*.pem 26 | *.local 27 | 28 | # debug 29 | 30 | npm-debug.log* 31 | yarn-debug.log* 32 | yarn-error.log* 33 | .pnpm-debug.log* 34 | 35 | # local env files 36 | 37 | .env 38 | .env\*.local 39 | 40 | # vercel 41 | 42 | .vercel 43 | 44 | # typescript 45 | 46 | \*.tsbuildinfo 47 | next-env.d.ts 48 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies = false 2 | legacy-peer-deps = true -------------------------------------------------------------------------------- /templates/react/vite-wagmi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | zkSync + wagmi + Vite 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react0vite", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "buffer": "^6.0.3", 12 | "process": "^0.11.10", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "util": "^0.12.4", 16 | "viem": "^2.7.1", 17 | "wagmi": "^2.5.5" 18 | }, 19 | "devDependencies": { 20 | "@tanstack/react-query": "^5.18.1", 21 | "@types/react": "^18.0.9", 22 | "@types/react-dom": "^18.0.3", 23 | "@vitejs/plugin-react": "^4.0.0", 24 | "typescript": "^5.0.4", 25 | "vite": "^4.3.5" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/polyfills.ts: -------------------------------------------------------------------------------- 1 | import { Buffer } from 'buffer' 2 | import process from 'process' 3 | 4 | window.global = window 5 | window.process = process 6 | window.Buffer = Buffer 7 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/src/components/Account.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useAccount } from 'wagmi' 4 | 5 | export function Account() { 6 | const { address } = useAccount() 7 | 8 | return ( 9 |
10 | {address} 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/src/components/BlockNumber.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useBlockNumber } from 'wagmi' 4 | 5 | export function BlockNumber() { 6 | const { data } = useBlockNumber({ watch: true }) 7 | return
{data?.toString()}
8 | } 9 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/src/components/Connected.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useAccount } from 'wagmi' 4 | 5 | export function Connected({ children }: { children: React.ReactNode }) { 6 | const { isConnected } = useAccount() 7 | 8 | if (!isConnected) return null 9 | return <>{children} 10 | } 11 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/src/components/NetworkSwitcher.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useAccount, useSwitchChain } from 'wagmi' 4 | 5 | export function NetworkSwitcher() { 6 | const { chain } = useAccount() 7 | const { chains, switchChain } = useSwitchChain() 8 | 9 | return ( 10 |
11 |
12 | Connected to {chain?.name ?? chain?.id} 13 |
14 |
15 | {switchChain && ( 16 |
17 | Switch to:{' '} 18 | {chains.map((x) => 19 | x.id === chain?.id ? null : ( 20 | 23 | ), 24 | )} 25 |
26 | )} 27 |
28 | ) 29 | } -------------------------------------------------------------------------------- /templates/react/vite-wagmi/src/components/WatchPendingTransactions.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useState } from 'react' 4 | import type { Hex } from 'viem' 5 | import { useWatchPendingTransactions } from 'wagmi' 6 | 7 | export function WatchPendingTransactions() { 8 | const [hashes, setHashes] = useState([]) 9 | useWatchPendingTransactions({ 10 | onTransactions: (hashes) => setHashes((x) => [...x, ...hashes]), 11 | }) 12 | 13 | return ( 14 |
15 |
16 | {hashes.length} hashes logged 17 | {hashes.reverse().join('\n')} 18 |
19 |
20 | ) 21 | } -------------------------------------------------------------------------------- /templates/react/vite-wagmi/src/components/contracts.ts: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { erc20Abi } from 'viem' 4 | 5 | export const daiContractConfig = { 6 | address: '0x6Ff473f001877D553833B6e312C89b3c8fACa7Ac', // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20Abi, 8 | } as const -------------------------------------------------------------------------------- /templates/react/vite-wagmi/src/hooks/useDebounce.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | 3 | export function useDebounce(value: T, delay?: number): T { 4 | const [debouncedValue, setDebouncedValue] = useState(value) 5 | 6 | useEffect(() => { 7 | const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500) 8 | return () => clearTimeout(timer) 9 | }, [value, delay]) 10 | 11 | return debouncedValue 12 | } 13 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom/client"; 3 | import { WagmiProvider } from "wagmi"; 4 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; 5 | 6 | import { App } from "./App"; 7 | import { config } from "./wagmi"; 8 | 9 | const queryClient = new QueryClient(); 10 | 11 | ReactDOM.createRoot(document.getElementById("root")!).render( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/src/utils/stringify.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === 'bigint' ? value_.toString() : value_ 6 | return typeof replacer === 'function' ? replacer(key, value) : value 7 | }, 8 | space, 9 | ) 10 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": false, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": false, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "react-jsx", 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "Node", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "useDefineForClassFields": true 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /templates/react/vite-wagmi/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react' 2 | import { defineConfig } from 'vite' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | define: { 7 | global: 'globalThis', 8 | }, 9 | resolve: { 10 | alias: { 11 | process: 'process/browser', 12 | util: 'util', 13 | }, 14 | }, 15 | plugins: [react()], 16 | }) 17 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], 14 | '@typescript-eslint/no-explicit-any': 'off', 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | pnpm-lock.yaml 16 | 17 | # Editor directories and files 18 | .vscode/* 19 | !.vscode/extensions.json 20 | .idea 21 | .DS_Store 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | *.sw? 27 | 28 | # local env files 29 | .env 30 | .env\*.local 31 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": true, 5 | "singleQuote": true, 6 | "jsxSingleQuote": true, 7 | "bracketSpacing": true, 8 | "printWidth": 100, 9 | "endOfLine": "auto" 10 | } 11 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Web3.js + Zksync + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { Home } from '@/components/Home.tsx'; 2 | import { EthereumContextProvider } from '@/services/ethereum/EthereumContext.tsx'; 3 | 4 | export function App() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/src/components/Account.tsx: -------------------------------------------------------------------------------- 1 | import { useEthereum } from '@/services/ethereum/context'; 2 | 3 | export function Account() { 4 | const { account } = useEthereum(); 5 | 6 | return
{account.address}
; 7 | } 8 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/src/components/Connect.tsx: -------------------------------------------------------------------------------- 1 | import { useEthereum } from '@/services/ethereum/context.ts'; 2 | 3 | export function Connect() { 4 | const { account, connect, disconnect } = useEthereum(); 5 | 6 | return ( 7 |
8 | {account.isConnected ? ( 9 | 10 | ) : ( 11 | 12 | )} 13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import { App } from './App.tsx'; 4 | import './styles/globals.css'; 5 | 6 | BigInt.prototype.toJSON = function () { 7 | return this.toString(); 8 | }; 9 | 10 | ReactDOM.createRoot(document.getElementById('root')!).render( 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/src/services/contracts.ts: -------------------------------------------------------------------------------- 1 | import { IERC20ABI } from 'web3-plugin-zksync/lib/contracts/IERC20'; 2 | 3 | export const daiContractConfig = { 4 | address: '0x604F0416e788779edB06c1A74a75FAad38384C6E', 5 | abi: IERC20ABI, 6 | } as const; 7 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/src/services/ethereum/context.ts: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from 'react'; 2 | import type { EthereumContextValue } from '@/services/ethereum/types.ts'; 3 | 4 | export const EthereumContext = createContext(null); 5 | 6 | export const useEthereum = () => { 7 | const context = useContext(EthereumContext); 8 | 9 | if (!context) { 10 | throw new Error('useEthereum must be used within an EthereumProvider'); 11 | } 12 | 13 | return context; 14 | }; 15 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/src/services/ethereum/types.ts: -------------------------------------------------------------------------------- 1 | import type { Chain } from '@/types/web3.ts'; 2 | import { ZKsyncPlugin } from 'web3-plugin-zksync'; 3 | 4 | export type EthereumContextValue = { 5 | account: { isConnected: true; address: string } | { isConnected: false; address: null }; 6 | network: Chain | null; 7 | switchNetwork: (chainId: string) => Promise; 8 | connect: () => void; 9 | disconnect: () => void; 10 | getZKsync: () => ZKsyncPlugin | null; 11 | }; 12 | 13 | export type Account = 14 | | { isConnected: true; address: string } 15 | | { isConnected: false; address: null }; 16 | 17 | export type Network = Chain | null -------------------------------------------------------------------------------- /templates/react/vite-web3js/src/services/utils.ts: -------------------------------------------------------------------------------- 1 | import { fromWei } from 'web3-utils'; 2 | 3 | export function formatBalance(balance: bigint) { 4 | return fromWei(balance, 'ether'); 5 | } 6 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/src/styles/home.module.css: -------------------------------------------------------------------------------- 1 | .home { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: space-between; 5 | align-items: center; 6 | padding: 6rem; 7 | min-height: 100vh; 8 | } 9 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/src/types/index.d.ts: -------------------------------------------------------------------------------- 1 | declare global { 2 | interface Window { 3 | ethereum: import('web3').EIP1193Provider; 4 | } 5 | 6 | interface BigInt { 7 | toJSON: () => string; 8 | } 9 | } 10 | 11 | export {}; 12 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/src/types/web3.ts: -------------------------------------------------------------------------------- 1 | export type Chain = { 2 | id: string; 3 | name: null | string; 4 | rpcUrl: null | string; 5 | blockExplorerUrl?: string; 6 | unsupported?: true; 7 | }; 8 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.app.json" 6 | }, 7 | { 8 | "path": "./tsconfig.node.json" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 5 | "skipLibCheck": true, 6 | "module": "ESNext", 7 | "moduleResolution": "bundler", 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "noEmit": true 11 | }, 12 | "include": ["vite.config.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /templates/react/vite-web3js/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | import { resolve } from "node:path"; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react()], 8 | resolve: { 9 | alias: { 10 | "@": resolve(__dirname, "./src"), 11 | }, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/.gitignore: -------------------------------------------------------------------------------- 1 | # Svelte-kit dev/build outputs 2 | .output 3 | .data 4 | .svelte-kit 5 | .nitro 6 | .cache 7 | dist 8 | vite.config.js.timestamp-* 9 | vite.config.ts.timestamp-* 10 | 11 | # Node dependencies 12 | node_modules 13 | 14 | # Logs 15 | logs 16 | *.log 17 | 18 | # Misc 19 | .DS_Store 20 | .fleet 21 | .idea 22 | package-lock.json 23 | 24 | # Local env files 25 | .env 26 | .env.* 27 | !.env.example 28 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite dev", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 10 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/adapter-auto": "^3.0.0", 14 | "@sveltejs/kit": "^2.0.0", 15 | "@sveltejs/vite-plugin-svelte": "^3.0.0", 16 | "svelte": "^4.2.7", 17 | "svelte-check": "^3.6.0", 18 | "tslib": "^2.4.1", 19 | "typescript": "^5.0.0", 20 | "vite": "^5.0.3" 21 | }, 22 | "dependencies": { 23 | "ethers": "^6.9.2", 24 | "zksync-ethers": "^6.0.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/src/components/Account.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | {$etherStore.account.address} 7 |
8 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/src/components/BlockNumber.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | {blockNumber?.toString()} 13 |
14 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/src/components/Connect.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | {#if account.isConnected} 10 | 11 | {:else} 12 | 13 | {/if} 14 |
15 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/src/components/Connected.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | {#if account.isConnected} 8 | 9 | {/if} 10 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/src/components/WatchPendingTransactions.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 |
18 |
19 | {transactionHashes.length} transaction hashes 20 | 21 | {transactionHashes.reverse().join("\n")} 22 |
23 |
24 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/src/routes/+layout.ts: -------------------------------------------------------------------------------- 1 | export let ssr = false; 2 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/src/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import IERC20 from "zksync-ethers/abi/IERC20.json"; 2 | 3 | export const erc20ABI = IERC20; 4 | 5 | export const daiContractConfig = { 6 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20ABI, 8 | } as const; 9 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => { 2 | return JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === "bigint" ? value_.toString() : value_; 6 | return typeof replacer === "function" ? replacer(key, value) : value; 7 | }, 8 | space 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/svelte/sveltekit-ethers/static/favicon.png -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from "@sveltejs/adapter-auto"; 2 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter(), 15 | }, 16 | }; 17 | 18 | export default config; 19 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler" 13 | } 14 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 15 | // 16 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 17 | // from the referenced tsconfig.json - TypeScript does not merge them in 18 | } 19 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from "@sveltejs/kit/vite"; 2 | import { defineConfig } from "vite"; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()], 6 | 7 | server: { 8 | port: 3000, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/.gitignore: -------------------------------------------------------------------------------- 1 | # Svelte-kit dev/build outputs 2 | .output 3 | .data 4 | .svelte-kit 5 | .nitro 6 | .cache 7 | dist 8 | vite.config.js.timestamp-* 9 | vite.config.ts.timestamp-* 10 | 11 | # Node dependencies 12 | node_modules 13 | 14 | # Logs 15 | logs 16 | *.log 17 | 18 | # Misc 19 | .DS_Store 20 | .fleet 21 | .idea 22 | package-lock.json 23 | 24 | # Local env files 25 | .env 26 | .env.* 27 | !.env.example 28 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite dev", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 10 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/adapter-auto": "^3.0.0", 14 | "@sveltejs/kit": "^2.0.0", 15 | "@sveltejs/vite-plugin-svelte": "^3.0.0", 16 | "svelte": "^4.2.7", 17 | "svelte-check": "^3.6.0", 18 | "tslib": "^2.4.1", 19 | "typescript": "^5.0.0", 20 | "vite": "^5.0.3" 21 | }, 22 | "dependencies": { 23 | "ethers": "^5.7.2", 24 | "zksync-ethers": "^5.4.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/src/components/Account.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | {$etherStore.account.address} 7 |
8 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/src/components/BlockNumber.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | {blockNumber?.toString()} 13 |
14 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/src/components/Connect.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | {#if account.isConnected} 10 | 11 | {:else} 12 | 13 | {/if} 14 |
15 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/src/components/Connected.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | {#if account.isConnected} 8 | 9 | {/if} 10 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/src/components/WatchPendingTransactions.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 |
17 |
18 | {transactionHashes.length} transaction hashes 19 | 20 | {transactionHashes.reverse().join("\n")} 21 |
22 |
23 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/src/routes/+layout.ts: -------------------------------------------------------------------------------- 1 | export let ssr = false; 2 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/src/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import IERC20 from "zksync-ethers/abi/IERC20.json"; 2 | 3 | export const erc20ABI = IERC20; 4 | 5 | export const daiContractConfig = { 6 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20ABI, 8 | } as const; 9 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | return typeof replacer === 'function' ? replacer(key, value_) : value_ 6 | }, 7 | space, 8 | ) 9 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/svelte/sveltekit-ethers5/static/favicon.png -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from "@sveltejs/adapter-auto"; 2 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter(), 15 | }, 16 | }; 17 | 18 | export default config; 19 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler" 13 | } 14 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 15 | // 16 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 17 | // from the referenced tsconfig.json - TypeScript does not merge them in 18 | } 19 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-ethers5/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from "@sveltejs/kit/vite"; 2 | import { defineConfig } from "vite"; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()], 6 | 7 | server: { 8 | port: 3000, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/.env.example: -------------------------------------------------------------------------------- 1 | WALLET_CONNECT_PROJECT_ID= 2 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/.gitignore: -------------------------------------------------------------------------------- 1 | # Svelte-kit dev/build outputs 2 | .output 3 | .data 4 | .svelte-kit 5 | .nitro 6 | .cache 7 | dist 8 | vite.config.js.timestamp-* 9 | vite.config.ts.timestamp-* 10 | 11 | # Node dependencies 12 | node_modules 13 | 14 | # Logs 15 | logs 16 | *.log 17 | 18 | # Misc 19 | .DS_Store 20 | .fleet 21 | .idea 22 | package-lock.json 23 | 24 | # Local env files 25 | .env 26 | .env.* 27 | !.env.example 28 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/src/components/Account.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | {$wagmiStore.account.address} 7 |
8 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/src/components/BlockNumber.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | {blockNumber?.toString()} 13 |
14 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/src/components/Connected.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | {#if account.isConnected} 7 | 8 | {/if} 9 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/src/components/WatchContractEvents.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
21 |
22 | {events.length} DAI `Transfer`s logged 23 | 24 | {events 25 | .reverse() 26 | .map((log) => stringify(log)) 27 | .join("\n\n\n\n")} 28 |
29 |
30 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/src/components/WatchPendingTransactions.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 |
13 | {transactionHashes.length} transaction hashes 14 | 15 | {transactionHashes.reverse().join("\n")} 16 |
17 |
18 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/src/routes/+layout.ts: -------------------------------------------------------------------------------- 1 | export const ssr = false; 2 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/src/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import { erc20ABI } from "@wagmi/core"; 2 | 3 | export const daiContractConfig = { 4 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 5 | abi: erc20ABI, 6 | } as const; 7 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => { 2 | return JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === "bigint" ? value_.toString() : value_; 6 | return typeof replacer === "function" ? replacer(key, value) : value; 7 | }, 8 | space 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/svelte/sveltekit-wagmi-web3modal/static/favicon.png -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler" 13 | } 14 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 15 | // 16 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 17 | // from the referenced tsconfig.json - TypeScript does not merge them in 18 | } 19 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi-web3modal/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from "@sveltejs/kit/vite"; 2 | import { defineConfig } from "vite"; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()], 6 | 7 | server: { 8 | port: 3000, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/.gitignore: -------------------------------------------------------------------------------- 1 | # Svelte-kit dev/build outputs 2 | .output 3 | .data 4 | .svelte-kit 5 | .nitro 6 | .cache 7 | dist 8 | vite.config.js.timestamp-* 9 | vite.config.ts.timestamp-* 10 | 11 | # Node dependencies 12 | node_modules 13 | 14 | # Logs 15 | logs 16 | *.log 17 | 18 | # Misc 19 | .DS_Store 20 | .fleet 21 | .idea 22 | package-lock.json 23 | 24 | # Local env files 25 | .env 26 | .env.* 27 | !.env.example 28 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite dev", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 10 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/adapter-auto": "^3.0.0", 14 | "@sveltejs/kit": "^2.0.0", 15 | "@sveltejs/vite-plugin-svelte": "^3.0.0", 16 | "svelte": "^4.2.7", 17 | "svelte-check": "^3.6.0", 18 | "tslib": "^2.4.1", 19 | "typescript": "^5.0.0", 20 | "vite": "^5.0.3" 21 | }, 22 | "dependencies": { 23 | "@wagmi/core": "^1.4.12", 24 | "viem": "^1.20.3" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/src/components/Account.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | {$wagmiStore.account.address} 7 |
8 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/src/components/BlockNumber.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | {blockNumber?.toString()} 13 |
14 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/src/components/Connect.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
10 | {#if account.isConnected} 11 | 14 | {:else} 15 | {#each config.connectors as item (item.id)} 16 | 19 | {/each} 20 | {/if} 21 |
22 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/src/components/Connected.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | {#if account.isConnected} 7 | 8 | {/if} 9 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/src/components/WatchContractEvents.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
21 |
22 | {events.length} DAI `Transfer`s logged 23 | 24 | {events 25 | .reverse() 26 | .map((log) => stringify(log)) 27 | .join("\n\n\n\n")} 28 |
29 |
30 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/src/components/WatchPendingTransactions.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 |
13 | {transactionHashes.length} transaction hashes 14 | 15 | {transactionHashes.reverse().join("\n")} 16 |
17 |
18 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/src/routes/+layout.ts: -------------------------------------------------------------------------------- 1 | export let ssr = false; 2 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/src/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import { erc20ABI } from "@wagmi/core"; 2 | 3 | export const daiContractConfig = { 4 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 5 | abi: erc20ABI, 6 | } as const; 7 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === "bigint" ? value_.toString() : value_; 6 | return typeof replacer === "function" ? replacer(key, value) : value; 7 | }, 8 | space 9 | ); 10 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/svelte/sveltekit-wagmi/static/favicon.png -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler" 13 | } 14 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 15 | // 16 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 17 | // from the referenced tsconfig.json - TypeScript does not merge them in 18 | } 19 | -------------------------------------------------------------------------------- /templates/svelte/sveltekit-wagmi/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from "@sveltejs/kit/vite"; 2 | import { defineConfig } from "vite"; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()], 6 | 7 | server: { 8 | port: 3000, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | # Node modules and dependencies 11 | node_modules 12 | 13 | # Build outputs 14 | dist 15 | dist-ssr 16 | .output 17 | .data 18 | .svelte-kit 19 | .nitro 20 | .cache 21 | 22 | # Configuration files 23 | vite.config.js.timestamp-* 24 | vite.config.ts.timestamp-* 25 | 26 | # Editor directories and files 27 | .vscode/* 28 | !.vscode/extensions.json 29 | .idea 30 | .DS_Store 31 | *.suo 32 | *.ntvs* 33 | *.njsproj 34 | *.sln 35 | *.sw? 36 | 37 | # Misc 38 | .fleet 39 | package-lock.json 40 | 41 | # Local env files 42 | .env 43 | .env.* 44 | !.env.example 45 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | zkSync + ethers + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-ethers", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "check": "svelte-check --tsconfig ./tsconfig.json" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/vite-plugin-svelte": "^3.0.2", 14 | "@tsconfig/svelte": "^5.0.2", 15 | "svelte": "^4.2.12", 16 | "svelte-check": "^3.6.6", 17 | "tslib": "^2.6.2", 18 | "typescript": "^5.2.2", 19 | "vite": "^5.1.6" 20 | }, 21 | "dependencies": { 22 | "ethers": "^6.9.2", 23 | "zksync-ethers": "^6.5.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/src/components/Account.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | {$etherStore.account.address} 7 |
8 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/src/components/BlockNumber.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | {blockNumber?.toString()} 13 |
14 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/src/components/Connect.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | {#if account.isConnected} 10 | 11 | {:else} 12 | 13 | {/if} 14 |
15 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/src/components/Connected.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | {#if account.isConnected} 8 | 9 | {/if} 10 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/src/components/WatchPendingTransactions.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 |
18 |
19 | {transactionHashes.length} transaction hashes 20 | 21 | {transactionHashes.reverse().join("\n")} 22 |
23 |
24 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/src/main.ts: -------------------------------------------------------------------------------- 1 | import App from './App.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app')!, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/src/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import IERC20 from "zksync-ethers/abi/IERC20.json"; 2 | 3 | export const erc20ABI = IERC20; 4 | 5 | export const daiContractConfig = { 6 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20ABI, 8 | } as const; 9 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => { 2 | return JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === "bigint" ? value_.toString() : value_; 6 | return typeof replacer === "function" ? replacer(key, value) : value; 7 | }, 8 | space 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true 17 | }, 18 | "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "strict": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { svelte } from "@sveltejs/vite-plugin-svelte"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | 8 | server: { 9 | port: 3000, 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | # Node modules and dependencies 11 | node_modules 12 | 13 | # Build outputs 14 | dist 15 | dist-ssr 16 | .output 17 | .data 18 | .svelte-kit 19 | .nitro 20 | .cache 21 | 22 | # Configuration files 23 | vite.config.js.timestamp-* 24 | vite.config.ts.timestamp-* 25 | 26 | # Editor directories and files 27 | .vscode/* 28 | !.vscode/extensions.json 29 | .idea 30 | .DS_Store 31 | *.suo 32 | *.ntvs* 33 | *.njsproj 34 | *.sln 35 | *.sw? 36 | 37 | # Misc 38 | .fleet 39 | package-lock.json 40 | 41 | # Local env files 42 | .env 43 | .env.* 44 | !.env.example 45 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | zkSync + ethers + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-ethers", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "check": "svelte-check --tsconfig ./tsconfig.json" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/vite-plugin-svelte": "^3.0.2", 14 | "@tsconfig/svelte": "^5.0.2", 15 | "svelte": "^4.2.12", 16 | "svelte-check": "^3.6.6", 17 | "tslib": "^2.6.2", 18 | "typescript": "^5.2.2", 19 | "vite": "^5.1.6" 20 | }, 21 | "dependencies": { 22 | "ethers": "^5.7.2", 23 | "zksync-ethers": "^5.4.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/src/components/Account.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | {$etherStore.account.address} 7 |
8 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/src/components/BlockNumber.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | {blockNumber?.toString()} 13 |
14 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/src/components/Connect.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | {#if account.isConnected} 10 | 11 | {:else} 12 | 13 | {/if} 14 |
15 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/src/components/Connected.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | {#if account.isConnected} 8 | 9 | {/if} 10 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/src/components/WatchPendingTransactions.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 |
17 |
18 | {transactionHashes.length} transaction hashes 19 | 20 | {transactionHashes.reverse().join("\n")} 21 |
22 |
23 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/src/main.ts: -------------------------------------------------------------------------------- 1 | import App from './App.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app')!, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/src/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import IERC20 from "zksync-ethers/abi/IERC20.json"; 2 | 3 | export const erc20ABI = IERC20; 4 | 5 | export const daiContractConfig = { 6 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20ABI, 8 | } as const; 9 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | return typeof replacer === 'function' ? replacer(key, value_) : value_ 6 | }, 7 | space, 8 | ) 9 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true 17 | }, 18 | "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "strict": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/svelte/vite-ethers5/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { svelte } from "@sveltejs/vite-plugin-svelte"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | 8 | server: { 9 | port: 3000, 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | # Node modules and dependencies 11 | node_modules 12 | 13 | # Build outputs 14 | dist 15 | dist-ssr 16 | .output 17 | .data 18 | .svelte-kit 19 | .nitro 20 | .cache 21 | 22 | # Configuration files 23 | vite.config.js.timestamp-* 24 | vite.config.ts.timestamp-* 25 | 26 | # Editor directories and files 27 | .vscode/* 28 | !.vscode/extensions.json 29 | .idea 30 | .DS_Store 31 | *.suo 32 | *.ntvs* 33 | *.njsproj 34 | *.sln 35 | *.sw? 36 | 37 | # Misc 38 | .fleet 39 | package-lock.json 40 | 41 | # Local env files 42 | .env 43 | .env.* 44 | !.env.example 45 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | zkSync + ethers + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-ethers", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "check": "svelte-check --tsconfig ./tsconfig.json" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/vite-plugin-svelte": "^3.0.2", 14 | "@tsconfig/svelte": "^5.0.2", 15 | "svelte": "^4.2.12", 16 | "svelte-check": "^3.6.6", 17 | "tslib": "^2.6.2", 18 | "typescript": "^5.2.2", 19 | "vite": "^5.1.6" 20 | }, 21 | "dependencies": { 22 | "@wagmi/core": "^1.4.5", 23 | "@web3modal/wagmi": "^3.5.1", 24 | "viem": "^1.20.3" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/src/components/Account.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | {$wagmiStore.account.address} 7 |
8 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/src/components/BlockNumber.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | {blockNumber?.toString()} 13 |
14 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/src/components/Connected.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | {#if account.isConnected} 7 | 8 | {/if} 9 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/src/components/WatchContractEvents.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
21 |
22 | {events.length} DAI `Transfer`s logged 23 | 24 | {events 25 | .reverse() 26 | .map((log) => stringify(log)) 27 | .join("\n\n\n\n")} 28 |
29 |
30 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/src/components/WatchPendingTransactions.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 |
13 | {transactionHashes.length} transaction hashes 14 | 15 | {transactionHashes.reverse().join("\n")} 16 |
17 |
18 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/src/main.ts: -------------------------------------------------------------------------------- 1 | import App from './App.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app')!, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/src/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import { erc20ABI } from "@wagmi/core"; 2 | 3 | export const daiContractConfig = { 4 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 5 | abi: erc20ABI, 6 | } as const; 7 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => { 2 | return JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === "bigint" ? value_.toString() : value_; 6 | return typeof replacer === "function" ? replacer(key, value) : value; 7 | }, 8 | space 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true 17 | }, 18 | "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "strict": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi-web3modal/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { svelte } from "@sveltejs/vite-plugin-svelte"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }); 8 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | # Node modules and dependencies 11 | node_modules 12 | 13 | # Build outputs 14 | dist 15 | dist-ssr 16 | .output 17 | .data 18 | .svelte-kit 19 | .nitro 20 | .cache 21 | 22 | # Configuration files 23 | vite.config.js.timestamp-* 24 | vite.config.ts.timestamp-* 25 | 26 | # Editor directories and files 27 | .vscode/* 28 | !.vscode/extensions.json 29 | .idea 30 | .DS_Store 31 | *.suo 32 | *.ntvs* 33 | *.njsproj 34 | *.sln 35 | *.sw? 36 | 37 | # Misc 38 | .fleet 39 | package-lock.json 40 | 41 | # Local env files 42 | .env 43 | .env.* 44 | !.env.example 45 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | zkSync + ethers + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-ethers", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "check": "svelte-check --tsconfig ./tsconfig.json" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/vite-plugin-svelte": "^3.0.2", 14 | "@tsconfig/svelte": "^5.0.2", 15 | "svelte": "^4.2.12", 16 | "svelte-check": "^3.6.6", 17 | "tslib": "^2.6.2", 18 | "typescript": "^5.2.2", 19 | "vite": "^5.1.6" 20 | }, 21 | "dependencies": { 22 | "@wagmi/core": "^1.4.12", 23 | "viem": "^1.20.3" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/src/components/Account.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | {$wagmiStore.account.address} 7 |
8 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/src/components/BlockNumber.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | {blockNumber?.toString()} 13 |
14 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/src/components/Connect.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
10 | {#if account.isConnected} 11 | 14 | {:else} 15 | {#each config.connectors as item (item.id)} 16 | 19 | {/each} 20 | {/if} 21 |
22 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/src/components/Connected.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | {#if account.isConnected} 7 | 8 | {/if} 9 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/src/components/WatchContractEvents.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
21 |
22 | {events.length} DAI `Transfer`s logged 23 | 24 | {events 25 | .reverse() 26 | .map((log) => stringify(log)) 27 | .join("\n\n\n\n")} 28 |
29 |
30 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/src/components/WatchPendingTransactions.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 |
13 | {transactionHashes.length} transaction hashes 14 | 15 | {transactionHashes.reverse().join("\n")} 16 |
17 |
18 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/src/main.ts: -------------------------------------------------------------------------------- 1 | import App from './App.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app')!, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/src/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import { erc20ABI } from "@wagmi/core"; 2 | 3 | export const daiContractConfig = { 4 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 5 | abi: erc20ABI, 6 | } as const; 7 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => { 2 | return JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === "bigint" ? value_.toString() : value_; 6 | return typeof replacer === "function" ? replacer(key, value) : value; 7 | }, 8 | space 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true 17 | }, 18 | "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "strict": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/svelte/vite-wagmi/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { svelte } from "@sveltejs/vite-plugin-svelte"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }); 8 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env 23 | .env.* 24 | !.env.example 25 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/components/Account.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/components/BlockNumber.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/components/Connect.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/components/Connected.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/components/FindBalance.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/components/ReadTokenSupply.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/components/WatchPendingTransactions.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | app: { 4 | head: { 5 | title: "zkSync + ethers + Nuxt 3" 6 | } 7 | }, 8 | ssr: false, 9 | devtools: { enabled: true }, 10 | modules: ['@pinia/nuxt'], 11 | 12 | pinia: { 13 | autoImports: [ 14 | // automatically imports `defineStore` 15 | "defineStore", 16 | "storeToRefs", 17 | ], 18 | }, 19 | imports: { 20 | dirs: ["store"], 21 | }, 22 | }) 23 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-app", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "dev": "nuxt dev", 8 | "generate": "nuxt generate", 9 | "preview": "nuxt preview", 10 | "postinstall": "nuxt prepare" 11 | }, 12 | "devDependencies": { 13 | "@nuxt/devtools": "latest", 14 | "nuxt": "^3.8.0", 15 | "vue": "^3.3.7", 16 | "vue-router": "^4.2.5" 17 | }, 18 | "dependencies": { 19 | "@pinia/nuxt": "^0.5.1", 20 | "ethers": "^6.9.2", 21 | "pinia": "^2.1.7", 22 | "zksync-ethers": "^6.0.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/vue/nuxt3-ethers/public/favicon.ico -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import IERC20 from "zksync-ethers/abi/IERC20.json"; 2 | 3 | export const erc20ABI = IERC20; 4 | 5 | export const daiContractConfig = { 6 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20ABI, 8 | } as const; 9 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | return typeof replacer === 'function' ? replacer(key, value_) : value_ 6 | }, 7 | space, 8 | ) 9 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env 23 | .env.* 24 | !.env.example 25 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/components/Account.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/components/BlockNumber.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/components/Connect.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/components/Connected.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/components/FindBalance.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/components/ReadTokenSupply.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/components/WatchPendingTransactions.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | app: { 4 | head: { 5 | title: "zkSync + ethers v5 + Nuxt 3" 6 | } 7 | }, 8 | ssr: false, 9 | devtools: { enabled: true }, 10 | modules: ['@pinia/nuxt'], 11 | 12 | pinia: { 13 | autoImports: [ 14 | // automatically imports `defineStore` 15 | "defineStore", 16 | "storeToRefs", 17 | ], 18 | }, 19 | imports: { 20 | dirs: ["store"], 21 | }, 22 | }) 23 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-app", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "dev": "nuxt dev", 8 | "generate": "nuxt generate", 9 | "preview": "nuxt preview", 10 | "postinstall": "nuxt prepare" 11 | }, 12 | "devDependencies": { 13 | "@nuxt/devtools": "latest", 14 | "nuxt": "^3.8.0", 15 | "vue": "^3.3.7", 16 | "vue-router": "^4.2.5" 17 | }, 18 | "dependencies": { 19 | "@pinia/nuxt": "^0.5.1", 20 | "ethers": "^5.7.2", 21 | "pinia": "^2.1.7", 22 | "zksync-ethers": "^5.0.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/vue/nuxt3-ethers5/public/favicon.ico -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import IERC20 from "zksync-ethers/abi/IERC20.json"; 2 | 3 | export const erc20ABI = IERC20; 4 | 5 | export const daiContractConfig = { 6 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20ABI, 8 | } as const; 9 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-ethers5/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | return typeof replacer === 'function' ? replacer(key, value_) : value_ 6 | }, 7 | space, 8 | ) 9 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/.env.example: -------------------------------------------------------------------------------- 1 | WALLET_CONNECT_PROJECT_ID= 2 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env 23 | .env.* 24 | !.env.example 25 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/components/Account.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/components/BlockNumber.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/components/Connected.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/components/FindBalance.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/components/ReadTokenSupply.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/components/WatchContractEvents.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/components/WatchPendingTransactions.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | app: { 4 | head: { 5 | title: "zkSync + wagmi + Web3Modal + Nuxt 3" 6 | } 7 | }, 8 | ssr: false, 9 | devtools: { enabled: true }, 10 | modules: ['@pinia/nuxt'], 11 | appConfig: { 12 | walletConnectProjectID: process.env.WALLET_CONNECT_PROJECT_ID, 13 | }, 14 | 15 | pinia: { 16 | autoImports: [ 17 | // automatically imports `defineStore` 18 | "defineStore", 19 | "storeToRefs", 20 | ], 21 | }, 22 | imports: { 23 | dirs: ["store"], 24 | }, 25 | 26 | vue: { 27 | compilerOptions: { 28 | isCustomElement: (tag) => ['w3m-button'].includes(tag), 29 | }, 30 | }, 31 | }) 32 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-app", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "dev": "nuxt dev", 8 | "generate": "nuxt generate", 9 | "preview": "nuxt preview", 10 | "postinstall": "nuxt prepare" 11 | }, 12 | "devDependencies": { 13 | "@nuxt/devtools": "latest", 14 | "nuxt": "^3.8.0", 15 | "vue": "^3.3.7", 16 | "vue-router": "^4.2.5" 17 | }, 18 | "dependencies": { 19 | "@pinia/nuxt": "^0.5.1", 20 | "@wagmi/core": "^1.4.5", 21 | "@web3modal/wagmi": "^3.5.1", 22 | "pinia": "^2.1.7", 23 | "viem": "^1.20.3" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/vue/nuxt3-wagmi-web3modal/public/favicon.ico -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import { erc20ABI } from "@wagmi/core"; 2 | 3 | export const daiContractConfig = { 4 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 5 | abi: erc20ABI, 6 | } as const; 7 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi-web3modal/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === 'bigint' ? value_.toString() : value_ 6 | return typeof replacer === 'function' ? replacer(key, value) : value 7 | }, 8 | space, 9 | ) 10 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env 23 | .env.* 24 | !.env.example 25 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/components/Account.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/components/BlockNumber.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/components/Connect.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/components/Connected.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/components/FindBalance.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/components/ReadTokenSupply.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/components/WatchContractEvents.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/components/WatchPendingTransactions.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | app: { 4 | head: { 5 | title: "zkSync + wagmi + Nuxt 3" 6 | } 7 | }, 8 | ssr: false, 9 | devtools: { enabled: true }, 10 | modules: ['@pinia/nuxt'], 11 | 12 | pinia: { 13 | autoImports: [ 14 | // automatically imports `defineStore` 15 | "defineStore", 16 | "storeToRefs", 17 | ], 18 | }, 19 | imports: { 20 | dirs: ["store"], 21 | }, 22 | }) 23 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-app", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "dev": "nuxt dev", 8 | "generate": "nuxt generate", 9 | "preview": "nuxt preview", 10 | "postinstall": "nuxt prepare" 11 | }, 12 | "devDependencies": { 13 | "@nuxt/devtools": "latest", 14 | "nuxt": "^3.8.0", 15 | "vue": "^3.3.7", 16 | "vue-router": "^4.2.5" 17 | }, 18 | "dependencies": { 19 | "@pinia/nuxt": "^0.5.1", 20 | "@wagmi/core": "^1.4.12", 21 | "pinia": "^2.1.7", 22 | "viem": "^1.20.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/vue/nuxt3-wagmi/public/favicon.ico -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import { erc20ABI } from "@wagmi/core"; 2 | 3 | export const daiContractConfig = { 4 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 5 | abi: erc20ABI, 6 | } as const; 7 | -------------------------------------------------------------------------------- /templates/vue/nuxt3-wagmi/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === 'bigint' ? value_.toString() : value_ 6 | return typeof replacer === 'function' ? replacer(key, value) : value 7 | }, 8 | space, 9 | ) 10 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | zkSync + ethers + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vite-wagmi-web3modal", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "ethers": "^6.9.2", 13 | "vue": "^3.3.4", 14 | "zksync-ethers": "^6.0.0" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^4.2.3", 18 | "typescript": "^5.0.2", 19 | "vite": "^4.4.5", 20 | "vue-tsc": "^1.8.5" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/src/components/Account.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/src/components/BlockNumber.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/src/components/Connect.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/src/components/Connected.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/src/components/WatchPendingTransactions.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import './ethers' 4 | import App from './App.vue' 5 | 6 | createApp(App).mount('#app') 7 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/src/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/vue/vite-ethers/src/style.css -------------------------------------------------------------------------------- /templates/vue/vite-ethers/src/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import IERC20 from "zksync-ethers/abi/IERC20.json"; 2 | 3 | export const erc20ABI = IERC20; 4 | 5 | export const daiContractConfig = { 6 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20ABI, 8 | } as const; 9 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | return typeof replacer === 'function' ? replacer(key, value_) : value_ 6 | }, 7 | space, 8 | ) 9 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import { fileURLToPath } from 'node:url' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue()], 8 | resolve: { 9 | alias: [ 10 | { 11 | find: '@', 12 | replacement: fileURLToPath(new URL('./src', import.meta.url)) 13 | }, 14 | ] 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | zkSync + ethers v5 + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vite-wagmi-web3modal", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "ethers": "^5.7.2", 13 | "vue": "^3.3.4", 14 | "zksync-ethers": "^5.0.0" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^4.2.3", 18 | "typescript": "^5.0.2", 19 | "vite": "^4.4.5", 20 | "vue-tsc": "^1.8.5" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/src/components/Account.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/src/components/BlockNumber.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/src/components/Connect.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/src/components/Connected.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/src/components/WatchPendingTransactions.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import './ethers' 4 | import App from './App.vue' 5 | 6 | createApp(App).mount('#app') 7 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/src/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/vue/vite-ethers5/src/style.css -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/src/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import IERC20 from "zksync-ethers/abi/IERC20.json"; 2 | 3 | export const erc20ABI = IERC20; 4 | 5 | export const daiContractConfig = { 6 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 7 | abi: erc20ABI, 8 | } as const; 9 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | return typeof replacer === 'function' ? replacer(key, value_) : value_ 6 | }, 7 | space, 8 | ) 9 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/vue/vite-ethers5/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import { fileURLToPath } from 'node:url' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue()], 8 | resolve: { 9 | alias: [ 10 | { 11 | find: '@', 12 | replacement: fileURLToPath(new URL('./src', import.meta.url)) 13 | }, 14 | ] 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/.env.example: -------------------------------------------------------------------------------- 1 | VITE_WALLET_CONNECT_PROJECT_ID= 2 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | zkSync + wagmi + Web3Modal + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vite-wagmi-web3modal", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@wagmi/core": "^1.4.12", 13 | "@web3modal/wagmi": "^3.5.1", 14 | "viem": "^1.20.3", 15 | "vue": "^3.3.4" 16 | }, 17 | "devDependencies": { 18 | "@vitejs/plugin-vue": "^4.2.3", 19 | "typescript": "^5.0.2", 20 | "vite": "^4.4.5", 21 | "vue-tsc": "^1.8.5" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/src/components/Account.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/src/components/BlockNumber.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/src/components/Connected.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/src/components/WatchPendingTransactions.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import './wagmi' 4 | import App from './App.vue' 5 | 6 | createApp(App).mount('#app') 7 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/src/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/vue/vite-wagmi-web3modal/src/style.css -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/src/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import { erc20ABI } from "@wagmi/core"; 2 | 3 | export const daiContractConfig = { 4 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 5 | abi: erc20ABI, 6 | } as const; 7 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === 'bigint' ? value_.toString() : value_ 6 | return typeof replacer === 'function' ? replacer(key, value) : value 7 | }, 8 | space, 9 | ) 10 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi-web3modal/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import { fileURLToPath } from 'node:url' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue({ 8 | template: { 9 | compilerOptions: { 10 | isCustomElement: (tag) => ['w3m-button'].includes(tag), 11 | }, 12 | }, 13 | })], 14 | resolve: { 15 | alias: [ 16 | { 17 | find: '@', 18 | replacement: fileURLToPath(new URL('./src', import.meta.url)) 19 | }, 20 | ] 21 | }, 22 | }) 23 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | zkSync + wagmi + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vite-wagmi-web3modal", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@wagmi/core": "^1.4.12", 13 | "viem": "^1.20.3", 14 | "vue": "^3.3.4" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^4.2.3", 18 | "typescript": "^5.0.2", 19 | "vite": "^4.4.5", 20 | "vue-tsc": "^1.8.5" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/src/components/Account.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/src/components/BlockNumber.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/src/components/Connect.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/src/components/Connected.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/src/components/WatchPendingTransactions.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import './wagmi' 4 | import App from './App.vue' 5 | 6 | createApp(App).mount('#app') 7 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/src/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matter-labs/zksync-frontend-templates/beab20f5f06cb302939701a1d6baa0df095fb692/templates/vue/vite-wagmi/src/style.css -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/src/utils/contracts.ts: -------------------------------------------------------------------------------- 1 | import { erc20ABI } from "@wagmi/core"; 2 | 3 | export const daiContractConfig = { 4 | address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address 5 | abi: erc20ABI, 6 | } as const; 7 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const stringify: typeof JSON.stringify = (value, replacer, space) => 2 | JSON.stringify( 3 | value, 4 | (key, value_) => { 5 | const value = typeof value_ === 'bigint' ? value_.toString() : value_ 6 | return typeof replacer === 'function' ? replacer(key, value) : value 7 | }, 8 | space, 9 | ) 10 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/vue/vite-wagmi/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import { fileURLToPath } from 'node:url' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue()], 8 | resolve: { 9 | alias: [ 10 | { 11 | find: '@', 12 | replacement: fileURLToPath(new URL('./src', import.meta.url)) 13 | }, 14 | ] 15 | }, 16 | }) 17 | --------------------------------------------------------------------------------