Since the Metamask gets connected to the social connect, all web3 calls also need to be done through the social connect. To enable multi-page applications, we setup separate events to capture the responses.
To call any blockchain function you need to do 3 steps:
Setup the event that captures the response
Wire up that event in <PluralitySocialConnect>
Want to jump directly to code? Checkout final code on Git
Get all connected accounts
Returns all accounts that have been connected through the social connect
Copy PluralitySocialConnect.getAllAccounts()
Returns: [0x123…, 0x456…]
The response will be received in the following event that needs to be registered in your application
Copy const handleGetAllAccounts = (data) => {
const receivedData = JSON.parse(JSON.stringify(data))
console.log("Get all accounts:", receivedData);
alert(JSON.stringify(data));
};
Copy <PluralitySocialConnect
...
onGetAllAccounts={handleGetAllAccounts}
...
/>
Get Current Connected Account
Get current account connected to the social connect
Copy PluralitySocialConnect.getConnectedAccount()
Returns: 0x123…
The response will be received in the following event that needs to be registered in your application
Copy const handleGetConnectedAccount = (data) => {
const receivedData = JSON.parse(JSON.stringify(data))
console.log("Get connected account:", receivedData);
alert(JSON.stringify(data));
};
Copy <PluralitySocialConnect
...
onGetConnectedAccount={handleGetConnectedAccount}
...
/>
Get Signature
Gets the message signed using the connected account and returns the signature
Copy PluralitySocialConnect.getMessageSignature(message: string)
Example:
PluralitySocialConnect.getMessageSignature("Example `personal_sign` message.")
The response will be received in the following event that needs to be registered in your application
Copy const handleMessageSignature = (data) => {
const receivedData = JSON.parse(JSON.stringify(data))
console.log("Get message signature:", receivedData);
alert(JSON.stringify(data));
};
Wire Up The Event
Copy <PluralitySocialConnect
...
onGetMessageSignature={handleMessageSignature}
...
/>
Verify Message Signature
Verify if the signature matches the message using the current connected account and returns boolean true or false
Copy PluralitySocialConnect.verifyMessageSignature(message: string, signature: string)
Example: PluralitySocialConnect.verifyMessageSignature("Example `personal_sign` message.", "0xa1379711716d214c84c146bbaa9d03d77895526b8620bcae67a76f824be6fd3a43795645a31f758eaed39ee6aa5490a979233711d4e9d6a2e30fa09a5e9c808a1b")
The response will be received in the following event that needs to be registered in your application
Copy const handleVerifyMessageSignature = (data) => {
const receivedData = JSON.parse(JSON.stringify(data))
console.log("Verify message signature:", receivedData);
alert(JSON.stringify(data));
};
Copy <PluralitySocialConnect
...
onVerifyMessageSignature={handleVerifyMessageSignature}
...
/>
Get Balance
Returns balance of the current account in wei. You need to convert it to required denomination yourself
Copy PluralitySocialConnect.getBalance()
The response will be received in the following event that needs to be registered in your application
Copy const handleGetBalance = (data) => {
const receivedData = JSON.parse(JSON.stringify(data))
console.log("Get balance:", receivedData);
alert(JSON.stringify(data));
};
Copy <PluralitySocialConnect
...
onGetBalance={handleGetBalance}
...
/>
Send Transaction
Send a certain amount (in ethers) to a certain address. Returns the transaction object
Copy PluralitySocialConnect.sendTransaction(sendToAddress: string, value: string)
Example: PluralitySocialConnect.sendTransaction("0xe613B4cd69Fe20E8bd0F0D79a264210886bA1AA2","0.01")
The response will be received in the following event that needs to be registered in your application
Copy const handleSendTransaction = (data) => {
const receivedData = JSON.parse(JSON.stringify(data))
console.log("Send transaction:", receivedData);
alert(JSON.stringify(data));
};
Copy <PluralitySocialConnect
...
onSendTransaction={handleSendTransaction}
...
/>
Get Block Number
Returns the latest block number
Copy PluralitySocialConnect.getBlockNumber()
The response will be received in the following event that needs to be registered in your application
Copy const handleGetBlockNumber = (data) => {
const receivedData = JSON.parse(JSON.stringify(data))
console.log("Get block number:", receivedData);
alert(JSON.stringify(data));
};
Copy <PluralitySocialConnect
...
onGetBlockNumber={handleGetBlockNumber}
...
/>
Get Transaction Count
Returns the transaction count of the given address
Copy PluralitySocialConnect.getTransactionCount(address: string)
Example: PluralitySocialConnect.getTransactionCount("0xe613B4cd69Fe20E8bd0F0D79a264210886bA1AA2")
The response will be received in the following event that needs to be registered in your application
Copy const handleGetTransactionCount = (data) => {
const receivedData = JSON.parse(JSON.stringify(data))
console.log("Get transaction count:", receivedData);
alert(JSON.stringify(data));
};
Copy <PluralitySocialConnect
...
onGetTransactionCount={handleGetTransactionCount}
...
/>
Read From Contract
Returns the response of executing the given get method of the contract with the given parameters
Copy 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", [])
The response will be received in the following event that needs to be registered in your application
Copy const handleReadFromContract = (data) => {
const receivedData = JSON.parse(JSON.stringify(data))
console.log("Read from contract:", receivedData);
alert(JSON.stringify(data));
};
Copy <PluralitySocialConnect
...
onReadFromContract={handleReadFromContract}
...
/>
Write To Contract
Returns the transaction response of executing the given write method of the contract with the given parameters
Copy 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("0x8E26aa0b6c7A396C92237C6a87cCD6271
The response will be received in the following event that needs to be registered in your application
Copy const handleWriteToContract = (data) => {
const receivedData = JSON.parse(JSON.stringify(data))
console.log("Write to contract:", receivedData);
alert(JSON.stringify(data));
};
Copy <PluralitySocialConnect
...
onWriteToContract={handleWriteToContract}
...
/>
Last updated 4 months ago