This repo contains the functionality to load the plurality identity oracle as a popup widget.
npm install && npm run start
Here is a basic demo how it can be used in any react project
import PluralitySocialConnect from 'plurality-social-connect';
const App = () => {
const childRef = useRef(null);
// Handle the data returned from the widget
const handleDataReturned = (data) => {
const receivedData = JSON.parse(JSON.stringify(data))
console.log("dapp receives:", receivedData);
alert(JSON.stringify(data));
childRef.current.closeSocialConnectPopup();
// Handle the received data in the external webpage
// ... (perform actions with the received data)
};
return (
<div>
<PluralitySocialConnect
options={{ apps: 'facebook,twitter' }}
onDataReturned={handleDataReturned}
// all customization params are optional
// customization={{ height: '200px', width: '500px', initialBackgroundColor: '#E8A123', initialTextColor: '#FFFFFF', flipBackgroundColor: '#12AE83', flipTextColor: '#FFFFFF'}}
ref={childRef}
/>
</div>
);
};
Since the Metamask gets connected to the social connect, all web3 calls also need to be done through the social connect. You can use the following functions to call the blockchain layer:
Returns all accounts that have been connected through the social connect
PluralitySocialConnect.getAllAccounts()
Returns: [0x123…, 0x456…]
Get current account connected to the social connect
PluralitySocialConnect.getConnectedAccount()
Returns: 0x123…
Gets the message signed using the connected account and returns the signature
PluralitySocialConnect.getMessageSignature(message: string)
Example:
PluralitySocialConnect.getMessageSignature("Example `personal_sign` message.")
Verify if the signature matches the message using the current connected account and returns boolean true or false
PluralitySocialConnect.verifyMessageSignature(message: string, signature: string)
Example: PluralitySocialConnect.verifyMessageSignature("Example `personal_sign` message.", "0xa1379711716d214c84c146bbaa9d03d77895526b8620bcae67a76f824be6fd3a43795645a31f758eaed39ee6aa5490a979233711d4e9d6a2e30fa09a5e9c808a1b")
Returns balance of the current account in wei. You need to convert it to required denomination yourself
PluralitySocialConnect.getBalance()
Send a certain amount (in ethers) to a certain address. Returns the transaction object
PluralitySocialConnect.sendTransaction(sendToAddress: string, value: string)
Example: PluralitySocialConnect.sendTransaction("0xe613B4cd69Fe20E8bd0F0D79a264210886bA1AA2","0.01")
Returns the latest block number
PluralitySocialConnect.getBlockNumber()
Returns the transaction count of the given address
PluralitySocialConnect.getTransactionCount(address: string)
Example: PluralitySocialConnect.getTransactionCount("0xe613B4cd69Fe20E8bd0F0D79a264210886bA1AA2")
Returns the response of executing the given get method of the contract with the given parameters
PluralitySocialConnect.readFromContract(contractAddress: string, abi: string, methodName: string, methodParams: string[])
Example:
const abi = '[{"inputs":[],"name":"retrieve","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"num","type":"uint256"}],"name":"store","outputs":[],"stateMutability":"nonpayable","type":"function"}]';
PluralitySocialConnect.readFromContract("0x8E26aa0b6c7A396C92237C6a87cCD6271F67f937",abi,"retrieve", [])
Returns the transaction response of executing the given write method of the contract with the given parameters
PluralitySocialConnect.writeToContract(contractAddress: string, abi: string, methodName: string, methodParam: string[])
Example:
const abi = '[{"inputs":[],"name":"retrieve","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"num","type":"uint256"}],"name":"store","outputs":[],"stateMutability":"nonpayable","type":"function"}]';
PluralitySocialConnect.writeToContract("0x8E26aa0b6c7A396C92237C6a87cCD6271F67f937",abi, "store", "5")
- Update the version in
package.json
file - Run
npm run webpack
and verify the./lib/SocialConnect.js
file if it is updated - Run
npm version
and verify if the version is updated correctly locally - Run
npm publish
to publish it to public npm registry
-
height
: Specify the height of the button -
width
: Specify the width of the button -
initialBackgroundColor
: Specify the intial background color of the button -
initialTextColor
: Specify the intial text color of the button -
flipBackgroundColor
: Specify the flipped background color of the button -
flipTextColor
: Specify the flipped text color of the button
- The package is released on NPM registry via a build pipeline on merge to main