SignIn/SignOut Plugin
1. Copy the <script> and paste into the <head> of your page
Copy code<script src="https://cdn.jsdelivr.net/npm/near-api-js@0.41.0/dist/near-api-js.min.js"></script>
2. Copy the <script> and paste before </body> tag of your page
Copy code<script>
(async () => {
const { connect, keyStores, WalletConnection, Contract } = nearApi;
const keyStore = new keyStores.BrowserLocalStorageKeyStore();
const networkId = "net";
const config = {
keyStore, networkId,
nodeUrl: `https://rpc.${networkId}.near.org`,
walletUrl: `https://wallet.${networkId}.near.org`,
helperUrl: `https://helper.${networkId}.near.org`,
explorerUrl: `https://explorer.${networkId}.near.org`
};
const near = await connect(config);
const walletConnection = new WalletConnection(near, 'zen');
const contract = new Contract(walletConnection.account(), 'contractName.testnet', {
viewMethods: ['methodName'],
changeMethods: ['methodName', 'methodName']
});
const btnLogin = document.querySelector('#idName');
const btnLogout = document.querySelector('#idName');
if(walletConnection.isSignedIn()) {
const accountId = walletConnection.getAccountId();
btnLogout.innerHTML = `Logout ${accountId}`;
hide(btnLogin);
show(btnLogout);
}
function signIn() {
walletConnection.requestSignIn({
contractId: 'contractName.testnet',
viewMethods: ['methodName'],
changeMethods: ['methodName', 'methodName']
});
}
function signOut() {
walletConnection.signOut();
btnLogout.innerHTML = ``;
hide(btnLogout);
show(btnLogin);
}
btnLogin.addEventListener('click', signIn);
btnLogout.addEventListener('click', signOut);
function show(btn) {
btn.classList.remove('hidden-class');
btn.classList.add('active-class');
}
function hide(btn) {
btn.classList.remove('active-class');
btn.classList.add('hidden-class');
}
})();
</script>
Get Account Balance Plugin
1. Copy the <script> and paste into the <head> of your page
Copy code<script src="https://cdn.jsdelivr.net/npm/near-api-js@0.41.0/dist/near-api-js.min.js"></script>
2. Copy the <script> and paste before </body> tag of your page
Copy code<script>
const { connect, keyStores, KeyPair, utils } = nearApi;
const keyStore = new keyStores.BrowserLocalStorageKeyStore();
const networkId = "net";
const div = document.querySelector('.divClass');
const div2 = document.querySelector('.divClass');
const config = {
keyStore, networkId,
nodeUrl: `https://rpc.${networkId}.near.org`,
walletUrl: `https://wallet.${networkId}.near.org`,
helperUrl: `https://helper.${networkId}.near.org`,
explorerUrl: `https://explorer.${networkId}.near.org`
};
const getBalance = async() => {
const near = await connect(config);
const data = document.querySelector('#inputAccountId').value;
const account = await near.account(data);
const balance = await account.getAccountBalance();
div.innerHTML = `Total ${Math.floor(balance.total/1e24)}`;
div2.innerHTML = `Available ${Math.floor(balance.available/1e24)}`;
}
document.querySelector('#buttonId').addEventListener('click', () => {
getBalance();
})
</script>
Get Account Details Plugin
1. Copy the <script> and paste into the <head> of your page
Copy code<script src="https://cdn.jsdelivr.net/npm/near-api-js@0.41.0/dist/near-api-js.min.js"></script>
2. Copy the <script> and paste before </body> tag of your page
Copy code<script>
const { connect, keyStores, KeyPair, utils } = nearApi;
const keyStore = new keyStores.BrowserLocalStorageKeyStore();
const networkId = "testnet";
const config = {
keyStore, networkId,
nodeUrl: `https://rpc.${networkId}.near.org`,
walletUrl: `https://wallet.${networkId}.near.org`,
helperUrl: `https://helper.${networkId}.near.org`,
explorerUrl: `https://explorer.${networkId}.near.org`
};
const areaWrapper = document.querySelector('#outputId');
const getDetails = async () => {
const imputData = document.querySelector('#inputAccountId').value;
const near = await connect(config);
const account = await near.account(imputData);
const detail = await account.getAccountDetails();
for (let value of detail.authorizedApps) {
let dataDetail = Object.entries(value);
areaWrapper.innerHTML += `${JSON.stringify(dataDetail)},`
}
}
document.querySelector('#buttonId').addEventListener('click', () => {
getDetails();
})
</script>
Get All Access Keys Plugin
1. Copy the <script> and paste into the <head> of your page
Copy code<script src="https://cdn.jsdelivr.net/npm/near-api-js@0.41.0/dist/near-api-js.min.js"></script>
2. Copy the <script> and paste before </body> tag of your page
Copy code<script>
const { connect, keyStores, KeyPair, utils } = nearApi;
const keyStore = new keyStores.BrowserLocalStorageKeyStore();
const networkId = "testnet";
const config = {
keyStore, networkId,
nodeUrl: `https://rpc.${networkId}.near.org`,
walletUrl: `https://wallet.${networkId}.near.org`,
helperUrl: `https://helper.${networkId}.near.org`,
explorerUrl: `https://explorer.${networkId}.near.org`
};
const areaWrapperKeys = document.querySelector('#outAllKeys');
const getAllKeys = async() => {
const imputData = document.querySelector('#inputAccountId').value;
const near = await connect(config);
const account = await near.account(imputData);
const detail = await account.getAccessKeys();
for (let value of detail) {
let dataDetail = Object.values(value);
areaWrapperKeys.innerHTML += `${JSON.stringify(dataDetail)},`
}
}
document.querySelector('#buttonId').addEventListener('click', () => {
getAllKeys();
})
</script>
Send Token Plugin
1. Copy the <script> and paste into the <head> of your page
Copy code<script src="https://cdn.jsdelivr.net/npm/near-api-js@0.41.0/dist/near-api-js.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/big.js@6.0.0/big.min.js"></script>
2. Copy the <script> and paste before </body> tag of your page
Copy code<script>
(async () => {
const { connect, utils, keyStores, WalletConnection, KeyPair, Contract } = nearApi;
const config = {
keyStore: new keyStores.BrowserLocalStorageKeyStore(),
networkId: "testnet", nodeUrl: `https://rpc.testnet.near.org`,
walletUrl: `https://wallet.testnet.near.org`,
helperUrl: `https://helper.testnet.near.org`,
explorerUrl: `https://explorer.testnet.near.org`
};
const near = await connect(config);
const walletConnection = new WalletConnection(near);
const contract = new Contract(walletConnection.account(), 'pay.w-adalo.testnet', {
viewMethods: ['getGreeting'],
changeMethods: ['setGreeting', 'sendNear']
});
const loginBtn = document.querySelector('#sendLogin');
const logoutBtn = document.querySelector('#sendLogout');
if(walletConnection.isSignedIn()) {
const accountId = walletConnection.getAccountId();
logoutBtn.innerHTML = `Logout ${accountId}`;
hide(loginBtn); show(logoutBtn);
}
function signIn() {
walletConnection.requestSignIn({
contractId: 'pay.w-adalo.testnet',
viewMethods: ['getGreeting'],
changeMethods: ['setGreeting', 'sendNear']
});
}
function signOut() {
walletConnection.signOut();
btnLogout.innerHTML = ``;
hide(logoutBtn);
show(loginBtn);
}
function show(btn) {
btn.classList.remove('hidden');
btn.classList.add('active');
}
function hide(btn) {
btn.classList.remove('active');
btn.classList.add('hidden');
}
loginBtn.addEventListener('click', signIn);
logoutBtn.addEventListener('click', signOut);
const div = document.querySelector('#outAmount');
const senderBalance = (await walletConnection.account().state()).amount/1e24
div.innerHTML = `Total ${Math.floor(senderBalance)}`;
document.querySelector('#checkResult').addEventListener('click', () => {
window.location.href = `https://explorer.testnet.near.org/accounts/${result.transaction.hash}`;
});
document.querySelector('#sendToken').addEventListener('click', () => {
async function send() {
try {
let dataAmount = document.querySelector('#inputAmount').value;
let dataReceiver = document.querySelector('#inputReceiver').value;
const receiver = dataReceiver;
const result = await walletConnection.account().functionCall({
contractId: contract.contractId,
methodName: "sendNear",
args: { receiver: receiver },
attachedDeposit: utils.format.parseNearAmount(`${dataAmount}`),
})
console.log(result.transaction.hash);
} catch (e) {
console.log(e);
}
} send();
})
})()
</script>
Get Account State Plugin
1. Copy the <script> and paste into the <head> of your page
Copy code<script src="https://cdn.jsdelivr.net/npm/near-api-js@0.41.0/dist/near-api-js.min.js"></script>
2. Copy the <script> and paste before </body> tag of your page
Copy code<script>
const { connect, keyStores, KeyPair, utils } = nearApi;
const keyStore = new keyStores.BrowserLocalStorageKeyStore();
const networkId = "testnet";
const config = {
keyStore, networkId,
nodeUrl: `https://rpc.${networkId}.near.org`,
walletUrl: `https://wallet.${networkId}.near.org`,
helperUrl: `https://helper.${networkId}.near.org`,
explorerUrl: `https://explorer.${networkId}.near.org`
};
const areaWrapperState = document.querySelector('#outState');
const getState = async() => {
const imputAccountId = document.querySelector('#inputAccountState').value;
const near = await connect(config);
const account = await near.account(imputAccountId);
const response = await account.state();
areaWrapperState.innerHTML += `${(JSON.stringify(response))},`
}
document.querySelector('#getState').addEventListener('click', () => {
getState();
});
</script>
Get Contract Method Plugin
1. Copy the <script> and paste into the <head> of your page
Copy code<script src="https://cdn.jsdelivr.net/npm/near-api-js@0.41.0/dist/near-api-js.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Danail-Irinkov/near-contract-parser-umd@main/dist/bundle.js"></script>
2. Copy the <script> and paste before </body> tag of your page
Copy code<script>
(async () =>{
const { connect, keyStores } = nearApi;
const { parseContract } = nearContractParser;
const keyStore = new keyStores.BrowserLocalStorageKeyStore();
const networkId = "testnet";
const config = {
keyStore, networkId,
nodeUrl: `https://rpc.${networkId}.near.org`,
walletUrl: `https://wallet.${networkId}.near.org`,
helperUrl: `https://helper.${networkId}.near.org`,
explorerUrl: `https://explorer.${networkId}.near.org`
};
const near = await connect(config);
const parseNearContract = async function() {
const areaWrap = document.querySelector('#dataContractMethod');
const contract_id = document.querySelector('#getContractId').value;
const { code_base64 } = await near.connection.provider.query({
account_id: contract_id,
finality: 'final',
request_type: 'view_code',
});
areaWrap.innerHTML += `${(JSON.stringify(parseContract(code_base64)))},`
}
document.querySelector('#getContractMethod').addEventListener('click', () => {
parseNearContract();
})
}) ()
</script>