@ozdao/prometheus-framework 0.2.133 → 0.2.134

package/src/modules/wallet/views/components/elements/ConnectMetamask.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <!-- Connect Metamask -->
+    <button 
+      v-if="!isMetaMaskInstalled"
+      @click="connectMetaMask" 
+      class="transition-ease-in-out cursor-pointer  bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white"
+    >
+      <img :src="'/icons/metamask.svg'" class="mn-r-small i-big" >
+      <span class="h4 uppercase w-100">{{ t('wallet.connectMetaMask') }}</span>
+      <IconAdd  class="t-transp"   fill="rgb(var(--white))"/>
+    </button>
+
+    <template v-else>
+      <!-- Switch to Polygon -->
+      <button 
+        v-if="!isPolygon"
+        @click="switchToPolygon" 
+        class="transition-ease-in-out cursor-pointer hover-bg-white hover-t-black bg-black t-white radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small "
+      >
+        <img :src="'/icons/metamask.svg'" class="mn-r-small i-big" >
+        <span class="h4 uppercase w-100">{{ t('wallet.switchToPolygon') }}</span>
+        <IconAdd  class="t-transp"  fill="rgb(var(--white))" />
+      </button>
+      <!-- Add WDT to metamask -->
+      <button 
+        v-if="isPolygon"
+        @click="addWDT" 
+        class="transition-ease-in-out cursor-pointer hover-bg-white hover-t-black  bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white"
+      >
+        <img :src="'/icons/metamask.svg'" class="mn-r-small i-big" >
+        <span class="h4 uppercase w-100">{{ t('wallet.addToken') }}</span>
+        <IconAdd  class="hover-fill-black fill-white t-transp"/>
+      </button>
+    </template>
+
+    <!-- <p class="mn-t-small" v-if="error">{{ error }}</p> -->
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import text from '@pf/src/modules/wallet/views/localization/wallet.json'
+
+import IconAdd from '@pf/src/modules/icons/navigation/IconAdd.vue'
+
+const isMetaMaskInstalled = ref(false);
+const isPolygon = ref(false);
+const loading = ref(false);
+const error = ref(null);
+const buttonStyle = ref({});
+
+const tokenAddress = '0xE11702CF04621D395E75680C29d3dbF81484e875'; 
+const tokenSymbol = 'WDT';
+const tokenDecimals = 8;
+const tokenImage = 'https://weeder.delivery/logo-token.png';
+
+const connectMetaMask = async () => {
+  if (typeof window.ethereum !== 'undefined') {
+    try {
+      await window.ethereum.request({ method: 'eth_requestAccounts' });
+      checkMetaMask();
+    } catch (error) {
+      console.error('Ошибка при подключении MetaMask:', error);
+    }
+  } else {
+    window.open('https://metamask.io/', '_blank');
+  }
+};
+
+const checkMetaMask = async () => {
+  if (typeof window.ethereum !== 'undefined') {
+    isMetaMaskInstalled.value = true;
+    const chainId = await window.ethereum.request({ method: 'eth_chainId' });
+    isPolygon.value = chainId === '0x89' || chainId === '0x13881';
+  } else {
+    isMetaMaskInstalled.value = false;
+  }
+};
+
+const switchToPolygon = async () => {
+  try {
+    await window.ethereum.request({
+      method: 'wallet_switchEthereumChain',
+      params: [{ chainId: '0x89' }],
+    });
+    checkMetaMask();
+  } catch (error) {
+    console.error('Ошибка при переключении на Polygon:', error);
+  }
+};
+
+const addWDT = async () => {
+  buttonStyle.value['pointer-events'] = 'none';
+  error.value = null;
+  loading.value = true;
+
+  try {
+    await ethereum.request({
+      method: 'wallet_watchAsset',
+      params: {
+        type: 'ERC20',
+        options: {
+          address: tokenAddress,
+          symbol: tokenSymbol,
+          decimals: tokenDecimals,
+          image: tokenImage,
+        },
+      },
+    });
+
+    buttonStyle.value['background-color'] = '#009911';
+    loading.value = false;
+  } catch (err) {
+    error.value = err.toString();
+  }
+};
+
+const { t } = useI18n({
+  useScope: 'global', 
+  ...text
+})
+
+onMounted(() => {
+  checkMetaMask();
+});
+
+</script>

package/src/modules/wallet/views/components/pages/Wallet.vue

@@ -1,11 +1,10 @@
 <template>
-  <section class="pd-thin">
-
+  <div class="pd-thin">
     <section class="bg-black t-white mn-b-thin radius-big pd-big">
