feat: migrate snapshot to new plugin infra (#3458)

* feat: migrate snapshot to new plugin infra

* chore: fix typo and cleanup

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

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

@@ -3,4 +3,5 @@
 
 import '@dimensiondev/plugin-example'
 import '../plugins/RedPacket'
+import '../plugins/Snapshot'
 import '../plugins/External'

packages/maskbook/src/plugins/Collectible/UI/Collectible.tsx

@@ -33,7 +33,7 @@ import { currentCollectibleProviderSettings } from '../settings'
 import { FootnoteMenu, FootnoteMenuOption } from '../../Trader/UI/trader/FootnoteMenu'
 import { MaskbookTextIcon } from '../../../resources/MaskbookIcon'
 import { resolveAssetLinkOnOpenSea, resolveCollectibleProviderName } from '../pipes'
-import { Markdown } from '../../Snapshot/UI/Markdown'
+import { Markdown } from '../../Snapshot/SNSAdaptor/Markdown'
 import { ActionBar } from './ActionBar'
 import { useChainId } from '@dimensiondev/web3-shared'
 import { getEnumAsArray } from '@dimensiondev/maskbook-shared'

packages/maskbook/src/plugins/Collectible/UI/TokenTab.tsx

@@ -4,7 +4,7 @@ import { CollectibleTab } from './CollectibleTab'
 import { CollectibleState } from '../hooks/useCollectibleState'
 import { FormattedAddress } from '@dimensiondev/maskbook-shared'
 import { resolveAddressLinkOnExplorer, getChainName, ChainId, useChainId } from '@dimensiondev/web3-shared'
-import { Markdown } from '../../Snapshot/UI/Markdown'
+import { Markdown } from '../../Snapshot/SNSAdaptor/Markdown'
 import { Account } from './Account'
 import { resolveTraitLinkOnOpenSea } from '../pipes'
 

packages/maskbook/src/plugins/PluginSerivce.ts

@@ -19,5 +19,4 @@ import './Polls/utils'
 import './ITO/messages'
 import './Airdrop/messages'
 import './Collectible/messages'
-import './Snapshot/messages'
 import './dHEDGE/messages'

packages/maskbook/src/plugins/PluginUI.ts

@@ -21,7 +21,6 @@ import { AirdropPluginDefine } from './Airdrop/define'
 import { CollectiblesPluginDefine } from './Collectible/define'
 import { sideEffect } from '../utils/side-effects'
 import { VCentPluginDefine } from './VCent/define'
-import { SnapShotPluginDefine } from './Snapshot/define'
 import { DHedgePluginDefine } from './dHEDGE/define'
 
 sideEffect.then(() => {
@@ -36,7 +35,6 @@ sideEffect.then(() => {
     if (Flags.trader_enabled) plugins.add(TraderPluginDefine)
     if (Flags.transak_enabled) plugins.add(TransakPluginDefine)
     if (Flags.airdrop_enabled) plugins.add(AirdropPluginDefine)
-    if (Flags.snapshot_enabled) plugins.add(SnapShotPluginDefine)
     if (Flags.collectibles_enabled) plugins.add(CollectiblesPluginDefine)
     if (Flags.dhedge_enabled) plugins.add(DHedgePluginDefine)
     if (process.env.STORYBOOK) plugins.add(StorybookPluginDefine)

packages/maskbook/src/plugins/RedPacket/messages.ts

@@ -1,13 +1,15 @@
 import { RedPacketPluginID } from './constants'
 import { createPluginMessage } from '../utils/createPluginMessage'
 import { createPluginRPC } from '../utils/createPluginRPC'
+import type { WebExtensionMessage } from '@dimensiondev/holoflows-kit'
 
 export interface RedPacketMessages {
     redPacketUpdated: void
     _: unknown
 }
 if (import.meta.webpackHot) import.meta.webpackHot.accept()
-export const RedPacketMessage = createPluginMessage<RedPacketMessages>(RedPacketPluginID)
+export const RedPacketMessage: WebExtensionMessage<RedPacketMessages> =
+    createPluginMessage<RedPacketMessages>(RedPacketPluginID)
 export const RedPacketRPC = createPluginRPC(
     RedPacketPluginID,
     () => import('./Worker/services'),

packages/maskbook/src/plugins/Snapshot/UI/InformationCard.tsx → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/InformationCard.tsx

@@ -13,7 +13,7 @@ import { TokenIcon } from '../../../extension/options-page/DashboardComponents/T
 import { useI18N } from '../../../utils'
 import { EthereumBlockie } from '../../../web3/UI/EthereumBlockie'
 import { SnapshotContext } from '../context'
-import { useProposal } from '../hooks/useProposal'
+import { useProposal } from './hooks/useProposal'
 import { SnapshotCard } from './SnapshotCard'
 
 export interface InformationCardProps {}

packages/maskbook/src/plugins/Snapshot/UI/Markdown.tsx → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/Markdown.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core'
 import { useStylesExtends } from '../../../components/custom-ui-helper'
-import { useRemarkable } from '../hooks/useRemarkable'
+import { useRemarkable } from './hooks/useRemarkable'
 
 const useStyles = makeStyles((theme) => ({
     root: {

packages/maskbook/src/plugins/Snapshot/UI/PostInspector.tsx → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/PostInspector.tsx

@@ -1,8 +1,8 @@
 import { SnapshotContext } from '../context'
-import { getProposalIdentifier } from '../helpers'
+import { getProposalIdentifier } from './helpers'
 import { Snapshot } from './Snapshot'
 import { LoadingFailCard } from './LoadingFailCard'
-import { useRetry } from '../hooks/useRetry'
+import { useRetry } from './hooks/useRetry'
 
 export interface PostInspectorProps {
     url: string

packages/maskbook/src/plugins/Snapshot/UI/ProposalTab.tsx → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/ProposalTab.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 import { VotingCard } from './VotingCard'
-import { useProposal } from '../hooks/useProposal'
+import { useProposal } from './hooks/useProposal'
 import { SnapshotTab } from './SnapshotTab'
 import { ReadMeCard } from './ReadmeCard'
 import { SnapshotContext } from '../context'

packages/maskbook/src/plugins/Snapshot/UI/ReadmeCard.tsx → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/ReadmeCard.tsx

@@ -1,13 +1,8 @@
 import { useContext } from 'react'
-import { makeStyles } from '@material-ui/core'
 import { Markdown } from './Markdown'
-import { useProposal } from '../hooks/useProposal'
+import { useProposal } from './hooks/useProposal'
 import { SnapshotContext } from '../context'
 
-const useStyles = makeStyles((theme) => {
-    return {}
-})
-
 export interface ReadMeCardProps {}
 
 export function ReadMeCard(props: ReadMeCardProps) {

packages/maskbook/src/plugins/Snapshot/UI/ResultCard.tsx → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/ResultCard.tsx

@@ -4,12 +4,12 @@ import { makeStyles, Box, List, ListItem, Typography, LinearProgress, withStyles
 import { ShadowRootTooltip, useI18N } from '../../../utils'
 import millify from 'millify'
 import { SnapshotContext } from '../context'
-import { useProposal } from '../hooks/useProposal'
-import { useVotes } from '../hooks/useVotes'
-import { useResults } from '../hooks/useResults'
+import { useProposal } from './hooks/useProposal'
+import { useVotes } from './hooks/useVotes'
+import { useResults } from './hooks/useResults'
 import { SnapshotCard } from './SnapshotCard'
 import { parse } from 'json2csv'
-import { useRetry } from '../hooks/useRetry'
+import { useRetry } from './hooks/useRetry'
 import { LoadingFailCard } from './LoadingFailCard'
 import { LoadingCard } from './LoadingCard'
 
@@ -76,10 +76,10 @@ function Content() {
     const classes = useStyles()
     const { t } = useI18N()
     const listRef = useRef<HTMLSpanElement[]>([])
-    const [tooltipVisibles, setTooltipVisibles] = useState<boolean[]>(new Array(results.length).fill(false))
+    const [tooltipsVisible, setTooltipsVisible] = useState<readonly boolean[]>(new Array(results.length).fill(false))
 
     useEffect(() => {
-        setTooltipVisibles(listRef.current.map((element) => (element.offsetWidth === choiceMaxWidth ? true : false)))
+        setTooltipsVisible(listRef.current.map((element) => (element.offsetWidth === choiceMaxWidth ? true : false)))
     }, [])
 
     const dataForCsv = useMemo(
@@ -109,7 +109,7 @@ function Content() {
                                 }}
                                 title={<Typography color="textPrimary">{result.choice}</Typography>}
                                 placement="top"
-                                disableHoverListener={!tooltipVisibles[i]}
+                                disableHoverListener={!tooltipsVisible[i]}
                                 arrow>
                                 <Typography
                                     ref={(ref) => {

packages/maskbook/src/plugins/Snapshot/UI/Snapshot.tsx → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/Snapshot.tsx

@@ -1,7 +1,7 @@
 import { useState, useContext } from 'react'
 import { makeStyles, Box, Card, CardHeader, CardContent, Typography, Tab, Tabs, Chip, Paper } from '@material-ui/core'
 import { SnapshotContext } from '../context'
-import { useProposal } from '../hooks/useProposal'
+import { useProposal } from './hooks/useProposal'
 import { ProposalTab } from './ProposalTab'
 import { ProgressTab } from './ProgressTab'
 

packages/maskbook/src/plugins/Snapshot/UI/SnapshotCard.tsx → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/SnapshotCard.tsx

@@ -1,5 +1,4 @@
 import { Card, makeStyles, CardContent, CardHeader, Typography } from '@material-ui/core'
-import { useI18N } from '../../../utils'
 
 const useStyles = makeStyles((theme) => {
     return {
@@ -40,7 +39,6 @@ export interface SnapshotCardProps {
 export function SnapshotCard(props: SnapshotCardProps) {
     const { title, children } = props
 
-    const { t } = useI18N()
     const classes = useStyles()
 
     return (

packages/maskbook/src/plugins/Snapshot/UI/Vote.tsx → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/Vote.tsx

@@ -2,7 +2,7 @@ import { useBlockie } from '@dimensiondev/web3-shared'
 import { Avatar, Box, makeStyles } from '@material-ui/core'
 import type { VoteItem as VoteType } from '../types'
 
-const useStlyes = makeStyles(() => ({
+const useStyles = makeStyles(() => ({
     avatar: {
         width: 16,
         height: 16,
@@ -14,7 +14,7 @@ export interface VoteProps {
 }
 
 export function Vote(props: VoteProps) {
-    const classes = useStlyes()
+    const classes = useStyles()
     const blockie = useBlockie(props.vote.address)
 
     return (

packages/maskbook/src/plugins/Snapshot/UI/VotesCard.tsx → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/VotesCard.tsx

@@ -7,8 +7,8 @@ import { useContext } from 'react'
 import { useI18N } from '../../../utils'
 import { EthereumBlockie } from '../../../web3/UI/EthereumBlockie'
 import { SnapshotContext } from '../context'
-import { useRetry } from '../hooks/useRetry'
-import { useVotes } from '../hooks/useVotes'
+import { useRetry } from './hooks/useRetry'
+import { useVotes } from './hooks/useVotes'
 import type { VoteItem } from '../types'
 import { LoadingCard } from './LoadingCard'
 import { LoadingFailCard } from './LoadingFailCard'

packages/maskbook/src/plugins/Snapshot/UI/VotingCard.tsx → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx

@@ -6,12 +6,12 @@ import { SnapshotContext } from '../context'
 import { useAccount } from '@dimensiondev/web3-shared'
 import { PluginSnapshotRPC } from '../messages'
 import { SnapshotCard } from './SnapshotCard'
-import { useProposal } from '../hooks/useProposal'
-import { usePower } from '../hooks/usePower'
+import { useProposal } from './hooks/useProposal'
+import { usePower } from './hooks/usePower'
 import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
 import { VoteConfirmDialog } from './VoteConfirmDialog'
 import { useSnackbarCallback } from '../../../extension/options-page/DashboardDialogs/Base'
-import { useRetry } from '../hooks/useRetry'
+import { useRetry } from './hooks/useRetry'
 
 const useStyles = makeStyles((theme) => {
     return {

packages/maskbook/src/plugins/Snapshot/helpers.ts → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/helpers.ts

@@ -1,4 +1,4 @@
-import type { ProposalIdentifier } from './types'
+import type { ProposalIdentifier } from '../types'
 
 export function getProposalIdentifier(url: string): ProposalIdentifier {
     const parsedURL = new URL(url)

packages/maskbook/src/plugins/Snapshot/hooks/usePower.ts → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/hooks/usePower.ts

@@ -1,7 +1,7 @@
 import { useAsyncRetry } from 'react-use'
 import { useAccount, useBlockNumber } from '@dimensiondev/web3-shared'
-import { PluginSnapshotRPC } from '../messages'
-import type { ProposalIdentifier } from '../types'
+import { PluginSnapshotRPC } from '../../messages'
+import type { ProposalIdentifier } from '../../types'
 import { useProposal } from './useProposal'
 
 export function usePower(identifier: ProposalIdentifier) {

packages/maskbook/src/plugins/Snapshot/hooks/useProposal.ts → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/hooks/useProposal.ts

@@ -1,6 +1,6 @@
-import { PluginSnapshotRPC } from '../messages'
-import type { Proposal, ProposalMessage } from '../types'
-import { useSuspense } from '../../../utils/hooks/useSuspense'
+import { PluginSnapshotRPC } from '../../messages'
+import type { Proposal, ProposalMessage } from '../../types'
+import { useSuspense } from '../../../../utils/hooks/useSuspense'
 
 const cache = new Map<string, [0, Promise<void>] | [1, { proposal: Proposal; message: ProposalMessage }] | [2, Error]>()
 export function proposalRetry() {
@@ -23,7 +23,7 @@ async function Suspender(id: string) {
 
     proposal.isStart = now > message.payload.start * 1000
     proposal.isEnd = now > message.payload.end * 1000
-    proposal.status = !proposal.isStart ? 'Pending' : proposal.isEnd ? 'Close' : 'Active'
+    proposal.status = !proposal.isStart ? 'Pending' : proposal.isEnd ? 'Closed' : 'Active'
     proposal.authorName = profiles[0]?.name
     proposal.authorAvatar = profiles[0]?.image
     return { proposal, message }

packages/maskbook/src/plugins/Snapshot/hooks/useResults.ts → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/hooks/useResults.ts

@@ -1,5 +1,5 @@
-import type { ProposalIdentifier, ProposalResult, VoteItemList } from '../types'
-import { useSuspense } from '../../../utils/hooks/useSuspense'
+import type { ProposalIdentifier, ProposalResult, VoteItemList } from '../../types'
+import { useSuspense } from '../../../../utils/hooks/useSuspense'
 import { useProposal } from './useProposal'
 import { useVotes } from './useVotes'
 

packages/maskbook/src/plugins/Snapshot/hooks/useRetry.ts → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/hooks/useRetry.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { useUpdate } from 'react-use'
-import { votesRetry } from '../hooks/useVotes'
-import { resultsRetry } from '../hooks/useResults'
+import { votesRetry } from './useVotes'
+import { resultsRetry } from './useResults'
 
 export function useRetry() {
     const forceUpdate = useUpdate()

packages/maskbook/src/plugins/Snapshot/hooks/useVotes.ts → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/hooks/useVotes.ts

@@ -1,6 +1,6 @@
-import { PluginSnapshotRPC } from '../messages'
-import type { VoteItemList, ProposalIdentifier, VoteItem } from '../types'
-import { useSuspense } from '../../../utils/hooks/useSuspense'
+import { PluginSnapshotRPC } from '../../messages'
+import type { VoteItemList, ProposalIdentifier, VoteItem } from '../../types'
+import { useSuspense } from '../../../../utils/hooks/useSuspense'
 import { useProposal } from './useProposal'
 import { useBlockNumber } from '@dimensiondev/web3-shared'
 

packages/maskbook/src/plugins/Snapshot/define.tsx → packages/maskbook/src/plugins/Snapshot/SNSAdaptor/index.tsx

@@ -1,12 +1,12 @@
+import type { Plugin } from '@dimensiondev/mask-plugin-infra'
+import { base } from '../base'
 import { useMemo, Suspense } from 'react'
 import { Skeleton, makeStyles } from '@material-ui/core'
-import { PluginConfig, PluginScope, PluginStage } from '../types'
-import { SNAPSHOT_PLUGIN_NAME, SNAPSHOT_PLUGIN_ID } from './constants'
-import MaskbookPluginWrapper from '../MaskbookPluginWrapper'
-import { PostInspector } from './UI/PostInspector'
-import { usePostInfoDetails } from '../../components/DataSource/usePostInfo'
-import { extractTextFromTypedMessage } from '../../protocols/typed-message'
-import { parseURL } from '../../utils/utils'
+import MaskbookPluginWrapper from '../../MaskbookPluginWrapper'
+import { PostInspector } from './PostInspector'
+import { usePostInfoDetails } from '../../../components/DataSource/usePostInfo'
+import { extractTextFromTypedMessage } from '../../../protocols/typed-message'
+import { parseURL } from '@dimensiondev/maskbook-shared'
 
 const useStyles = makeStyles((theme) => {
     return {
@@ -22,31 +22,6 @@ const useStyles = makeStyles((theme) => {
 const isSnaphotURL = (x: string): boolean =>
     /^https:\/\/(?:www.)?snapshot.(org|page)\/#\/(.*?)\/proposal\/[A-Za-z0-9]+$/.test(x)
 
-export const SnapShotPluginDefine: PluginConfig = {
-    id: SNAPSHOT_PLUGIN_ID,
-    pluginName: SNAPSHOT_PLUGIN_NAME,
-    identifier: SNAPSHOT_PLUGIN_ID,
-    pluginIcon: '📷',
-    pluginDescription: 'A plugin for https://snapshot.org/',
-    stage: PluginStage.Production,
-    scope: PluginScope.Public,
-    successDecryptionInspector: function Component(props): JSX.Element | null {
-        const text = useMemo(() => extractTextFromTypedMessage(props.message), [props.message])
-        const link = useMemo(() => parseURL(text.val || ''), [text.val]).find(isSnaphotURL)
-        if (!text.ok) return null
-        if (!link) return null
-        return <Renderer url={link} />
-    },
-    postInspector: function Component(): JSX.Element | null {
-        const link = usePostInfoDetails
-            .postMetadataMentionedLinks()
-            .concat(usePostInfoDetails.postMentionedLinks())
-            .find(isSnaphotURL)
-        if (!link) return null
-        return <Renderer url={link} />
-    },
-}
-
 function Renderer({ url }: { url: string }) {
     const classes = useStyles()
     return (
@@ -66,3 +41,25 @@ function Renderer({ url }: { url: string }) {
         </MaskbookPluginWrapper>
     )
 }
+
+const sns: Plugin.SNSAdaptor.Definition = {
+    ...base,
+    init(signal) {},
+    DecryptedInspector: function Component(props): JSX.Element | null {
+        const text = useMemo(() => extractTextFromTypedMessage(props.message), [props.message])
+        const link = useMemo(() => parseURL(text.val || ''), [text.val]).find(isSnaphotURL)
+        if (!text.ok) return null
+        if (!link) return null
+        return <Renderer url={link} />
+    },
+    PostInspector: function Component(): JSX.Element | null {
+        const link = usePostInfoDetails
+            .postMetadataMentionedLinks()
+            .concat(usePostInfoDetails.postMentionedLinks())
+            .find(isSnaphotURL)
+        if (!link) return null
+        return <Renderer url={link} />
+    },
+}
+
+export default sns

packages/maskbook/src/plugins/Snapshot/apis/index.ts → packages/maskbook/src/plugins/Snapshot/Worker/apis/index.ts

@@ -1,7 +1,7 @@
 import ss from '@snapshot-labs/snapshot.js'
 import { ChainId } from '@dimensiondev/web3-shared'
-import type { VoteItemList, Proposal, Profile3Box, ProposalMessage, ProposalIdentifier, VoteSuccess } from '../types'
-import Services from '../../../extension/service'
+import type { VoteItemList, Proposal, Profile3Box, ProposalMessage, ProposalIdentifier, VoteSuccess } from '../../types'
+import Services from '../../../../extension/service'
 
 export async function fetchProposal(id: string) {
     const response = await fetch(`https://ipfs.io/ipfs/${id}`, {

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

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