feat: use-wallet integration (#141)

* feat: use-wallet integration * refactor: trimming codebase * refactor: trimming codebase * refactor: eslint warnings
AlgoWorldNFT · Dec 21, 2022 · 8179e4e · 8179e4e · github-actions · Dec 21, 2022
1 parent 19a1dda
commit 8179e4e
Show file tree

Hide file tree

Showing 57 changed files with 1,194 additions and 1,971 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -1,7 +1,9 @@
 name: E2E Tests
 on:
-  pull_request:
-    branches: [main]
+  # pull_request:
+  #   branches: [main]
+  workflow_dispatch:
+
 jobs:
   e2e_test:
     env:

diff --git a/e2e/pages/public-swaps.spec.ts b/e2e/pages/public-swaps.spec.ts
@@ -6,7 +6,7 @@ import {
   NAV_BAR_SETTINGS_MENU_ITEM_ID,
 } from '@/components/Headers/constants';
 import {
-  CONNECT_WALLET_DIALOG_ID,
+  CONNECT_PROVIDER_DIALOG_ID,
   FROM_ASSET_PICKER_DIALOG_SEARCH_ID,
   DIALOG_SELECT_BTN_ID,
   FROM_ASSET_PICKER_DIALOG_ID,
@@ -66,7 +66,9 @@ test.afterAll(async () => {
 test.describe(`Public Swaps`, () => {
   test(`Bob should be able to load and connect wallet`, async () => {
     await page.locator(`id=${NAV_BAR_CONNECT_BTN_ID}`).click();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeVisible();
+    await expect(
+      page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`),
+    ).toBeVisible();
     await page.locator(`div[role="button"]:has-text("Mnemonic")`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeVisible();
     await page
@@ -76,7 +78,7 @@ test.describe(`Public Swaps`, () => {
     await page.locator(`id=${MNEMONIC_DIALOG_SELECT_BUTTON_ID}`).click();
 
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeHidden();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeHidden();
+    await expect(page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`)).toBeHidden();
   });
 
   test(`Bob should be able to navigate to Asa to Asa page`, async () => {
@@ -172,7 +174,9 @@ test.describe(`Public Swaps`, () => {
 
   test(`Alice should be able to load and connect wallet`, async () => {
     await page.locator(`id=${NAV_BAR_CONNECT_BTN_ID}`).click();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeVisible();
+    await expect(
+      page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`),
+    ).toBeVisible();
     await page.locator(`div[role="button"]:has-text("Mnemonic")`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeVisible();
     await page.waitForTimeout(5000);
@@ -182,7 +186,7 @@ test.describe(`Public Swaps`, () => {
 
     await page.locator(`id=${MNEMONIC_DIALOG_SELECT_BUTTON_ID}`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeHidden();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeHidden();
+    await expect(page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`)).toBeHidden();
   });
 
   test(`Alice should perform swaps`, async () => {
@@ -216,15 +220,17 @@ test.describe(`Public Swaps`, () => {
 
   test(`Bob should successfully remove created swap`, async () => {
     await page.locator(`id=${NAV_BAR_CONNECT_BTN_ID}`).click();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeVisible();
+    await expect(
+      page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`),
+    ).toBeVisible();
     await page.locator(`div[role="button"]:has-text("Mnemonic")`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeVisible();
     await page
       .locator(`id=${MNEMONIC_DIALOG_TEXT_INPUT_ID}`)
       .fill(process.env.E2E_TESTS_BOB_MNEMONIC ?? ``);
     await page.locator(`id=${MNEMONIC_DIALOG_SELECT_BUTTON_ID}`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeHidden();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeHidden();
+    await expect(page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`)).toBeHidden();
 
     await page.locator(`id=${NAV_BAR_SETTINGS_BTN_ID}`).click();
     await Promise.all([

diff --git a/e2e/pages/swappers/asa-to-asa.spec.ts b/e2e/pages/swappers/asa-to-asa.spec.ts
@@ -6,7 +6,7 @@ import {
   NAV_BAR_SETTINGS_MENU_ITEM_ID,
 } from '@/components/Headers/constants';
 import {
-  CONNECT_WALLET_DIALOG_ID,
+  CONNECT_PROVIDER_DIALOG_ID,
   FROM_ASSET_PICKER_DIALOG_SEARCH_ID,
   DIALOG_SELECT_BTN_ID,
   FROM_ASSET_PICKER_DIALOG_ID,
@@ -59,7 +59,9 @@ test.afterAll(async () => {
 test.describe(`Asa to Asa Swap`, () => {
   test(`Bob should be able to load and connect wallet`, async () => {
     await page.locator(`id=${NAV_BAR_CONNECT_BTN_ID}`).click();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeVisible();
+    await expect(
+      page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`),
+    ).toBeVisible();
     await page.locator(`div[role="button"]:has-text("Mnemonic")`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeVisible();
     await page
@@ -69,7 +71,7 @@ test.describe(`Asa to Asa Swap`, () => {
     await page.locator(`id=${MNEMONIC_DIALOG_SELECT_BUTTON_ID}`).click();
 
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeHidden();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeHidden();
+    await expect(page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`)).toBeHidden();
   });
 
   test(`Bob should be able to navigate to Asa to Asa page`, async () => {
@@ -156,7 +158,9 @@ test.describe(`Asa to Asa Swap`, () => {
 
   test(`Alice should be able to load and connect wallet`, async () => {
     await page.locator(`id=${NAV_BAR_CONNECT_BTN_ID}`).click();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeVisible();
+    await expect(
+      page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`),
+    ).toBeVisible();
     await page.locator(`div[role="button"]:has-text("Mnemonic")`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeVisible();
     await page
@@ -165,7 +169,7 @@ test.describe(`Asa to Asa Swap`, () => {
 
     await page.locator(`id=${MNEMONIC_DIALOG_SELECT_BUTTON_ID}`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeHidden();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeHidden();
+    await expect(page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`)).toBeHidden();
   });
 
   test(`Alice should successfully perform swap created by Bob`, async () => {
@@ -199,15 +203,17 @@ test.describe(`Asa to Asa Swap`, () => {
 
   test(`Bob should successfully remove created swap`, async () => {
     await page.locator(`id=${NAV_BAR_CONNECT_BTN_ID}`).click();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeVisible();
+    await expect(
+      page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`),
+    ).toBeVisible();
     await page.locator(`div[role="button"]:has-text("Mnemonic")`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeVisible();
     await page
       .locator(`id=${MNEMONIC_DIALOG_TEXT_INPUT_ID}`)
       .fill(process.env.E2E_TESTS_BOB_MNEMONIC ?? ``);
     await page.locator(`id=${MNEMONIC_DIALOG_SELECT_BUTTON_ID}`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeHidden();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeHidden();
+    await expect(page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`)).toBeHidden();
 
     await page.locator(`id=${NAV_BAR_SETTINGS_BTN_ID}`).click();
     await Promise.all([

diff --git a/e2e/pages/swappers/asas-to-algo.spec.ts b/e2e/pages/swappers/asas-to-algo.spec.ts
@@ -6,7 +6,7 @@ import {
   NAV_BAR_SETTINGS_MENU_ITEM_ID,
 } from '@/components/Headers/constants';
 import {
-  CONNECT_WALLET_DIALOG_ID,
+  CONNECT_PROVIDER_DIALOG_ID,
   FROM_ASSET_PICKER_DIALOG_SEARCH_ID,
   DIALOG_SELECT_BTN_ID,
   FROM_ASSET_PICKER_DIALOG_ID,
@@ -56,7 +56,9 @@ test.afterAll(async () => {
 test.describe(`Asas to Algo Swap`, () => {
   test(`Bob should be able to load and connect wallet`, async () => {
     await page.locator(`id=${NAV_BAR_CONNECT_BTN_ID}`).click();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeVisible();
+    await expect(
+      page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`),
+    ).toBeVisible();
     await page.locator(`div[role="button"]:has-text("Mnemonic")`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeVisible();
     await page
@@ -66,7 +68,7 @@ test.describe(`Asas to Algo Swap`, () => {
     await page.locator(`id=${MNEMONIC_DIALOG_SELECT_BUTTON_ID}`).click();
 
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeHidden();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeHidden();
+    await expect(page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`)).toBeHidden();
   });
 
   test(`Bob should be able to navigate to Asas to Algo page`, async () => {
@@ -149,7 +151,9 @@ test.describe(`Asas to Algo Swap`, () => {
 
   test(`Alice should be able to load and connect wallet`, async () => {
     await page.locator(`id=${NAV_BAR_CONNECT_BTN_ID}`).click();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeVisible();
+    await expect(
+      page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`),
+    ).toBeVisible();
     await page.locator(`div[role="button"]:has-text("Mnemonic")`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeVisible();
     await page
@@ -158,7 +162,7 @@ test.describe(`Asas to Algo Swap`, () => {
 
     await page.locator(`id=${MNEMONIC_DIALOG_SELECT_BUTTON_ID}`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeHidden();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeHidden();
+    await expect(page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`)).toBeHidden();
   });
 
   test(`Alice should successfully perform swap created by Bob`, async () => {
@@ -192,15 +196,17 @@ test.describe(`Asas to Algo Swap`, () => {
 
   test(`Bob should successfully remove created swap`, async () => {
     await page.locator(`id=${NAV_BAR_CONNECT_BTN_ID}`).click();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeVisible();
+    await expect(
+      page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`),
+    ).toBeVisible();
     await page.locator(`div[role="button"]:has-text("Mnemonic")`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeVisible();
     await page
       .locator(`id=${MNEMONIC_DIALOG_TEXT_INPUT_ID}`)
       .fill(process.env.E2E_TESTS_BOB_MNEMONIC ?? ``);
     await page.locator(`id=${MNEMONIC_DIALOG_SELECT_BUTTON_ID}`).click();
     await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeHidden();
-    await expect(page.locator(`id=${CONNECT_WALLET_DIALOG_ID}`)).toBeHidden();
+    await expect(page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`)).toBeHidden();
 
     await page.locator(`id=${NAV_BAR_SETTINGS_BTN_ID}`).click();
     await Promise.all([

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "algoworld-swapper",
   "description": "Free and trustless ASA swapper, powered by Algorand ⚡️",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "private": true,
   "author": "AlgoWorld <info@algoworld.io>",
   "license": "GPL-3.0",
@@ -32,31 +32,36 @@
     ]
   },
   "dependencies": {
+    "@blockshake/defly-connect": "1.0.0",
     "@emotion/cache": "11.10.5",
     "@emotion/react": "11.10.5",
     "@emotion/server": "11.10.0",
     "@emotion/styled": "11.10.5",
     "@fontsource/roboto": "4.5.8",
     "@hookform/resolvers": "2.9.10",
+    "@json-rpc-tools/utils": "1.7.6",
     "@mui/icons-material": "5.11.0",
     "@mui/lab": "5.0.0-alpha.112",
     "@mui/material": "5.11.0",
     "@mui/x-data-grid": "5.17.16",
     "@perawallet/connect": "1.0.7",
     "@randlabs/myalgo-connect": "1.4.2",
     "@reduxjs/toolkit": "1.9.1",
+    "@txnlab/use-wallet": "1.0.4",
+    "@walletconnect/client": "1.8.0",
+    "algorand-walletconnect-qrcode-modal": "1.8.0",
     "algosdk": "1.24.1",
     "axios": "0.27.2",
     "axios-retry": "3.3.1",
     "next": "13.0.7",
     "next-pwa": "5.6.0",
     "nextjs-google-analytics": "2.2.2",
-    "notistack": "2.0.8",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-number-format": "4.9.4",
     "react-redux": "8.0.5",
+    "react-toastify": "9.1.1",
     "react-tsparticles": "2.6.0",
     "react-use": "17.4.0",
     "swr": "1.3.0",

diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -18,6 +18,7 @@
 
 import { ChainType } from '@/models/Chain';
 import { IpfsGateway } from '@/models/Gateway';
+import { PROVIDER_ID } from '@txnlab/use-wallet';
 
 export const CHAIN_TYPE: ChainType =
   (process.env.NEXT_PUBLIC_CHAIN_TYPE ?? `TestNet`) === `TestNet`
@@ -95,3 +96,5 @@ export const PERFORM_SWAP_PERFORM_BUTTON_ID = `AWPerformSwapPerformButton`;
 
 export const PUBLIC_SWAPS_SEARCH_FIELD_ID = `AWPublicSwapsSearchField`;
 export const PUBLIC_SWAPS_SEARCH_BUTTON_ID = `AWPublicSwapsSearchButton`;
+
+export const WALLET_PROVIDER_IDS = [PROVIDER_ID.MYALGO, PROVIDER_ID.PERA];
diff --git a/src/components/Buttons/ViewOnAlgoExplorerButton.test.tsx b/src/components/Buttons/ViewOnAlgoExplorerButton.test.tsx
diff --git a/src/components/Buttons/ViewOnAlgoExplorerButton.tsx b/src/components/Buttons/ViewOnAlgoExplorerButton.tsx
diff --git a/src/components/Buttons/constants.ts b/src/components/Buttons/constants.ts
diff --git a/src/components/Cards/FromSwapCard.tsx b/src/components/Cards/FromSwapCard.tsx
@@ -23,8 +23,9 @@ import { Asset } from '@/models/Asset';
 import { FromAssetPickerDialog } from '../Dialogs/FromAssetPickerDialog';
 import AssetListView from '../Lists/AssetListView';
 import { useAppSelector, useAppDispatch } from '@/redux/store/hooks';
-import { setOfferingAssets } from '@/redux/slices/walletConnectSlice';
+import { setOfferingAssets } from '@/redux/slices/applicationSlice';
 import { FROM_SWAP_OFFERING_ASSET_BTN_ID } from './constants';
+import { useWallet } from '@txnlab/use-wallet';
 
 type Props = {
   cardTitle: string;
@@ -33,12 +34,12 @@ type Props = {
 };
 
 const FromSwapCard = ({ cardTitle, maxAssets, disabled = false }: Props) => {
-  const assets = useAppSelector((state) => state.walletConnect.assets);
-  const address = useAppSelector((state) => state.walletConnect.address);
+  const assets = useAppSelector((state) => state.application.assets);
+  const { activeAddress } = useWallet();
   const [pickerOpen, setPickerOpen] = useState<boolean>(false);
 
   const offeringAssets = useAppSelector(
-    (state) => state.walletConnect.selectedOfferingAssets,
+    (state) => state.application.selectedOfferingAssets,
   );
   const dispatch = useAppDispatch();
 
@@ -76,7 +77,9 @@ const FromSwapCard = ({ cardTitle, maxAssets, disabled = false }: Props) => {
               <Button
                 id={FROM_SWAP_OFFERING_ASSET_BTN_ID}
                 disabled={
-                  offeringAssets.length >= maxAssets || !address || disabled
+                  offeringAssets.length >= maxAssets ||
+                  !activeAddress ||
+                  disabled
                 }
                 variant="outlined"
                 onClick={() => {