vue dapp updated

punk-domains-2 · Sep 28, 2023 · 1338f64 · 1338f64
1 parent 7d75d2e
commit 1338f64
Show file tree

Hide file tree

Showing 36 changed files with 4,591 additions and 4,795 deletions.
diff --git a/index.html b/index.html
@@ -24,10 +24,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="/assets/js/walletConnect.js"></script><!-- TODO: edit this file based on the blockchain used (by default it's set up for Arbitrum One) -->
-    <!--
-    <script src="https://cdn.jsdelivr.net/npm/@walletconnect/[email protected]/dist/umd/index.min.js"></script>
-    -->
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,12 +7,16 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@metamask/detect-provider": "^2.0.0",
-    "bootstrap": "^5.1.3",
-    "bootstrap-icons": "^1.7.2",
+    "@coinbase/wallet-sdk": "^3.7.1",
+    "@gnosis.pm/safe-apps-provider": "^0.15.1",
+    "@gnosis.pm/safe-apps-sdk": "^7.8.0",
+    "@walletconnect/ethereum-provider": "^2.9.0",
+    "@walletconnect/modal": "^2.5.9",
+    "bootstrap": "^5.3.0",
+    "bootstrap-icons": "^1.10.5",
     "ethers": "^5.4.7",
     "vue": "^3.2.16",
-    "vue-demi": "^0.7.5",
+    "vue-dapp": "^0.9.1",
     "vue-gtag": "^2.0.1",
     "vue-router": "4",
     "vue-toastification": "^2.0.0-rc.5",

diff --git a/src/App.vue b/src/App.vue
@@ -2,18 +2,92 @@
   <Navbar />
 
   <div class="main-container background-main">
+
+    <!-- Connect Wallet modal -->
+    <div class="modal fade" id="connectModal" tabindex="-1" aria-labelledby="connectModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-sm" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Connect your wallet</h5>
+            <button id="closeConnectModal" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true"></span>
+            </button>
+          </div>
+          <div class="modal-body row">
+
+            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
+              <img src="./assets/wallets/metamask.png" class="card-img-top card-img-wallet" alt="MetaMask">
+              <small class="text-center text-muted">MetaMask</small>
+            </div>
+
+            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
+              <img src="./assets/wallets/bifrost.png" class="card-img-top card-img-wallet" alt="Bifrost">
+              <small class="text-center text-muted">Bifrost</small>
+            </div> 
+
+            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectWalletConnect">
+              <img src="./assets/wallets/wc.png" class="card-img-top card-img-wallet" alt="Wallet Connect">
+              <small class="text-center text-muted">WalletConnect</small>
+            </div>
+
+            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
+              <img src="./assets/wallets/rabby.png" class="card-img-top card-img-wallet" alt="Rabby">
+              <small class="text-center text-muted">Rabby</small>
+            </div> 
+
+            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
+              <img src="./assets/wallets/brave.png" class="card-img-top card-img-wallet" alt="Brave">
+              <small class="text-center text-muted">Brave</small>
+            </div>
+
+            <!--
+            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectCoinbase">
+              <img src="./assets/wallets/coinbase.png" class="card-img-top card-img-wallet" alt="Coinbase">
+              <small class="text-center text-muted">Coinbase</small>
+            </div>
+
+            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectWalletConnect">
+              <img src="./assets/wallets/minerva.png" class="card-img-top card-img-wallet" alt="Minerva">
+              <small class="text-center text-muted">Minerva</small>
+            </div>
+
+            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectWalletConnect">
+              <img src="./assets/wallets/argent.png" class="card-img-top card-img-wallet" alt="Argent">
+              <small class="text-center text-muted">Argent</small>
+            </div>
+
+            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectWalletConnect">
+              <img src="./assets/wallets/1inch.png" class="card-img-top card-img-wallet" alt="1inch">
+              <small class="text-center text-muted">1inch</small>
+            </div>
+
+            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
+              <img src="./assets/wallets/imtoken.png" class="card-img-top card-img-wallet" alt="imToken">
+              <small class="text-center text-muted">imToken</small>
+            </div>
+            -->
+
+            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
+              <img src="./assets/wallets/trust.png" class="card-img-top card-img-wallet" alt="Trust Wallet">
+              <small class="text-center text-muted">Trust Wallet</small>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- END Connect Wallet modal -->
+
     <router-view></router-view>
 
     <Footer />
   </div>
 
-  <vdapp-board />
 </template>
 
 <script lang="ts">
-import { onMounted } from "vue";
 import { ethers } from 'ethers';
-import { useEthers, useWallet } from './vue-dapp/index.esm.js';
+import { useEthers, useWallet, MetaMaskConnector, WalletConnectConnector, CoinbaseWalletConnector } from 'vue-dapp';
 import { mapActions, mapGetters, mapMutations } from 'vuex';
 import Navbar from './components/Navbar.vue';
 import Footer from './components/Footer.vue';
@@ -27,7 +101,17 @@ export default {
     Footer
   },
 
-  created() {
+  mounted() {
+    if (!this.isActivated) {
+			if (localStorage.getItem("connected") == "metamask") {
+				this.connectMetaMask();
+			} else if (localStorage.getItem("connected") == "walletconnect") {
+				this.connectWalletConnect();
+			} else if (localStorage.getItem("connected") == "coinbase") {
+				this.connectCoinbase();
+			}
+		}
+
     this.fetchReferrer();
     this.setTldContract();
     this.fetchMinterContractData();
@@ -55,6 +139,24 @@ export default {
     ...mapMutations("network", ["setNetworkData"]),
     ...mapMutations("tld", ["setTldContract"]),
 
+    async connectCoinbase() {
+			await this.connectWith(this.coinbaseConnector);
+			localStorage.setItem("connected", "coinbase"); // store in local storage to autoconnect next time
+			document.getElementById('closeConnectModal').click();
+		},
+
+		async connectMetaMask() {
+			await this.connectWith(this.mmConnector);
+			localStorage.setItem("connected", "metamask"); // store in local storage to autoconnect next time
+			document.getElementById('closeConnectModal').click();
+		},
+
+		async connectWalletConnect() {
+      document.getElementById('closeConnectModal').click();
+			await this.connectWith(this.wcConnector);
+			localStorage.setItem("connected", "walletconnect"); // store in local storage to autoconnect next time
+		},
+
     async fetchReferrer() {
       // check if any referral is present: ?ref=...
       const urlParams = new URLSearchParams(window.location.search);
@@ -90,18 +192,42 @@ export default {
 
   setup() {
     const { address, chainId, isActivated } = useEthers();
-    const { connect } = useWallet();
+    const { connectWith } = useWallet();
     const { getFallbackProvider } = useChainHelpers();
 
-    onMounted(() => {
-      // if user already connected via MetaMask before, connect them automatically on the next visit
-      if (!isActivated.value && localStorage.getItem("connected") == "metamask") {
-        connect("metamask");
+    const coinbaseConnector = new CoinbaseWalletConnector({
+			appName: "Flare Domains",
+			jsonRpcUrl: "https://flare-api.flare.network/ext/C/rpc",
+		});
+
+		const mmConnector = new MetaMaskConnector({
+			appUrl: "Flare Domains",
+		});
+
+    // wallet connect v2
+    // @TODO: make sure to add your own project ID (and verify your domain with wallet connect)
+		const wcConnector = new WalletConnectConnector({
+			projectId: 'aff0fd1035c24a0954db35a67067b0f0', // @TODO: use your own project ID!!!
+      chains: [14],
+      showQrModal: true,
+      qrModalOptions: {
+        themeMode: 'dark',
+        themeVariables: undefined,
+        chainImages: undefined,
+        desktopWallets: undefined,
+        walletImages: undefined,
+        mobileWallets: undefined,
+        enableExplorer: true,
+        explorerAllowList: undefined,
+        tokenImages: undefined,
+        privacyPolicyUrl: undefined,
+        explorerDenyList: undefined,
+        termsOfServiceUrl: undefined,
       }
-    })
+		});
 
     return {
-      address, chainId, connect, getFallbackProvider, isActivated
+      address, chainId, coinbaseConnector, connectWith, getFallbackProvider, isActivated, mmConnector, wcConnector
     }
   },
 
@@ -115,8 +241,14 @@ export default {
     },
 
     chainId(newVal, oldVal) {
-      if (!this.isActivated && localStorage.getItem("connected") == "metamask") {
-        this.connect("metamask");
+      if (!this.isActivated) {
+        if (localStorage.getItem("connected") == "metamask") {
+          this.connectMetaMask();
+        } else if (localStorage.getItem("connected") == "walletconnect") {
+          this.connectWalletConnect();
+        } else if (localStorage.getItem("connected") == "coinbase") {
+          this.connectCoinbase();
+        }
       }
 
       if (this.chainId >= 1) {

diff --git a/src/assets/wallets/1inch.png b/src/assets/wallets/1inch.png
diff --git a/src/assets/wallets/argent.png b/src/assets/wallets/argent.png
diff --git a/src/assets/wallets/bifrost.png b/src/assets/wallets/bifrost.png
diff --git a/src/assets/wallets/brave.png b/src/assets/wallets/brave.png
diff --git a/src/assets/wallets/coinbase.png b/src/assets/wallets/coinbase.png
diff --git a/src/assets/wallets/imtoken.png b/src/assets/wallets/imtoken.png
diff --git a/src/assets/wallets/metamask.png b/src/assets/wallets/metamask.png
diff --git a/src/assets/wallets/minerva.png b/src/assets/wallets/minerva.png
diff --git a/src/assets/wallets/rabby.png b/src/assets/wallets/rabby.png
diff --git a/src/assets/wallets/trust.png b/src/assets/wallets/trust.png
diff --git a/src/assets/wallets/wc.png b/src/assets/wallets/wc.png
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import { useEthers } from '../vue-dapp/index.esm.js';
+import { useEthers } from 'vue-dapp';
 import { mapGetters } from 'vuex';
 
 export default {

diff --git a/src/components/MyDomain.vue b/src/components/MyDomain.vue
@@ -65,7 +65,7 @@
 <script>
 import { mapActions, mapGetters, mapMutations } from 'vuex';
 import { ethers } from 'ethers';
-import { useEthers } from '../vue-dapp/index.esm.js';
+import { useEthers } from 'vue-dapp';
 import { useToast, TYPE } from "vue-toastification";
 import WaitingToast from "./toasts/WaitingToast.vue";
 import { getTextWithoutBlankCharacters } from "../utils/textUtils.js";

diff --git a/src/components/MyTlds.vue b/src/components/MyTlds.vue
@@ -26,7 +26,7 @@
 
 <script>
 import { ethers } from 'ethers';
-import { useEthers } from '../vue-dapp/index.esm.js';
+import { useEthers } from 'vue-dapp';
 import { mapGetters } from 'vuex';
 
 export default {

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -48,7 +48,7 @@
               </ul>
             </div>
 
-            <button v-if="!isActivated" class="btn btn-primary navbar-menu-btn ms-3" @click="open">Connect wallet</button>
+            <button v-if="!isActivated" class="btn btn-primary navbar-menu-btn" data-bs-toggle="modal" data-bs-target="#connectModal">Connect wallet</button>
 
             <a 
               class="btn btn-primary ms-3 navbar-menu-btn" 
@@ -75,7 +75,7 @@
 
 <script lang="ts">
 import { mapGetters } from 'vuex';
-import { useBoard, useEthers, useWallet } from '../vue-dapp/index.esm.js';
+import { useBoard, useEthers, useWallet } from 'vue-dapp';
 import useChainHelpers from "../hooks/useChainHelpers";
 import { getTextWithoutBlankCharacters } from "../utils/textUtils.js";
 
@@ -97,7 +97,7 @@ export default {
   },
 
   methods: {
-    getTextWithoutBlankCharacters,
+    getTextWithoutBlankCharacters, 
 
     changeNetwork(networkName) {
       const networkData = this.switchNetwork(networkName); 

diff --git a/src/components/SendTokensComponent.vue b/src/components/SendTokensComponent.vue
@@ -162,7 +162,7 @@
 <script lang="ts">
 import { ethers } from 'ethers';
 import { mapGetters } from 'vuex';
-import { useEthers } from '../vue-dapp/index.esm.js';
+import { useEthers } from 'vue-dapp';
 import { useToast, TYPE } from "vue-toastification";
 
 import Erc20Abi from "../abi/Erc20.json";

diff --git a/src/components/domainEdit/EditOtherData.vue b/src/components/domainEdit/EditOtherData.vue
@@ -79,7 +79,7 @@
 <script>
 import { ethers } from 'ethers';
 import { mapActions, mapGetters } from 'vuex';
-import { useEthers } from '../../vue-dapp/index.esm.js';
+import { useEthers } from 'vue-dapp';
 import { useToast, TYPE } from "vue-toastification";
 import WaitingToast from "../toasts/WaitingToast.vue";
 

diff --git a/src/components/domainEdit/EditPfp.vue b/src/components/domainEdit/EditPfp.vue
@@ -61,7 +61,7 @@
 <script>
 import { ethers } from 'ethers';
 import { mapGetters } from 'vuex';
-import { useEthers, shortenAddress } from '../../vue-dapp/index.esm.js';
+import { useEthers, shortenAddress } from 'vue-dapp';
 import { useToast, TYPE } from "vue-toastification";
 import WaitingToast from "../toasts/WaitingToast.vue";
 

diff --git a/src/components/domainEdit/EditUrl.vue b/src/components/domainEdit/EditUrl.vue
@@ -50,7 +50,7 @@
 <script>
 import { ethers } from 'ethers';
 import { mapGetters } from 'vuex';
-import { useEthers } from '../../vue-dapp/index.esm.js';
+import { useEthers } from 'vue-dapp';
 import { useToast, TYPE } from "vue-toastification";
 import WaitingToast from "../toasts/WaitingToast.vue";
 

diff --git a/src/index.css b/src/index.css
@@ -54,13 +54,25 @@ hr {
   border: 2px solid black;
 }
 
+.card-img-wallet:hover {
+  opacity: 0.5;
+}
+
+.card-img-wallet:active {
+  transform: scale(0.8);
+}
+
 .container {
   background: transparent;
   padding: 20px;
   border-radius: 10px;
   border: 2px solid #fff;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .img-thumbnail {
   background-color: transparent;
 }
@@ -83,6 +95,11 @@ hr {
   text-decoration: underline;
 }
 
+.table > tbody > tr > td {
+  color: white;
+  background-color: transparent;
+}
+
 .Vue-Toastification__toast--info {
   background-color: #405374;
 }
@@ -95,6 +112,12 @@ hr {
   background-color: #e26670;
 }
 
+.wallet-img-wrapper {
+  border-width: 2px;
+  border-color: #ffffff;
+  border-style: solid;
+}
+
 @media only screen and (max-width: 767px) {
   #sidebar-container {
     margin-bottom: 15px;

diff --git a/src/main.ts b/src/main.ts
@@ -8,7 +8,7 @@ import "bootstrap-icons/font/bootstrap-icons.css"
 import Toast, { POSITION, TYPE } from "vue-toastification";
 import "vue-toastification/dist/index.css";
 import './index.css'
-import { VueDapp } from './vue-dapp/index.esm.js'
+import { VueDapp } from 'vue-dapp'
 
 const app = createApp(App);
 
@@ -32,9 +32,7 @@ const options = {
 app.use(router)
 app.use(store)
 
-app.use(VueDapp, {
-  infuraId: "not-needed-but-should-not-be-empty-either", // non-empty string for WalletConnect
-})
+app.use(VueDapp);
 
 app.use(Toast, options);