Feature: WalletConnect V2 Update (#28)

- Update dependencies, most importantly: Wagmi, ConnectKit, SIWE &
WalletConnect.
- Re-do implementation to make SIWE work with Loopring Wallet again.

Author: 0xGeel

.env.example

@@ -8,5 +8,9 @@ PINATA_SUBMARINE_KEY=UNKNOWN
 # LOOPRING_API_KEY -> Go to: https://loopring.io/#/layer2/security
 LOOPRING_API_KEY=UNKNOWN
 
+# WALLETCONNECT variables 
+# NEXT_PUBLIC_WALLECTONNECT_ID -> Go to: https://docs.walletconnect.com/2.0/web/sign/installation
+NEXT_PUBLIC_WALLECTONNECT_ID=UNKNOWN
+
 # Other environment variables
 SESSION_SECRET=complex_password_at_least_32_characters_long

.npmrc

@@ -41,6 +41,15 @@ The Pinata Submarine API key is used to unlock the hidden files.
 - Next, click on the 'Developers' tab, then the 'Submarine keys' tab.
 - Click on '+ New Key' to generate a new key. Copy it, and paste it in your `.env` file so that `PINATA_SUBMARINE_KEY=YOUR_SUB_KEY`.
 
+## WalletConnect
+
+{% hint style="info" %}
+The WalletConnect Project ID is used to power WalletConnect connections.
+{% endhint %}
+
+- Head over to the WalletConnect documentation to create a Project and generate a Project ID: https://docs.walletconnect.com/2.0/web/sign/installation.
+- Once you have a Project ID paste it in your `.env` file so that `NEXT_PUBLIC_WALLECTONNECT_ID=YOUR_ID`.
+
 ## Session Secret
 
 {% hint style="info" %}

docs/setup/2-SECRETS.md

@@ -8,13 +8,13 @@ description: >-
 
 ![An overview of the APIs and SDKs LoopGate interacts with.](../../public/images/docs/loopgate-overview.png)
 
-* LoopGate is a web application built using in **TypeScript** using [NextJS](https://nextjs.org/) and [TailwindCSS](https://tailwindcss.com/).
-* LoopGate implements external **SDKs/APIs**. Most importantly:
-  * [Loopring API](https://docs.loopring.io/en/) — Query the Loopring blockchain to get NFT ownership data.
-  * [Piñata API](https://docs.pinata.cloud/pinata-submarine-api) — Query and unlock submarined content on Piñata.
-  * [ConnectKit](https://github.com/family/connectkit) — Provides a seamless user experience for connecting crypto wallets.
-* LoopGate can **easily be deployed online** from its GitHub repository using [Netlify](https://netlify.app/).
-* You can edit the `src/config/config.ts` file to specify **new unlockables.**
+- LoopGate is a web application built using in **TypeScript** using [NextJS](https://nextjs.org/) and [TailwindCSS](https://tailwindcss.com/).
+- LoopGate implements external **SDKs/APIs**. Most importantly:
+  - [Loopring API](https://docs.loopring.io/en/) — Query the Loopring blockchain to get NFT ownership data.
+  - [Piñata API](https://docs.pinata.cloud/pinata-submarine-api) — Query and unlock submarined content on Piñata.
+  - [ConnectKit](https://github.com/family/connectkit) — Provides a seamless user experience for connecting crypto wallets.
+- LoopGate can **easily be deployed online** from its GitHub repository using [Netlify](https://netlify.app/).
+- You can edit the `src/config/config.ts` file to specify **new unlockables.**
 
 ##
 
@@ -24,21 +24,16 @@ In order to create your own instance of LoopGate, you will need the following:
 
 ### **Tools: 🛠️**
 
-* [ ] **Node JS** installed on your computer. [(Guide)](https://nodejs.org/en/)
-* [ ] **Git** installed on your computer. [(Guide)](https://github.com/git-guides/install-git)
-* [ ] **A code editor**. [(I recommend VS Code)](https://code.visualstudio.com/)
+- [ ] **Node JS** installed on your computer. [(Guide)](https://nodejs.org/en/)
+- [ ] **Git** installed on your computer. [(Guide)](https://github.com/git-guides/install-git)
+- [ ] **A code editor**. [(I recommend VS Code)](https://code.visualstudio.com/)
 
 ### **Accounts: 🔑**
 
-* [ ] A [**GitHub**](https://github.com/) account. (free)
-* [ ] An activated **Loopring L2 account**. ([GME Wallet](https://wallet.gamestop.com/) / [Loopring Wallet](https://loopring.io/#/wallet))
-* [ ] A [**Piñata 'Picnic'**](https://www.pinata.cloud/pricing) account.
-
-FYI: [Piñata currently offer a 30-day trial](https://www.submarine.me/?utm\_medium=social\&utm\_source=twitter\&utm\_campaign=submarine\_q1\_2023\_jan) for the 'Picnic' tier.🛠️
-
-
-
-
+- [ ] A [**GitHub**](https://github.com/) account. (free)
+- [ ] An activated **Loopring L2 account**. ([GME Wallet](https://wallet.gamestop.com/) / [Loopring Wallet](https://loopring.io/#/wallet))
+- [ ] A [**Piñata 'Picnic'**](https://www.pinata.cloud/pricing) account.
+- [ ] A [**WalletConnect Project ID**](https://docs.walletconnect.com/2.0/web/sign/installation).
 
 {% hint style="info" %}
 Once you meet all of the requirements above, [proceed to setting up](../../1-FORKING.md)!

docs/setup/OVERVIEW.md

@@ -1,8 +1,10 @@
 namespace NodeJS {
   interface ProcessEnv {
+    NEXT_PUBLIC_APP_VERSION: string;
     NEXT_PUBLIC_PINATA_GATEWAY_URL: string;
     PINATA_SUBMARINE_KEY: string;
     LOOPRING_API_KEY: string;
     SESSION_SECRET: string;
+    NEXT_PUBLIC_WALLECTONNECT_ID: string;
   }
 }