-      <h1 class="mn-b-medium ">Your Wallet</h1>
+      <h1 class="mn-b-medium">{{ t('wallet.title') }}</h1>
 
       <p class="mn-b-semi t-transp p-big">
-        Earn Weeder Tokens by purchasing our weed or contributing to the community.
+        {{ t('wallet.subtitle') }}
       </p>
 
       <div 
@@ -14,13 +13,22 @@
       >
         <div class="flex-v-center flex-nowrap flex mn-r-auto">
           <!-- <img src="/logo/wdt.svg" class="mn-r-thin i-big"> -->
-          <h2>{{state.tokenBalance}} WDT</h2>
+          <h2>{{state.tokenBalance}} {{ t('wallet.token') }}</h2>
         </div>
 
-        <button @click="openGetMorePopup" class="w-max bg-main t-medium button">Get More</button>
-        <button class="w-max bg-white t-black t-medium button" @click="actions.collectRewards">Withdraw</button>
+        <button @click="openGetMorePopup" class="t-nowrap w-max bg-main t-medium button">Get More</button>
+
+
+        <Button 
+          :submit="actions.collectRewards" 
+          class="w-max bg-white t-black t-medium button"
+        >
+          Withdraw
+        </Button>
       </div>
 
+      <ConnectMetamask class="mn-b-thin radius-extra br-solid br-white-transp-10 br-1px w-100" />
+
       <div
         v-if="state.account"
         class="w-100 mn-b-semi flex-column flex pd-big radius-big bg-main t-black"
@@ -123,77 +131,96 @@
         </div>
       </div>
     </section>
-  </section>
-
-  <Popup 
-    title="Добавить участника" 
-    @close-popup="closeGetMorePopup" 
-    :isPopupOpen="isGetMorePopup"
-    class="w-m-33r t-left pd-big bg-white radius-big"
-  >
-    <div
-      v-if="currentMenuPopup === 0"
-    >
-      <h2 class="mn-b-small t-center t-bold">Choose the way of deposit</h2>
 
-      <button
-        class="w-100 bg-white t-black pd-thin radius-medium h3 t-center br-solid br-2px br-black-transp-10 mn-t-small"
-        @click="switchGetMoreMenu(1)"
+    <Popup 
+      @close-popup="closeGetMorePopup" 
+      :isPopupOpen="isGetMorePopup"
+      class="w-m-50r t-left pd-big bg-white radius-big"
+    >
+      <div
+        v-if="currentMenuPopup === 0"
       >
-        CASH
-      </button>
+        <h2 class="mn-b-small t-center t-bold">Choose the way of deposit</h2>
 
-      <button
-        class="w-100 bg-white t-black pd-thin radius-medium h3 t-center br-solid br-2px br-black-transp-10 mn-t-small"
-        @click="switchGetMoreMenu(2)"
-      >
-        CARD
-      </button>
+        <button
+          class="w-100 bg-white t-black pd-thin radius-medium h3 t-center br-solid br-2px br-black-transp-10 mn-t-small"
+          @click="switchGetMoreMenu(1)"
+        >
+          CASH
+        </button>
 
-      <button
-        class="w-100 bg-white t-black pd-thin radius-medium h3 t-center br-solid br-2px br-black-transp-10 mn-t-small"
-        @click="switchGetMoreMenu(4)"
-      >
-        CRYPTO
-      </button>
-    </div>
+        <button
+          class="w-100 bg-white t-black pd-thin radius-medium h3 t-center br-solid br-2px br-black-transp-10 mn-t-small"
+          @click="switchGetMoreMenu(2)"
+        >
+          CARD
+        </button>
+
+        <button
+          class="w-100 bg-white t-black pd-thin radius-medium h3 t-center br-solid br-2px br-black-transp-10 mn-t-small"
+          @click="switchGetMoreMenu(4)"
+        >
+          CRYPTO
+        </button>
+      </div>
 
