index.html

<!doctype html>
<html>
  <!--new computer-->
  </head>
    <title>Hello, Snaps!</title>
    <link rel="icon" type="image/svg" href="./images/icon.svg"/>
    <script src="encoding-indexes.js"></script>
    <script src="encoding.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/algosdk@1.16.0/dist/browser/algosdk.min.js"></script>
    
  </head>

  <body>
    <a href="/useWalletIntegration_test/index.html">testUseWallet</a>
    <h1>Algorand On Metamask Proof of Concept</h1>
    <h2>(testnet)</h2>
    <details>
      <summary>Instructions</summary>
      <ul>
        <li>First, Uninstall metamask and install metamask Flask</li>
        <li>then, click "Connect". Then, try out the other buttons!</li>
        <li>Please note that:</li>
      </ul>
    </details>
    <br/>
    
    <button class="connect">Connect</button>
    <button class="showMnemonic">Display Mnemonic</button>
    <button class="getBalance">Get Balance</button>
    <button class="getSpendable">Get Spendable Balance</button>
    <button id="getTransactionsButton">getTransactions</button>
    <button id="getAccounts">getAccounts</button>
    <br>
    <input type="checkbox" id="testnet" checked/>
    <label for="testnet">Testnet</label>
    <br>
    <button class="getAddress">Get Address</button>
    <p id="address"></p>
    <br>
    <input id="SendTo" value="HZ57J3K46JIJXILONBBZOHX6BKPXEM2VVXNRFSUED6DKFD5ZD24PMJ3MVA" placeholder="reciver address"/>
    <input id="Amount" value="100000" placeholder="amount" type="number"/>
    <input id="note" placeholder="note"/>
    <button class="transact">Transact</button>
    <button class="testAddress">Test Address</button>
    <br>
    <button onClick="clearAccounts()">clear Accounts</button>
    <br>
    <div id="transactionOutput" style="overflow-y: scroll;"></div>
    <p>Sign data</p>
    <input id="data"/>
    <button id="signButton">sign</button>
    <button id="getindexServerButton">getIndexServer</button>
    <button id="signTxnsButton">signTxns</button>
    <button id="toBase64Button">toBase64</button>

    <button id="optInButton">opt in</button>
    <button id="optOutButton">opt out</button>
    <button id="getAssetsButton">get Assets</button>
    <button id="sendAssetButton">send asset test</button>
    <button id="getAssetInfoButton">get asset info</button>
    <button id="signTransaction">Ezsign Transaction</button>
    <button id="signAndPostTransactionButton">Sign and Post Transaction Test</button>
    <button id="deployButton">deploy</button>
    <button id="ezSignTransactionButton">ezSignAndPost</button>


    <button id="importButton">importAccount</button>
    <br/>
    <br/>
    <p>create new Account</p>
    <input id="Account_name"/>
    <button id="createAccountButton">create new Account</button>
    <button id="logicsigButton">Sign Logic Sig</button>

    <div style="width:400px; max-width: 400px; word-break: break-all;" id="signature"></div> 
    <div>
      <p>Swap currencies</p>
      <p>from ticker</p>
      <input id="fromTicker" value="algo"/>
      <p>to ticker</p>
      <input id="toTicker" value="eth"/>
      <p>amount in</p>
      <input id="swapAmount" type="number"/>
      <p>email</p>
      <input id="email" placeholder="optional"/>
      <button id="getMinButton">getMin</button>
      <button id="preSwapButton">preSwap</button>
      <button id="swapSubmit">swap</button>
      <button id="getSwapHistory">swaphistory</button>
      <input id="transactionStatusInput" placeholder="changenow transaction id"/>
      <button id="getStatusButton">get Status</button>

      
    </div>
    <script src="sdk/index_bundle.js"></script>
  </body>

  <script>
    
    //const snapId = `npm:algorand`;
    const snapId = `local:${window.location.href}`;
    let snapAlgo = new SnapAlgo.Wallet(snapId);
    console.log(snapId)
    const connectButton = document.querySelector('button.connect')
    const sendButton = document.querySelector('button.showMnemonic')
    const balanceButton = document.querySelector('button.getBalance')
    const spendableButton = document.querySelector('button.getSpendable')
    const transactButton = document.querySelector('button.transact')
    const getAddressButton = document.querySelector('button.getAddress')
    const checkbox = document.getElementById('testnet')
    const transactionButton = document.getElementById('getTransactionsButton')
    const testAddressButton = document.querySelector('button.testAddress')
    const data = document.getElementById('data')
    const signButton = document.getElementById('signButton')
    const toBase64Button = document.getElementById('toBase64Button')
    const getIndexServerButton = document.getElementById('getindexServerButton')
    const signTxnsButton = document.getElementById('signTxnsButton')
    const optInButton = document.getElementById('optInButton')
    const getAssetsButton = document.getElementById('getAssetsButton')
    const optOutButton = document.getElementById('optOutButton')
    const sendAssetButton = document.getElementById('sendAssetButton')
    const getAssetInfoButton = document.getElementById('getAssetInfoButton')
    const createAccountButton = document.getElementById("createAccountButton")
    const signTransactionButton = document.getElementById("signTransaction")
    const signAndPostTransactionButton = document.getElementById("signAndPostTransactionButton")
    const logicsigButton = document.getElementById("logicsigButton")
    const deployButton = document.getElementById("deployButton")
    const importButton = document.getElementById("importButton")
    const fromTicker = document.getElementById('fromTicker');
    const toTicker = document.getElementById('toTicker');
    const swapAmount = document.getElementById('swapAmount');
    const swapSubmit = document.getElementById('swapSubmit');
    const email = document.getElementById('email');
    const getMinButton = document.getElementById('getMinButton');
    const preSwapButton = document.getElementById('preSwapButton');
    const getSwapHistoryButton = document.getElementById('getSwapHistory');
    const getStatusButton = document.getElementById('getStatusButton');
    const transactionStatusInput = document.getElementById('transactionStatusInput');
    const getAccountsButton = document.getElementById("getAccounts")
    const ezSignTransactionButton = document.getElementById("ezSignTransactionButton")

    optInButton.addEventListener('click', optInTest)
    optOutButton.addEventListener('click', optOutTest)
    testAddressButton.addEventListener('click', isValidAddress)
    connectButton.addEventListener('click', connect)
    sendButton.addEventListener('click', display_mnemonic)
    balanceButton.addEventListener('click', getBalance)
    spendableButton.addEventListener('click', getSpendable)
    transactButton.addEventListener('click', transact)
    getAddressButton.addEventListener('click', getAddress)
    transactionButton.addEventListener('click', getTransactions)
    signButton.addEventListener('click', signData)
    getIndexServerButton.addEventListener('click', getIndexServer)
    signTxnsButton.addEventListener('click', signTxns)
    toBase64Button.addEventListener('click', toBase64)
    getAssetsButton.addEventListener('click', getAssets)
    sendAssetButton.addEventListener('click', sendAssetTest)
    getAssetInfoButton.addEventListener('click', getAssetInfo)
    createAccountButton.addEventListener('click', createNewAccount)
    signAndPostTransactionButton.addEventListener('click', signAndPostTransaction)
    logicsigButton.addEventListener('click', signLogicSig)
    signTransactionButton.addEventListener('click', signTransaction);
    deployButton.addEventListener('click', deploy);
    importButton.addEventListener('click', import_account);
    swapSubmit.addEventListener('click', swap);
    getMinButton.addEventListener('click', getMin);
    preSwapButton.addEventListener('click', preSwap);
    getSwapHistoryButton.addEventListener('click', getSwapHistory);
    getStatusButton.addEventListener('click', getTransactionStatus);
    getAccountsButton.addEventListener('click', getAccounts);
    ezSignTransactionButton.addEventListener('click', ezSignTransaction);
    // here we get permissions to interact with and install the snap

    async function connect () {
      result = await ethereum.request({
      method: 'wallet_requestSnaps',
      params: {
        [snapId]: {}
        }
      })
      
    }
    
    async function getAssetInfo () {
      result = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId,
          request: { 
            method: 'getAssetById',
            params:{
              assetIndex: 312769
            }
          }
        }  
      })
      console.log(result)   
    }
    async function getSwapHistory(){
      const result = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          request: {
            method: 'swapHistory'
          }
        }
      })
      console.log(result);
    }

    async function getTransactionStatus(){
      result = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          request: {
            method: 'getSwapStatus',
            params:{
              id: transactionStatusInput.value
            }
          }
        }
      })
      console.log(result);
    }

    async function createNewAccount(){
      result = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          request: {
            method: 'createAccount',
            params:{
              name: document.getElementById("Account_name").value
            }
          }
        }
      })
    }


    async function swap(){
      result = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId:snapId, 
          request: {
            method: 'swap',
            params:{
              from: fromTicker.value,
              to: toTicker.value,
              amount: swapAmount.value,
              email: email.value
            }
          }
        }
      })
      console.log(result);
    }

    async function preSwap(){
      const result = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          request: {
            method: 'preSwap',
            params:{
              from: fromTicker.value,
              to: toTicker.value,
              amount: swapAmount.value
            }
          }
        }
      })
      console.log(result);
    }

    async function getMin(){
      const result = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          request: {
            method: 'getMin',
            params:{
              from: fromTicker.value,
              to: toTicker.value,
            }
          }
        }
      })
      console.log(result);
      return result;
    }

    async function signData(){
      console.log("here2")
      let thing = new Uint8Array(new TextEncoder().encode(document.getElementById('data').value));
      console.log(thing)
      let sig = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          request: {
            method: 'signData',
            params:{
              data: thing
            }
          }
        }        
      })
      console.log(sig)
      document.getElementById('signature').innerText = JSON.stringify(sig);
    }
    
    async function toBase64(){
      let b64 = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          request:{
          method: 'Uint8ArrayToBase64',
          params:{
            data: new Uint8Array(new TextEncoder().encode("hello"))
          }
        }}
      })
      console.log(b64);
      console.log(b64[0]);
      console.log(b64[1]);
    }

    async function signTransaction(){
      let client = await algorand.getAlgorandV2Client();
      const algodClient = new algosdk.Algodv2(client);
      let params = await algodClient.getTransactionParams().do();
      console.log(params);
      const receiver = "HZ57J3K46JIJXILONBBZOHX6BKPXEM2VVXNRFSUED6DKFD5ZD24PMJ3MVA";
      const sender = 'RQM3BAZ4WENFTGYW2MR5UR2BOGIR7KVM2HUYMPM47JCCL2W5XHN5LGW4EY';
      let txn = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
        from: sender, 
        to: receiver, 
        amount: 10000,  
        suggestedParams: params
      });
      
      const encodedTxn = await algorand.encodeTxn(txn);
      
      let txns = [{txn: encodedTxn, message: "this transaction is a test of sign transaction"}]
      const signed = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          request:{
            method: 'signTxns',
            params:{
              txns: encodedTxn,
              testnet: checkbox.checked
            }
        }}
      })
      console.log(signed);
    }

    async function signAndPostTransaction(){
      let client = await algorand.getAlgorandV2Client();
      const algodClient = new algosdk.Algodv2(client);
      let params = await algodClient.getTransactionParams().do();
      const receiver = "HZ57J3K46JIJXILONBBZOHX6BKPXEM2VVXNRFSUED6DKFD5ZD24PMJ3MVA";
      const sender = 'RQM3BAZ4WENFTGYW2MR5UR2BOGIR7KVM2HUYMPM47JCCL2W5XHN5LGW4EY';
      let txn = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
        from: sender, 
        to: receiver, 
        amount: 10000,  
        suggestedParams: params
      });
      
      const encodedTxn = await algorand.encodeTxn(txn);

      let txns = [{txn: encodedTxn, message: "this transaction is a test of sign and post transaction"}]
      const out = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          request: {
            method: 'signAndPostTxns',
            params:{
              txns: txns,
              testnet: checkbox.checked
            }
          }
        }
      })
      console.log(out);

    }

    async function optInTest(){
      // assetIndex = 31566704
      await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          request:{
            method: 'assetOptIn',
            params:{
              assetIndex: 31566704
            }
          }
        }        
      })
    }

    async function optOutTest(){
      // assetIndex = 31566704
      await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          request:{
            method: 'assetOptOut',
            params:{
              assetIndex: 31566704
            }
        }
      }        
      })
    }

    async function getAssets(){
      let assets = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {snapId:snapId, 
          request:{
            method: 'getAssets'
          }
        }       
      })
      document.getElementById('transactionOutput').innerText = JSON.stringify(assets);
    }

    async function sendAssetTest(){
      let to = "V6IA22M2VOZ736QCPYMWHMD5JVXPBJNUOZEMWKMR6IFRYSEFN452DAFJQQ"
      let amount = 10000
      let asset = 31566704
      let txn = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId:snapId, 
          request:{
            method: 'TransferAsset',
            params:{
              to: to,
              amount: amount,
              assetIndex: asset
            }
        }}     
      })
    }

    async function signTxns(){
      console.log("here")
      let client = await algorand.getAlgorandV2Client();
      const algodClient = new algosdk.Algodv2(client);
      let params = await algodClient.getTransactionParams().do();
      const receiver = "HZ57J3K46JIJXILONBBZOHX6BKPXEM2VVXNRFSUED6DKFD5ZD24PMJ3MVA";
      const sender = '37G4YMHO2N4MBRUN4NMUIZEOO5A44UMKRF26O3WIN7WRUTDPT6Z2NU46RE';
      let txn = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
        from: sender, 
        to: receiver, 
        amount: 10000,  
        suggestedParams: params
      });


      let txn2 = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
        from: sender, 
        to: receiver, 
        amount: 250,  
        suggestedParams: params
      });

      const txs = [txn, txn2]
      
      //algosdk.assignGroupID(txs);
      const encodedTxn = await window.algorand.encodeTxn(txn);
      const encodedTxn2 = await window.algorand.encodeTxn(txn2);
      
      
      console.log(txn);
      console.log("yo yo yo")
      let txns = [{txn: encodedTxn, message: "this transaction is a test"}]
      const out = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          request: {
            method: 'signTxns',
            txns: txns
          }
      }
      })
      /*
      await ethereum.request({
        method: 'wallet_invokeSnap',
        params: [snapId, {
          method: 'postTxns',
          stxns: out
        }]
      })
      */
      console.log(out);
    }


    async function getIndexServer(){
      const server = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId,
          request:{
            method:"GetIndexerClientFunction",
            snapId: snapId
          }

        }
      })
      console.log(server);
      return server;
    }
    async function clearAccounts(){
      await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId:snapId, 
          request: {
          method: 'clearAccounts',
        }
      }        
      })
    }

  async function deploy(){
    var deployParams = {
      from:'',
      suggestedParams:{},             
      onComplete:0,             
      approvalProgram:null,
      clearProgram:null,
      numLocalInts:5,
      numLocalByteSlices:5,
      numGlobalInts:5,
      numGlobalByteSlices:5
    }
    //compile from TEAL to Uint8Array machine code
  async function tealcompile(data){
    let compiled;
    try{
      let url = 'https://tealcompBackend.deatheye.repl.co/compile-teal';
      
      const res = await fetch(url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, *cors, same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
          'Content-Type': 'application/json',
          'x-api-key':'CkCQ04Vtng4VB8xMxa0mr8qxA179pJwW6For09eb'
        },
        redirect: 'follow', // manual, *follow, error
        referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
        body: JSON.stringify({inputcode:data}) // body data type must match "Content-Type" header
      });
      compiled = await res.json();
    
      let output = []
      for(let i = 0; i<Object.keys(compiled.result).length; i++){
        output.push(compiled.result[i]);
      }
    
      compiled = Uint8Array.from(output);
    } catch {}
    return compiled;
  }
  async function compile(){
    let error = [];
    deployParams.approvalProgram=await tealcompile(editor.getValue());
    deployParams.clearProgram=await tealcompile('#pragma version 4\nint 1');

    if(deployParams.approvalProgram.hasOwnProperty('message')){
      error += (deployParams.approvalProgram.message+'\n');
    }
    if(deployParams.clearProgram.hasOwnProperty('message')){
      error += deployParams.clearProgram.message;
    }
  
    if(error.length===0){
      document.getElementById('langNav').style.display='block';
      document.getElementById('deployButton').style.display='block';
    } else{alert(error)}
  }
  
  try {
    let algodClientParams = await window.algorand.getAlgodv2Client();
    let algodClient = new algosdk.Algodv2(algodClientParams);
    deployParams.from = await window.ethereum.request({
      method: 'wallet_invokeSnap',
      params:{ 
      snapId:'npm:algorand',
      request:{
        method: 'getAddress'
      }}
    });
    deployParams.suggestedParams = await algodClient.getTransactionParams().do();
    const signedTxn = await window.algorand.EZsign(txn);
    console.log('signed\n\n\n\n\n');
    //const response = await window.algorand.postTxns(signedTxn);
     //console.log('posted\n\n\n\n\n');
    
    //alert('Deploy successful\ntxId: '+response.txId);
  } catch(err) {alert(err)}
  
}

    async function isValidAddress(){
      const address = document.getElementById('SendTo').value
      const isValid = await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: snapId, 
          snapId:{
            method: 'isValidAddress',
            params:{
              address: document.getElementById('SendTo').value
            }
        }}
      })
      alert("adress is valid : " + isValid)
    }

    async function getAddress(){
      console.log("here in get Address")
      let address = await ethereum.request({
          method: 'wallet_invokeSnap',
          params: {
            snapId: snapId,
            request: {
              method: 'getAddress',
            }
          }
        })
      document.getElementById('address').innerText = address
    }

    // here we call the snap's "hello" method
    async function getBalance(){
      try{
        const response = await ethereum.request({
          method: 'wallet_invokeSnap',
          params: {
            snapId: snapId, 
            request: {
              method: 'displayBalance',
              params:{
                testnet: checkbox.checked
              }
            }
          }
        })
      }catch(e){
        console.error(e)
        alert(e.message)
      }
    }
    async function getSpendable(){
      try{
        const response = await ethereum.request({
          method: 'wallet_invokeSnap',
          params: {
            snapId:snapId, 
            request:{
              method: 'getSpendable',
              params: {
                testnet: checkbox.checked
              }
            }
          }
        })
        alert(response)
      }catch(e){
        console.error(e)
        alert(e.message)
      }
    }
    async function getTransactions(){
      try{
        const response = await ethereum.request({
          method: 'wallet_invokeSnap',
          params: {snapId: snapId, 
            request:{
              method: 'getTransactions',
              params: {
                testnet: checkbox.checked
              }
            }
          }
        })
        document.getElementById('transactionOutput').innerText = JSON.stringify(response);
      }catch(e){
        console.error(e)
        alert(err.message)
      }
    }

    async function signLogicSig(){
      let logic = `  
        arg_0
        btoi
        int 12345
        ==
        `
      console.log(logic);
      let client = await algorand.getAlgorandV2Client();
      const algodClient = new algosdk.Algodv2(client);
      let data = (await algodClient.compile(logic).do()).result;
      
      console.log("result is")
      console.log(data);
      data = algorand.base64Decode(data);
      let logicSigAccount = new algosdk.LogicSigAccount(data);
      console.log("to byte is");
      console.log(logicSigAccount.toByte());
      console.log(logicSigAccount);
      console.log(algorand.base64Encode(logicSigAccount.toByte()));
      const response = await ethereum.request({
          method: 'wallet_invokeSnap',
          params: {snapId: snapId,
            request:{
              method: 'signLogicSig',
              params:{
                logicSigAccount: algorand.base64Encode(logicSigAccount.toByte()),
                sender: 'info About the signature'
              }
            }
        }
      })
      let msgpack = algorand.base64Decode(response);
      let signedLogicSigAccount = algosdk.LogicSigAccount.fromByte(msgpack);
      console.log(signedLogicSigAccount);

      
      console.log(response);
    }

    async function getAccounts(){
      const response = await ethereum.request({
          method: 'wallet_invokeSnap',
          params: {snapId: snapId, 
            request:{
              method: 'getAccounts'
            }
          }
        })
      console.log(response);

    }

    async function transact(){
      try {
        let testnet = document.getElementById("testnet").checked
        console.log(testnet);
        const response = await ethereum.request({
          method: 'wallet_invokeSnap',
          params: {snapId: snapId, 
            request:{
              method: 'transfer',
              params:{
                testnet: checkbox.checked,
                to: document.querySelector('#SendTo').value,
                amount: document.querySelector('#Amount').value,
                note: document.getElementById('note').value,
                testnet: testnet
              }
            }}
        })
        console.log("transaction returned");
        console.log(response);
      } catch (err) {
        console.trace(err)
        console.error(err)
        alert('Problem happened: ' + err.message || err)
      }
    }      

    async function import_account(){
      await ethereum.request({
        method: 'wallet_invokeSnap',
        params: {snapId: snapId, 
          request: {
            method: 'importAccount',
            params:{
              name: "imported",
              mnemonic:'gallery hood dizzy coin puppy time hazard subway they woman step syrup guard elite rookie avoid hip isolate left play gain pave blind abandon category'
            }
          }
      }
      })
    }

    async function ezSignTransaction(){
                let client = await algorand.getAlgodv2Client();
                const algodClient = new algosdk.Algodv2(client);
                let params = await algodClient.getTransactionParams().do();
                const receiver = "HZ57J3K46JIJXILONBBZOHX6BKPXEM2VVXNRFSUED6DKFD5ZD24PMJ3MVA";
                const sender = 'DV23SHRW3JUPCXJN2KNCRIMQ75M3JV7RDYH3NP5CESZAUXHC7JPCP4GK6Y';
                let txn = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
                from: sender, 
                to: receiver, 
                amount: 1000000,  
                suggestedParams: params
                });
                algorand.EZsignAndPost(txn);
            };
    
      
    async function display_mnemonic () {
      try {
        const response = await ethereum.request({
          method: 'wallet_invokeSnap',
          params: {
            snapId: snapId, 
            request:{
              method: 'displayMnemonic',
            }
            
          }
        })
      } catch (err) {
        console.error(err)
        alert('Problem happened: ' + err.message || err)
      }
    }
  </script>
</html>