snapshot
Search…
Create a plugin
What is a plugin?
Plugins in Snapshot extend proposal functionality, like adding extra information or on-chain settling. In essence, a plugin can add additional, custom data to a proposal, which can be used when rendering it or processing the results.
Examples
The block “Quorum” on the right side of Yam is an example of plugin https://snapshot.org/#/yam.eth/proposal/QmRLiSZdXJLNaejrgpAL5bqzYefMxc4JJJ1GZSg9GtiCSW
Another example of plugin is a block "Gnosis Impact" on Gnosis https://snapshot.org/#/gnosis.eth/proposal/QmdjWuBnBnPUafW9jBNNsJJvaeQAVExGcFZ7zB38VtNuu4
You can find existing plugin implementations here:
https://github.com/snapshot-labs/snapshot/tree/mkt/migrate-safesnap/src/plugins
To avoid confusion, it is worth mentioning here that the plugin system is not meant to support and make available any arbitrary plugin out of the box. Rather, it is a curated list of optional core functionalities, following a common pattern. Development of new plugins should be coordinated with the snapshot team.
Creating a new plugin
To create a plugin, start by creating a
plugin.json inside of a new (camelCased) directory in src/plugins.1
mkdir src/plugins/myPlugin && echo '{
2
"name": "My Snapshot Plugin",
3
"description": "A plugin to show how plugins are built."
4
}' > src/plugins/myPlugin/plugin.json
Copied!
The plugin is now available in the space settings and can be enabled. But so far, it doesn't do anything. Next we will add a component for the proposal page.
Components
In the plugin directory add a
Proposal.vue and start with a basic single file component.1
<script setup>
2
const msg = 'Hello world!'
3
</script>
4
5
<template>
6
<h1>My Plugin</h1>
7
<div>{{ msg }}</div>
8
</template>
Copied!
For spaces that enable the plugin, the component is now automatically being rendered below the proposal content.
Here's the current list of available plugin components:
Plugin component
will be rendered here:
myPlugin/Proposal.vuebelow proposal content
myPlugin/ProposalSidebar.vueproposal sidebar
myPlugin/Create.vueproposal creation, plugins step
In those components you can do everything you can do in any other Vue 3 component. You can split the code across multiple components and import them in one of the above, as well as create your own composables or other helper files to structure your code as you like.
It's technically not required but recommended to use Vue 3's composition API and the
<script setup> syntax.Properties
To do something meaningful, a plugin will probably need some awareness of the current context (space, proposal, etc). This information is passed down to the plugin components as properties. A component on the proposal page, that needs the proposal's id can receive it like this:
1
<script setup>
2
defineProps({
3
id: String // the current proposal's id
4
});
5
</script>
6
7
<template>
8
<a :href="'https://...' + id"> ...
9
</template>
Copied!
Here are all properties, that will be passed down to the plugin's main components:
Text
Create form
Proposal page
proposal
form content
current proposal
space
space settings
space settings
preview
preview enabled
-
id
-
proposal id route parameter
results
-
current voting results
loadedResults
-
whether voting results finished loading
votes
-
list of individual votes
strategies
-
used strategies
Only the main components (Create.vue, Proposal.vue, ProposalSidebar.vue) in your plugin's root directory will receive those properties automatically. You can of course pass those properties further down, to you other components as needed.
Existing components/composables
Any of the existing UI components in
src/components, composables in src/composables or installed packages (like snapshot.js) can be used normally.1
<script setup>
2
import { useWeb3 } from '@/composables/useWeb3'
3
const { web3Account } = useWeb3();
4
</script>
5
6
<template>
7
<Block title='My Plugin'>
8
<h2>Your Account: {{ web3Account }}</h1>
9
</Block>
10
</template>
Copied!
Config defaults
Most plugins will require some configuration options, so that the a space admin can enter their token address, API endpoints and so on. Defaults can be defined in the
plugin.json as follows:1
{
2
"name": "My Snapshot Plugin",
3
"description": "A plugin to show how plugins are built.",
4
"defaults": {
5
"space": {
6
"someURL": "https://..."
7
},
8
"proposal": {
9
"someParam": true
10
}
11
}
12
}
Copied!
Under the
"space" key you can define global config options. They can then be set in the plugin section on a space's settings page.The
"proposal" key let's you define options specific to a single proposal. This key must be set in order for the Create.vue component to be shown in the proposal creation process.Localization
The snapshot.org interface supports multiple languages and new plugins should be built with that in mind. Don't use raw text strings in your plugin's components directly but use the
t function instead:1
<template>
2
<h1>{{ $t('myPlugin.hello') }}</h1>
3
</template>
Copied!
The actual strings needs to be added in
src/locales/default.json to be available for translators, in order to update the language specific files, like de-DE.json. You can add your strings on the highest level in default.json, under a unique key, e.g. your plugin's directory name.1
{
2
"myPlugin": {
3
"hello": "Hello World!"
4
}
5
}
Copied!
Numbers and relative time
Apart from
vue-i18n, there are custom number and time formatters available in the useIntl composable.1
<script setup>
2
import { useIntl } from '@/composables/useIntl';
3
4
const {
5
formatRelativeTime,
6
formatDuration,
7
formatNumber,
8
formatCompactNumber,
9
formatPercentNumber
10
} = useIntl();
11
</script>
12
13
<template>
14
<div>
15
{{ formatRelativeTime(1643350286) }} <!-- "5 minutes ago" -->
16
{{ formatDuration(654) }} <!-- "11 minutes" -->
17
{{ formatNumber(1643350) }} <!-- "1,643,350" -->
18
{{ formatCompactNumber(1643350) }} <!-- "1.6M" -->
19
{{ formatPercentNumber(0.86543) }} <!-- "86.54%" -->
20
</div>
21
</template>
Copied!
Last modified 3mo ago
Copy link