-    <CashDepositeMenu
-      v-if="currentMenuPopup === 1"
-      @back-selection="switchGetMoreMenu(0)"
-    />
-
-    <CardDepositeMenu
-      v-if="currentMenuPopup === 2"
-      @back-selection="switchGetMoreMenu(0)"
-      @switch-menu="switchGetMoreMenu"
-    />
-
-    <CardBalanceReplenished
-      v-if="currentMenuPopup === 3"
-      @close="closeGetMorePopup"
-    />
-
-    <CryptoDepositeMenu
-      v-if="currentMenuPopup === 4"
-      @back-selection="switchGetMoreMenu(0)"
-      @switch-menu="switchGetMoreMenu"
-    />
-  </Popup>
+      <CashDepositMenu
+        v-if="currentMenuPopup === 1"
+        @back-selection="switchGetMoreMenu(0)"
+      />
+
+      <CardDepositMenu
+        v-if="currentMenuPopup === 2"
+        @back-selection="switchGetMoreMenu(0)"
+        @switch-menu="switchGetMoreMenu"
+      />
+
+      <CardBalanceReplenished
+        v-if="currentMenuPopup === 3"
+        @close="closeGetMorePopup"
+      />
+
+      <CryptoDepositMenu
+        v-if="currentMenuPopup === 4"
+        @back-selection="switchGetMoreMenu(0)"
+        @switch-menu="switchGetMoreMenu"
+      />
+
+      <CryptoDepositProcessing
+        v-if="currentMenuPopup === 5"
+        @back-selection="switchGetMoreMenu(0)"
+        @switch-menu="switchGetMoreMenu"
+      />
+    </Popup>
+  </div>
 </template>
 
 <script setup>
   import { onMounted, ref } from 'vue';
+  import { useI18n } from 'vue-i18n'
+  import Web3 from "web3";
+
   import { state, actions } from '@pf/src/modules/wallet/views/store/wallet.store';
 
-  import Web3 from "web3";
+  import text from '@pf/src/modules/wallet/views/localization/wallet.json'
+ 
+  const { t } = useI18n({
+    useScope: 'global', 
+    ...text
+  })
+
+  import Popup from '@pf/src/components/Popup/Popup.vue';
+  import Button from '@pf/src/components/Button/Button.vue'; 
+
+  import CardBlogpost from '@pf/src/modules/community/components/blocks/CardBlogpost.vue';
+
+  import ConnectMetamask from '@pf/src/modules/wallet/views/components/elements/ConnectMetamask.vue';
 
