@goodsdks/savings-widget
v1.0.0
Published
The `gooddollar-savings-widget` web component provides a simple and interactive way for users to stake their G$ tokens and earn.
Readme
Gooddollar Savings Web Component
The gooddollar-savings-widget web component provides a simple and interactive way for users to stake their G$ tokens and earn.
Integratig The Component
Can be used in any website, for a quick setup:
- Download the Script: Download the
gooddollar-savings-widget.global.jsfile from the project releases or build it from the source. - Include in HTML: Add the script to your HTML file.
- Add the Component: Use the
<gooddollar-savings-widget>tag where you want it to appear.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gooddollar Savings</title>
</head>
<body>
<gooddollar-savings-widget id="savingsWidget"></gooddollar-savings-widget>
<script src="path/to/gooddollar-savings-widget.global.js"></script>
<script type="module">
/*
// initialize appKit
const appKit = createAppKit({
...
});*/
customElements.whenDefined("gooddollar-savings-widget").then(() => {
const savingsWidget = document.getElementById("savingsWidget")
//action when connect wallet button is clicked
savingsWidget.connectWallet = () => {
//appKit.open();
};
// Subscribe to account changes to wire provider
appKit.subscribeAccount((accountState: any) => {
const isConnected = !!accountState?.isConnected;
if (!savingsWidget) return;
if (isConnected) {
const provider = (appKit.getProvider as any)('eip155') || appKit.getWalletProvider();
savingsWidget.web3Provider = provider as any;
} else {
savingsWidget.web3Provider = null;
}
}, 'eip155');
});
</script>
</body>
</html>Configurable Options
Customize the gooddollar-savings-widget using these properties:
connectWallet: (Set via JavaScript property)
Defines the function when the "Connect Wallet" button is clicked.web3Provider: (Set via JavaScript property)
The web3Provider object when the wallet is connected. Wallet connection logic should be handeled outside of this component.