@ozdao/prometheus-framework 0.2.132 → 0.2.134

package/src/modules/wallet/views/components/blocks/CryptoDeposit.vue

@@ -0,0 +1,98 @@
+<template>
+  <h3 class="mn-b-small t-center t-bold">{{ t('wallet.depositWithCrypto') }}</h3>
+
+  <Field 
+    v-if="state.config"
+    v-model:field="amount"
+    :placeholder="t('wallet.enterAmount')"
+    class="mn-b-thin bg-white w-100 br-solid br-1px br-black-transp-5 pd-small radius-small" 
+  >
+    <Select 
+      :options="depositOptions"
+      v-model:select="state.chosenNetwork"
+      class="bg-light t-nowrap pd-r-thin pd-l-thin pd-t-nano pd-b-nano radius-thin"
+    />
+  </Field>
+
+  <p class="t-semi">You will receive: {{ receiveAmount }} {{t('wallet.token')}}</p>
+
+  <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="actions.requestCryptoDeposit(amount).then(() => switchMenu(5))"
+    :disabled="state.depositRequestIsActive || !state.config"
+  >
+    {{ t('wallet.pay') }}
+  </button>
+
+  <button
+    class="uppercase w-100 t-center mn-t-small"
+    @click="backSelection"
+  >
+    {{ t('wallet.backToSelection') }}
+  </button>
+</template>
+
+<script setup>
+  import { useI18n } from 'vue-i18n'
+  import { ref, onMounted, computed } from 'vue';
+  import { BigNumber } from 'bignumber.js';
+
+  import { state, actions } from '@pf/src/modules/wallet/views/store/wallet.store';
+  import text from '@pf/src/modules/wallet/views/localization/wallet.json'
+  import Field from '@pf/src/components/Field/Field.vue'
+  import Select from '@pf/src/components/Select/Select.vue'
+
+  BigNumber.config({
+    EXPONENTIAL_AT: [-1000, 20000]
+  });
+
+  const amount = ref(1);
+  const emits = defineEmits(['back-selection', 'switch-menu'])
+
+  // Localization
+  const { t } = useI18n({
+    useScope: 'global', 
+    ...text
+  })
+
+  const receiveAmount = computed(() =>
+    new BigNumber(amount.value)
+      .dividedBy(process.env.TOKEN_EXCHANGE_RATE)
+      .toString()
+  )
+
+  const depositOptions = computed(() => {
+    const options = [];
+
+    const networks = Object.keys(state.config || {});
+
+    for (const network of networks) {
+      for (const token of Object.keys(state.config[network].tokens)) {
+        options.push({
+          name: `${network}-${token}`,
+          value: {
+            token: state.config[network].tokens[token],
+            network: network
+          }
+        });
+      }
+    }
+
+    return options;
+  });
+
+  onMounted(() => {
+    actions.loadConfig();
+  })
+
+  function backSelection() {
+    emits("back-selection")
+  }
+
+  function switchMenu(screen = 0) {
+    emits("switch-menu", screen)
+  }
+</script>
+
+<style scoped>
+</style>

package/src/modules/wallet/views/components/blocks/CryptoDepositProcessing.vue