-  import CardBlogpost from '@pf/src/modules/community/components/blocks/CardBlogpost.vue'
-  import Popup    from '@pf/src/components/Popup/Popup.vue'
-  import CashDepositeMenu from '@pf/src/modules/wallet/components/blocks/CashDeposite.vue'
-  import CardDepositeMenu from '@pf/src/modules/wallet/components/blocks/CardDeposite.vue'
-  import CryptoDepositeMenu from '@pf/src/modules/wallet/components/blocks/CryptoDeposite.vue'
-  import CardBalanceReplenished from '@pf/src/modules/wallet/components/blocks/CardBalanceReplenished.vue'
+  import CashDepositMenu from '@pf/src/modules/wallet/views/components/blocks/CashDeposit.vue';
+  import CardDepositMenu from '@pf/src/modules/wallet/views/components/blocks/CardDeposit.vue';
+  import CryptoDepositMenu from '@pf/src/modules/wallet/views/components/blocks/CryptoDeposit.vue';
+  import CardBalanceReplenished from '@pf/src/modules/wallet/views/components/blocks/CardBalanceReplenished.vue';
+  import CryptoDepositProcessing from '@pf/src/modules/wallet/views/components/blocks/CryptoDepositProcessing.vue';
 
   // User has disconnected metamask from extension
   window.ethereum.on('accountsChanged', (accounts) => {
@@ -205,8 +232,6 @@
   state.web3 = new Web3(window.ethereum || 'http://localhost:8080');
 
   onMounted(() => {
-    // Load list with the latest rewards and try to reconnect metamask,
-    // if a user is already connected to it before
     actions.listRewards();
     actions.tryReconnectWallet();
   });
@@ -227,5 +252,7 @@
   function closeGetMorePopup() {
     isGetMorePopup.value = false;
     currentMenuPopup.value = 0;
+    actions.stopTimer();
+    actions.disconnectWebSocket();
   }
 </script>

package/src/modules/wallet/views/localization/wallet.json

@@ -0,0 +1,37 @@
+{
+  "messages": {
+    "en-default": {
+      "wallet": {
+        "title": "Your Wallet",
+        "subtitle": "Earn WDT by purchasing our weed or contributing to the community.",
+        "token": "WDT",
+        "connectMetaMask": "Connect MetaMask",
+        "switchToPolygon": "Switch to Polygon",
+        "addToken": "Add WDT to MetaMask",
+        "pay": "pay",
+        "youReceived": "you received",
+        "enterAmount": "enter amount to top up",
+        "backToWallet": "back to wallet",
+        "backToSelection": "back to selection",
+        "balanceReplenished": "balance replenished",
+        "depositWithCrypto": "deposit with crypto"
+      }
+    },
+    "ru-default": {
+      "wallet": {
+        "title": "Ваш Кошелек",
+        "subtitle": "Зарабатывайте WDT, покупая товары или внося вклад в сообщество.",
+        "connectMetaMask": "Подключить MetaMask",
+        "switchToPolygon": "Переподключиться на Polygon",
+        "addToken": "Добавить WDT в Metamask",
+        "pay": "купить",
+        "youReceived": "вы пополнили на сумму",
+        "enterAmount": "введите сумму для пополнения",
+        "backToWallet": "назад к кошельку",
+        "backToSelection": "назад к списку",
+        "balanceReplenished": "баланс пополнен",
+        "depositWithCrypto": "пополнение криптовалютой"
+      }
+    }
+  }
+}

package/src/modules/wallet/views/store/wallet.store.js

@@ -2,6 +2,8 @@ import axios from 'axios';
 import { reactive } from 'vue';
 import { BigNumber } from 'bignumber.js';
 
+import { setError } from "@pf/src/modules/globals/store/globals";
+
 const API_CRYPTO_PATH = '/api/crypto';
 const WDT_SUPPLY = 20_000_000;
 
@@ -13,46 +15,161 @@ const state = reactive({
   share: '0',
   account: null,
   web3: null,
+  depositInfo: null,
+  depositRequestIsActive: false,
+  websocket: null,
+  config: null,
+  chosenNetwork: null,
 });
 
+const timer = reactive({ remaining: 0, interval: null });
+
 const actions = {
-  listRewards: () => $axios
-    .get(`${API_CRYPTO_PATH}/rewards`)
-    .then((r) => {
+  loadConfig: async () => {
+    await $axios
+      .get(`${API_CRYPTO_PATH}/deposit/config`)
+      .then((r) => {
+        state.config = r.data;
+        state.chosenNetwork = {
+          name: `polygon-WDT`,
+          value: {
+            token: state.config.polygon.tokens.WDT,
+            network: 'polygon'
+          }
+        }
+      })
+      .catch((e) => console.error(e));
+  },
+
+  connectWebSocket: () => {
+    state.websocket = new WebSocket(process.env.WSS_URL);
+
+    state.websocket.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+
+      if (message.id === state.depositInfo.id) {
+        const confirmations = state.depositInfo.confirmations;
+
+        state.depositInfo = message;
+        state.depositInfo.confirmations = confirmations;
+      }
+
+      if (message.hash === state.depositInfo.tx.hash) {
+        state.depositInfo.confirmations = message.confirmations;
+      }
+    };
+
+    state.websocket.onerror = (err) => console.error(err);
+  },
+
+  disconnectWebSocket: () => {
+    if (state.websocket) {
+      state.websocket.close();
+      state.websocket = null;
+    }
+  },
+
+  listRewards: async () => {
+    try {
+      const r = await $axios.get(`${API_CRYPTO_PATH}/rewards`);
+
       state.rewards = r.data;
       state.tokenBalance = r.data
         .reduce((acc, v) => acc.plus(v.amount), new BigNumber('0'))
         .toString();
+        
       state.share = new BigNumber(state.tokenBalance)
         .div(WDT_SUPPLY)
         .multipliedBy(100)
         .toFormat(6);
-    })
-    .catch((e) => console.error(e)),
-
-  collectRewards: () => $axios
-    .post(`${API_CRYPTO_PATH}/collect`, { recipient: state.account })
-    .then(() => actions.listRewards())
-    .catch((e) => console.error(e)),
-
-  disconnectWallet: () => window.ethereum
-    .request({ method: "wallet_revokePermissions", params: [{ "eth_accounts": {} }] })
-    .then(() => { state.account = null; })
-    .catch((e) => console.error(e)),
-
-  connectWallet: () => state.web3.eth
-    .requestAccounts()
-    .then((accounts) => { state.account = accounts[0] })
-    .catch((e) => console.error(e)),
-
-  tryReconnectWallet: () => state.web3.eth
-    .getAccounts()
-    .then((a) => {
+    } catch (e) {
+      console.error(e);
+    }
+  },
+
+  collectRewards: async () => {
+    try {
+      await $axios.post(`${API_CRYPTO_PATH}/collect`, { recipient: state.account });
+      await actions.listRewards();
+    } catch (e) {
+      console.error(e);
+    }
+  },
+
+  disconnectWallet: async () => {
+    try {
+      await window.ethereum.request({ method: "wallet_revokePermissions", params: [{ "eth_accounts": {} }] });
+      state.account = null;
+    } catch (e) {
+      console.error(e);
+    }
+  },
+
+  connectWallet: async () => {
+    try {
+      const accounts = await state.web3.eth.requestAccounts();
+      state.account = accounts[0];
+    } catch (e) {
+      console.error(e);
+    }
+  },
+
+  tryReconnectWallet: async () => {
+    try {
+      const a = await state.web3.eth.getAccounts();
       if (a.length > 0) {
-        return actions.connectWallet();
+        await actions.connectWallet();
       }
-    })
-    .catch((e) => console.error(e)),
+    } catch (e) {
+      console.error(e);
+    }
+  },
+
+  requestCryptoDeposit: async (amount) => {
+    state.depositRequestIsActive = true;
+
+    await $axios
+      .post(`${API_CRYPTO_PATH}/deposit`, {
+        network: state.chosenNetwork.value.network,
+        amount: new BigNumber(amount).shiftedBy(8).toString(),
+        token: state.chosenNetwork.value.token
+      })
+      .then((r) => {
+        state.depositInfo = r.data;
+
+        const createTimestamp = new Date(r.data.createdAt).getTime();
+        const dead = createTimestamp + state.config[state.chosenNetwork.value.network].waitingTime;
+        timer.remaining = Math.floor((dead - Date.now()) / 1000);
+
+        timer.interval = setInterval(
+          () => {
+            timer.remaining -= 1;
+
+            if (timer.remaining === 0) {
+              clearInterval(timer.interval);
+            }
+          },
+          1000
+        );
+      })
+      .catch((e) => console.error(e));
+
+    state.depositRequestIsActive = false;
+
+    actions.connectWebSocket();
+  },
+
+  stopTimer: () => {
+    clearInterval(timer.interval);
+  },
+
+  cancelDeposit: async () => {
+    await $axios
+      .post(`${API_CRYPTO_PATH}/deposit/cancel`, { id: state.depositInfo.id })
+      .then(() => actions.stopTimer())
+      .then(() => actions.disconnectWebSocket())
+      .catch((e) => console.error(e));
+  }
 };
 
-export { state, actions };
+export { state, actions, timer };

package/src/modules/wallet/wallet.server.js

@@ -8,7 +8,7 @@ const RoutesRewards = require('./controllers/routes/rewards.routes.js');
 const FactoryPayments = require('./controllers/factories/payments.factory.js');
 
 // Initialization function for setting up the module within the application
-function initializePayments(app, db, wdmClient, origins, publicPath) {
+function initializePayments(app, db, wss, wdmClient, origins, publicPath) {
   // Setup models in the database object
   db.wallet = ModelWallet(db);
   db.payment = ModelPayment(db);
@@ -17,7 +17,7 @@ function initializePayments(app, db, wdmClient, origins, publicPath) {
   // Setup routes if the app object is provided
   if (app) {
     RoutesPayments(app, db, origins, publicPath)
-    RoutesRewards(app, db, wdmClient, origins)
+    RoutesRewards(app, db, wss, wdmClient, origins)
   }
 }
 

package/src/modules/wallet/components/blocks/CryptoDeposite.vue

@@ -1,55 +0,0 @@
-<template>
-  <h2 class="mn-b-small t-center t-bold">{{ t('depositeWithCrypto') }}</h2>
-
-  <div class="bg-grey radius-big mn-t-semi mn-b-semi flex flex-justify-between">
-    <Field
-      :placeholder="t('enterAmount')"
-      class="pd-medium radius-small"
-    />
-
-    <div class="uppercase flex flex-justify-center flex-items-center mn-r-semi t-semi">
-      POLY USDT
-    </div>
-  </div>
-
-  <h3 class="t-semi">You will receieve: 0 WDT</h3>
-
-  <button
-    class="uppercase w-100 bg-main t-black pd-thin radius-medium t-center br-solid br-2px br-black-transp-10 mn-t-small"
-    @click="switchMenu(3)"
-  >
-    {{ t('pay') }}
-  </button>
-
-  <button
-    class="uppercase w-100 bg-main t-black pd-thin radius-medium t-center br-solid br-2px br-black-transp-10 mn-t-small"
-    @click="backSelection"
-  >
-    {{ t('backToSelection') }}
-  </button>
-</template>
-
-<script setup>
-  import text from '@pf/src/modules/wallet/localization/Wallet.json'
-  import Field from '@pf/src/components/Field/Field.vue'
-  import { useI18n } from 'vue-i18n'
-
-  const emits = defineEmits(['back-selection', 'switch-menu'])
-
-  // Localization
-  const { t } = useI18n({
-    useScope: 'global', 
-    ...text
-  })
-
-  function backSelection() {
-    emits("back-selection")
-  }
-
-  function switchMenu(screen = 0) {
-    emits("switch-menu", screen)
-  }
-</script>
-
-<style scoped>
-</style>