Technical Overview

Before we start setting up, here is a summary of what LoopGate is and does. You'll also know what you should have installed before starting.

An overview of the APIs and SDKs LoopGate interacts with.

• LoopGate is a web application built using in TypeScript using NextJS and TailwindCSS.

• LoopGate implements external SDKs/APIs. Most importantly:

  • Loopring API — Query the Loopring blockchain to get NFT ownership data.

  • Piñata API — Query and unlock submarined content on Piñata.

  • ConnectKit — Provides a seamless user experience for connecting crypto wallets.

• LoopGate can easily be deployed online from its GitHub repository using Netlify.

• You can edit the src/config/config.ts file to specify new unlockables.

Requirements

In order to create your own instance of LoopGate, you will need the following:

Tools: 🛠️

• Node JS installed on your computer. (Guide)

• Git installed on your computer. (Guide)

• A code editor. (I recommend VS Code)

Accounts: 🔑

• A GitHub account. (free)

• An activated Loopring L2 account. (GME Wallet / Loopring Wallet)

• A Piñata 'Picnic' account.

• A WalletConnect Project ID.

Once you meet all of the requirements above, proceed to setting up!