Merge pull request #69 from BossaDev/saveTx

2nd hackathon submission

Author: fabiohild

docs.html

@@ -24,13 +24,12 @@
 
     <h2>Motivation</h2>
     <p>Some say that flashloans democratize access to large amounts of capital, but that is not entirely true, until they are useable by the average investor. Nowadays to access the feature one needs deep technical logic, and good coding skills. Atomic will put this and other great tools in the hands of a lot more users.</p>
-    <p>This was a hack in the hackathon.money hackathon by ETHGlobal.</p>
 
     <h2>Tech Stack</h2>
     <p>We started with just one smart contract, that would send one transaction after another on behalf of the user. The atomic functionality is still contained in a single contract, that creates proxies for user using CREATE2 (addresses are unique per user). We also had to develop a proxy contract for all "sandwich" blocks, or blocks that need to handle a callback like flashloans.</p>
     <p>We used Buidler to perform tests, also using a fork from the mainnet in Ganache.</p>
     <p>For the UI we forked scratch-blocks, and tweaked for our needs (removing all blocks provided by the library and adding our own, plus some other small mods). We made those changes with extensibility in mind. Each block lives in a single JS file, the way we envision this in the future is that companies will pull request blocks that use their platforms.</p>
-    <p>We also of course used Ethers JS extensively for encoding a bunch of data and any interaction with Web3, and our choice of wallet was Portis.</p>
+    <p>We also of course used Ethers JS extensively for encoding a bunch of data and any interaction with Web3.</p>
     <p>Currently there are bocks for ETH transfers, ERC20 Transfers, Uniswap swap (V1 and V2) and flashswap, Aave flashloan, Compound supplying and borrowing, Pooltogether, Defi Zaps, Balancer and an ENS resolver.</p>
     <p>The dapp is served from IPFS (pinned on Pinata), and is available at <a href="http://atomicninja.eth.link" target="_blank">atomicninja.eth</a> and <a href="https://atomic.ninja" target="_blank">atomic.ninja</a>.</p>
 
@@ -57,6 +56,19 @@ <h3><img src='./media/zoom-simulateAtomic.svg'> Simulate</h3>
     <p>Press this button to simulate the call. Your call to the atomic contract will be encoded exactly as when you send it, but will be sent  unsigned to a public node. This will indicate if the transaction will fail or succeed using the state of the latest mainnet block. Currently no feedback on failure is provided (the node provides no details on failures), if your transaction is failing, take a look and check if all your blocks have the funds to perform their action at the point of execution.</p>
     <h3><img src='./media/zoom-launchAtomic.svg'> Launch Atomic Tx</h3>
     <p>Lift off! Use this button to send out your atomic (mainnet only). This is currently disabled as we feel  the tool is not ready to handle funds. Remember, this is hackathon code.</p>
+    <h3>Transaction Menu</h3>
+    <h4>Save</h4>
+    <p>Will save the transaction to your local storage (no servers unfortunately :) so if you want to open the transaction in a different device you'll need to share it).</p>
+    <h4>Open</h4>
+    <p>You'll be presented with a list of previously saved ninja transactions.</p>
+    <h4>Share</h4>
+    <p>Sharing allows you to send a url out to friends or in social media. When you press share, your transaction will be uploaded to IPFS. The link to open it is copied to your clipboard, so you can paste it anywhere.</p>
+    <p>Remember that IPFS is efemeral by nature, if your transaction is not used for long enough the files will no longer be available. If you need your transactions to persist (if embedding in your website for example), we recommend using <a href="https://pinata.cloud" target="_blank">IPFS Pinata</a>, they provide 1gb in their free tier, enough for millions of ninja transactions. Our front end is pinned in their free tier :)</p>
+    <h4>Embed</h4>
+    <p>This allows you to embed any transaction in your website. Embeded transactions are not editable by nature, but if the user clicks on the Atomic Ninja icon he will be taken to a full fledged editor. This features works particularly well on mobile.</p>
+    <p>Funcitonal example (thank you for sending this one out 😊):</p>
+    <iframe width="560" height="315" src="./index.html?&tx=QmQxEnYR2ztMah5eTjRekbQkgZ74iv97BqSrifPjSf1kZb&embed=true" frameborder="0" allowfullscreen></iframe>
+
 
     <h2>How it works</h2>
     <p>When you start a ninja transaction a call is made for the atomic smart contract. It then creates a proxy for the user (using Create2, proxy addresses are unique per user) that then sequentially executes the transactions. Let's look with more detail into an actual transaction:</p>
