Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Michel Fromme
|
bf3a606879 | ||
|
Michel Fromme
|
b2121a1ca4 |
Generated
+2473
-4131
File diff suppressed because it is too large
Load Diff
+5
-2
@@ -13,9 +13,10 @@
|
|||||||
"@fortawesome/free-brands-svg-icons": "^6.4.0",
|
"@fortawesome/free-brands-svg-icons": "^6.4.0",
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
||||||
"@fortawesome/vue-fontawesome": "^3.0.3",
|
"@fortawesome/vue-fontawesome": "^3.0.3",
|
||||||
"@walletconnect/ethereum-provider": "^2.9.0",
|
"@wagmi/core": "^1.3.8",
|
||||||
|
"@walletconnect/ethereum-provider": "^2.9.1",
|
||||||
"@walletconnect/modal": "^2.6.0",
|
"@walletconnect/modal": "^2.6.0",
|
||||||
"@walletconnect/web3-provider": "^1.8.0",
|
"@walletconnect/modal-sign-html": "^2.6.0",
|
||||||
"@web3modal/html": "^2.7.0",
|
"@web3modal/html": "^2.7.0",
|
||||||
"abi-decoder": "^2.4.0",
|
"abi-decoder": "^2.4.0",
|
||||||
"ethers": "^6.6.3",
|
"ethers": "^6.6.3",
|
||||||
@@ -23,8 +24,10 @@
|
|||||||
"pinia-plugin-persistedstate": "^3.1.0",
|
"pinia-plugin-persistedstate": "^3.1.0",
|
||||||
"sass": "^1.62.1",
|
"sass": "^1.62.1",
|
||||||
"swiper": "^9.4.1",
|
"swiper": "^9.4.1",
|
||||||
|
"viem": "^1.4.1",
|
||||||
"vue": "^3.3.2",
|
"vue": "^3.3.2",
|
||||||
"vue-router": "^4.2.0",
|
"vue-router": "^4.2.0",
|
||||||
|
"wagmi": "^1.3.9",
|
||||||
"web3": "^v1.9.0"
|
"web3": "^v1.9.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_13571_129878)">
|
||||||
|
<rect width="40" height="40" fill="#0052FF"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.3312 0H31.6672C36.2704 0 40 4.0128 40 8.9632V31.0368C40 35.9872 36.2704 40 31.6688 40H8.3312C3.7296 40 0 35.9872 0 31.0368V8.9632C0 4.0128 3.7296 0 8.3312 0Z" fill="#0052FF"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9989 5.79443C27.8453 5.79443 34.2053 12.1544 34.2053 20.0008C34.2053 27.8472 27.8453 34.2072 19.9989 34.2072C12.1525 34.2072 5.79254 27.8472 5.79254 20.0008C5.79254 12.1544 12.1525 5.79443 19.9989 5.79443Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5005 15.459H23.4973C24.0733 15.459 24.5389 15.9614 24.5389 16.579V23.419C24.5389 24.0382 24.0717 24.539 23.4973 24.539H16.5005C15.9245 24.539 15.4589 24.0366 15.4589 23.419V16.579C15.4589 15.9614 15.9261 15.459 16.5005 15.459Z" fill="#0052FF"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_13571_129878">
|
||||||
|
<rect width="40" height="40" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,15 @@
|
|||||||
|
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="40" height="40" fill="#F7F9FB"/>
|
||||||
|
<path d="M32.6877 6.6665L22.0555 14.5632L24.0216 9.90427L32.6877 6.6665Z" fill="#E2761B" stroke="#E2761B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M8.1433 6.6665L18.6901 14.638L16.8201 9.90427L8.1433 6.6665ZM28.8628 24.9711L26.0311 29.3095L32.0899 30.9764L33.8317 25.0672L28.8628 24.9711ZM7.0213 25.0672L8.75238 30.9764L14.8112 29.3095L11.9795 24.9711L7.0213 25.0672Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M14.4697 17.641L12.7814 20.1949L18.7974 20.462L18.5837 13.9972L14.4697 17.641ZM26.3629 17.641L22.1955 13.9224L22.0565 20.462L28.0619 20.1949L26.3629 17.641ZM14.8117 29.3097L18.4234 27.5466L15.3032 25.1103L14.8117 29.3097ZM22.4092 27.5466L26.0316 29.3097L25.5294 25.1103L22.4092 27.5466Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M26.0316 29.3095L22.4091 27.5464L22.6976 29.9079L22.6656 30.9017L26.0316 29.3095ZM14.8116 29.3095L18.1776 30.9017L18.1562 29.9079L18.4233 27.5464L14.8116 29.3095Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M18.2319 23.5497L15.2185 22.6628L17.345 21.6904L18.2319 23.5497ZM22.6023 23.5497L23.4892 21.6904L25.6264 22.6628L22.6023 23.5497Z" fill="#233447" stroke="#233447" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M14.8106 29.3092L15.3236 24.9708L11.9789 25.067L14.8106 29.3092ZM25.5177 24.9708L26.0306 29.3092L28.8623 25.067L25.5177 24.9708ZM28.0609 20.1943L22.0555 20.4615L22.6112 23.5496L23.4981 21.6903L25.6352 22.6627L28.0609 20.1943ZM15.2167 22.6627L17.3538 21.6903L18.2301 23.5496L18.7964 20.4615L12.7804 20.1943L15.2167 22.6627Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M12.7814 20.1943L15.3032 25.1097L15.2177 22.6627L12.7814 20.1943ZM25.6362 22.6627L25.5294 25.1097L28.0619 20.1943L25.6362 22.6627ZM18.7974 20.4615L18.2311 23.5496L18.9363 27.1935L19.0966 22.3956L18.7974 20.4615ZM22.0565 20.4615L21.768 22.3849L21.8963 27.1935L22.6122 23.5496L22.0565 20.4615Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M22.613 23.5495L21.8971 27.1933L22.41 27.546L25.5302 25.1096L25.637 22.6626L22.613 23.5495ZM15.2185 22.6626L15.304 25.1096L18.4242 27.546L18.9371 27.1933L18.2319 23.5495L15.2185 22.6626Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M22.6656 30.9022L22.6976 29.9085L22.4305 29.6734H18.402L18.1562 29.9085L18.1776 30.9022L14.8116 29.3101L15.987 30.2718L18.3699 31.9281H22.4625L24.8561 30.2718L26.0316 29.3101L22.6656 30.9022Z" fill="#C0AD9E" stroke="#C0AD9E" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M22.409 27.5465L21.8961 27.1938H18.9362L18.4233 27.5465L18.1561 29.908L18.4019 29.6729H22.4304L22.6975 29.908L22.409 27.5465Z" fill="#161616" stroke="#161616" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M33.1371 15.0761L34.0454 10.7164L32.6883 6.6665L22.4087 14.2961L26.3624 17.6407L31.951 19.2756L33.1905 17.833L32.6562 17.4484L33.5111 16.6683L32.8486 16.1554L33.7034 15.5036L33.1371 15.0761ZM6.79688 10.7164L7.70516 15.0761L7.12813 15.5036L7.98299 16.1554L7.33116 16.6683L8.18601 17.4484L7.65173 17.833L8.88058 19.2756L14.4692 17.6407L18.4229 14.2961L8.14327 6.6665L6.79688 10.7164Z" fill="#763D16" stroke="#763D16" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M31.951 19.2761L26.3624 17.6412L28.0614 20.1951L25.5289 25.1105L28.8628 25.0678H33.8317L31.951 19.2761ZM14.4692 17.6412L8.88061 19.2761L7.0213 25.0678H11.9795L15.3027 25.1105L12.7809 20.1951L14.4692 17.6412ZM22.0561 20.4622L22.4087 14.2966L24.0329 9.90479H16.8201L18.4229 14.2966L18.7969 20.4622L18.9252 22.407L18.9358 27.1942H21.8958L21.9171 22.407L22.0561 20.4622Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,5 @@
|
|||||||
|
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="40" height="40" fill="#3396FF"/>
|
||||||
|
<path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#3396FF"/>
|
||||||
|
<path d="M12.2327 14.8836C16.5225 10.7003 23.4779 10.7003 27.7677 14.8836L28.284 15.3871C28.4985 15.5962 28.4985 15.9353 28.284 16.1445L26.5179 17.8668C26.4106 17.9713 26.2368 17.9713 26.1295 17.8668L25.419 17.1739C22.4263 14.2555 17.5741 14.2555 14.5813 17.1739L13.8204 17.9159C13.7132 18.0205 13.5393 18.0205 13.4321 17.9159L11.666 16.1936C11.4514 15.9845 11.4514 15.6453 11.666 15.4362L12.2327 14.8836ZM31.4203 18.4454L32.9922 19.9782C33.2067 20.1874 33.2067 20.5265 32.9922 20.7356L25.9045 27.6473C25.69 27.8565 25.3422 27.8565 25.1277 27.6473L20.0973 22.742C20.0437 22.6896 19.9568 22.6896 19.9031 22.742L14.8728 27.6473C14.6583 27.8565 14.3106 27.8565 14.096 27.6473L7.00816 20.7355C6.79367 20.5264 6.79367 20.1873 7.00816 19.9782L8.58004 18.4453C8.79454 18.2362 9.1423 18.2362 9.35679 18.4453L14.3873 23.3508C14.4409 23.4031 14.5278 23.4031 14.5814 23.3508L19.6117 18.4453C19.8262 18.2361 20.1739 18.2361 20.3885 18.4453L25.4189 23.3508C25.4726 23.4031 25.5595 23.4031 25.6131 23.3508L30.6436 18.4454C30.858 18.2362 31.2058 18.2362 31.4203 18.4454Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
+50
-12
@@ -3,14 +3,20 @@ import { onMounted, onUnmounted, provide, ref } from "vue";
|
|||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
|
|
||||||
import Navbar from "./components/Navbar.vue";
|
import Navbar from "./components/Navbar.vue";
|
||||||
import { useWalletStore } from "@/stores/wallet";
|
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||||
const walletStore = useWalletStore();
|
const walletStore = useWalletStoreV2();
|
||||||
import { useTokenStore } from "@/stores/tokens";
|
import { useTokenStore } from "@/stores/tokens";
|
||||||
import { useContractStore } from "@/stores/contracts";
|
import { useContractStore } from "@/stores/contracts";
|
||||||
import { useMemeburnerStore } from "@/stores/memeburner";
|
import { useMemeburnerStore } from "@/stores/memeburner";
|
||||||
import { useRewardLockerStore } from "@/stores/rewardlocker";
|
import { useRewardLockerStore } from "@/stores/rewardlocker";
|
||||||
import { useMultiCallStore } from "@/stores/multicall";
|
import { useMultiCallStore } from "@/stores/multicall";
|
||||||
import { useRoundsStore } from "@/stores/rounds";
|
import { useRoundsStore } from "@/stores/rounds";
|
||||||
|
|
||||||
|
import SlideoutPanel from "./components/SlideoutPanel.vue";
|
||||||
|
import ConnectWallet from "./components/ConnectWallet.vue";
|
||||||
|
|
||||||
|
import { watchAccount, getPublicClient, getWalletClient } from "@wagmi/core";
|
||||||
|
|
||||||
const tokenStore = useTokenStore();
|
const tokenStore = useTokenStore();
|
||||||
const contractStore = useContractStore();
|
const contractStore = useContractStore();
|
||||||
const memeBurnerStore = useMemeburnerStore();
|
const memeBurnerStore = useMemeburnerStore();
|
||||||
@@ -20,15 +26,25 @@ const roundsStore = useRoundsStore();
|
|||||||
const { memeBurner, token } = storeToRefs(tokenStore);
|
const { memeBurner, token } = storeToRefs(tokenStore);
|
||||||
const { list } = storeToRefs(contractStore);
|
const { list } = storeToRefs(contractStore);
|
||||||
const isMobile = ref(false);
|
const isMobile = ref(false);
|
||||||
|
const showPanel = ref(false);
|
||||||
|
const eventWatch = ref(null);
|
||||||
|
|
||||||
isMobile.value = isMobileFunc();
|
isMobile.value = isMobileFunc();
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
window.removeEventListener("resize", handleWindowSizeChange);
|
window.removeEventListener("resize", handleWindowSizeChange);
|
||||||
|
|
||||||
|
eventWatch.value();
|
||||||
|
console.log("unsubscribe");
|
||||||
});
|
});
|
||||||
const handleWindowSizeChange = () => {
|
const handleWindowSizeChange = () => {
|
||||||
isMobile.value = isMobileFunc();
|
isMobile.value = isMobileFunc();
|
||||||
// your code
|
// your code
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function showPanelTest(bla) {
|
||||||
|
console.log("bla", bla);
|
||||||
|
}
|
||||||
|
|
||||||
function isMobileFunc() {
|
function isMobileFunc() {
|
||||||
if (screen.width <= 760) {
|
if (screen.width <= 760) {
|
||||||
return true;
|
return true;
|
||||||
@@ -41,25 +57,47 @@ provide("isMobile", isMobile);
|
|||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
window.addEventListener("resize", handleWindowSizeChange);
|
window.addEventListener("resize", handleWindowSizeChange);
|
||||||
handleWindowSizeChange();
|
handleWindowSizeChange();
|
||||||
|
|
||||||
// initContracts
|
// initContracts
|
||||||
await walletStore.init();
|
await walletStore.init();
|
||||||
await tokenStore.init();
|
// await tokenStore.init();
|
||||||
await memeBurnerStore.init();
|
// await memeBurnerStore.init();
|
||||||
await rewardLockerStore.init();
|
// await rewardLockerStore.init();
|
||||||
await memeBurnerStore.init();
|
// await memeBurnerStore.init();
|
||||||
await multiCallStore.init();
|
// await multiCallStore.init();
|
||||||
//Memeburner Contract
|
//Memeburner Contract
|
||||||
|
|
||||||
//init
|
//init
|
||||||
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
|
// roundsStore.currentRound = parseInt(
|
||||||
console.log("roundsStore.currentRound", roundsStore.currentRound);
|
// await memeBurnerStore.getCurrentRound()
|
||||||
roundsStore.activeRound = roundsStore.currentRound;
|
// );
|
||||||
await roundsStore.fillRound(roundsStore.activeRound);
|
// console.log("roundsStore.currentRound", roundsStore.currentRound);
|
||||||
|
// roundsStore.activeRound = roundsStore.currentRound;
|
||||||
|
// await roundsStore.fillRound(roundsStore.activeRound);
|
||||||
|
|
||||||
|
//events
|
||||||
|
eventWatch.value = watchAccount(async (account) => {
|
||||||
|
console.log("account123", account);
|
||||||
|
const publicClient = getPublicClient();
|
||||||
|
console.log("publicClient", publicClient);
|
||||||
|
var walletClient = await getWalletClient();
|
||||||
|
console.log("walletClient", walletClient);
|
||||||
|
if (account.address) {
|
||||||
|
walletStore.address = account.address;
|
||||||
|
walletStore.connected = true;
|
||||||
|
} else {
|
||||||
|
walletStore.address = null;
|
||||||
|
walletStore.connected = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<navbar />
|
<navbar @show-panel="((value) => showPanel = value)"/>
|
||||||
|
<slideout-panel v-model="showPanel">
|
||||||
|
<connect-wallet></connect-wallet>
|
||||||
|
</slideout-panel>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<RouterView />
|
<RouterView />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<h3>Connect Wallet</h3>
|
||||||
|
<div class="connectors-wrapper">
|
||||||
|
<div class="connectors-element" v-for="connector in walletStore.connectors" @click="connectWallet(connector)">
|
||||||
|
<div class="connector-icon">
|
||||||
|
<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`">
|
||||||
|
</div>
|
||||||
|
<div class="connector-name">{{ connector.name }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div @click="disconnectWallet">disconnect</div>
|
||||||
|
<div @click="getWalletClientTest">getwalletclient</div>
|
||||||
|
<div>Connected: {{ walletStore.connected }}</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, toRaw, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||||
|
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||||
|
import Meme1Json from "@/assets/contracts/Meme1.json";
|
||||||
|
|
||||||
|
import {
|
||||||
|
createConfig,
|
||||||
|
configureChains,
|
||||||
|
mainnet,
|
||||||
|
getAccount,
|
||||||
|
getContract,
|
||||||
|
connect,
|
||||||
|
disconnect,
|
||||||
|
InjectedConnector,
|
||||||
|
watchAccount,
|
||||||
|
getWalletClient,
|
||||||
|
} from "@wagmi/core";
|
||||||
|
|
||||||
|
const walletStore = useWalletStoreV2();
|
||||||
|
|
||||||
|
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
|
||||||
|
|
||||||
|
const fromAddress = ref(null);
|
||||||
|
|
||||||
|
const accountSub = ref(null);
|
||||||
|
|
||||||
|
const instance = getCurrentInstance();
|
||||||
|
|
||||||
|
// config.value = createConfig({
|
||||||
|
// autoConnect: true,
|
||||||
|
// connectors: [
|
||||||
|
// new CoinbaseWalletConnector({
|
||||||
|
// chains,
|
||||||
|
// options: {
|
||||||
|
// appName: "wagmi demo",
|
||||||
|
// },
|
||||||
|
// }),
|
||||||
|
// new MetaMaskConnector({ chains }),
|
||||||
|
// new WalletConnectConnector({
|
||||||
|
// chains,
|
||||||
|
// options: {
|
||||||
|
// projectId: projectId,
|
||||||
|
// showQrModal: true,
|
||||||
|
// metadata: {
|
||||||
|
// name: "Bloodline-App",
|
||||||
|
// description: "TODO Bloodline Description",
|
||||||
|
// url: "https://gitea.loseyourip.com/",
|
||||||
|
// icons: [
|
||||||
|
// "https://gitea.loseyourip.com/assets/img/vampir.png",
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// }),
|
||||||
|
// ],
|
||||||
|
// publicClient,
|
||||||
|
// webSocketPublicClient,
|
||||||
|
// });
|
||||||
|
// console.log("config", config);
|
||||||
|
|
||||||
|
async function disconnectWallet() {
|
||||||
|
console.log("disconnectWallet");
|
||||||
|
try {
|
||||||
|
await disconnect();
|
||||||
|
} catch (error) {
|
||||||
|
console.log("error", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getWalletClientTest() {
|
||||||
|
const walletClient = await getWalletClient();
|
||||||
|
console.log("walletClient", walletClient);
|
||||||
|
const contract = getContract({
|
||||||
|
address: Meme1Json.contractAddress,
|
||||||
|
abi: Meme1Json.abi,
|
||||||
|
walletClient,
|
||||||
|
});
|
||||||
|
const result = await contract.read.totalSupply();
|
||||||
|
console.log("result", result);
|
||||||
|
|
||||||
|
// console.log("obj", obj);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
async function connectWallet(connector) {
|
||||||
|
instance.parent.emit("update:modelValue", false);
|
||||||
|
await walletStore.connectWallet(toRaw(connector));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.connectors-wrapper
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
.connectors-element
|
||||||
|
display: flex
|
||||||
|
padding: 12px
|
||||||
|
border: 1px solid rgba(152, 161, 192, 0.24)
|
||||||
|
background-color: #202020
|
||||||
|
&:hover, &:active, &:focus
|
||||||
|
background-color: lighten(#202020, 20%)
|
||||||
|
cursor: pointer
|
||||||
|
.connector-icon
|
||||||
|
border-radius: 12px
|
||||||
|
width: 40px
|
||||||
|
overflow: hidden
|
||||||
|
height: 40px
|
||||||
|
.connector-name
|
||||||
|
padding: 0 8px
|
||||||
|
align-self: center
|
||||||
|
</style>
|
||||||
@@ -1,11 +1,15 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
|
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
|
||||||
import { useWalletStore } from "@/stores/wallet";
|
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||||
const walletStore = useWalletStore();
|
const emit = defineEmits(["showPanel"]);
|
||||||
|
|
||||||
|
const walletStore = useWalletStoreV2();
|
||||||
const { connected, address } = storeToRefs(walletStore);
|
const { connected, address } = storeToRefs(walletStore);
|
||||||
const isMobile = inject("isMobile");
|
const isMobile = inject("isMobile");
|
||||||
|
|
||||||
|
const showPanel = ref(false);
|
||||||
|
|
||||||
const showNavbar = ref(true);
|
const showNavbar = ref(true);
|
||||||
const lastScrollPosition = ref(0);
|
const lastScrollPosition = ref(0);
|
||||||
|
|
||||||
@@ -62,8 +66,9 @@ onBeforeUnmount(() => {
|
|||||||
</div>
|
</div>
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
<div v-if="!isMobile">
|
<div v-if="!isMobile">
|
||||||
<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
|
<!-- <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
|
||||||
<span v-else> {{ address }}</span>
|
<div v-if="!address" class="btn btn-immortal" @click="$emit('showPanel', true)">connect</div>
|
||||||
|
<span v-else @click="$emit('showPanel', true)"> {{ address }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="hamburger-menu">
|
<div v-else class="hamburger-menu">
|
||||||
<font-awesome-icon :icon="['fas', 'bars']" />
|
<font-awesome-icon :icon="['fas', 'bars']" />
|
||||||
|
|||||||
@@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<div class="slideout-overlay" :class="{'open': props.modelValue}" @click="$emit('update:modelValue', false)">
|
||||||
|
<div :class="{'slideout-wrapper': true, 'open': props.modelValue}" >
|
||||||
|
|
||||||
|
<div class="slideout-panel" @click="testClick">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { inject, watchEffect } from "vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: Boolean,
|
||||||
|
});
|
||||||
|
|
||||||
|
defineEmits(["update:modelValue"]);
|
||||||
|
|
||||||
|
const showPanel = inject("showPanel");
|
||||||
|
console.log("showPanel.value", showPanel);
|
||||||
|
const isMobile = inject("isMobile");
|
||||||
|
|
||||||
|
function testClick(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.slideout-overlay
|
||||||
|
background-color: rgba(0,0,0,.5)
|
||||||
|
z-index: 100
|
||||||
|
&.open
|
||||||
|
height: 100%
|
||||||
|
width: 100%
|
||||||
|
position: fixed
|
||||||
|
.slideout-wrapper
|
||||||
|
z-index: 100
|
||||||
|
height: 100vh
|
||||||
|
right: 0
|
||||||
|
position: fixed
|
||||||
|
display: flex
|
||||||
|
border: 1px solid rgba(152, 161, 192, 0.24)
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.24) 12px 16px 24px, rgba(0, 0, 0, 0.24) 12px 8px 12px, rgba(0, 0, 0, 0.32) 4px 4px 8px
|
||||||
|
transition: margin-right 250ms ease 0s
|
||||||
|
margin-right: -300px
|
||||||
|
background-color: #2D2D2D
|
||||||
|
&.open
|
||||||
|
margin-right: 0
|
||||||
|
.slideout-panel
|
||||||
|
width: 300px
|
||||||
|
height: 100%
|
||||||
|
padding: 24px
|
||||||
|
.slideout-icon
|
||||||
|
cursor: pointer
|
||||||
|
&:hover, &:active, &:focus
|
||||||
|
background-color: lighten(#2D2D2D, 20%)
|
||||||
|
svg
|
||||||
|
font-size: 30px
|
||||||
|
</style>
|
||||||
+13
-2
@@ -14,12 +14,23 @@ import { library } from '@fortawesome/fontawesome-svg-core'
|
|||||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||||
|
|
||||||
/* import specific icons */
|
/* import specific icons */
|
||||||
import { faArrowDown, faSpinner ,faPlus, faCaretLeft, faCaretRight, faBars } from "@fortawesome/free-solid-svg-icons";
|
import { faArrowDown, faSpinner ,faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
|
import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
|
||||||
|
|
||||||
|
|
||||||
/* add icons to the library */
|
/* add icons to the library */
|
||||||
library.add(faArrowDown, faDiscord, faTwitter, faTelegram, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars);
|
library.add(
|
||||||
|
faArrowDown,
|
||||||
|
faDiscord,
|
||||||
|
faTwitter,
|
||||||
|
faTelegram,
|
||||||
|
faSpinner,
|
||||||
|
faPlus,
|
||||||
|
faCaretLeft,
|
||||||
|
faCaretRight,
|
||||||
|
faBars,
|
||||||
|
faAnglesRight
|
||||||
|
);
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
|
|||||||
@@ -22,6 +22,16 @@ const router = createRouter({
|
|||||||
name: "Test",
|
name: "Test",
|
||||||
component: () => import("../views/TestView.vue"),
|
component: () => import("../views/TestView.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/walletconnect",
|
||||||
|
name: "WalletConnect",
|
||||||
|
component: () => import("../views/WalletConnectView.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/wagmi",
|
||||||
|
name: "Wagmi",
|
||||||
|
component: () => import("../views/WagmiView.vue"),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -54,5 +54,8 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
|
|||||||
async getTotalRewardsOf(address, rounds) {
|
async getTotalRewardsOf(address, rounds) {
|
||||||
return await this.contract.methods.getTotalRewardsOf(address, rounds).call();
|
return await this.contract.methods.getTotalRewardsOf(address, rounds).call();
|
||||||
},
|
},
|
||||||
|
async stakeToBeSecured(amount, deadline, v, r, s) {
|
||||||
|
return await this.contract.methods.stakeToBeSecured(amount, deadline, v,r,s)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -132,5 +132,8 @@ export const useTokenStore = defineStore("token", {
|
|||||||
const contract = new web3.eth.Contract(activeToken.abi, contractAddress);
|
const contract = new web3.eth.Contract(activeToken.abi, contractAddress);
|
||||||
return contract;
|
return contract;
|
||||||
},
|
},
|
||||||
|
async nonces(userAddress) {
|
||||||
|
return this.memeToken.contract.methods.nonces(userAddress).call();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -47,9 +47,10 @@ export const useWalletStore = defineStore("wallet", {
|
|||||||
new Web3.providers.WebsocketProvider(`wss://eth-goerli.g.alchemy.com/v2/${goerliKey}`)
|
new Web3.providers.WebsocketProvider(`wss://eth-goerli.g.alchemy.com/v2/${goerliKey}`)
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
// connectWalletV2(connector) {
|
||||||
|
// this.address = data[0];
|
||||||
|
// },
|
||||||
connectWallet() {
|
connectWallet() {
|
||||||
const tokenStore = useTokenStore();
|
|
||||||
// if (window.ethereum) {
|
|
||||||
window.ethereum
|
window.ethereum
|
||||||
.request({ method: "eth_requestAccounts" })
|
.request({ method: "eth_requestAccounts" })
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
|
|||||||
@@ -0,0 +1,167 @@
|
|||||||
|
import { defineStore } from "pinia";
|
||||||
|
import { markRaw } from "vue";
|
||||||
|
import { useTokenStore } from "./tokens";
|
||||||
|
|
||||||
|
import {
|
||||||
|
createConfig,
|
||||||
|
configureChains,
|
||||||
|
mainnet,
|
||||||
|
getAccount,
|
||||||
|
getContract,
|
||||||
|
connect,
|
||||||
|
getWalletClient,
|
||||||
|
disconnect,
|
||||||
|
InjectedConnector,
|
||||||
|
watchAccount,
|
||||||
|
} from "@wagmi/core";
|
||||||
|
|
||||||
|
import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
|
||||||
|
import { MetaMaskConnector } from "@wagmi/core/connectors/metaMask";
|
||||||
|
import { CoinbaseWalletConnector } from "@wagmi/core/connectors/coinbaseWallet";
|
||||||
|
|
||||||
|
import { goerli } from "@wagmi/core/chains";
|
||||||
|
import { publicProvider } from "@wagmi/core/providers/public";
|
||||||
|
import { alchemyProvider } from "@wagmi/core/providers/alchemy";
|
||||||
|
|
||||||
|
|
||||||
|
export const useWalletStoreV2 = defineStore("walletV2", {
|
||||||
|
state: () => ({
|
||||||
|
count: 0,
|
||||||
|
alchemy: null,
|
||||||
|
connected: false,
|
||||||
|
address: null,
|
||||||
|
web3: null,
|
||||||
|
provider: null,
|
||||||
|
client: null,
|
||||||
|
pubilcClient: null,
|
||||||
|
walletClient: null,
|
||||||
|
config: null
|
||||||
|
}),
|
||||||
|
getters: {},
|
||||||
|
actions: {
|
||||||
|
async init() {
|
||||||
|
|
||||||
|
console.log("wallet init");
|
||||||
|
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
|
||||||
|
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
|
||||||
|
|
||||||
|
const { chains, publicClient, webSocketPublicClient } = configureChains(
|
||||||
|
[goerli],
|
||||||
|
[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
|
||||||
|
);
|
||||||
|
|
||||||
|
this.config = createConfig({
|
||||||
|
autoConnect: true,
|
||||||
|
connectors: [
|
||||||
|
new CoinbaseWalletConnector({
|
||||||
|
chains,
|
||||||
|
options: {
|
||||||
|
appName: "wagmi demo",
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
new MetaMaskConnector({ chains }),
|
||||||
|
new WalletConnectConnector({
|
||||||
|
chains,
|
||||||
|
options: {
|
||||||
|
projectId: projectId,
|
||||||
|
showQrModal: true,
|
||||||
|
metadata: {
|
||||||
|
name: "Bloodline-App",
|
||||||
|
description: "TODO Bloodline Description",
|
||||||
|
url: "https://gitea.loseyourip.com/",
|
||||||
|
icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
publicClient,
|
||||||
|
webSocketPublicClient,
|
||||||
|
});
|
||||||
|
|
||||||
|
// await this.isConnected();
|
||||||
|
// const goerliKey = import.meta.env.VITE_GOERLI_KEY;
|
||||||
|
// if (this.connected) {
|
||||||
|
// const web3 = new Web3(window.ethereum);
|
||||||
|
// this.web3 = markRaw(web3);
|
||||||
|
// console.log("hierabc");
|
||||||
|
// window.ethereum.on("accountsChanged", async (data) => {
|
||||||
|
// console.log("accountsChanged", data);
|
||||||
|
// console.log("data", data);
|
||||||
|
// if (data.length > 0) {
|
||||||
|
// this.address = data[0];
|
||||||
|
// this.connected = true;
|
||||||
|
// } else {
|
||||||
|
// this.address = null;
|
||||||
|
// this.connected = false;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // provider = new ethers.BrowserProvider(window.ethereum);
|
||||||
|
// } else {
|
||||||
|
// const url = `https://eth-goerli.g.alchemy.com/v2/${goerliKey}`;
|
||||||
|
// this.web3 = new Web3(url);
|
||||||
|
// // provider = new ethers.AlchemyProvider("goerli", goerliKey);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// //Websocket
|
||||||
|
// this.web3socket = new Web3(
|
||||||
|
// new Web3.providers.WebsocketProvider(`wss://eth-goerli.g.alchemy.com/v2/${goerliKey}`)
|
||||||
|
// );
|
||||||
|
},
|
||||||
|
// connectWalletV2(connector) {
|
||||||
|
// this.address = data[0];
|
||||||
|
// },
|
||||||
|
async connectWallet(connector) {
|
||||||
|
console.log("connector.name", connector.name);
|
||||||
|
// if (!account.isConnected) {
|
||||||
|
const connection = await connect({
|
||||||
|
chainId: goerli.id,
|
||||||
|
connector: connector,
|
||||||
|
});
|
||||||
|
// this.address = connection.account;
|
||||||
|
},
|
||||||
|
async getTokenBalance(token) {
|
||||||
|
const tokenStore = useTokenStore();
|
||||||
|
const contract = tokenStore.getTokenContract(token);
|
||||||
|
const result = await contract.methods.balanceOf(this.address).call();
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
async isConnected() {
|
||||||
|
try {
|
||||||
|
this.loading = true;
|
||||||
|
if (!window.ethereum) {
|
||||||
|
console.warn("Metamask not installed"), (this.connected = false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const accounts = await window.ethereum.request({ method: "eth_accounts" });
|
||||||
|
if (accounts.length) {
|
||||||
|
this.connected = true;
|
||||||
|
this.address = accounts[0];
|
||||||
|
console.log(`You're connected to: ${accounts[0]}`);
|
||||||
|
// const web3 = new Web3(window.ethereum);
|
||||||
|
// const tokenStore = useTokenStore();
|
||||||
|
// console.log("tokenStore.activeToken", tokenStore.activeToken);
|
||||||
|
// if (tokenStore.activeToken.contractAddress) {
|
||||||
|
// tokenStore.activeToken.balance = await this.getTokenBalance(
|
||||||
|
// tokenStore.activeToken
|
||||||
|
// );
|
||||||
|
// tokenStore.activeToken.allowance = await tokenStore.allowance();
|
||||||
|
// }
|
||||||
|
// tokenStore.memeBurner.contract = new web3.eth.Contract(
|
||||||
|
// tokenStore.memeBurner.config.abi,
|
||||||
|
// tokenStore.memeBurner.config.contractAddress
|
||||||
|
// );
|
||||||
|
} else {
|
||||||
|
console.log("Metamask is not connected");
|
||||||
|
this.connected = false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log("error", error);
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
return this.connected;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
persist: true,
|
||||||
|
});
|
||||||
+178
-4
@@ -5,6 +5,8 @@
|
|||||||
<button @click="sacrificeMeme">sacrifice Meme</button>
|
<button @click="sacrificeMeme">sacrifice Meme</button>
|
||||||
<button @click="approveMeme1">approve Meme1</button>
|
<button @click="approveMeme1">approve Meme1</button>
|
||||||
<button @click="tokenStore.approveToken(MemeBurnerJson, 10)">wallet approve</button>
|
<button @click="tokenStore.approveToken(MemeBurnerJson, 10)">wallet approve</button>
|
||||||
|
<button @click="stake">stake</button>
|
||||||
|
<button @click="">unstake</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -34,6 +36,8 @@ const web3 = ref(null);
|
|||||||
const contractMeme2 = ref(null);
|
const contractMeme2 = ref(null);
|
||||||
const contractMeme1 = ref(null);
|
const contractMeme1 = ref(null);
|
||||||
const contractBurner = ref(null);
|
const contractBurner = ref(null);
|
||||||
|
const contractBloodline = ref(null);
|
||||||
|
const rewardlocker = ref(null);
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
web3.value = new Web3(window.ethereum);
|
web3.value = new Web3(window.ethereum);
|
||||||
@@ -43,9 +47,27 @@ onMounted(async () => {
|
|||||||
console.log("accounts", accounts);
|
console.log("accounts", accounts);
|
||||||
web3.value.eth.Contract.defaultAccount = accounts[0];
|
web3.value.eth.Contract.defaultAccount = accounts[0];
|
||||||
|
|
||||||
contractMeme1.value = new web3.value.eth.Contract(Meme1Json.abi, Meme1Json.contractAddress);
|
contractMeme1.value = new web3.value.eth.Contract(
|
||||||
contractMeme2.value = new web3.value.eth.Contract(Meme2Json.abi, Meme2Json.contractAddress);
|
Meme1Json.abi,
|
||||||
contractBurner.value = new web3.value.eth.Contract(MemeBurnerJson.abi, MemeBurnerJson.contractAddress);
|
Meme1Json.contractAddress
|
||||||
|
);
|
||||||
|
contractMeme2.value = new web3.value.eth.Contract(
|
||||||
|
Meme2Json.abi,
|
||||||
|
Meme2Json.contractAddress
|
||||||
|
);
|
||||||
|
contractBloodline.value = new web3.value.eth.Contract(
|
||||||
|
MemeTokenJson.abi,
|
||||||
|
MemeTokenJson.contractAddress
|
||||||
|
);
|
||||||
|
contractBurner.value = new web3.value.eth.Contract(
|
||||||
|
MemeBurnerJson.abi,
|
||||||
|
MemeBurnerJson.contractAddress
|
||||||
|
);
|
||||||
|
|
||||||
|
rewardlocker.value = new web3.value.eth.Contract(
|
||||||
|
RewardLockerJson.abi,
|
||||||
|
RewardLockerJson.contractAddress
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
async function approveMeme1() {
|
async function approveMeme1() {
|
||||||
@@ -96,7 +118,10 @@ async function mintToken2() {
|
|||||||
// 100 Meme will be sacrificed
|
// 100 Meme will be sacrificed
|
||||||
async function sacrificeMeme() {
|
async function sacrificeMeme() {
|
||||||
const allowance = await contractMeme1.value.methods
|
const allowance = await contractMeme1.value.methods
|
||||||
.allowance(web3.value.eth.Contract.defaultAccount, MemeBurnerJson.contractAddress)
|
.allowance(
|
||||||
|
web3.value.eth.Contract.defaultAccount,
|
||||||
|
MemeBurnerJson.contractAddress
|
||||||
|
)
|
||||||
.call();
|
.call();
|
||||||
console.log("allowance", allowance);
|
console.log("allowance", allowance);
|
||||||
var reward = await contractBurner.value.methods
|
var reward = await contractBurner.value.methods
|
||||||
@@ -104,5 +129,154 @@ async function sacrificeMeme() {
|
|||||||
.send({ from: web3.value.eth.Contract.defaultAccount });
|
.send({ from: web3.value.eth.Contract.defaultAccount });
|
||||||
console.log("reward", reward);
|
console.log("reward", reward);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function stake() {
|
||||||
|
const SECOND = 1000;
|
||||||
|
|
||||||
|
const fromAddress = "0x66422602B2f4885c57EE794174f98d9E4DDBBBC6";
|
||||||
|
// JavaScript dates have millisecond resolution
|
||||||
|
const deadline = Date.now() + 20 * 60;
|
||||||
|
|
||||||
|
const spender = "0x7C3D5a19878d550D0c6c2b0BFC884ef410F6e440";
|
||||||
|
console.log("deadline", deadline);
|
||||||
|
var nonceTest = await contractBloodline.value.methods
|
||||||
|
.nonces(fromAddress)
|
||||||
|
.call();
|
||||||
|
console.log("type", typeof nonceTest);
|
||||||
|
console.log("nonceTest", nonceTest);
|
||||||
|
const value = (1 * Math.pow(10, 18)).toString();
|
||||||
|
console.log("value", value);
|
||||||
|
const messageData = createPermitMessageData(
|
||||||
|
fromAddress,
|
||||||
|
spender,
|
||||||
|
nonceTest,
|
||||||
|
deadline,
|
||||||
|
value
|
||||||
|
);
|
||||||
|
console.log("messageData", messageData);
|
||||||
|
// const sig = await signData(fromAddress, messageData.typedData);
|
||||||
|
const signature = await signTyped(fromAddress, messageData.typedData);
|
||||||
|
// console.log("sig", sig);
|
||||||
|
console.log("signature", signature);
|
||||||
|
|
||||||
|
const split = splitSig(signature);
|
||||||
|
|
||||||
|
console.log("split", split);
|
||||||
|
var resultStake = await rewardlocker.value.methods
|
||||||
|
.stakeToBeSecured(value, deadline, split.v, split.r, split.s)
|
||||||
|
.send({ from: fromAddress });
|
||||||
|
console.log("resultStake", resultStake);
|
||||||
|
|
||||||
|
var allowance = await contractBloodline.value.methods
|
||||||
|
.allowance(fromAddress, spender)
|
||||||
|
.call();
|
||||||
|
console.log("allowance", allowance);
|
||||||
|
// return Object.assign({}, sig, messageData.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
const signTyped = (fromAddress, dataToSign) => {
|
||||||
|
// call this method to sign EIP 712 data
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
web3.value.currentProvider.sendAsync(
|
||||||
|
{
|
||||||
|
method: "eth_signTypedData_v4",
|
||||||
|
params: [fromAddress, dataToSign],
|
||||||
|
from: fromAddress,
|
||||||
|
},
|
||||||
|
(err, result) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
resolve(result.result);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const splitSig = (sig) => {
|
||||||
|
// splits the signature to r, s, and v values.
|
||||||
|
// const pureSig = sig.replace("0x", "");
|
||||||
|
|
||||||
|
const r = sig.slice(0, 66);
|
||||||
|
const s = "0x" + sig.slice(66, 130);
|
||||||
|
const v = Number("0x" + sig.slice(130, 132));
|
||||||
|
return { v, r, s };
|
||||||
|
};
|
||||||
|
|
||||||
|
const signData = async function (fromAddress, typeData) {
|
||||||
|
const result = await window.ethereum.request({
|
||||||
|
id: 1,
|
||||||
|
method: "eth_signTypedData_v4",
|
||||||
|
params: [fromAddress, typeData],
|
||||||
|
from: fromAddress,
|
||||||
|
});
|
||||||
|
|
||||||
|
const r = result.slice(0, 66);
|
||||||
|
const s = "0x" + result.slice(66, 130);
|
||||||
|
const v = Number("0x" + result.slice(130, 132));
|
||||||
|
return { v, r, s };
|
||||||
|
};
|
||||||
|
|
||||||
|
const createPermitMessageData = function (
|
||||||
|
fromAddress,
|
||||||
|
spender,
|
||||||
|
nonce,
|
||||||
|
deadline,
|
||||||
|
value
|
||||||
|
) {
|
||||||
|
const message = {
|
||||||
|
owner: fromAddress,
|
||||||
|
spender: spender,
|
||||||
|
nonce: nonce,
|
||||||
|
deadline: deadline,
|
||||||
|
value: value,
|
||||||
|
};
|
||||||
|
|
||||||
|
const domainType = [
|
||||||
|
{ name: "name", type: "string" },
|
||||||
|
{ name: "version", type: "string" },
|
||||||
|
{ name: "chainId", type: "uint256" },
|
||||||
|
{ name: "verifyingContract", type: "address" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const typedData = JSON.stringify({
|
||||||
|
types: {
|
||||||
|
EIP712Domain: domainType,
|
||||||
|
Permit: [
|
||||||
|
{
|
||||||
|
name: "owner",
|
||||||
|
type: "address",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "spender",
|
||||||
|
type: "address",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "value",
|
||||||
|
type: "uint256",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "nonce",
|
||||||
|
type: "uint256",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "deadline",
|
||||||
|
type: "uint256",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
primaryType: "Permit",
|
||||||
|
domain: {
|
||||||
|
name: "Bloodline",
|
||||||
|
version: "1",
|
||||||
|
chainId: 5,
|
||||||
|
verifyingContract: "0x9dcD7Cd83ED0Fe69DDfE3c2A265a1207F2Bc3219",
|
||||||
|
},
|
||||||
|
message: message,
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
typedData,
|
||||||
|
message,
|
||||||
|
};
|
||||||
|
};
|
||||||
// console.log("balanceOf", contract.mint(10));
|
// console.log("balanceOf", contract.mint(10));
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div v-if="!fromAddress" @click="showConnectors = true">Connect</div>
|
||||||
|
<div v-if="showConnectors">
|
||||||
|
<div v-for="connector in config.connectors" @click="connectWallet(connector)">
|
||||||
|
{{ connector.name}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="fromAddress" @click="disconnectWallet">Disconnect</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup >
|
||||||
|
import { ref, toRaw, onMounted, onUnmounted } from "vue";
|
||||||
|
import Meme1Json from "@/assets/contracts/Meme1.json";
|
||||||
|
import { useWalletStore } from "@/stores/wallet";
|
||||||
|
const walletStore = useWalletStore();
|
||||||
|
|
||||||
|
const fromAddress = ref(null);
|
||||||
|
const showConnectors = ref(false);
|
||||||
|
import {
|
||||||
|
createConfig,
|
||||||
|
configureChains,
|
||||||
|
mainnet,
|
||||||
|
getAccount,
|
||||||
|
getContract,
|
||||||
|
connect,
|
||||||
|
disconnect,
|
||||||
|
InjectedConnector,
|
||||||
|
getWalletClient,
|
||||||
|
watchAccount,
|
||||||
|
} from "@wagmi/core";
|
||||||
|
|
||||||
|
import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
|
||||||
|
import { MetaMaskConnector } from "@wagmi/core/connectors/metaMask";
|
||||||
|
|
||||||
|
import { goerli } from "@wagmi/core/chains";
|
||||||
|
import { publicProvider } from "@wagmi/core/providers/public";
|
||||||
|
import { alchemyProvider } from "@wagmi/core/providers/alchemy";
|
||||||
|
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
|
||||||
|
console.log("goerliKey", goerliKey);
|
||||||
|
const { chains, publicClient, webSocketPublicClient } = configureChains(
|
||||||
|
[goerli],
|
||||||
|
[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
|
||||||
|
);
|
||||||
|
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
|
||||||
|
const config = ref(null);
|
||||||
|
const accountSub = ref(null);
|
||||||
|
// onMounted(() => {
|
||||||
|
// const account = getAccount();
|
||||||
|
// console.log("account", account);
|
||||||
|
// if (account.isConnected) {
|
||||||
|
// fromAddress.value = account.address;
|
||||||
|
// }
|
||||||
|
// accountSub.value = watchAccount((account) => {
|
||||||
|
// console.log("account123", account);
|
||||||
|
// fromAddress.value = account.address;
|
||||||
|
// walletStore.address = account.address;
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
// onUnmounted(() => {
|
||||||
|
// accountSub.value();
|
||||||
|
// console.log("unsubscribe");
|
||||||
|
// });
|
||||||
|
|
||||||
|
config.value = createConfig({
|
||||||
|
autoConnect: true,
|
||||||
|
connectors: [
|
||||||
|
new MetaMaskConnector({ chains }),
|
||||||
|
new WalletConnectConnector({
|
||||||
|
chains,
|
||||||
|
options: {
|
||||||
|
projectId: projectId,
|
||||||
|
showQrModal: true,
|
||||||
|
metadata: {
|
||||||
|
name: "Bloodline-App",
|
||||||
|
description: "TODO Bloodline Description",
|
||||||
|
url: "https://gitea.loseyourip.com/",
|
||||||
|
icons: [
|
||||||
|
"https://gitea.loseyourip.com/assets/img/vampir.png",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
publicClient,
|
||||||
|
webSocketPublicClient,
|
||||||
|
});
|
||||||
|
console.log("config", config);
|
||||||
|
const walletClient = await getWalletClient();
|
||||||
|
console.log("walletClient", walletClient);
|
||||||
|
|
||||||
|
async function disconnectWallet() {
|
||||||
|
try {
|
||||||
|
await disconnect();
|
||||||
|
} catch (error) {
|
||||||
|
console.log("error", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function connectWallet(connector) {
|
||||||
|
console.log("connector.name", connector.name);
|
||||||
|
const rawConnector = toRaw(connector);
|
||||||
|
// if (!account.isConnected) {
|
||||||
|
const connection = await connect({
|
||||||
|
chainId: goerli.id,
|
||||||
|
connector: rawConnector,
|
||||||
|
});
|
||||||
|
console.log("Connecting to:", connection);
|
||||||
|
fromAddress.value = connection.account;
|
||||||
|
showConnectors.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function connect1() {
|
||||||
|
const connection = await connect({
|
||||||
|
chainId: goerli.id,
|
||||||
|
connector: new InjectedConnector(),
|
||||||
|
});
|
||||||
|
console.log("Connecting to:", connection);
|
||||||
|
}
|
||||||
|
async function getAccount1() {
|
||||||
|
const account = getAccount();
|
||||||
|
console.log("account", account);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,223 @@
|
|||||||
|
<template>
|
||||||
|
{{ activeWallet }}
|
||||||
|
{{ fromAddressWC }}
|
||||||
|
<div class="connect-overview" v-if="!activeWallet && !fromAddressWC">
|
||||||
|
<div v-for="wallet in wallets">
|
||||||
|
<img :src="wallet.icon" :alt="wallet.name" @click="connectWallet($event, wallet)">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<button @click="disconnectWallet">disconnect</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import { WalletConnectModalSign } from "@walletconnect/modal-sign-html";
|
||||||
|
import {
|
||||||
|
EthereumProvider,
|
||||||
|
OPTIONAL_EVENTS,
|
||||||
|
REQUIRED_EVENTS,
|
||||||
|
REQUIRED_METHODS,
|
||||||
|
OPTIONAL_METHODS,
|
||||||
|
} from "@walletconnect/ethereum-provider";
|
||||||
|
|
||||||
|
import Web3 from "web3";
|
||||||
|
|
||||||
|
// const modal = new WalletConnectModal({
|
||||||
|
// projectId: "d8e5ecb0353c02e21d4c0867d4473ac5",
|
||||||
|
// chains: ["goerli"],
|
||||||
|
// });
|
||||||
|
|
||||||
|
const activeWallet = ref(null);
|
||||||
|
const fromAddressWC = ref(null);
|
||||||
|
const provider = ref(null);
|
||||||
|
const wallets = [
|
||||||
|
{
|
||||||
|
name: "MetaMask",
|
||||||
|
icon: "https://cdn.iconscout.com/icon/free/png-512/metamask-2728406-2261817.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "WalletConnect",
|
||||||
|
icon: "https://time.com/img/icons/wallet-connect.png",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const disableConnectButton = ref(false);
|
||||||
|
// const web3Modal = new WalletConnectModalSign({
|
||||||
|
// projectId,
|
||||||
|
// metadata: {
|
||||||
|
// name: "Bloodline-App",
|
||||||
|
// description: "TODO Bloodline Description",
|
||||||
|
// url: "https://gitea.loseyourip.com/",
|
||||||
|
// icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
|
||||||
|
const showQrModal = true;
|
||||||
|
|
||||||
|
const metadata = {
|
||||||
|
name: "Bloodline-App",
|
||||||
|
description: "TODO Bloodline Description",
|
||||||
|
url: "https://gitea.loseyourip.com/",
|
||||||
|
icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
|
||||||
|
};
|
||||||
|
provider.value = await EthereumProvider.init({
|
||||||
|
projectId, // REQUIRED your projectId
|
||||||
|
chains: [1], // chains added to required namespaces
|
||||||
|
optionalChains: [5], // chains added to optional namespaces
|
||||||
|
showQrModal, // REQUIRED set to "true" to use @walletconnect/modal
|
||||||
|
REQUIRED_METHODS, // REQUIRED ethereum methods
|
||||||
|
OPTIONAL_METHODS, // OPTIONAL ethereum methods
|
||||||
|
REQUIRED_EVENTS, // REQUIRED ethereum events
|
||||||
|
OPTIONAL_EVENTS, // OPTIONAL ethereum events
|
||||||
|
// rpcMap, // OPTIONAL rpc urls for each chain
|
||||||
|
metadata, // OPTIONAL metadata of your app
|
||||||
|
// qrModalOptions, // OPTIONAL - `undefined` by default, see https://docs.walletconnect.com/2.0/web3modal/options
|
||||||
|
});
|
||||||
|
console.log("provider.value", provider.value);
|
||||||
|
if (provider.value.accounts.length > 0) {
|
||||||
|
fromAddressWC.value = provider.value.accounts[0];
|
||||||
|
} else {
|
||||||
|
fromAddressWC.value = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function disconnectWallet() {
|
||||||
|
activeWallet.value = null;
|
||||||
|
fromAddressWC.value = null;
|
||||||
|
provider.value.disconnect();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function connectWallet(event, wallet) {
|
||||||
|
try {
|
||||||
|
disableConnectButton.value = true;
|
||||||
|
if (wallet.name === "MetaMask") {
|
||||||
|
window.ethereum
|
||||||
|
.request({ method: "eth_requestAccounts" })
|
||||||
|
.then((data) => {
|
||||||
|
console.log("data", data);
|
||||||
|
activeWallet.value = { ...wallet, address: data };
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
if (error.code === 4001) {
|
||||||
|
// EIP-1193 userRejectedRequest error
|
||||||
|
console.log("Please connect to MetaMask.");
|
||||||
|
} else {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (wallet.name === "WalletConnect") {
|
||||||
|
const methods = [
|
||||||
|
"eth_signTypedData",
|
||||||
|
"eth_signTypedData_v4",
|
||||||
|
"eth_sign",
|
||||||
|
];
|
||||||
|
const optionalMethods = [];
|
||||||
|
const events = [];
|
||||||
|
|
||||||
|
console.log("OPTIONAL_EVENTS", OPTIONAL_EVENTS);
|
||||||
|
console.log("REQUIRED_EVENTS", REQUIRED_EVENTS);
|
||||||
|
console.log("REQUIRED_METHODS", REQUIRED_METHODS);
|
||||||
|
console.log("OPTIONAL_METHODS", OPTIONAL_METHODS);
|
||||||
|
|
||||||
|
console.log("provider", provider.value);
|
||||||
|
// await provider.value.connect();
|
||||||
|
await provider.value.enable();
|
||||||
|
provider.value.on("accountsChanged", function (account) {
|
||||||
|
console.log("accountschanged", { account });
|
||||||
|
fromAddressWC.value = account;
|
||||||
|
});
|
||||||
|
const result = await provider.value.request({
|
||||||
|
method: "eth_requestAccounts",
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("result", result);
|
||||||
|
fromAddressWC.value = result[0];
|
||||||
|
// const session = await web3Modal.connect({
|
||||||
|
// requiredNamespaces: {
|
||||||
|
// eip155: {
|
||||||
|
// methods: ["eth_sendTransaction", "personal_sign"],
|
||||||
|
// chains: ["eip155:1"],
|
||||||
|
// events: ["chainChanged", "accountsChanged"],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// console.log("session", session);
|
||||||
|
// const web3 = new Web3(session);
|
||||||
|
// console.log("web3", web3);
|
||||||
|
// try {
|
||||||
|
// // console.log("web3Modal", web3Modal);
|
||||||
|
// // var test = await web3Modal.request({
|
||||||
|
// // method: "eth_requestAccounts",
|
||||||
|
// // });
|
||||||
|
// // console.log("test", test);
|
||||||
|
|
||||||
|
// console.log("getAccounts");
|
||||||
|
// const accounts = await web3.eth.getAccounts();
|
||||||
|
// console.log("Got accounts", accounts);
|
||||||
|
// } catch (error) {
|
||||||
|
// console.log("error", error);
|
||||||
|
// }
|
||||||
|
// // MetaMask does not give you all accounts, only the selected account
|
||||||
|
// const fromAddress = session.namespaces.eip155.accounts[0].slice(9);
|
||||||
|
// console.log("Web3 instance is", web3);
|
||||||
|
// try {
|
||||||
|
// var balance = web3.eth.getBalance(fromAddress);
|
||||||
|
// console.log("balance", balance);
|
||||||
|
// } catch (error) {
|
||||||
|
// console.log("error", error);
|
||||||
|
// }
|
||||||
|
// // var accounts = await web3.eth.getAccounts();
|
||||||
|
// console.log("accounts", accounts);
|
||||||
|
// var userAccount = accounts[0];
|
||||||
|
// console.log("userAccount", userAccount);
|
||||||
|
// session.on("accountsChanged", (accounts) => {
|
||||||
|
// console.log("ACCOUNTS CHANGED" + accounts[0]);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
} finally {
|
||||||
|
disableConnectButton.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onConnect() {
|
||||||
|
try {
|
||||||
|
disableConnectButton.value = true;
|
||||||
|
const session = await web3Modal.connect({
|
||||||
|
requiredNamespaces: {
|
||||||
|
eip155: {
|
||||||
|
methods: ["eth_sendTransaction", "personal_sign"],
|
||||||
|
chains: ["eip155:1"],
|
||||||
|
events: ["chainChanged", "accountsChanged"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
console.info(session);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
} finally {
|
||||||
|
disableConnectButton.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function disconnect() {
|
||||||
|
modal.closeModal();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.connect-overview
|
||||||
|
display: flex
|
||||||
|
div
|
||||||
|
background-color: black
|
||||||
|
width: 100px
|
||||||
|
height: auto
|
||||||
|
img
|
||||||
|
width: 100%
|
||||||
|
height: auto
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user