feat: migrate Polls plugin to new plugin infra (#3500)

* feat: migrate Polls plugin to new plugin infra

* fix: add worker

* chore: migrate to new dialog entry

* feat: load worker correctly

* chore: change publisher

* chore: remove message register from old arch

* fixup! chore: remove message register from old arch

Co-authored-by: Jack Works <[email protected]>

packages/maskbook/src/plugin-infra/register.ts

@@ -8,6 +8,7 @@ import '../plugins/Snapshot'
 import '../plugins/Collectible'
 import '../plugins/External'
 import '../plugins/Gitcoin'
+import '../plugins/Polls'
 import '../plugins/FileService'
 // import '../plugins/NFT'
 // import '../plugins/Airdrop'

packages/maskbook/src/plugins/PluginSerivce.ts

@@ -8,13 +8,7 @@
  */
 
 // Please make sure you have registered your plugin UI at ./PluginUI
-import './Wallet/messages'
-import './RedPacket/messages'
-import './Gitcoin/messages'
-import './Polls/utils'
 import './Transak/messages'
 import './Trader/messages'
-import './Polls/utils'
 import './ITO/messages'
-import './Airdrop/messages'
 import './dHEDGE/messages'

packages/maskbook/src/plugins/PluginUI.ts

@@ -7,7 +7,6 @@ const plugins = new Set<PluginConfig>()
 export const PluginUI: ReadonlySet<PluginConfig> = plugins
 
 import { Flags } from '../utils/flags'
-import { PollsPluginDefine } from './Polls/define'
 import { StorybookPluginDefine } from './Storybook/define'
 import { TraderPluginDefine } from './Trader/define'
 import { TransakPluginDefine } from './Transak/define'
@@ -19,7 +18,6 @@ import { DHedgePluginDefine } from './dHEDGE/define'
 sideEffect.then(() => {
     if (Flags.ito_enabled) plugins.add(ITO_PluginDefine)
     if (Flags.vcent_enabled) plugins.add(VCentPluginDefine)
-    if (Flags.poll_enabled) plugins.add(PollsPluginDefine)
     if (Flags.trader_enabled) plugins.add(TraderPluginDefine)
     if (Flags.transak_enabled) plugins.add(TransakPluginDefine)
     if (Flags.dhedge_enabled) plugins.add(DHedgePluginDefine)

packages/maskbook/src/plugins/Polls/UI/PollsDialog.tsx → packages/maskbook/src/plugins/Polls/SNSAdaptor/PollsDialog.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect } from 'react'
 import {
     makeStyles,
     DialogContent,
-    DialogProps,
     Typography,
     IconButton,
     Button,
@@ -27,7 +26,7 @@ import { PollCardUI } from './Polls'
 import type { PollMetaData } from '../types'
 import { POLL_META_KEY_1 } from '../constants'
 import { InjectedDialog } from '../../../components/shared/InjectedDialog'
-import { PluginPollRPC } from '../utils'
+import { PluginPollRPC } from '../messages'
 
 const useNewPollStyles = makeStyles((theme) => ({
     line: {
@@ -121,7 +120,7 @@ function NewPollUI(props: PollsDialogProps & NewPollProps) {
         return usePortalShadowRoot((container) => (
             <Select
                 variant="standard"
-                MenuProps={{ container: props.DialogProps?.container ?? container }}
+                MenuProps={{ container }}
                 value={defaultIndex}
                 onChange={(e) => fn(e.target.value as number)}>
                 {options.map((item, index) => (
@@ -246,13 +245,10 @@ const useStyles = makeStyles((theme) => {
 
 interface PollsDialogProps extends withClasses<'wrapper'> {
     open: boolean
-    onConfirm: (opt?: any) => void
-    onDecline: () => void
-    DialogProps?: Partial<DialogProps>
+    onClose: () => void
 }
 
 export default function PollsDialog(props: PollsDialogProps) {
-    const classes = useStylesExtends(useStyles(), props)
     const state = useState(0)
     const [, setTabState] = state
     const loading = useState(false)
@@ -265,7 +261,7 @@ export default function PollsDialog(props: PollsDialogProps) {
 
     const insertPoll = (data?: PollMetaData | null) => {
         editActivatedPostMetadata((next) => (data ? next.set(POLL_META_KEY_1, data) : next.delete(POLL_META_KEY_1)))
-        props.onConfirm()
+        props.onClose()
     }
 
     const senderName = useCurrentIdentity()?.linkedPersona?.nickname
@@ -302,7 +298,7 @@ export default function PollsDialog(props: PollsDialogProps) {
     }
 
     return (
-        <InjectedDialog open={props.open} onClose={props.onDecline} title={t('plugin_poll_display_name')}>
+        <InjectedDialog open={props.open} onClose={props.onClose} title={t('plugin_poll_display_name')}>
             <DialogContent>
                 <AbstractTab height={450} {...tabProps} />
             </DialogContent>

packages/maskbook/src/plugins/Polls/UI/PollsInPost.tsx → packages/maskbook/src/plugins/Polls/SNSAdaptor/PollsInPost.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react'
 import MaskbookPluginWrapper from '../../MaskbookPluginWrapper'
 import type { TypedMessage } from '../../../protocols/typed-message'
-import { renderWithPollMetadata, PollMetadataReader, PluginPollRPC } from '../utils'
+import { PluginPollRPC } from '../messages'
+import { renderWithPollMetadata, PollMetadataReader } from '../helpers'
 import type { PollGunDB } from '../Services'
 import { PollCardUI } from './Polls'
 import { PollMetaData, PollStatus } from '../types'

packages/maskbook/src/plugins/Polls/SNSAdaptor/index.tsx

@@ -0,0 +1,23 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { base } from '../base'
+import { POLL_META_KEY_1 } from '../constants'
+import type { PollMetaData } from '../types'
+import { PollMetadataReader } from '../helpers'
+import PollsDialog from './PollsDialog'
+import PollsInPost from './PollsInPost'
+
+const sns: Plugin.SNSAdaptor.Definition = {
+    ...base,
+    init(signal) {},
+    DecryptedInspector: function Comp(props) {
+        const metadata = PollMetadataReader(props.message.meta)
+        if (!metadata.ok) return null
+        return <PollsInPost {...props} />
+    },
+    CompositionDialogMetadataBadgeRender: new Map([
+        [POLL_META_KEY_1, (meta: PollMetaData) => `a poll of '${meta.question}' from ${meta.sender}`],
+    ]),
+    CompositionDialogEntry: { label: '🗳️ Poll', dialog: PollsDialog },
+}
+
+export default sns

packages/maskbook/src/plugins/Polls/Worker/index.ts

@@ -0,0 +1,9 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { base } from '../base'
+import '../messages'
+
+const worker: Plugin.Worker.Definition = {
+    ...base,
+    init(signal) {},
+}
+export default worker

packages/maskbook/src/plugins/Polls/base.ts

@@ -0,0 +1,15 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { PLUGIN_ID, PLUGIN_ICON, PLUGIN_NAME, PLUGIN_DESCRIPTION } from './constants'
+
+export const base: Plugin.Shared.Definition = {
+    ID: PLUGIN_ID,
+    icon: PLUGIN_ICON,
+    name: { fallback: PLUGIN_NAME },
+    description: { fallback: PLUGIN_DESCRIPTION },
+    publisher: { name: { fallback: 'XiChi' }, link: 'https://github.com/xichi' },
+    enableRequirement: {
+        architecture: { app: false, web: true },
+        networks: { type: 'opt-out', networks: {} },
+        target: 'stable',
+    },
+}

packages/maskbook/src/plugins/Polls/constants.ts

@@ -2,3 +2,9 @@ export const pluginName = 'Poll'
 export const identifier = 'com.maskbook.poll'
 export const POLL_META_KEY_1 = 'com.maskbook.poll:1'
 export const PollGunServer = 'com.maskbook.plugin.polls'
+
+export const PLUGIN_META_KEY = 'com.maskbook.poll:1'
+export const PLUGIN_ID = 'com.maskbook.poll'
+export const PLUGIN_NAME = 'Poll'
+export const PLUGIN_ICON = '🗳️'
+export const PLUGIN_DESCRIPTION = 'Easily create a Poll for reciving public votes.'

packages/maskbook/src/plugins/Polls/helpers.ts

@@ -0,0 +1,8 @@
+import { createTypedMessageMetadataReader, createRenderWithMetadata } from '../../protocols/typed-message/metadata'
+import type { PollMetaData } from './types'
+import { POLL_META_KEY_1 } from './constants'
+import schema from './schema.json'
+
+export const PollMetadataReader = createTypedMessageMetadataReader<PollMetaData>(POLL_META_KEY_1, schema)
+export const renderWithPollMetadata = createRenderWithMetadata(PollMetadataReader)
+if (import.meta.webpackHot) import.meta.webpackHot.accept()

packages/maskbook/src/plugins/Polls/index.ts

@@ -0,0 +1,15 @@
+import { registerPlugin } from '@masknet/plugin-infra'
+import { base } from './base'
+
+registerPlugin({
+    ...base,
+    SNSAdaptor: {
+        load: () => import('./SNSAdaptor'),
+        hotModuleReload: (hot) =>
+            import.meta.webpackHot?.accept('./SNSAdaptor/index', () => hot(import('./SNSAdaptor'))),
+    },
+    Worker: {
+        load: () => import('./Worker'),
+        hotModuleReload: (hot) => import.meta.webpackHot?.accept('./Worker/index', () => hot(import('./Worker'))),
+    },
+})

packages/maskbook/src/plugins/Polls/utils.ts → packages/maskbook/src/plugins/Polls/messages.ts

@@ -1,16 +1,10 @@
-import { createTypedMessageMetadataReader, createRenderWithMetadata } from '../../protocols/typed-message/metadata'
-import type { PollMetaData } from './types'
-import { identifier, POLL_META_KEY_1 } from './constants'
-import schema from './schema.json'
+import { identifier } from './constants'
 import { createPluginMessage } from '../utils/createPluginMessage'
 import { createPluginRPC } from '../utils/createPluginRPC'
 import { OnDemandWorker } from '../../web-workers/OnDemandWorker'
 import { AsyncCall } from 'async-call-rpc'
 import { WorkerChannel } from 'async-call-rpc/utils/web/worker'
 
-export const PollMetadataReader = createTypedMessageMetadataReader<PollMetaData>(POLL_META_KEY_1, schema)
-export const renderWithPollMetadata = createRenderWithMetadata(PollMetadataReader)
-if (import.meta.webpackHot) import.meta.webpackHot.accept()
 const PollMessage = createPluginMessage<{ _: unknown }>(identifier)
 export const PluginPollRPC = createPluginRPC(
     identifier,