@@ -83,7 +95,7 @@ <h2>How it works</h2>
     <h2>Launch vs. Simulate</h2>
     <p>Both will pack the transactions the exact same way.</p>
     <p>When you press simulate, atomic sends an eth_call (the one used to read from smart contracts) to a public node, the return value will tell you if it succeeds. If it fails, we made some EVM hackery to return the revert message from the <i>original</i> revert. This means that you will see a revert message from DAI smart contract for failed transfers. Some contracts of course will not have a message, and then you will see a generic error. Failed ETH transfers also do not give any feedback. We have already nailed how to present to the user the block in which the ninja tx failed, but have yet to implement it.</p>
-    <p>When you press launch, you will be prompted to sign the transaction, and it will be bradcasted by Portis.</p>
+    <p>When you press launch, you will be prompted to sign the transaction. Lift off 🚀!</p>
 
     <p>We sent the above example out, you can check it on <a href="https://etherscan.io/tx/0x72b7156c60d8a94fa074497c360e20cb96b02d85b45e13a137049fa3a469d38f" target="_blank">Etherscan</a> or with much more detail on <a href="https://dashboard.tenderly.co/tx/main/0x72b7156c60d8a94fa074497c360e20cb96b02d85b45e13a137049fa3a469d38f" target="_blank">Tenderly</a>.</p>
     <p>Below are the Etherscan verified contracts the transaction interacted with, also courtesy of Tenderly:</p>

index.html

@@ -7,6 +7,18 @@
 
   <title>Atomic Ninja</title>
 
+  <script>
+    var loc = window.location.href + '';
+    if (loc.indexOf('http://') == 0 &&
+      !(loc.indexOf('http://localhost:8000/') == 0 ||
+        loc.indexOf('http://0.0.0.0:8000/') == 0 ||
+        loc.indexOf('file:///') == 0)
+    ) {
+      console.log("Redirecting to SSL connection.")
+      window.location.href = loc.replace('http://', 'https://');
+    }
+  </script>
+
   <!-- This exposes the library as a global variable: ethers -->
   <script src="./js/lib/ethers.min.js" charset="utf-8" type="text/javascript"></script>
   <script src="./js/lib/blockly_compressed_vertical.js"></script>
@@ -44,74 +56,11 @@
   <script type="text/javascript" src="./js/lib/buffer.js"></script>
   <script src="./js/setup.js"></script>
 
-  <script>
-    'use strict';
-
-    var loc = window.location.href + '';
-    if (loc.indexOf('http://') == 0 &&
-      !(loc.indexOf('http://localhost:8000/') == 0 ||
-        loc.indexOf('http://0.0.0.0:8000/') == 0 ||
-        loc.indexOf('file:///') == 0)
-    ) {
-      console.log("Redirecting to SSL connection.")
-      window.location.href = loc.replace('http://', 'https://');
-    }
-
-    var workspace = null;
-
-    function start() {
-
-      // Create main workspace.
-      workspace = Blockly.inject('blocklyDiv', {
-        comments: true,
-        disable: false,
-        collapse: false,
-        media: './media/',
-        readOnly: false,
-        rtl: null,
-        scrollbars: true,
-        toolbox: getToolboxElement(),
-        toolboxPosition: "start",
-        horizontalLayout: false,
-        sounds: true,
-        zoom: {
-          controls: true,
-          wheel: true,
-          startScale: 0.85,
-          maxScale: 4,
-          minScale: 0.25,
-          scaleSpeed: 1.1
-        },
-        colours: {
-          fieldShadow: 'rgba(255, 255, 255, 0.3)',
-          dragShadowOpacity: 0.6
-        }
-      });
-
-      picoModal(
-        "<h2>Welcome to Atomic Ninja!</h2>" +
-        "<p>Send complex atomic transactions to Ethereum like never before.</p>" +
-        "<h3>Quick Start</h3>" +
-        "<p>On the left of the screen there is a list of sorted, disconnected blocks. This is your <b>toolbox</b>.</p>" +
-        "<p>Drag the blocks to the <b>workspace</b> at the right, join them and edit their parameters to perform the actions you´d like.</p>" +
-        "<p>Start with a hat shaped block such as <img src='./media/hatblock.png' style='width: 11%;'>, as they indicate the beginning of your transaction.</p>" +
-        "<p>Once you are done, press <img src='./media/zoom-simulateAtomic.svg'> to simulate your transaction, and <img src='./media/zoom-launchAtomic.svg'> to send it out!</p>" +
-        "<p><b>Tip:</b> Hover the blocks for details on how they work.</p>" +
-        "<p>For more details, head over to the <a href='./docs.html'>Atomic documentation</a>.</p>"
-      ).show();
-    }
-
-    function getToolboxElement() {
-      var match = location.search.match(/toolbox=([^&]+)/);
-      return document.getElementById('toolbox-' + (match ? match[1] : 'categories'));
-    }
-  </script>
-
   <style>
     html,
     body {
       height: 100%;
-      background-color: lightgrey;
+      background-color: transparent;
       font-family: sans-serif;
       overflow: hidden;
     }
