/evm-inscr

Primary LanguageTypeScriptMIT LicenseMIT

evm-inscr

EVM inscription project.

Getting Started

A Next.js project.

Available Scripts

Running the development server.

    npm run dev

Building for production.

    npm run build

Running the production server.

    npm run start

Create a docker image.

    docker build -t evm-inscr .

Running within a docker container.

    # -p map port,  -v map data volumn
    docker run -d -p 3000:3000 -v ./data:/app/data evm-inscr

针对Mac M1/M2 arm cpu,要打包docker发到linux amd64服务器,需要用docker buildx

    # for mainnet
    ./buildx-and-gzip.sh mainnet
    # for testnet
    ./buildx-and-gzip.sh testnet
    # 省略参数,默认是testnet
    ./buildx-and-gzip.sh

然后把.gz包发送到服务器,再在服务器端docker import

    docker import elex.tar.gz ebo:amd-v1.0.0
    # 检查是否导入成功
    docker images

然后,进入到服务目录,停止并删除同名docker容器,重新启动服务

    cd /data/nextjs_site/evm-inscr
    # 停止并删除同名docker容器
    docker stop evm-inscr
    docker rm evm-inscr
    # 启动新容器
    docker run --name evm-inscr -d -p 3000:3000 -v $(pwd)/data:/app/data evm-inscr:amd-v1.0.0 node /app/server.js
    # 检查容器是否正常运行
    docker ps
    # 查看容器日志
    docker logs -f evm-inscr

Running ts-node 本地程序前先在package.json中设置

"type":"module"

或者 加命令行参数 --compiler-options

ts-node --compiler-options {\"module\":\"CommonJS\"} src/utils/debounce.ts

一些注意事项

Antd form validator

自定义validator一定要返回能被解决的promise,特别是debounce(validator)的情况。

validator函数中返回了一个promise,但如果这个promise内部通过setTimeout设置了一个定时器,然后在定时器执行前通过clearTimeout取消了定时器,将导致promise永远pending状态,不会被resolve或者reject。 解决办法之一:保存 promise 的 resolve 和 reject 回调,在特定条件下主动调用 reject 或 resolve 来终止 promise

通过 useWatchvalidateFields 来动态更新disable状态

注意 ⚠️ validateOnly: true 不更新UI,将导致错误信息不显示

const dnsVal = Form.useWatch('dns', form)

const [submitDisabled, setSubmitDisabled] = useState(false)

useEffect(() => {
if (!dnsVal) return
form
    .validateFields(['dns'], { validateOnly: false })
    .then(() => {
    setSubmitDisabled(false)
    })
    .catch(() => {
    setSubmitDisabled(true)
    })
}, [form, dnsVal])

Learn More

Ant Design

A design system for enterprise-level products. Create an efficient and enjoyable work experience.

Go To Documentation

CSS / styled-jsx

Next.js comes with built-in support for CSS and styled-jsx. Styled-jsx is full, scoped and component-friendly CSS support for JSX (rendered on the server or the client).

Go To Documentation

Fetch

Next.js has a built-in polyfill for the fetch API. You don't need to worry about using it on either server or client side.

Go To Documentation

Axios

Promise based HTTP client for the browser and node.js.

Go To Documentation

Environment Variables

Use environment variables in your next.js project for server side, client or both.

Go To Documentation

Reverse Proxy

Proxying some URLs can be useful when you have a separate API backend development server and you want to send API requests on the same domain.

Go To Documentation

Bundle Analyzer

Use webpack-bundle-analyzer in your Next.js project. Visualize size of webpack output files with an interactive zoomable treemap.

Go To Documentation

React Query

Hooks for fetching, caching and updating asynchronous data in React.

Go To Documentation

react-use

A Collection of useful React hooks.

Go To Documentation

React Redux

Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

Go To Documentation

RTK Query

RTK Query is a powerful data fetching and caching tool

Go To Documentation

next-i18next

next-i18next is a plugin for Next.js projects that allows you to get translations up and running quickly and easily, while fully supporting SSR, multiple namespaces with codesplitting, etc.

Go To Documentation

ESLint

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

Go To Documentation

Prettier

An opinionated code formatter; Supports many languages; Integrates with most editors.

Go To Documentation

Testing Library

The React Testing Library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils.

Go To Documentation

Cypress

Fast, easy and reliable testing for anything that runs in a browser.

Go To Documentation

Docker

Docker simplifies and accelerates your workflow, while giving developers the freedom to innovate with their choice of tools, application stacks, and deployment environments for each project.

Go To Documentation

License

MIT