Skip to content

feat: add SocialNetwork.Shared#utils.share to open share popup #5871

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
UncleBill merged 3 commits into from
Mar 23, 2022
Merged

feat: add SocialNetwork.Shared#utils.share to open share popup #5871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
46cda77
feat: introduce SocialNetwork.Shared#utils.share as succession of get…
UncleBill Mar 14, 2022
329ae77
fix: popup gets blocked
UncleBill Mar 17, 2022
2b77f50
fix: color of mask icon in popup
UncleBill Mar 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion packages/mask/src/extension/background-script/SocialNetworkService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,16 @@ export async function openProfilePage(network: string, userId?: string) {
export async function openShareLink(SNSIdentifier: string, post: string) {
const url = (await getNetworkWorker(SNSIdentifier)).utils.getShareLinkURL?.(post)
if (!url) return
browser.tabs.create({ active: true, url: url.toString() })
const width = 700
const height = 520
browser.windows.create({
url: url.toString(),
width,
height,
type: 'popup',
left: (screen.width - width) / 2,
top: (screen.height - height) / 2,
})
}

const key = 'openSNSAndActivatePlugin'
Expand Down
34 changes: 15 additions & 19 deletions packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,24 +85,20 @@ export function PurchaseDialog(props: ActionBarProps) {
}, [project.pricePerTokenInWei, token.value?.decimals])

const postLink = usePostLink()
const shareLink = activatedSocialNetworkUI.utils
.getShareLinkURL?.(
[
t(
isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
? 'plugin_artblocks_share'
: 'plugin_artblocks_share_no_official_account',
{
name: project.name,
price: price,
symbol: token.value?.symbol,
},
),
'#mask_io #artblocks_io #nft',
postLink,
].join('\n'),
)
.toString()
const shareText = [
t(
isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
? 'plugin_artblocks_share'
: 'plugin_artblocks_share_no_official_account',
{
name: project.name,
price: price,
symbol: token.value?.symbol,
},
),
'#mask_io #artblocks_io #nft',
postLink,
].join('\n')

const { setDialog: setTransactionDialog } = useRemoteControlledDialog(
WalletMessages.events.transactionDialogUpdated,
Expand Down Expand Up @@ -130,7 +126,7 @@ export function PurchaseDialog(props: ActionBarProps) {
if (purchaseState.type === TransactionStateType.UNKNOWN) return
setTransactionDialog({
open: true,
shareLink,
shareText,
state: purchaseState,
summary: `Minting a new collectible from '${project.name}' collection.`,
})
Expand Down
34 changes: 15 additions & 19 deletions packages/mask/src/plugins/CryptoartAI/SNSAdaptor/CheckoutDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,24 +103,20 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
}, [purchaseCallback])

const assetLink = resolveAssetLinkOnCryptoartAI(asset?.value?.creator?.username, asset?.value?.token_id, chainId)
const shareLink = activatedSocialNetworkUI.utils
.getShareLinkURL?.(
token
? t(
isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
? 'plugin_cryptoartai_share'
: 'plugin_cryptoartai_share_no_official_account',
{
amount: asset?.value?.priceInEth,
symbol: token?.value?.symbol,
title: asset?.value?.title,
assetLink: assetLink,
account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
},
)
: '',
)
.toString()
const shareText = token
? t(
isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
? 'plugin_cryptoartai_share'
: 'plugin_cryptoartai_share_no_official_account',
{
amount: asset?.value?.priceInEth,
symbol: token?.value?.symbol,
title: asset?.value?.title,
assetLink: assetLink,
account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
},
)
: ''

const { setDialog: setTransactionDialog } = useRemoteControlledDialog(
WalletMessages.events.transactionDialogUpdated,
Expand All @@ -139,7 +135,7 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
if (purchaseState.type === TransactionStateType.UNKNOWN) return
setTransactionDialog({
open: true,
shareLink,
shareText,
state: purchaseState,
summary: t('plugin_cryptoartai_buy') + ' ' + asset?.value?.title,
})
Expand Down
34 changes: 15 additions & 19 deletions packages/mask/src/plugins/CryptoartAI/SNSAdaptor/MakeOfferDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,24 +113,20 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
}, [placeBidCallback, amount])

