tanglepaysdk-client
Version:
DApp SDK to interact with TanglePay wallets
794 lines (747 loc) • 31.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<style>
body {
padding: 20px;
}
#text {
word-break: break-all;
}
h2 {
padding-top: 30px;
}
.block{
background: #f5f5f5;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
}
.content {
display: flex;
align-items: flex-start;
}
.middle{
margin-left: 20px;
margin-top: 75px;
}
.right {
flex: 1;
padding: 0px 20px 20px 20px;
background: #f5f5f5;
border-radius: 10px;
margin-top: 75px;
margin-left: 20px;
box-sizing: border-box;
}
.radio-con{
margin-bottom: 5px;
}
.radio-con span{
margin-right: 10px;
}
.address-input input{
width: 300px;
margin-bottom: 10px;
display: block;
}
@media screen and (max-width: 768px) {
.content {
flex-direction: column;
}
.middle{
margin-top: 0;
margin-left: 0;
}
.right {
flex: 1;
padding: 10px;
background: #f5f5f5;
border-radius: 10px;
margin-top: 20px;
margin-left: 0;
box-sizing: border-box;
}
}
</style>
</head>
<body>
<h2>TanglePay-SDK</h2>
Hi, this is the demo site of integrating your DApp with IOTA using TanglePay wallet.
<br />
For more details, please refer to the spec
<a href="https://github.com/TanglePay/TanglePay-SDK" target="_blank">here</a>.
<h2>Wallet status</h2>
<div id="status">Wallet not installed</div>
<div class="content">
<div class="left">
<h2>API examples</h2>
<div class="block">
<h4>iota_connect</h4>
<button onclick="onConnect()" class="btn btn-primary">Connect</button>
</div>
<div class="block">
<h4>iota_sign</h4>
<div class="address-input">
<input id="sign_data" type="text" placeholder="content">
</div>
<button onclick="onSign()" class="btn btn-primary">Sign</button>
</div>
<div class="block">
<h4>iota_accounts</h4>
<button onclick="onGetAccounts()" class="btn btn-primary">Get accounts</button>
</div>
<div class="block">
<h4>iota_getBalance</h4>
<div class="radio-con">
<span>
<input type="checkbox" name="balance" value="iota">iota</input>
</span>
<span>
<input type="checkbox" name="balance" value="soonaverse">soonaverse</input>
</span>
<span>
<input type="checkbox" name="balance" value="smr">smr</input>
</span>
<span>
<input type="checkbox" name="balance" value="asmb">asmb</input>
</span>
</div>
<button onclick="getBalances()" class="btn btn-primary">Get balances</button>
</div>
<div class="block">
<h4>iota_getBalance ( shimmer )</h4>
<div class="radio-con">
<span>
<input type="checkbox" name="balance_shimmer" value="smr">smr</input>
</span>
<span>
<input type="checkbox" name="balance_shimmer" value="soonaverse">soonaverse</input>
</span>
</div>
<button onclick="getBalancesShimmer()" class="btn btn-primary">Get balances ( shimmer )</button>
</div>
<div class="block">
<h4>iota_sendTransaction</h4>
<div class="address-input">
<input id="iota_address" type="text" placeholder="send to ( address ) ">
<input id="iota_amount" type="number" placeholder="amount">
<input id="iota_tag" placeholder="tag">
<input id="iota_metadata" placeholder="metadata">
<input id="iota_data" placeholder="data">
<input id="iota_unit" placeholder="unit (Optional)" value="IOTA">
</div>
<button onclick="sendTransaction()" class="btn btn-primary">Send Transaction</button>
</div>
<div class="block">
<h4>shimmer_sendTransaction</h4>
<div class="address-input">
<input id="shimmer_address" type="text" placeholder="send to ( address ) ">
<input id="shimmer_amount" type="number" placeholder="amount">
<input id="shimmer_tag" placeholder="tag">
<input id="shimmer_metadata" placeholder="metadata">
<input id="shimmer_data" placeholder="data">
<input id="shimmer_unit" placeholder="unit (Optional)" value="SMR">
</div>
<button onclick="sendTransactionShimmer()" class="btn btn-primary">Send Transaction</button>
</div>
</div>
<div class="middle">
<div class="block">
<h4>shimmer_token_sendTransaction</h4>
<div class="address-input">
<input id="shimmer_token_address" type="text" placeholder="send to ( address ) ">
<input id="shimmer_token_amount" type="number" placeholder="amount">
<input id="shimmer_token_tag" placeholder="tag">
<input id="shimmer_token_metadata" placeholder="metadata">
<input id="shimmer_token_data" placeholder="data">
<input id="shimmer_token_assetId" placeholder="assetId">
</div>
<button onclick="sendTransactionShimmerToken()" class="btn btn-primary">Send Transaction</button>
</div>
<div class="block">
<h4>shimmer_nft_sendTransaction</h4>
<div class="address-input">
<input id="shimmer_nft_address" type="text" placeholder="send to ( address ) ">
<input id="shimmer_nft_tag" placeholder="tag">
<input id="shimmer_nft_metadata" placeholder="metadata">
<input id="shimmer_nft_data" placeholder="data">
<input id="shimmer_nft_assetId" placeholder="nftId">
</div>
<button onclick="sendTransactionShimmerNft()" class="btn btn-primary">Send Transaction</button>
</div>
<div class="block">
<h4>iota_changeAccount</h4>
<div class="radio-con">
<span>
<input type="radio" name="changeAccount" value="mainnet">iota mainnet</input>
</span>
<span>
<input type="radio" name="changeAccount" value="iota-evm">iota-evm</input>
</span>
<span>
<input type="radio" name="changeAccount" value="bsc">bsc</input>
</span>
</div>
<button onclick="changeAccount()" class="btn btn-primary">Change Account</button>
</div>
<div class="block">
<h4>iota_getPublicKey</h4>
<div class="address-input">
<input id="public_key_address" type="text" placeholder="publickey address">
</div>
<button onclick="getPublicKey()" class="btn btn-primary">Get PublicKey</button>
</div>
<div class="block" style="display: non;">
<h4>personal_sign</h4>
<div class="address-input">
<input id="sign_eth_data" type="text" placeholder="content">
</div>
<button onclick="onEthPersonalSign()" class="btn btn-primary">Personal Sign</button>
</div>
<div class="block">
<h4>eth_getBalance</h4>
<div class="radio-con">
<span>
<input type="checkbox" name="balance_eth" value="evm">evm</input>
</span>
<span>
<input type="checkbox" name="balance_eth" value="soonaverse">soonaverse</input>
</span>
</div>
<button onclick="getEthBalances()" class="btn btn-primary">Get Eth balances</button>
</div>
<div class="block">
<h4>eth_sendTransaction</h4>
<div class="address-input">
<input id="eth_address" type="text" placeholder="send to ( address ) ">
<input id="eth_amount" type="number" placeholder="amount">
</div>
<button onclick="onEthSendTransaction()" class="btn btn-primary">ETH Send Transaction</button>
</div>
<div class="block">
<h4>eth_sendTransaction (contract)</h4>
<div class="address-input">
<input id="eth_contract_address" type="text" placeholder="send to ( address ) ">
<input id="eth_contract_data" placeholder="data">
</div>
<button onclick="onEthSendContractTransaction()" class="btn btn-primary">ETH Send Transaction</button>
</div>
<div class="block">
<h4>eth_importContract (contract)</h4>
<div class="address-input">
<input id="eth_import_contract" type="text" placeholder="contract">
</div>
<button onclick="onEthImportContract()" class="btn btn-primary">ETH Import Contract</button>
</div>
<div class="block">
<h4>eth_importNFT</h4>
<div class="address-input">
<input id="eth_import_nft" type="text" placeholder="contract">
<input id="eth_import_token_id" type="text" placeholder="tokenId">
</div>
<button onclick="onEthImportNFT()" class="btn btn-primary">ETH Import NFT</button>
</div>
</div>
<div class="right">
<div id="text"></div>
</div>
</div>
</body>
<script src="./common.js"></script>
<script src="./dist/iife/index.js"></script>
<script>
const dom = document.getElementById('text')
const status = document.getElementById('status')
iota.redirectAppStoreIfNotInstalled = false;
window.addEventListener('iota-ready', () => {
status.innerText = `${iota?.isTanglePay ? 'TanglePay installed' : 'TanglePay not installed'}
Version: ${iota.tanglePayVersion || '--'}
`
window.onSign = async (bool) => {
const content = document.getElementById('sign_data').value
if(!content){
return;
}
try {
const res = await iota.request({
method: 'iota_sign',
params: {
content
}
})
dom.innerText += `
Sign result: ${JSON.stringify(res)}
`
} catch (error) {
dom.innerText += `
Sign result: ${JSON.stringify(error)}
`
}
}
window.onEthPersonalSign = async (bool) => {
const content = document.getElementById('sign_eth_data').value
if(!content){
return;
}
try {
const res = await iota.request({
method: 'personal_sign',
params: {
content
}
})
dom.innerText += `
Sign result: ${JSON.stringify(res)}
`
} catch (error) {
dom.innerText += `
Sign result: ${JSON.stringify(error)}
`
}
}
// expire time, default: 1 day (1000 * 3600 * 24 milliseconds).
window.onConnect = async (bool) => {
try {
const res = await iota.request({
method: 'iota_connect',
params: {
// expires: 3000000
}
})
dom.innerText += `
Connect result: ${JSON.stringify(res)}
`
return res
} catch (error) {
console.log(error, '----')
dom.innerText += `
Connect result: ${JSON.stringify(error)}
`
}
}
window.onGetAccounts = async () => {
try {
const res = await iota.request({
method: 'iota_accounts'
})
window.addressList = res
dom.innerText += `
GetAccounts result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
GetAccounts result: ${JSON.stringify(error)}
`
}
}
window.getBalances = async (addressList) => {
const balances = document.getElementsByName('balance')
const assetsList = [];
balances.forEach(e=>{
if(e.checked){
assetsList.push(e.value)
}
})
if(assetsList.length){
try {
// iota balance
const res = await iota.request({
method: 'iota_getBalance',
params: {
assetsList, // ['iota','soonaverse','smr','asmb']
// addressList:addressList,
addressList: [] // current addressList
}
})
dom.innerText += `
Get balance result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
Get balance result: ${JSON.stringify(error)}
`
return error
}
}
}
window.getBalancesShimmer = async (addressList) => {
const balances = document.getElementsByName('balance_shimmer')
const assetsList = [];
balances.forEach(e=>{
if(e.checked){
assetsList.push(e.value)
}
})
if(assetsList.length){
try {
// shimmer balance
const res = await iota.request({
method: 'iota_getBalance',
params: {
assetsList, // ['smr']
// addressList:addressList,
addressList: [] // current addressList
}
})
dom.innerText += `
Get balance(shimmer) result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
Get balance(shimmer) result: ${JSON.stringify(error)}
`
return error
}
}
}
window.sendTransaction = async () => {
const address = document.getElementById('iota_address').value
const amount = document.getElementById('iota_amount').value
const data = document.getElementById('iota_data').value || ''
const tag = document.getElementById('iota_tag').value || ''
const metadata = document.getElementById('iota_metadata').value || ''
const unit = document.getElementById('iota_unit').value || ''
if(!address || !amount){
return
}
try {
const res = await iota.request({
method: 'iota_sendTransaction',
params: {
to: address,
value: parseFloat(amount),
data,
unit,
tag,
metadata
}
})
dom.innerText += `
Send Transaction result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
Send Transaction result: ${JSON.stringify(error)}
`
return error
}
}
window.sendTransactionShimmer = async () => {
const address = document.getElementById('shimmer_address').value
const amount = document.getElementById('shimmer_amount').value
const data = document.getElementById('shimmer_data').value || ''
const tag = document.getElementById('shimmer_tag').value || ''
const metadata = document.getElementById('shimmer_metadata').value || ''
const unit = document.getElementById('shimmer_unit').value || ''
if(!address || !amount){
return
}
try {
const res = await iota.request({
method: 'iota_sendTransaction',
params: {
to: address,
value: parseFloat(amount),
data,
unit,
tag,
metadata
}
})
dom.innerText += `
Send Transaction result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
Send Transaction result: ${JSON.stringify(error)}
`
return error
}
}
window.sendTransactionShimmerToken = async () => {
const address = document.getElementById('shimmer_token_address').value
const amount = document.getElementById('shimmer_token_amount').value
const data = document.getElementById('shimmer_token_data').value || ''
const metadata = document.getElementById('shimmer_token_metadata').value || ''
const tag = document.getElementById('shimmer_token_tag').value || ''
const assetId = document.getElementById('shimmer_token_assetId').value || ''
if(!address || !amount || !assetId){
return
}
try {
const res = await iota.request({
method: 'iota_sendTransaction',
params: {
to: address,
value: parseFloat(amount),
data,
assetId,
tag,
metadata
}
})
dom.innerText += `
Send Transaction result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
Send Transaction result: ${JSON.stringify(error)}
`
return error
}
}
window.sendTransactionShimmerNft = async () => {
const address = document.getElementById('shimmer_nft_address').value
const data = document.getElementById('shimmer_nft_data').value || ''
const tag = document.getElementById('shimmer_nft_tag').value || ''
const metadata= document.getElementById('shimmer_nft_metadata').value || ''
const nftId = document.getElementById('shimmer_nft_assetId').value || ''
if(!address || !nftId){
return
}
try {
const res = await iota.request({
method: 'iota_sendTransaction',
params: {
to: address,
data,
nftId,
tag,
metadata
}
})
dom.innerText += `
Send Transaction result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
Send Transaction result: ${JSON.stringify(error)}
`
return error
}
}
window.onEthSendTransaction = async () => {
const address = document.getElementById('eth_address').value
const amount = document.getElementById('eth_amount').value
if(!address || !amount){
return
}
try {
const res = await iota.request({
method: 'eth_sendTransaction',
params: {
to:address,
value: amount,
}
})
dom.innerText += `
Send Transaction result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
Send Transaction result: ${JSON.stringify(error)}
`
return error
}
}
window.onEthSendContractTransaction = async () => {
const address = document.getElementById('eth_contract_address').value
const data = document.getElementById('eth_contract_data').value || ''
if(!address || !data){
return
}
try {
const res = await iota.request({
method: 'eth_sendTransaction',
params: {
to: address,
data
}
})
dom.innerText += `
Send Transaction result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
Send Transaction result: ${error}
`
return error
}
}
window.onEthImportNFT = async () => {
const nft = document.getElementById('eth_import_nft').value
const tokenId = document.getElementById('eth_import_token_id').value
if(!nft || !tokenId) {
return
}
try {
const res = await iota.request({
method: 'eth_importNFT',
params: {
nft,
tokenId: parseInt(tokenId)
}
})
dom.innerText += `
import nft result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
import nft error: ${JSON.stringify(error)}
`
return error
}
}
window.onEthImportContract = async ()=>{
const contract = document.getElementById('eth_import_contract').value
if(!contract){
return
}
try {
const res = await iota.request({
method: 'eth_importContract',
params: {
contract,
}
})
dom.innerText += `
import contract result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
import contract error: ${JSON.stringify(error)}
`
return error
}
}
window.changeAccount = async () => {
const networks = document.getElementsByName('changeAccount')
const networkList = [];
networks.forEach(e=>{
if(e.checked){
networkList.push(e.value)
}
})
if(networkList.length<=0){
return
}
try {
const res = await iota.request({
method: 'iota_changeAccount',
params: {
network: networkList[0] //mainnet ,iota-evm
}
})
dom.innerText += `
Change Account result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
Change Account result: ${JSON.stringify(error)}
`
return error
}
}
window.getEthBalances = async (addressList) => {
const balances = document.getElementsByName('balance_eth')
const assetsList = [];
balances.forEach(e=>{
if(e.checked){
assetsList.push(e.value)
}
})
if(assetsList.length<=0){
return;
}
try {
const res = await iota.request({
method: 'eth_getBalance',
params: {
assetsList, // ['evm','soonaverse']
// addressList:addressList,
addressList: [] // current addressList
}
})
dom.innerText += `
Get eth balance result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
Get eth balance result: ${JSON.stringify(error)}
`
return error
}
}
window.getPublicKey = async () => {
const address = document.getElementById('public_key_address').value
try {
const res = await iota.request({
method: 'iota_getPublicKey',
params: { address }
})
dom.innerText += `
Get publicKey result: ${JSON.stringify(res)}
`
return res
} catch (error) {
dom.innerText += `
Get publicKey result: ${JSON.stringify(error)}
`
return error
}
}
const changeAccountHandler = (e) => {
const { address } = e
dom.innerText += `
Switch account event: ${JSON.stringify(e)}
`
// window.onConnect()
}
iota.on('accountsChanged', changeAccountHandler)
// setTimeout(() => {
// iota.removeListener('accountsChanged', changeAccountHandler)
// iota.removeAllListener('accountsChanged')
// }, 1000)
window.onConnect()
})
</script>
</html>