Quickly integrate Squarelink and open your Dapp to larger audiences.

It’s no secret that blockchain and UX do not live harmoniously. Assuming a user’s first introduction to blockchain doesn’t scare them off, managing private keys definitely will. And that’s before they’ve been introduced to MetaMask, Ledger, Smart Contracts, ICOs, SegWit, Change Addresses, Mining, etc.

My mom (sorry) doesn’t understand how HTTP works but she can still post on Facebook 12 times a day. We need to bring that same accessibility to the blockchain if we are ever to create mainstream DApps.

Squarelink has built a great tool that allows users to sign in, sign transactions, and recover private keys — using only an email and password — without holding custody of users keys. Basically, users have full and exclusive ownership of their keys without compromising the UX they’ve come to expect with typical online applications. See Squarelink’s white paper for more info.

Let’s get started building it into your DApp.

Step 1: Begin by signing up for a free Squarelink Developer account in the Squarelink Developer Console. You can use Google or Github. If you want to see Squarelink in action, try signing up with your Squarelink account. It’s as simple as OAuth and you can build it into your own applications!

Step 2: Head to the “Sign Transactions” tab in the console and click on “Add a token.” Here, you’ll setup support for a particular token in your application — you can register up to 3 tokens per application.

Squarelink currently supports Bitcoin, Litecoin, and Ethereum. With the latter, you set your token to be used for a specific, Etherscan-verified smart contract or ERC-20 token — (check out this article). If you choose Custom ERC-20 rather than a standard Ethereum smart contract, Squarelink can import things like the token symbol (i.e. ETH) and name (i.e. Ethereum) in addition to auto-verifying a Squarelink user’s balance for that token before transacting — improving the overall experience for your users.

For this example, I’ll be using an ERC-20 token called OmiseGo — a popular peer-to-peer financial network. However, rather than register the token as a “Custom ERC-20,” I’ll show you how Squarelink can be used ubiquitously across all Ethereum contracts.

Step 3: Select “Ethereum” for the currency and enter the contract address for the OmiseGo network — 0xd26114cd6EE289AccF82350c8d8487fedB8A0C07

You’ll get an HTML integration button that looks something like this:

<a href="https://app.squarelink.com/tx?       
   token_id=<Replace this with your own>
   &amount={decimal amount requested}
   &data={optional data field for smart contract}
   &method={smart contract method name (if no data)}
   &params=[{contract input 1},{contract input 2},...(if no data)]
   &gas={optional gas limit for tx (estimated otherwise)}
   &description={optional description for request}
   &state={optional value such as an order #}">
    <img src="https://squarelink.com/img/sign-tx.svg" width="220"/>
</a>

We have a few fields to fill in before it’s ready for your DApp. Breaking it down, we have:

• amount: Amount of ETHEREUM (not OmiseGo), measured in smallest units of ETH. So amount = “1” = 1x10^-18 ETH. We’re not sending any ETH, just OMG, so set this to “0”
• data: You can put your own hex-encoded contract data here, but instead, we’ll use method and params below, so scrap this field.
• method: This is the function you’d like to call in the smart contract. All ERC-20 contracts have the transfer method which accepts to (the recipient address) and tokens (number of ERC-20 tokens) as parameters in order. Set this to “transfer.”
• params: This is an array of the values for the parameters of the method you’re calling. Again, for the transfer method, we use to, which we’ll set to any recipient, and tokens, which we’ll set to “10000000000000000000” — looks large but, remember, we use the lowest non-divisible unit (for OmiseGo, it’s 18 decimal places), so this is just 10 tokens.
• gas: We’ll let Squarelink estimate it, so scrap it.
• description: Just something to display to your user in the request
• state: Useful if you need to attach an identifier to a transaction such as an order number.

Step 4: Filled in, we have the following button code:

<a href="https://app.squarelink.com/tx?
    token_id=<Replace this with your own>
    &amount=0
    &method=transfer
    &params=[
       0xed19abdc33e91c809376b742d48ed1d935d4faef,
       10000000000000000000
    ]
    &description=You're about to send 10 OmiseGo.">
  <img src="https://squarelink.com/img/sign-tx.svg" width="250"/>
</a>

Click on your resulting link and you should see something like this:

If you’ve gotten this far, congrats! You’re basically done. Notice that the transaction data is automatically encoded for you — this is useful for a generic smart contract, but if you’d like to offer your users a more descriptive request, try using “Custom ERC20” for your token currency (See some examples in Squarelink’s Documentation). You can watch me build ERC-20 integration for VeChain live here.

(Step 5): Once a user has successfully sent you a transaction, you might like to receive updates on the transaction. For that, check out Using Callbacks in the Squarelink Docs. You can receive HTTP POST callbacks to your own API whenever the transaction is confirmed on the blockchain!

If you’ve mastered this, you should be able to easily request ANY smart contract calls or cryptocurrency transactions from your users!

If you found this useful, be sure to check out Squarelink’s OAuth API as well!