@@ -174,25 +123,28 @@
   </style>
 </head>
 
-<body onload="start()">
-  <nav>
+<body onload="setup()">
+  <div id="embedLogo">
+    <a id="embedLink" href="#" target="_blank"><img src='./media/atomic-ninja-icon.png'
+          style="width: 30px; position: relative; top: 20px; left: 10px; z-index: 101 !important;"></a>
+  </div>
+  <nav id="navbar">
     <ul class="menu">
-      <li><img src='./media/atomic-ninja-icon.png' style="width: 30px; margin-right: 25px; position: relative; top: -4px;">
+      <li><img src='./media/atomic-ninja-icon.png'
+          style="width: 30px; margin-right: 25px; position: relative; top: -4px;">
       </li>
       <li><a href="#">Transaction</a>
         <ul>
           <li><a href="#" onclick="saveAtomic()">Save</a></li>
           <li><a href="#" onclick="openMenu()">Open</a></li>
           <li><a href="#" onclick="shareAtomic()">Share</a></li>
-          <li><a href="#">Embed</a></li>
+          <li><a href="#" onclick="embedAtomic()">Embed</a></li>
         </ul>
       </li>
-      <li><a
-          href="./docs.html">Docs</a>
+      <li><a href="./docs.html">Docs</a>
+      </li>
+      <li><a href="mailto:[email protected]">Contact</a>
       </li>
-      <li><a
-        href="mailto:[email protected]">Contact</a>
-    </li>
     </ul>
   </nav>
   <div id="blocklyDiv"></div>

js/saveAtomic.js

@@ -8,7 +8,7 @@ const copyToClipboard = str => {
     el.select();
     document.execCommand('copy');
     document.body.removeChild(el);
-  };
+};
 
 const saveAtomic = () => {
     let xml = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)
@@ -20,13 +20,25 @@ const saveAtomic = () => {
 const openAtomic = (txName) => {
     // let txName = prompt("Open transaction", "My Atomic Tx");
     let xml = Blockly.Xml.textToDom(localStorage.getItem(txName))
-    console.log(xml)
 
     Blockly.mainWorkspace.clear()
     Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xml)
 }
 
+var modal
+
 const openMenu = () => {
+    let list = JSON.parse(localStorage.getItem('txList'));
+
+    let modalContent = "<h2>Open Transaction</h2>"
+    for (i = 0; i < list.length; i++)
+        modalContent += "<h4><a href='#' onclick='openAtomic(\"" + list[i] + "\");modal.close()'> " + list[i] + "</a><h4>"
+
+    modal = picoModal(modalContent).show();
+    return
+
+    console.log(list)
+
     let txName = prompt("Please type the name of the tx to open (we'll improve this soon).", "My Atomic Tx");
     openAtomic(txName)
 }
@@ -55,6 +67,30 @@ const shareAtomic = () => {
     });
 }
 
+const embedAtomic = () => {
+    const ipfs = IpfsHttpClient('ipfs.infura.io', '5001', {
+        protocol: "https"
+    })
+
+    let xml = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)
+
+    const transaction = buffer.Buffer(Blockly.Xml.domToText(xml))
+    ipfs.add(transaction, (err, result) => {
+        if (err) {
+            console.error(err)
+            return
+        } else {
+            console.log(result)
+            console.log('https://ipfs.io/ipfs/' + result[0].hash)
+            copyToClipboard("https://atomic.ninja/?&tx=" + result[0].hash + "&embed=true")
+            alert("URL copied to clipboard. iFrame it on your webpage and you'll be good to go (SSL required). \n\n It's on IPFS, so if you want it to persist overtime you have to pin it. We recomment https://pinata.cloud/, they allow for pinning of thousasnds of transactions in their free tier. That said, your transaction should be good for the coming days. \n\n The IPFS hash of the transaction is: " + result[0].hash)
+
+            // copying to clipboard
+
+        }
+    });
+}
+
 function addToTxList(txName) {
     var list;
     //is anything in localstorage?
@@ -63,6 +99,7 @@ function addToTxList(txName) {
     } else {
         list = JSON.parse(localStorage.getItem('txList'));
     }
-    list.push(txName);
+    if (!list.includes(txName))
+        list.push(txName);
     localStorage.setItem('txList', JSON.stringify(list));
 }

