feat: add requestLogin api

DimensionDev · Mar 23, 2024 · 6683fd2 · 6683fd2
1 parent df51410
commit 6683fd2
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 5 deletions.
diff --git a/packages/plugin-infra/src/site-adaptor/context.ts b/packages/plugin-infra/src/site-adaptor/context.ts
@@ -19,6 +19,7 @@ export interface __SiteAdaptorContext__ {
     publishPost: ((mediaObjects: Array<string | Blob>, options?: any) => Promise<string | null>) | undefined
     getSearchedKeyword: (() => string) | undefined
     connectPersona: () => Promise<void>
+    requestLogin?: (...args: any[]) => void
 }
 export let lastRecognizedProfile: __SiteAdaptorContext__['lastRecognizedProfile']
 export let currentVisitingProfile: __SiteAdaptorContext__['currentVisitingProfile']
@@ -33,6 +34,7 @@ export let postMessage: __SiteAdaptorContext__['postMessage']
 export let publishPost: __SiteAdaptorContext__['publishPost']
 export let getSearchedKeyword: __SiteAdaptorContext__['getSearchedKeyword']
 export let connectPersona: __SiteAdaptorContext__['connectPersona']
+export let requestLogin: __SiteAdaptorContext__['requestLogin']
 export function __setSiteAdaptorContext__(value: __SiteAdaptorContext__) {
     ;({
         lastRecognizedProfile,
@@ -48,5 +50,6 @@ export function __setSiteAdaptorContext__(value: __SiteAdaptorContext__) {
         publishPost,
         getSearchedKeyword,
         connectPersona,
+        requestLogin,
     } = value)
 }
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/RequestLoginFooter.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/RequestLoginFooter.tsx
@@ -0,0 +1,29 @@
+import { usePostInfoDetails } from '@masknet/plugin-infra/content-script'
+import { ActionButton, makeStyles } from '@masknet/theme'
+import { Box } from '@mui/material'
+import { useRedPacketTrans } from '../../locales/index.js'
+
+const useStyles = makeStyles()((theme) => {
+    return {
+        footer: {
+            padding: theme.spacing(1.5),
+        },
+    }
+})
+
+interface OperationFooterProps {
+    onRequest?(): void
+}
+export function RequestLoginFooter({ onRequest }: OperationFooterProps) {
+    const { classes } = useStyles()
+    const t = useRedPacketTrans()
+    const source = usePostInfoDetails.source()
+
+    return (
+        <Box className={classes.footer}>
+            <ActionButton fullWidth variant="roundedDark" onClick={onRequest}>
+                {t.connect_to_platform({ platform: source! })}
+            </ActionButton>
+        </Box>
+    )
+}
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx
@@ -1,12 +1,12 @@
 import { useLastRecognizedIdentity, usePostInfoDetails, usePostLink } from '@masknet/plugin-infra/content-script'
-import { share } from '@masknet/plugin-infra/content-script/context'
+import { requestLogin, share } from '@masknet/plugin-infra/content-script/context'
 import { LoadingStatus, TransactionConfirmModal } from '@masknet/shared'
 import { EMPTY_LIST, EnhanceableSite, NetworkPluginID, Sniffings } from '@masknet/shared-base'
 import { makeStyles, parseColor } from '@masknet/theme'
 import type { HappyRedPacketV4 } from '@masknet/web3-contracts/types/HappyRedPacketV4.js'
 import { useChainContext, useNetwork, useNetworkContext } from '@masknet/web3-hooks-base'
 import { EVMChainResolver, FireflyRedPacket } from '@masknet/web3-providers'
-import { RedPacketStatus, type RedPacketJSONPayload, type FireflyRedPacketAPI } from '@masknet/web3-providers/types'
+import { RedPacketStatus, type FireflyRedPacketAPI, type RedPacketJSONPayload } from '@masknet/web3-providers/types'
 import { TokenType, formatBalance, isZero } from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { Card, Grow, Stack, Typography } from '@mui/material'
@@ -18,6 +18,7 @@ import { useClaimCallback } from '../hooks/useClaimCallback.js'
 import { useRedPacketContract } from '../hooks/useRedPacketContract.js'
 import { useRefundCallback } from '../hooks/useRefundCallback.js'
 import { OperationFooter } from './OperationFooter.js'
+import { RequestLoginFooter } from './RequestLoginFooter.js'
 import { useRedPacketCover } from './useRedPacketCover.js'
 
 const useStyles = makeStyles<{ outdated: boolean }>()((theme, { outdated }) => {
@@ -422,7 +423,9 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
                     </div>
                 }
             </Card>
-            {outdated ? null : (
+            {outdated ?
+                null
+            : myProfileId ?
                 <OperationFooter
                     chainId={payloadChainId}
                     canClaim={canClaim}
@@ -432,7 +435,12 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
                     onShare={handleShare}
                     onClaimOrRefund={onClaimOrRefund}
                 />
-            )}
+            :   <RequestLoginFooter
+                    onRequest={() => {
+                        requestLogin?.(source)
+                    }}
+                />
+            }
         </>
     )
 })

diff --git a/packages/plugins/RedPacket/src/locales/en-US.json b/packages/plugins/RedPacket/src/locales/en-US.json
@@ -173,5 +173,6 @@
     "no_claim_data": "No claims yet for this Lucky Drop",
     "no_claim_history_data": "No Lucky Drops claimed",
     "no_sent_history_data": "<div>No Lucky Drops posted.</div> <div>Select 🎁 when you compose a post to start your first drop.<div>",
-    "post_on": "Post on"
+    "post_on": "Post on",
+    "connect_to_platform": "Connect to {{ platform }}"
 }