feat(donation): migrate USDT donation from Polygon to Optimism

.env.dev

@@ -28,8 +28,6 @@ NEXT_PUBLIC_PROGRAMMABLE_SEARCH_ENGINE_ID=004538121411474993797:xkl3sdy-9su
 NEXT_PUBLIC_TRAVELOGGERS_URL=https://nft-develop.matters.town
 NEXT_PUBLIC_LOGBOOKS_URL=https://logbooks-vercel.matters.town
 NEXT_PUBLIC_ALCHEMY_KEY=1dMo8xjAFo8M6Y4sQ45WTD3Zie2-MA4C
-NEXT_PUBLIC_USDT_CONTRACT_ADDRESS=0xfe4F5145f6e09952a5ba9e956ED0C25e3Fa4c7F1
-NEXT_PUBLIC_CURATION_CONTRACT_ADDRESS=0xa219c6722008aa22828b31a13ab9ba93bb91222c
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=315393900359-2r9fundftis7dc0tdeo2hf8630nfdd8h.apps.googleusercontent.com
 NEXT_PUBLIC_TWITTER_CLIENT_ID=X3d6Szg5bnVCMm5wRWxSVmhXUTc6MTpjaQ
 NEXT_PUBLIC_FACEBOOK_CLIENT_ID=1072677713882819

.env.local.example

@@ -28,8 +28,6 @@ NEXT_PUBLIC_PROGRAMMABLE_SEARCH_ENGINE_ID=004538121411474993797:xkl3sdy-9su
 NEXT_PUBLIC_TRAVELOGGERS_URL=https://nft-develop.matters.town
 NEXT_PUBLIC_LOGBOOKS_URL=https://logbooks-vercel.matters.town
 NEXT_PUBLIC_ALCHEMY_KEY=1dMo8xjAFo8M6Y4sQ45WTD3Zie2-MA4C
-NEXT_PUBLIC_USDT_CONTRACT_ADDRESS=0xfe4F5145f6e09952a5ba9e956ED0C25e3Fa4c7F1
-NEXT_PUBLIC_CURATION_CONTRACT_ADDRESS=0xa219c6722008aa22828b31a13ab9ba93bb91222c
 NEXT_PUBLIC_NOMAD_MATTERS_CAMPAIGN_LINK=/@rsdyobw/22048-launching-the-nomad-matters-initiative
 DEBUG=false
 PLAYWRIGHT_RUNTIME_ENV=local

.env.prod

@@ -28,8 +28,6 @@ NEXT_PUBLIC_PROGRAMMABLE_SEARCH_ENGINE_ID=004538121411474993797:xkl3sdy-9su
 NEXT_PUBLIC_TRAVELOGGERS_URL=https://traveloggers.matters.town
 NEXT_PUBLIC_LOGBOOKS_URL=https://logbook.matters.town
 NEXT_PUBLIC_ALCHEMY_KEY=bOu-fCphi9mvePsxg968Qe-pidHQNdlT
-NEXT_PUBLIC_USDT_CONTRACT_ADDRESS=0xc2132D05D31c914a87C6611C10748AEb04B58e8F
-NEXT_PUBLIC_CURATION_CONTRACT_ADDRESS=0x5edebbdae7b5c79a69aacf7873796bb1ec664db8
 NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY=0x4AAAAAAAKVODkJMwfIxG78
 DEBUG=false
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=751677068109-rkml7q9ujf8ems09cclh7qckf14svcgs.apps.googleusercontent.com

package.json

@@ -70,6 +70,7 @@
     "autosize": "^6.0.1",
     "classnames": "^2.3.2",
     "colorthief": "^2.4.0",
+    "cross-env": "^7.0.3",
     "d3-array": "^2.12.1",
     "d3-axis": "^2.1.0",
     "d3-ease": "^2.0.0",
@@ -121,9 +122,8 @@
     "url-loader": "^4.1.1",
     "use-debounce": "^9.0.4",
     "validator": "^13.11.0",
