refactor: compose complicated string with renderString

packages/mask/src/plugins/FindTruman/SNSAdaptor/hooks/useConst.ts

@@ -1,12 +1,9 @@
-import { useI18N } from '../../../../utils'
-import { fetchConst } from '../../Worker/apis'
+import { renderString } from '@masknet/shared-base'
 import { useCallback, useEffect, useState } from 'react'
-import type { FindTrumanConst } from '../../types'
+import { useI18N } from '../../../../utils'
 import { FindTruman_Const } from '../../constants'
-
-function renderString(template: string, data: Record<string, string | number>) {
-    return template.replace(/{{([^}]+)}}/g, (match, p1) => data[p1]?.toString() ?? match)
-}
+import type { FindTrumanConst } from '../../types'
+import { fetchConst } from '../../Worker/apis'
 
 export function useConst() {
     const { i18n } = useI18N()

packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx

@@ -18,7 +18,6 @@ import { InjectedDialog } from '../../../components/shared/InjectedDialog'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
-import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { useI18N } from '../../../utils'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
@@ -28,6 +27,8 @@ import { SelectTokenDialogEvent, WalletMessages } from '../../Wallet/messages'
 import { useDonateCallback } from '../hooks/useDonateCallback'
 import { PluginGitcoinMessages } from '../messages'
 import { rightShift } from '@masknet/web3-shared-base'
+import { renderString } from '@masknet/shared-base'
+import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 
 const useStyles = makeStyles()((theme) => ({
     paper: {
@@ -122,18 +123,20 @@ export function DonateDialog(props: DonateDialogProps) {
     // #region transaction dialog
 
     const cashTag = isTwitter(activatedSocialNetworkUI) ? '$' : ''
+    const promoteMask =
+        isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+            ? renderString('Follow @{account} (mask.io) to donate Gitcoin grants.', {
+                  account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
+              })
+            : ''
     const shareText = token
-        ? [
-              `I just donated ${title} with ${formatBalance(amount, token.decimals)} ${cashTag}${token.symbol}. ${
-                  isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
-                      ? `Follow @${
-                            isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
-                        } (mask.io) to donate Gitcoin grants.`
-                      : ''
-              }`,
-              '#mask_io',
-              postLink,
-          ].join('\n')
+        ? renderString('I just donated {title} with {amount} {cashTag}{symbol}. {promoteMask}\n#mask_io', {
+              title,
+              amount: formatBalance(amount, token.decimals),
+              cashTag,
+              symbol: token?.symbol || '',
+              promoteMask,
+          })
         : ''
 
     // close the transaction dialog

packages/mask/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx

@@ -6,12 +6,13 @@ import { usePostLink } from '../../../components/DataSource/usePostInfo'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
-import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { WalletMessages } from '../../Wallet/messages'
 import { useMaskClaimCallback } from './hooks/useMaskClaimCallback'
 import { useMaskITO_Packet } from './hooks/useMaskITO_Packet'
 import { useI18N } from '../../../utils/i18n-next-ui'
+import { renderString } from '@masknet/shared-base'
+import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -71,17 +72,22 @@ export function ITO_Card(props: ITO_CardProps) {
     // #region transaction dialog
     const cashTag = isTwitter(activatedSocialNetworkUI) ? '$' : ''
     const postLink = usePostLink()
-    const shareText = [
-        `I just claimed ${cashTag}${token?.symbol} with ${formatBalance(packet?.claimable, 18, 6)}.${
-            isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
-                ? `Follow @${
-                      isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
-                  } (mask.io) to claim airdrop.`
-                : ''
-        }`,
-        '#mask_io',
-        postLink,
-    ].join('\n')
+    const promoteMask =
+        isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+            ? renderString('Follow @{account} (mask.io) to claim airdrop.', {
+                  account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
+              })
+            : ''
+    const shareText = renderString(
+        'I just claimed {cashTag}{symbol} with {amount}. {promoteMask}\n#mask_io\n{postLink}',
+        {
+            cashTag,
+            symbol: token?.symbol || '',
+            amount: formatBalance(packet?.claimable, 18, 6),
+            postLink: postLink.toString(),
+            promoteMask,
+        },
+    )
 
     // close the transaction dialog
     const { setDialog: setTransactionDialog } = useRemoteControlledDialog(

packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx

@@ -37,6 +37,7 @@ import { PluginTraderMessages } from '../../messages'
 import { SettingsDialog } from './SettingsDialog'
 import { useSortedTrades } from './hooks/useSortedTrades'
 import { useUpdateBalance } from './hooks/useUpdateBalance'
+import { renderString } from '@masknet/shared-base'
 
 const useStyles = makeStyles()(() => {
     return {
@@ -286,25 +287,29 @@ export function Trader(props: TraderProps) {
     }, [dispatchTradeStore, inputToken, outputToken, inputAmount])
 
     // #region remote controlled transaction dialog
-    const cashTag = isTwitter(activatedSocialNetworkUI) ? '$' : ''
+    const isOnTwitter = isTwitter(activatedSocialNetworkUI)
+    const cashTag = isOnTwitter ? '$' : ''
+    const maskAccount = isOnTwitter ? t('twitter_account') : t('facebook_account')
+    const promoteMask =
+        isOnTwitter || isFacebook(activatedSocialNetworkUI)
+            ? renderString('Follow @{account} (mask.io) to swap cryptocurrencies on {platform}', {
+                  account: maskAccount,
+                  platform: isOnTwitter ? 'Twitter' : 'Facebook',
+              })
+            : ''
     const shareText =
         focusedTrade?.value && inputToken && outputToken
-            ? [
-                  `I just swapped ${formatBalance(focusedTrade.value.inputAmount, inputToken.decimals, 6)} ${cashTag}${
-                      inputToken.symbol
-                  } for ${formatBalance(focusedTrade.value.outputAmount, outputToken.decimals, 6)} ${cashTag}${
-                      outputToken.symbol
-                  }.${
-                      isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
-                          ? `Follow @${
-                                isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
-                            } (mask.io) to swap cryptocurrencies on ${
-                                isTwitter(activatedSocialNetworkUI) ? 'Twitter' : 'Facebook'
-                            }.`
-                          : ''
-                  }`,
-                  '#mask_io',
-              ].join('\n')
+            ? renderString(
+                  'I just swapped {inputAmount} {cashTag}{inputSymbol} for {outputAmount} {cashTag}{outputSymbol}. {promoteMask}\n#mask_io',
+                  {
+                      inputAmount: formatBalance(focusedTrade.value.inputAmount, inputToken.decimals, 6),
+                      cashTag,
+                      inputSymbol: inputToken.symbol || '',
+                      outputAmount: formatBalance(focusedTrade.value.outputAmount, outputToken.decimals, 6),
+                      outputSymbol: outputToken.symbol || '',
+                      promoteMask,
+                  },
+              )
             : ''
 
     // #endregion

packages/mask/src/plugins/dHEDGE/UI/InvestDialog.tsx

@@ -27,6 +27,7 @@ import { SelectTokenDialogEvent, WalletMessages } from '../../Wallet/messages'
 import { useInvestCallback } from '../hooks/useInvestCallback'
 import { PluginDHedgeMessages } from '../messages'
 import type { Pool } from '../types'
+import { renderString } from '@masknet/shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     paper: {
@@ -144,17 +145,21 @@ export function InvestDialog() {
 
     // #region transaction dialog
     const cashTag = isTwitter(activatedSocialNetworkUI) ? '$' : ''
+    const maskAccount = isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
+    const promoteMask =
+        isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+            ? renderString('Follow @{account} (mask.io) to invest dHEDGE pools', {
+                  account: maskAccount,
+              })
+            : ''
     const shareText = token
-        ? [
-              `I just invested ${formatBalance(amount, token.decimals)} ${cashTag}${token.symbol} in ${pool?.name}. ${
-                  isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
-                      ? `Follow @${
-                            isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
-                        } (mask.io) to invest dHEDGE pools.`
-                      : ''
-              }`,
-              '#mask_io',
-          ].join('\n')
+        ? renderString('I just invested {amount} {cashTag}{symbol} in {poolName}. {promoteMask}\n#mask_io', {
+              amount: formatBalance(amount, token?.decimals),
+              cashTag,
+              symbol: token.symbol || '',
+              poolName: pool?.name || '',
+              promoteMask,
+          })
         : ''
 
     // on close transaction dialog

packages/shared-base/src/utils/index.ts

@@ -1,7 +1,9 @@
 export * from './detect'
+export * from './getAssetAsBlobURL'
 export * from './getLocalImplementation'
 export * from './parseURL'
 export * from './pollingTask'
+export * from './renderString'
 export * from './sessionStorageCache'
 export * from './subscription'
 export * from './getAssetAsBlobURL'

packages/shared-base/src/utils/renderString.ts

@@ -0,0 +1,9 @@
+type ExtraKeys<S extends string> = S extends `${infer HEAD}{${infer K}}${infer TAIL}`
+    ? K extends '}'
+        ? never
+        : ExtraKeys<HEAD> | K | ExtraKeys<TAIL>
+    : never
+
+export function renderString<T extends string>(template: T, data: Record<ExtraKeys<T>, string | number>) {
+    return template.replace(/{{([^}]+)}}/gm, (match, p1: keyof typeof data) => data[p1]?.toString() ?? match)
+}