diff --git a/packages/mask/src/plugins/FindTruman/SNSAdaptor/hooks/useConst.ts b/packages/mask/src/plugins/FindTruman/SNSAdaptor/hooks/useConst.ts index 2772d03b605f..4a5396ee0abb 100644 --- a/packages/mask/src/plugins/FindTruman/SNSAdaptor/hooks/useConst.ts +++ b/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) { - 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() diff --git a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx index edf2dcfd6c97..fbc25fa4eb3b 100644 --- a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx +++ b/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 diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx index 33f0ed6e4670..6c90d79de240 100644 --- a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx +++ b/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( diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx index c3accaad1d32..d9016a170c51 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx +++ b/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 diff --git a/packages/mask/src/plugins/dHEDGE/UI/InvestDialog.tsx b/packages/mask/src/plugins/dHEDGE/UI/InvestDialog.tsx index 96e30a9465bd..5b0c373a7e3f 100644 --- a/packages/mask/src/plugins/dHEDGE/UI/InvestDialog.tsx +++ b/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 diff --git a/packages/shared-base/src/utils/index.ts b/packages/shared-base/src/utils/index.ts index ebbcc29848cc..f28974bf6f6a 100644 --- a/packages/shared-base/src/utils/index.ts +++ b/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' diff --git a/packages/shared-base/src/utils/renderString.ts b/packages/shared-base/src/utils/renderString.ts new file mode 100644 index 000000000000..000cb7b0b070 --- /dev/null +++ b/packages/shared-base/src/utils/renderString.ts @@ -0,0 +1,9 @@ +type ExtraKeys = S extends `${infer HEAD}{${infer K}}${infer TAIL}` + ? K extends '}' + ? never + : ExtraKeys | K | ExtraKeys + : never + +export function renderString(template: T, data: Record, string | number>) { + return template.replace(/{{([^}]+)}}/gm, (match, p1: keyof typeof data) => data[p1]?.toString() ?? match) +}