-    "cross-env": "^7.0.3",
-    "viem": "^1.2.12",
-    "wagmi": "^1.3.8"
+    "viem": "^1.21.4",
+    "wagmi": "^1.4.13"
   },
   "devDependencies": {
     "@apollo/react-testing": "^3.1.3",

src/common/enums/contract.ts

@@ -0,0 +1,50 @@
+const isProd = process.env.NEXT_PUBLIC_RUNTIME_ENV === 'production'
+
+export const contract = {
+  Ethereum: isProd
+    ? {
+        traveloggersAddress:
+          '0x8515ba8ef2cf2f2ba44b26ff20337d7a2bc5e6d8' as `0x${string}`,
+      }
+    : {
+        traveloggersAddress:
+          '0xae89d81ab5c668661200fa9c6ed45fe1707f7097' as `0x${string}`,
+      },
+  Polygon: isProd
+    ? {
+        logbookAddress:
+          '0xcdf8D568EC808de5fCBb35849B5bAFB5d444D4c0' as `0x${string}`,
+        curationAddress:
+          '0x5edebbdae7B5C79a69AaCF7873796bb1Ec664DB8' as `0x${string}`,
+        curationBlockNum: '34564355',
+        tokenAddress:
+          '0xc2132D05D31c914a87C6611C10748AEb04B58e8F' as `0x${string}`,
+        tokenDecimals: 6,
+      }
+    : {
+        logbookAddress:
+          '0x203197e074b7a2f4ff6890815e4657a9c47c68b1' as `0x${string}`,
+        curationAddress:
+          '0xa219C6722008aa22828B31A13ab9Ba93bB91222c' as `0x${string}`,
+        curationBlockNum: '28675517' as `0x${string}`,
+        tokenAddress:
+          '0xfe4F5145f6e09952a5ba9e956ED0C25e3Fa4c7F1' as `0x${string}`,
+        tokenDecimals: 6,
+      },
+  Optimism: isProd
+    ? {
+        curationAddress: '' as `0x${string}`, // TODO
+        curationBlockNum: '' as `0x${string}`, // TODO
+        tokenAddress:
+          '0x94b008aA00579c1307B0EF2c499aD98a8ce58e58' as `0x${string}`,
+        tokenDecimals: 6,
+      }
+    : {
+        curationAddress:
+          '0x92a117aeA74963Cd0CEdF9C50f99435451a291F7' as `0x${string}`,
+        curationBlockNum: '8438904',
+        tokenAddress:
+          '0x5fd84259d66Cd46123540766Be93DFE6D43130D7' as `0x${string}`,
+        tokenDecimals: 6,
+      },
+}

src/common/enums/index.ts

@@ -1,5 +1,6 @@
 export * from './analytics'
 export * from './chart'
+export * from './contract'
 export * from './cookie'
 export * from './csp'
 export * from './errorCode'

src/common/enums/payment.ts

@@ -40,6 +40,7 @@ export enum QUOTE_CURRENCY {
 
 export enum CHAIN {
   POLYGON = 'Polygon',
+  OPTIMISM = 'Optimism',
 }
 
 export const PLATFORM_FEE = {

src/common/utils/wallet.ts

@@ -1,21 +1,39 @@
 import { Chain, configureChains, createConfig, createStorage } from 'wagmi'
-import { goerli, mainnet, polygon, polygonMumbai } from 'wagmi/chains'
+import {
+  goerli,
+  mainnet,
+  optimism,
+  optimismSepolia,
+  polygon,
+  polygonMumbai,
+} from 'wagmi/chains'
 import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
 import { alchemyProvider } from 'wagmi/providers/alchemy'
 
+import { Chain as GQLChain } from '~/gql/graphql'
+
 const isTest = process.env.NODE_ENV === 'test'
 const isProd = process.env.NEXT_PUBLIC_RUNTIME_ENV === 'production'
 const alchemyId = process.env.NEXT_PUBLIC_ALCHEMY_KEY!
 
 export const featureSupportedChains = {
-  curation: isProd ? [polygon] : [polygonMumbai],
+  curation: isProd ? [optimism] : [optimismSepolia],
   ens: isProd ? [mainnet] : [goerli],
 }
 
+export const explorers = {
+  [GQLChain.Polygon]: isProd
+    ? polygon.blockExplorers.etherscan
+    : polygonMumbai.blockExplorers.etherscan,
+  [GQLChain.Optimism]: isProd
+    ? optimism.blockExplorers.etherscan
+    : optimismSepolia.blockExplorers.default, // TODO: update to etherscan
+}
+
 const defaultChains: Chain[] = isProd
-  ? [mainnet, polygon]
-  : [goerli, polygonMumbai]
+  ? [mainnet, optimism]
+  : [goerli, optimismSepolia]
 
 export const { publicClient, chains } = configureChains(defaultChains, [
   alchemyProvider({ apiKey: alchemyId }),

src/components/Forms/PaymentForm/PayTo/CurrencyChoice/Tips/index.tsx

@@ -48,7 +48,7 @@ const Tips = () => {
           <Translate
             zh_hant="USDT 餘額不正確？參考 "
             zh_hans="USDT 余额不正确？参考 "
-            en="How to transfer funds to Polygon? Check the "
+            en="How to transfer funds to Optimism? Check the "
           />
           <a
             className="u-link-green"

src/components/Forms/PaymentForm/PayTo/SetAmount/SetAmountBalance/index.tsx

@@ -77,9 +77,9 @@ const SetAmountBalance: React.FC<SetAmountBalanceProps> = ({
         <a href={GUIDE_LINKS.payment[lang]} target="_blank" rel="noreferrer">
           <TextIcon size="xs" textDecoration="underline" color="greyDark">
             <Translate
-              zh_hant="如何移轉資金到 Polygon？"
-              zh_hans="如何移转资金到 Polygon？"
-              en="How to transfer funds to Polygon?"
+              zh_hant="如何移轉資金到 Optimism？"
+              zh_hans="如何移转资金到 Optimism？"
+              en="How to transfer funds to Optimism?"
             />
           </TextIcon>
         </a>

src/components/Forms/PaymentForm/PayTo/SetAmount/SetAmountHeader/WhyPolygonDialog/index.tsx → src/components/Forms/PaymentForm/PayTo/SetAmount/SetAmountHeader/WhyOptimismDialog/index.tsx

@@ -9,11 +9,11 @@ import {
   useDialogSwitch,
 } from '~/components'
 
-interface WhyPolygonDialogProps {
+interface WhyOptimismDialogProps {
   children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode
 }
 
-const WhyPolygonDialog = ({ children }: WhyPolygonDialogProps) => {
+const WhyOptimismDialog = ({ children }: WhyOptimismDialogProps) => {
   const { lang } = useContext(LanguageContext)
 
   const {
@@ -101,10 +101,10 @@ const WhyPolygonDialog = ({ children }: WhyPolygonDialogProps) => {
   )
 }
 
-const LazyWhyPolygonDialog = (props: WhyPolygonDialogProps) => (
-  <Dialog.Lazy mounted={<WhyPolygonDialog {...props} />}>
+const LazyWhyOptimismDialog = (props: WhyOptimismDialogProps) => (
+  <Dialog.Lazy mounted={<WhyOptimismDialog {...props} />}>
     {({ openDialog }) => <>{props.children({ openDialog })}</>}
   </Dialog.Lazy>
 )
 
-export default LazyWhyPolygonDialog
+export default LazyWhyOptimismDialog

src/components/Forms/PaymentForm/PayTo/SetAmount/SetAmountHeader/index.tsx

@@ -5,7 +5,7 @@ import { Button, IconInfo24, TextIcon, Translate } from '~/components'
 
 import CurrencyIndicator from './CurrencyIndicator'
 import styles from './styles.module.css'
-import WhyPolygonDialog from './WhyPolygonDialog'
+import WhyOptimismDialog from './WhyOptimismDialog'
 
 type SetAmountHeaderProps = {
   currency: CURRENCY
@@ -72,13 +72,13 @@ const SetAmountHeader: React.FC<SetAmountHeaderProps> = ({
               )}
             </>
 
-            <WhyPolygonDialog>
+            <WhyOptimismDialog>
               {({ openDialog }) => (
                 <Button onClick={openDialog}>
                   <TextIcon icon={<IconInfo24 size="md" color="grey" />} />
                 </Button>
               )}
-            </WhyPolygonDialog>
+            </WhyOptimismDialog>
           </>
         )}
       </section>

src/components/Forms/PaymentForm/Processing/index.tsx

@@ -9,6 +9,7 @@ import { waitForTransaction } from 'wagmi/actions'
 
 import {
   CHAIN,
+  contract,
   PAYMENT_CURRENCY as CURRENCY,
   SUPPORT_SUCCESS_ANIMATION,
 } from '~/common/enums'
@@ -211,12 +212,12 @@ const USDTProcessingForm: React.FC<Props> = ({
     isError,
     write: curate,
   } = useContractWrite({
-    address: process.env.NEXT_PUBLIC_CURATION_CONTRACT_ADDRESS as `0x${string}`,
+    address: contract.Optimism.curationAddress,
     abi: CurationABI,
     functionName: 'curate',
     args: [
       recipient.info.ethAddress as `0x${string}`,
-      process.env.NEXT_PUBLIC_USDT_CONTRACT_ADDRESS as `0x${string}`,
+      contract.Optimism.tokenAddress,
       parseUnits(amount.toString() as `${number}`, balanceUSDTData?.decimals!),
       `ipfs://${article?.dataHash}`,
     ],
@@ -234,7 +235,7 @@ const USDTProcessingForm: React.FC<Props> = ({
         purpose: 'donation',
         recipientId: recipient.id,
         targetId,
-        chain: CHAIN.POLYGON,
+        chain: CHAIN.OPTIMISM,
         txHash: data.hash,
       },
       update: (cache) => {

src/components/Hook/useCuration.ts

@@ -1,10 +1,11 @@
 import { useContractWrite, usePrepareContractWrite } from 'wagmi'
 
+import { contract } from '~/common/enums'
 import { CurationABI } from '~/common/utils'
 
 export const useCurate = () => {
   const { config } = usePrepareContractWrite({
-    address: process.env.NEXT_PUBLIC_CURATION_CONTRACT_ADDRESS as `0x${string}`,
+    address: contract.Optimism.curationAddress,
     abi: CurationABI,
     functionName: 'curate',
   })

src/components/Hook/useERC20.ts

@@ -8,20 +8,18 @@ import {
   usePrepareContractWrite,
 } from 'wagmi'
 
+import { contract } from '~/common/enums'
 import { featureSupportedChains, MaxUint256 } from '~/common/utils'
 import { ViewerContext } from '~/components'
 
 export const useAllowanceUSDT = () => {
   const { address } = useAccount()
 
   return useContractRead({
-    address: process.env.NEXT_PUBLIC_USDT_CONTRACT_ADDRESS as `0x${string}`,
+    address: contract.Optimism.tokenAddress,
     abi: erc20ABI,
     functionName: 'allowance',
-    args: [
-      address as `0x${string}`,
-      process.env.NEXT_PUBLIC_CURATION_CONTRACT_ADDRESS as `0x${string}`,
-    ],
+    args: [address as `0x${string}`, contract.Optimism.curationAddress],
   })
 }
 
@@ -36,8 +34,7 @@ export const useBalanceUSDT = ({
 
   return useBalance({
     address: (addr || viewerEthAddress) as `0x${string}`,
-    token: (process.env.NEXT_PUBLIC_USDT_CONTRACT_ADDRESS ||
-      '') as `0x${string}`,
+    token: (contract.Optimism.tokenAddress || '') as `0x${string}`,
     chainId: targetNetwork.id,
     cacheTime: 5_000,
   })
@@ -61,13 +58,10 @@ export const useBalanceEther = ({
 
 export const useApproveUSDT = () => {
   const { config } = usePrepareContractWrite({
-    address: process.env.NEXT_PUBLIC_USDT_CONTRACT_ADDRESS as `0x${string}`,
+    address: contract.Optimism.tokenAddress,
     abi: erc20ABI,
     functionName: 'approve',
-    args: [
-      process.env.NEXT_PUBLIC_CURATION_CONTRACT_ADDRESS as `0x${string}`,
-      MaxUint256,
-    ],
+    args: [contract.Optimism.curationAddress, MaxUint256],
   })
 
   return useContractWrite(config)

src/components/Transaction/State/index.tsx

@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl'
 
-import { featureSupportedChains } from '~/common/utils'
+import { explorers } from '~/common/utils'
 import {
   Button,
   IconExternalLink16,
@@ -34,8 +34,7 @@ const State = ({ state, message, blockchainTx }: StateProps) => {
   }
 
   if (state === TransactionState.Succeeded && !!blockchainTx) {
-    const targetNetwork = featureSupportedChains.curation[0]
-    const explorerUrl = targetNetwork.blockExplorers?.default.url!
+    const explorerUrl = explorers[blockchainTx.chain].url
 
     return (
       <Button

src/views/ArticleDetail/SupportWidget/Animation.tsx

@@ -105,9 +105,9 @@ const Animation: React.FC<Props> = ({
         )}
         {isShipWaiting && currency === CURRENCY.USDT && (
           <Translate
-            zh_hant="持續與 Polygon 網絡同步，稍後更新至 Matters"
-            zh_hans="持续与 Polygon 网络同步，稍后更新至 Matters"
-            en="Request on Polygon network will be confirmed and synced to Matters in a bit"
+            zh_hant="持續與 Optimism 網絡同步，稍後更新至 Matters"
+            zh_hans="持续与 Optimism 网络同步，稍后更新至 Matters"
+            en="Request on Optimism network will be confirmed and synced to Matters in a bit"
           />
         )}
       </p>

src/views/Guide/content_ZhHans.ts

@@ -22,7 +22,7 @@ ${process.env.NEXT_PUBLIC_SITE_BRAND_NAME} 的经济系统支援法币（港币
 
 *   [Matters 支付与提现指南](https://matters.town/@hi176/387119?locale=zh-Hans)
 
-如果你想用手机进行登入、绑定钱包及进行 USDT-Polygon 支付，请参考我们的手机版专属指南，可以为你解决绝大部分的疑惑。
+如果你想用手机进行登入、绑定钱包及进行 USDT-Optimism 支付，请参考我们的手机版专属指南，可以为你解决绝大部分的疑惑。
 
 *   [Matters 钱包与支付指南（手机版）](https://matters.town/@hi176/387120)
 

src/views/Guide/content_ZhHant.ts

@@ -22,7 +22,7 @@ ${process.env.NEXT_PUBLIC_SITE_BRAND_NAME} 的經濟系統支援法幣（港幣
 
 *   [Matters 支付與提現指南](https://matters.town/@hi176/387119)
 
-如果你想用手機進行登入、綁定錢包及進行 USDT-Polygon 支付，請參考我們的手機版專屬指南，可以為你解決絕大部分的疑惑。
+如果你想用手機進行登入、綁定錢包及進行 USDT-Optimism 支付，請參考我們的手機版專屬指南，可以為你解決絕大部分的疑惑。
 
 *   [Matters 錢包與支付指南（手機版）](https://matters.town/@hi176/387120)
 

src/views/Guide/content_en.ts

@@ -21,7 +21,7 @@ Currently, ${process.env.NEXT_PUBLIC_SITE_BRAND_NAME} support donation with fiat
 
 *   [How to Withdraw and Process Payment on ${process.env.NEXT_PUBLIC_SITE_BRAND_NAME}](https://matters.town/@hi176/387119?locale=en)
 
-If you want to log in, bind wallets, or process USDT-Polygon payments on phone, please refer to our guide for cell phones, which will answer most of your questions.
+If you want to log in, bind wallets, or process USDT-Optimism payments on phone, please refer to our guide for cell phones, which will answer most of your questions.
 
 *   [Mobile Guide for Crypto Wallet and Payment](https://matters.town/@hi176/387120?locale=en)