Skip to main content

Playground Rules

Subsocial's Playground is an easy tool that allows you to run code snippets from our SDK without downloading anything.

This Playground provides a perfect environment to play, test and debug some of your code snippets before building a real project.

info

The Playground is running on our Testnet called Soonsocial. You can get some test tokens from our Discord bot.

Try out the Subsocial Playground.

Built-in APIs

It comes with a set of rules & in-built function to help you focus on library methods rather than writing everything from scratch. The following list represents these functions and their code:

Subsocial API

The Subsocial Playground comes with the Subsocial SDK's api instance. This is used to interact with most of the SDK methods. Here is how it's being created under the hood:

  const configDetails = {
substrateNodeUrl: 'wss://rco-para.subsocial.network',
ipfsNodeUrl: 'https://staging.subsocial.network/ipfs'
}
  const api = api = await SubsocialApi.create({
...configDetails,
useServer: {
httpRequestMethod: 'get'
}
})

IPFS API

The Subsocial Playground comes with the CRUST IPFS API's ipfs instance. This is use to store data related spaces, posts and comments on the network. Let's see how the configuration is set:

  import { generateCrustAuthToken } from '@subsocial/api/utils/ipfs'

const authHeader = generateCrustAuthToken('bottom drive obey lake curtain smoke basket hold race lonely fit walk//Alice')

const ipfs = new SubsocialIpfsApi({
ipfsNodeUrl: 'https://crustwebsites.net'
})

ipfs.setWriteHeaders({
authorization: 'Basic ' + authHeader
})

Keyring

The Subsocial Playground comes with a basic keyring instance to help you sign and send transactions. By default, we use the Alice (Test) account for our Testnet transactions, but you can change it if you want.

  import { Keyring } from "@polkadot/api"
import { waitReady } from '@polkadot/wasm-crypto';

await waitReady()
const keyring = new Keyring({ type: 'sr25519' })

Sending Transaction

The Subsocial Playground allows you to sign and send transactions with Mnemonic phrases using both Keyring and the Polkadot.js extension.

Using Keyring

To sign and send transactions with Mnemonic phrases through Keyring, use:

  transaction.signAndSend(pair, logger) 

The logger is a method that tracks the transaction and show toasts in UI. Here's how it works:

const logger = (result: any) => {
const { status } = result

if (!result || !status) {
return;
}
if (status.isFinalized) {
const blockHash = status.isFinalized
? status.asFinalized
: status.asInBlock;
console.log('✅ Tx finalized. Block hash', blockHash.toString());
showToast(`✅ Transaction: ${status.isFinalized ? 'Finalised' : 'Added in Block'}`);
const newIds = getNewIdsFromEvent(result); // get first argument from array.
if (newIds.length > 0) {
showToast(`⚡️ New Item Id: ${newIds[0]}`)
}
return;
} else if (result.isError) {
console.log(JSON.stringify(result));
showToast(JSON.stringify(result));
} else {
console.log('⏱ Current tx status:', status.type);
showToast(`⏱ Current tx status: ${status.type}`);
}
}

Using Polkadot.js Extension

Signing using the Polkadot.js extension:

Syntax

  signAndSendTx(transactionVariable, accountAddressToSignFrom)

Implementation of signAndSendTx function:

  const signAndSendTx = async (tx: any, accountId: string) => {
const { isWeb3Injected, web3Enable, web3AccountsSubscribe, web3FromAddress } = await import('@polkadot/extension-dapp')
const injectedExtensions = await web3Enable('twitter-dapp-subsocial')
if (!isWeb3Injected) {
showToast(`Browser do not have any polkadot.js extension`);
return;
}

if (!injectedExtensions.length) {
showToast(`Polkadot Extension have not authorized us to get accounts`);
return;
}

await web3AccountsSubscribe(async (accounts) => {
if (accounts.length > 0) {
const addresses = accounts.map((account) => account.address)

const containsAddress = addresses.includes(accountId)
if (!containsAddress) {
showToast("😬 Address not found on Polkadot.js extension.")
return;
}
const { signer } = await web3FromAddress(accountId)
await tx.signAsync(accountId, { signer })

await tx.send(logger)
}
})
}