const assetLink = resolveAssetLinkOnCryptoartAI(assetSource?.creator?.username, assetSource?.token_id, chainId)
const shareLink = activatedSocialNetworkUI.utils
.getShareLinkURL?.(
token
? t(
isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
? 'plugin_cryptoartai_offer_share'
: 'plugin_cryptoartai_offer_share_no_official_account',
{
amount: amount,
symbol: token?.value?.symbol,
title: assetSource?.title,
assetLink: assetLink,
account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
},
)
: '',
)
.toString()
const shareText = token
? t(
isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
? 'plugin_cryptoartai_offer_share'
: 'plugin_cryptoartai_offer_share_no_official_account',
{
amount: amount,
symbol: token?.value?.symbol,
title: assetSource?.title,
assetLink: assetLink,
account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
},
)
: ''

const { setDialog: setTransactionDialog } = useRemoteControlledDialog(
WalletMessages.events.transactionDialogUpdated,
Expand All @@ -152,7 +148,7 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
if (placeBidState.type === TransactionStateType.UNKNOWN) return
setTransactionDialog({
open: true,
shareLink,
shareText,
state: placeBidState,
summary:
(assetSource?.is24Auction
Expand Down
34 changes: 14 additions & 20 deletions packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,25 +122,19 @@ export function DonateDialog(props: DonateDialogProps) {
// #region transaction dialog

const cashTag = isTwitter(activatedSocialNetworkUI) ? '$' : ''
const shareLink = activatedSocialNetworkUI.utils
.getShareLinkURL?.(
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')
: '',
)
.toString()
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')
: ''

// close the transaction dialog
const { setDialog: setTransactionDialog } = useRemoteControlledDialog(
Expand All @@ -158,7 +152,7 @@ export function DonateDialog(props: DonateDialogProps) {
if (donateState.type === TransactionStateType.UNKNOWN) return
setTransactionDialog({
open: true,
shareLink,
shareText,
state: donateState,
summary: `Donating ${formatBalance(amount, token.decimals)} ${token.symbol} for ${title}.`,
})
Expand Down
66 changes: 29 additions & 37 deletions packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,21 +297,17 @@ export function ITO(props: ITO_Props) {
const isBuyer =
chainId === payload.chain_id && (isGreaterThan(availability?.swapped ?? 0, 0) || Boolean(availability?.claimed))

const shareSuccessLink = activatedSocialNetworkUI.utils
.getShareLinkURL?.(
t(
isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
? 'plugin_ito_claim_success_share'
: 'plugin_ito_claim_success_share_no_official_account',
{
user: sellerName,
link: postLink,
symbol: token.symbol,
account: isFacebook(activatedSocialNetworkUI) ? t('facebook_account') : t('twitter_account'),
},
),
)
.toString()
const successShareText = t(
isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
? 'plugin_ito_claim_success_share'
: 'plugin_ito_claim_success_share_no_official_account',
{
user: sellerName,
link: postLink,
symbol: token.symbol,
account: isFacebook(activatedSocialNetworkUI) ? t('facebook_account') : t('twitter_account'),
},
)
const canWithdraw = useMemo(
() =>
!availability?.destructed &&
Expand All @@ -330,8 +326,8 @@ export function ITO(props: ITO_Props) {
const refundAllAmount = tradeInfo?.buyInfo && isZero(tradeInfo?.buyInfo.amount_sold)

const onShareSuccess = useCallback(async () => {
window.open(shareSuccessLink, '_blank', 'noopener noreferrer')
}, [shareSuccessLink])
activatedSocialNetworkUI.utils.share?.(successShareText)
}, [successShareText])
// #endregion

const retryITOCard = useCallback(() => {
Expand All @@ -340,7 +336,7 @@ export function ITO(props: ITO_Props) {
}, [retryPoolTradeInfo, retryAvailability])

// #region claim
const [claimState, claimCallback, resetClaimCallback] = useClaimCallback([pid], payload.contract_address)
const [claimState, claimCallback] = useClaimCallback([pid], payload.contract_address)
const onClaimButtonClick = useCallback(() => {
claimCallback()
}, [claimCallback])
Expand Down Expand Up @@ -376,24 +372,20 @@ export function ITO(props: ITO_Props) {

// #endregion

const shareLink = activatedSocialNetworkUI.utils
.getShareLinkURL?.(
t(
isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
? 'plugin_ito_claim_foreshow_share'
: 'plugin_ito_claim_foreshow_share_no_official_account',
{
link: postLink,
name: token.name,
symbol: token.symbol ?? 'token',
account: isFacebook(activatedSocialNetworkUI) ? t('facebook_account') : t('twitter_account'),
},
),
)
.toString()
const shareText = t(
isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
? 'plugin_ito_claim_foreshow_share'
: 'plugin_ito_claim_foreshow_share_no_official_account',
{
link: postLink,
name: token.name,
symbol: token.symbol ?? 'token',
account: isFacebook(activatedSocialNetworkUI) ? t('facebook_account') : t('twitter_account'),
},
)
const onShare = useCallback(async () => {
window.open(shareLink, '_blank', 'noopener noreferrer')
}, [shareLink])
activatedSocialNetworkUI.utils.share?.(shareText)
}, [shareText])
const onUnlock = useCallback(async () => {
setClaimDialogStatus(SwapStatus.Unlock)
setOpenClaimDialog(true)
Expand Down Expand Up @@ -751,7 +743,7 @@ export function ITO(props: ITO_Props) {
{t('plugin_ito_unlock_in_advance')}
</ActionButton>
</Grid>
{shareLink ? (
{shareText ? (
<Grid item xs={6}>
<ActionButton
onClick={onShare}
Expand Down Expand Up @@ -791,7 +783,7 @@ export function ITO(props: ITO_Props) {
status={claimDialogStatus}
total_remaining={total_remaining}
payload={{ ...payload, qualification_address: qualificationAddress }}
shareSuccessLink={shareSuccessLink}
shareSuccessLink={successShareText}
isBuyer={isBuyer}
exchangeTokens={exchange_tokens}
open={openClaimDialog}
Expand Down
28 changes: 12 additions & 16 deletions packages/mask/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,21 +71,17 @@ export function ITO_Card(props: ITO_CardProps) {
// #region transaction dialog
const cashTag = isTwitter(activatedSocialNetworkUI) ? '$' : ''
const postLink = usePostLink()
const shareLink = activatedSocialNetworkUI.utils
.getShareLinkURL?.(
[
`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'),
)
.toString()
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')

// close the transaction dialog
const { setDialog: setTransactionDialog } = useRemoteControlledDialog(
Expand All @@ -104,7 +100,7 @@ export function ITO_Card(props: ITO_CardProps) {
if (claimState.type === TransactionStateType.UNKNOWN) return
setTransactionDialog({
open: true,
shareLink,
shareText,
state: claimState,
summary: `Claiming ${formatBalance(packet.claimable, 18, 6)} ${token?.symbol ?? 'Token'}.`,
})
Expand Down
13 changes: 5 additions & 8 deletions packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawResultDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useCallback } from 'react'
import { difference } from 'lodash-unified'
import { useContainer } from 'unstated-next'
import { makeStyles } from '@masknet/theme'
Expand Down Expand Up @@ -37,17 +36,15 @@ export function DrawResultDialog(props: DrawResultDialogProps) {
const { open, onClose, boxInfo, contractDetailed } = props
const { classes } = useStyles()

const { lastPurchasedTokenIds, setLastPurchasedTokenIds } = useContainer(Context)
const { lastPurchasedTokenIds } = useContainer(Context)

const postLink = usePostLink()
const shareSuccessLink = activatedSocialNetworkUI.utils.getShareLinkURL?.(
`I just claimed a #MaskBox with @realMaskNetwork. Install mask.io and create your own NFT mystery box! \n ${postLink}`,
)
const shareText = `I just claimed a #MaskBox with @realMaskNetwork. Install mask.io and create your own NFT mystery box! \n ${postLink}`

const onShare = useCallback(() => {
const onShare = () => {
onClose()
window.open(shareSuccessLink, '_blank', 'noopener noreferrer')
}, [shareSuccessLink])
activatedSocialNetworkUI.utils.share?.(shareText)
}

if (!contractDetailed) return null

Expand Down
Loading