@dforo3/metaforo-sdk-metamask v0.4.11-beta.0
Metaforo SDK
Metaforo SDK contains following components:
- Tipping Widget
- Comment Widget
- Like Widget
How to install
yarn
yarn add @dforo3/metaforo-sdk
npm
npm install @dforo3/metaforo-sdk
Tipping Widget
Metaforo Tipping Widget is a widget for tipping to specified wallet addresses. Currently supports :
- ArConnect
- Metamask
- WalletConnect
Based on Everpay
Usage
import {MfTippingWidget} from '@dforo3/metaforo-sdk';
<MfTippingWidget
siteName='INPUT_SITE_NAME'
pageId='INPUT_PAGE_ID'
receiverAddress='INPUT_WALLET_ADDRESS'
receiverUsername='INPUT_USERNAME'
receiverChainId={1}
theme='light'
/>
You can modify the theme attribute to specify light or dark styles.
Comment Widget
Metaforo Comment Widget provides a comment box for the website, allowing users to send and view comments after logging in via their wallet.
The comment data will be stored in Metaforo's Group. Site owners can manage their comments via metaforo.
Usage
import {MfCommentWidget} from '@dforo3/metaforo-sdk';
<MfCommentWidget
siteName='INPUT_SITE_NAME'
pageId='INPUT_PAGE_ID'
userDisplayName='INPUT_USERNAME'
userAvatar='INPUT_AVATAR_URL'
theme='light'
/>
- The
siteName
field must be applied for, and we will provide you with the corresponding value. - The
pageId
is used to differentiate between different pages. Comments loaded with the same pageId will be the same. - The
userDisplayName
anduserAvatar
field is optional. It is used to specify the current user's username or avatar url, but the user can manually change this value after logging in. - The
theme
field is optional. You can use it to specify the light or dark styles.
Like Widget
Metaforo Like Widget provides a like button for the website. The usage is similar with comment widget.
Usage
import {MfLikeWidget} from '@dforo3/metaforo-sdk';
<MfLikeWidget
siteName='INPUT_SITE_NAME'
pageId='INPUT_PAGE_ID'
userDisplayName='INPUT_USERNAME'
userAvatar='INPUT_AVATAR_URL'
theme='light'
/>
For the meaning of the parameters, see MfCommentWidget.
Custom Style
We use mui as the component library. If you need to customize the style of the widget, you can define a variable in the window with the value of mui's theme definition in mfTheme. For the full definition format, please refer to this document.
<script>
window.mfTheme = {
palette: {
primary: {
main: '#702AF1',
},
background: {
paper: '#ffffff',
},
text: {
primary: '#222222',
secondary: '#71717A',
},
}
}
</script>
Known issues
Web3 and Create-react-app
If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.
You can follow this topic to solve this issue : Web3.js - Web3 and Create-react-app
1 year ago
1 year ago