js/setup.js

@@ -1,3 +1,7 @@
+'use strict';
+
+var workspace = null;
+
 // routines that run when starting
 function getUrlVars() {
   var vars = {};
@@ -7,30 +11,89 @@ function getUrlVars() {
   return vars;
 }
 
-
+function getToolboxElement() {
+  var match = location.search.match(/toolbox=([^&]+)/);
+  return document.getElementById('toolbox-' + (match ? match[1] : 'categories'));
+}
 
 async function setup() {
+
+
   let urlVars = getUrlVars()
 
   const ipfs = IpfsHttpClient('ipfs.infura.io', '5001', {
     protocol: "https"
   })
 
+  let readOnly = false
+  let scrollbars = true
+  if (urlVars.embed) {
+    // hide stuff
+    document.getElementById("navbar").style.display = "none";
+    document.getElementById("blocklyDiv").style.height = "100%";
+    document.getElementById("blocklyDiv").style.top = "-30px";
+    document.getElementById("embedLink").href = "https://atomic.ninja?&tx=" + urlVars.tx;
+    readOnly = true
+    scrollbars = false
+  } else {
+    document.getElementById("embedLogo").style.display = "none";
+  }
+
+  // Create main workspace.
+  workspace = Blockly.inject('blocklyDiv', {
+    comments: true,
+    disable: false,
+    collapse: false,
+    media: './media/',
+    readOnly: readOnly,
+    rtl: null,
+    scrollbars: scrollbars,
+    toolbox: getToolboxElement(),
+    toolboxPosition: "start",
+    horizontalLayout: false,
+    sounds: true,
+    zoom: {
+      controls: true,
+      wheel: true,
+      startScale: 0.85,
+      maxScale: 4,
+      minScale: 0.25,
+      scaleSpeed: 1.1
+    },
+    colours: {
+      fieldShadow: 'rgba(255, 255, 255, 0.3)',
+      dragShadowOpacity: 0.6
+    }
+  });
+
+  // open tx
   if (urlVars.tx) {
-    txData = await ipfs.get(urlVars.tx)
+
+    let txData
+    if (urlVars.tx.substr(-1) == "#")
+      txData = await ipfs.get(urlVars.tx.slice(0, -1))
+    else
+      txData = await ipfs.get(urlVars.tx)
+
 
     let atomicTx = new TextDecoder("utf-8").decode(txData[0].content);
 
     let xml = Blockly.Xml.textToDom(atomicTx)
     Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xml)
   }
 
-  if (urlVars.embed) {
-    // hide stuff
-    console.log("hide stuff")
-  }
+  if (!urlVars.embed) 
+  picoModal(
+    "<h2>Welcome to Atomic Ninja!</h2>" +
+    "<p>Send complex atomic transactions to Ethereum like never before.</p>" +
+    "<h3>Quick Start</h3>" +
+    "<p>On the left of the screen there is a list of sorted, disconnected blocks. This is your <b>toolbox</b>.</p>" +
+    "<p>Drag the blocks to the <b>workspace</b> at the right, join them and edit their parameters to perform the actions you´d like.</p>" +
+    "<p>Start with a hat shaped block such as <img src='./media/hatblock.png' style='width: 11%;'>, as they indicate the beginning of your transaction.</p>" +
+    "<p>Once you are done, press <img src='./media/zoom-simulateAtomic.svg'> to simulate your transaction, and <img src='./media/zoom-launchAtomic.svg'> to send it out!</p>" +
+    "<p><b>Tip:</b> Hover the blocks for details on how they work.</p>" +
+    "<p>For more details, head over to the <a href='./docs.html'>Atomic documentation</a>.</p>"
+  ).show();
 
 
-}
-setup()
-
+}