adaper mulit domain and build docker

.github/workflows/docker-release.yml

@@ -0,0 +1,37 @@
+name: Build docker image
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    if: github.repository == 'crustio/ethda-home'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/[email protected]
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.4.0'
+
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Run install
+        run: pnpm install --frozen-lockfile
+
+      - name: Build for production
+        run: pnpm build
+
+      - name: Build docker and publish
+        run: |
+          docker build -t crustio/ethda-home:latest .
+          docker login -u ${{ secrets.DOCKER_HUB_USER_NAME }} -p ${{ secrets.DOCKER_HUB_PASSWORD }}
+          docker push crustio/ethda-home:latest
+      - name: Update docker compose
+        run: ${{ secrets.RUN_CMD }}

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:20-alpine as runner
+
+FROM runner
+RUN npm install serve -g
+WORKDIR /app
+
+COPY /out .
+
+EXPOSE 3000
+
+CMD serve

app/blobtx/page.tsx

@@ -5,18 +5,19 @@ import { AToastFull } from '@/components/AToast'
 import { Header } from '@/components/Header'
 import { ContentBox, DivBox, StyledButton } from '@/components/StyleButton'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/dropdown-menu'
+import { withClient } from '@/components/withClient'
+import { docsURL } from '@/constants'
 import { EncodeBlobs, createMetaDataForBlobs, formatEthereumAddress, scrollToTop, shortStr, sleep } from '@/utils'
 import { ethda } from '@/utils/wagmi'
 import { Common } from '@ethereumjs/common'
 import { BlobEIP4844Transaction } from '@ethereumjs/tx'
 import { CrossCircledIcon } from '@radix-ui/react-icons'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { ChangeEvent, Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { Address, WalletClient, bytesToHex, createWalletClient, http, parseEther, parseTransaction, stringToHex } from 'viem'
-import { useAccount, useDisconnect, usePublicClient, useSendTransaction, useWalletClient } from 'wagmi'
+import { english, generateMnemonic, mnemonicToAccount } from 'viem/accounts'
+import { useAccount, useDisconnect, usePublicClient, useSendTransaction } from 'wagmi'
 import { openTo } from '../../utils/common'
-import { useConnectModal } from '@rainbow-me/rainbowkit'
-import { withClient } from '@/components/withClient'
-import { generateMnemonic, mnemonicToAccount, english } from 'viem/accounts'
 
 function ConnnectBtn(p: { onClick?: () => void }) {
   const modal = useConnectModal()
@@ -369,7 +370,7 @@ const BlobTX = () => {
     openTo(ethda.custom.bridgeUrl)
   }
   const onClickAddNet = () => {
-    openTo('https://docs.ethda.io/resources/network-configuration/add-ethda-network/')
+    openTo(`${docsURL()}/resources/network-configuration/add-ethda-network/`)
   }
 
   useEffect(() => {

components/Banner.tsx

@@ -1,4 +1,5 @@
 import { Header } from '@/components/Header'
+import { docsURL } from '@/constants'
 import Link from 'next/link'
 
 export const Banner = () => {
@@ -15,7 +16,7 @@ export const Banner = () => {
             <div className={'text-[70px] mo:text-[38px] md:text-[60px]'}>Availability Layer2</div>
             <div className='mo:flex justify-center'>
               <Link
-                href={'https://docs.ethda.io/'}
+                href={docsURL()}
                 target={'_blank'}
                 className={
                   'flex items-center justify-center w-[200px] h-[58px] border border-white rounded-[12px] font-semibold text-[20px] mo:text-2xl mt-8'

components/Header.tsx

@@ -8,6 +8,7 @@ import { HiOutlineMenu, HiOutlineX } from 'react-icons/hi'
 import classNames from 'classnames'
 import FullModal from './FullModal'
 import { ethda } from '@/utils/wagmi'
+import { docsURL } from '@/constants'
 
 type HeaderType = {
   logo?: string
@@ -84,7 +85,7 @@ export const Header: FC<HeaderType> = ({
 
     {
       text: 'Document',
-      to: 'https://docs.ethda.io/',
+      to: docsURL(),
     },
   ]
 
@@ -139,7 +140,7 @@ export const Header: FC<HeaderType> = ({
                 <div onClick={() => onSwitchTo('blobtx')} className={`nav-item ${pathname === '/blobtx' ? 'active' : ''}`}>
                   Try BlobTx
                 </div>
-                <Link href={'https://docs.ethda.io/'} target={'_blank'} className={`block nav-item`}>
+                <Link href={docsURL()} target={'_blank'} className={`block nav-item`}>
                   Document
                 </Link>
               </div>

components/Home/ABanner.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { Header } from '../Header'
+import { docsURL } from '@/constants'
 
 const Typewriter = ({ phrases }: any) => {
   const [currentPhraseIndex, setCurrentPhraseIndex] = useState(0)
@@ -94,7 +95,7 @@ const ABanner = () => {
         <div className='mt-auto mb-5 w-full '>
           <div className='flex justify-center rounded-sm '>
             <button
-              onClick={() => window.open('https://docs.ethda.io/')}
+              onClick={() => window.open(docsURL())}
               style={{
                 background: 'linear-gradient(90deg, rgba(222, 149, 25, 0.6) 0%, rgba(142, 70, 24, 0.6) 100%)',
                 //   backgroundImage: 'linear-gradient(90deg, rgba(222, 149, 25, 0.6) 0%, rgba(142, 70, 24, 0.6) 100%)',

constants.ts

@@ -1,3 +1,5 @@
+import { DomainRef } from "./hooks/useConfigDomain";
+
 export const NULL_ADDRESS = '0x0000000000000000000000000000000000000000';
 export const ZERO_BYTES32 =
   '0x0000000000000000000000000000000000000000000000000000000000000000';
@@ -6,3 +8,5 @@ export const BlobTxBytesPerFieldElement = 32; // Size in bytes of a field elemen
 export const BlobTxFieldElementsPerBlob = 4096;
 export const BLOB_SIZE =
   BlobTxBytesPerFieldElement * BlobTxFieldElementsPerBlob;
+
+export const docsURL = () => `https://docs.${DomainRef.value}`

hooks/useConfigDomain.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+
+export const DomainRef = {
+  value: 'ethda.io',
+}
+
+const supportDomain = ['ethda.io', 'ethda.xyz', 'ethda.com']
+
+export const getAvilableDomain = () => {
+  if (location.hostname == 'localhost') return supportDomain[0]
+  if (location.hostname.match(/^\d+\.\d+\.\d+\.\d+$/)?.length == 1) return supportDomain[0]
+  const domains = location.hostname.split('.')
+  let domain = domains.slice(-2).join('.')
+  if (domains[1] == 'ipns') {
+    domain = domains[0].replaceAll('-', '.')
+  }
+  if (supportDomain.includes(domain)) {
+    return location.hostname
+  }
+  return supportDomain[0]
+}
+export function useConfigDomain() {
+  useEffect(() => {
+    DomainRef.value = getAvilableDomain()
+  }, [])
+}