@@ -0,0 +1,144 @@
+<template>
+  <h2 class="mn-b-small t-center t-bold">{{ t('wallet.depositWithCrypto') }}</h2>
+
+  <div class="flex flex-justify-between">
+    <h3 class="t-semi">Amount: {{ amount }} {{ state.chosenNetwork.name.toUpperCase() }}</h3>
+    <button
+      class="uppercase t-main cursor-pointer"
+      @click="() => copy(amount)"
+    >
+      copy
+    </button>
+  </div>
+
+  <div class="flex flex-justify-between">
+    <h3 class="t-semi t-truncate address">Wallet: {{ state.depositInfo.to }}</h3>
+    <button
+      class="uppercase t-main cursor-pointer"
+      @click="() => copy(state.depositInfo.to)"
+    >
+      copy
+    </button>
+  </div>
+
+  <div class="flex flex-justify-around radius-big br-solid br-2px br-black-transp-10">
+    <canvas id="qrcode_address_deposit"></canvas>
+  </div>
+
+  <div class="flex flex-justify-between">
+    <h3 class="t-semi">You will receive:</h3>
+    <h3 class="t-semi">{{ receive }} WDT</h3>
+  </div>
+  <div v-if="state.depositInfo.status === 'TRANSFER_STATUS_WAITING_FOR_TX'" class="flex flex-justify-between">
+    <h3 class="t-semi">Times left:</h3>
+    <h3 class="t-semi">{{ remainingTime }}</h3>
+  </div>
+  <div class="flex flex-justify-between">
+    <h3 class="t-semi">Status:</h3>
+    <h3 class="t-semi">{{ status }}</h3>
+  </div>
+
+  <button
+    v-if="state.depositInfo.status === 'TRANSFER_STATUS_WAITING_FOR_TX'"
+    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="actions.cancelDeposit().then(() => backSelection())"
+  >
+    {{ t('wallet.cancel') }}
+  </button>
+</template>
+
+<script setup>
+  import QRCode from 'qrcode';
+  import { useI18n } from 'vue-i18n';
+  import { watch, computed, onMounted } from 'vue';
+  import { BigNumber } from 'bignumber.js';
+
+  import text from '@pf/src/modules/wallet/views/localization/wallet.json';
+  import { state, actions, timer } from '@pf/src/modules/wallet/views/store/wallet.store';
+
+  BigNumber.config({
+    EXPONENTIAL_AT: [-1000, 20000]
+  });
+
+  const emits = defineEmits(['back-selection', 'switch-menu']);
+
+  // Localization
+  const { t } = useI18n({
+    useScope: 'global',
+    ...text
+  });
+
+  const remainingTime = computed(() => {
+    const mins = Math.floor(timer.remaining / 60);
+    const secs = Math.floor(timer.remaining % 60);
+
+    return `${mins}:${secs < 10 ? `0${secs}` : secs}`;
+  });
+
+  const amount = computed(() =>
+    new BigNumber(state.depositInfo.amount)
+      .shiftedBy(-8)
+      .toString()
+  );
+
+  const receive = computed(() =>
+    new BigNumber(amount.value)
+      .dividedBy(process.env.TOKEN_EXCHANGE_RATE)
+      .toString()
+  )
+
+  const status = computed(() => {
+    switch (state.depositInfo.status) {
+      case 'TRANSFER_STATUS_WAITING_FOR_TX':
+        return 'Waiting for payment';
+      case 'TRANSFER_STATUS_SENT':
+        const confirmations = `${state.depositInfo.confirmations || 0} / ${state.config[state.chosenNetwork.value.network].confirmations}`;
+        return `Confirming (${confirmations})`;
+      default:
+        return 'Superposition.';
+    }
+  });
+
+  function backSelection() {
+    emits("back-selection");
+  }
+
+  function switchMenu(screen = 0) {
+    emits("switch-menu", screen);
+  }
+
+  function copy(text) {
+    navigator.clipboard.writeText(text);
+  }
+
+  onMounted(() => {
+    QRCode.toCanvas(
+      document.getElementById('qrcode_address_deposit'),
+      state.depositInfo.to,
+      { width: 300 },
+      (error) =>  { if (error) { console.error(error); } }
+    )
+  })
+
+  watch(
+    state,
+    async () => {
+      if (state.depositInfo.status === 'TRANSFER_STATUS_SENT') {
+        actions.stopTimer();
+      }
+
+      if (state.depositInfo.status === 'TRANSFER_STATUS_COMPLETED') {
+        actions.disconnectWebSocket();
+        switchMenu(3);
+      }
+    },
+    { deep: true },
+  )
+</script>
+
+<style scoped>
+  .address {
+    text-wrap: nowrap;
+    display: block;
+  }
+</style>

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": "пополнение криптовалютой"
+      }
+    }
+  }
+}