saving WIP

telosnetwork · Oct 10, 2023 · ad459bf · ad459bf
1 parent 985551d
commit ad459bf
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 87 deletions.
diff --git a/src/components/ContractTab/FunctionInterface.vue b/src/components/ContractTab/FunctionInterface.vue
@@ -6,7 +6,7 @@ import { defineComponent, toRaw } from 'vue';
 import { mapGetters } from 'vuex';
 import { BigNumber, ethers } from 'ethers';
 import { Transaction } from '@ethereumjs/tx';
-import { PROVIDER_WEB3_INJECTED, PROVIDER_TELOS_CLOUD } from 'src/lib/utils';
+import { PROVIDER_WEB3_INJECTED, PROVIDER_TELOS_CLOUD, LOGIN_DATA_KEY } from 'src/lib/utils';
 
 
 import {
@@ -213,7 +213,7 @@ export default defineComponent({
             this.loading = true;
             this.result = null;
             try {
-                const loginData = localStorage.getItem('loginData');
+                const loginData = localStorage.getItem(LOGIN_DATA_KEY);
                 if (!loginData) {
                     console.error('No login data found');
                     this.errorMessage = this.$t('global.internal_error');

diff --git a/src/components/LoginModal.vue b/src/components/LoginModal.vue
@@ -6,7 +6,14 @@ import detectEthereumProvider from '@metamask/detect-provider';
 import { defineComponent } from 'vue';
 import { mapGetters, mapMutations } from 'vuex';
 import { ethers } from 'ethers';
-import { WEI_PRECISION, LOGIN_EVM, LOGIN_NATIVE, PROVIDER_WEB3_INJECTED, PROVIDER_TELOS_CLOUD } from 'src/lib/utils';
+import {
+    WEI_PRECISION,
+    LOGIN_EVM,
+    LOGIN_NATIVE,
+    PROVIDER_WEB3_INJECTED,
+    PROVIDER_TELOS_CLOUD,
+    LOGIN_DATA_KEY,
+} from 'src/lib/utils';
 import { tlos } from 'src/lib/logos';
 import { CURRENT_CONTEXT, getAntelope, useAccountStore, useChainStore } from 'src/antelope/mocks/index';
 import { Authenticator } from 'universal-authenticator-library';
@@ -46,7 +53,7 @@ export default defineComponent({
         await this.detectProvider();
         this.detectMobile();
 
-        const loginData = localStorage.getItem('loginData');
+        const loginData = localStorage.getItem(LOGIN_DATA_KEY);
         if (!loginData) {
             return;
         }
@@ -129,7 +136,7 @@ export default defineComponent({
         },
         disconnect() {
             if (this.isNative) {
-                const loginData = localStorage.getItem('loginData');
+                const loginData = localStorage.getItem(LOGIN_DATA_KEY);
                 if (!loginData) {
                     return;
                 }
@@ -140,7 +147,7 @@ export default defineComponent({
             }
 
             this.setLogin({});
-            localStorage.removeItem('loginData');
+            localStorage.removeItem(LOGIN_DATA_KEY);
             this.$providerManager.setProvider(null);
         },
         goToAddress() {
@@ -201,7 +208,7 @@ export default defineComponent({
             useAccountStore().loginEVM({ authenticator, network }).then(() => {
                 const address = useAccountStore().getAccount(label).account;
                 this.setLogin({ address });
-                localStorage.setItem('loginData', JSON.stringify({
+                localStorage.setItem(LOGIN_DATA_KEY, JSON.stringify({
                     type: LOGIN_EVM,
                     provider: PROVIDER_TELOS_CLOUD,
                 }));
@@ -221,7 +228,7 @@ export default defineComponent({
                 let checkProvider = new ethers.providers.Web3Provider(provider);
                 this.$providerManager.setProvider(provider);
                 const { chainId } = await checkProvider.getNetwork();
-                localStorage.setItem('loginData', JSON.stringify({
+                localStorage.setItem(LOGIN_DATA_KEY, JSON.stringify({
                     type: LOGIN_EVM,
                     provider: PROVIDER_WEB3_INJECTED,
                     chain: chainId,
@@ -263,7 +270,7 @@ export default defineComponent({
                     nativeAccount: accountName,
                 });
                 this.$providerManager.setProvider(account);
-                localStorage.setItem('loginData', JSON.stringify({ type: LOGIN_NATIVE, provider: wallet.getName() }));
+                localStorage.setItem(LOGIN_DATA_KEY, JSON.stringify({ type: LOGIN_NATIVE, provider: wallet.getName() }));
             }
             this.$emit('hide');
         },

diff --git a/src/lib/utils.js b/src/lib/utils.js
@@ -9,6 +9,7 @@ export const LOGIN_EVM = 'evm';
 export const LOGIN_NATIVE = 'native';
 export const PROVIDER_WEB3_INJECTED = 'injectedWeb3';
 export const PROVIDER_TELOS_CLOUD = 'OreId';
+export const LOGIN_DATA_KEY = 'loginData';
 
 export function formatWei(bn, tokenDecimals, displayDecimals) {
     const amount = BigNumber.from(bn);

diff --git a/src/pages/staking/BaseStakingForm.vue b/src/pages/staking/BaseStakingForm.vue
@@ -32,7 +32,10 @@ export default {
             required: true,
         },
         topInputMaxValue: {
-            type: String,
+            validator: {
+                type: [String, null],
+                default: null,
+            },
             default: null,
         },
         topInputErrorText: {
@@ -56,7 +59,10 @@ export default {
             required: true,
         },
         bottomInputMaxValue: {
-            type: String,
+            validator: {
+                type: [String, null],
+                default: null,
+            },
             default: null,
         },
         bottomInputIsLoading: {

diff --git a/src/pages/staking/StakeForm.vue b/src/pages/staking/StakeForm.vue
@@ -1,22 +1,25 @@
-<script>
+<!-- eslint-disable max-len -->
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<!-- eslint-disable no-unused-vars -->
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import { BigNumber, ethers } from 'ethers';
-import { debounce } from 'lodash';
-import MetaMaskLogo from 'src/assets/metamask-fox.svg';
+import { debounce, DebouncedFunc } from 'lodash';
 import { stlos } from 'src/lib/logos';
 
 
 import { formatUnstakePeriod } from 'pages/staking/staking-utils';
 import { promptAddToMetamask } from 'src/lib/token-utils';
-import { getClientIsApple, WEI_PRECISION } from 'src/lib/utils';
+import { getClientIsApple, LOGIN_DATA_KEY, PROVIDER_TELOS_CLOUD, PROVIDER_WEB3_INJECTED, WEI_PRECISION } from 'src/lib/utils';
 
-import BaseStakingForm from 'pages/staking/BaseStakingForm';
-import TransactionField from 'components/TransactionField';
+import BaseStakingForm from 'pages/staking/BaseStakingForm.vue';
+import TransactionField from 'components/TransactionField.vue';
 import LoginModal from 'components/LoginModal.vue';
 
 const reservedForGasBn = BigNumber.from('10').pow(WEI_PRECISION);
 
-export default {
+export default defineComponent({
     name: 'StakeForm',
     components: {
         BaseStakingForm,
@@ -47,10 +50,9 @@ export default {
     },
     emits: ['balance-changed'],
     data: () => ({
-        MetaMaskLogo,
         displayConfirmModal: false,
         displayLoginModal: false,
-        resultHash: null,
+        resultHash: null as null | string,
         header: '',
         subheader: '',
         topInputLabel: '',
@@ -61,8 +63,8 @@ export default {
         bottomInputLabel: '',
         bottomInputAmount: '0',
         ctaIsLoading: false,
-        debouncedTopInputHandler: null,
-        debouncedBottomInputHandler: null,
+        debouncedTopInputHandler: (() => void 0) as DebouncedFunc<() => void>,
+        debouncedBottomInputHandler: (() => void 0) as DebouncedFunc<() => void>,
         userDismissedBanner: false,
     }),
     computed: {
@@ -165,10 +167,10 @@ export default {
         this.debouncedTopInputHandler = debounce(
             () => {
                 this.stlosContractInstance.previewDeposit(this.topInputAmount)
-                    .then((amountBigNum) => {
+                    .then((amountBigNum: ethers.BigNumber) => {
                         this.bottomInputAmount = amountBigNum.toString();
                     })
-                    .catch((err) => {
+                    .catch((err: any) => {
                         this.bottomInputAmount = '';
                         console.error(`Unable to convert TLOS to STLOS: ${err}`);
                         this.$q.notify({
@@ -197,10 +199,10 @@ export default {
         this.debouncedBottomInputHandler = debounce(
             () => {
                 this.stlosContractInstance.previewRedeem(this.bottomInputAmount)
-                    .then((amountBigNum) => {
+                    .then((amountBigNum: { toString: () => string; }) => {
                         this.topInputAmount = amountBigNum.toString();
                     })
-                    .catch((err) => {
+                    .catch((err: any) => {
                         this.topInputAmount = '';
                         console.error(`Unable to convert STLOS to TLOS: ${err}`);
                         this.$q.notify({
@@ -230,7 +232,7 @@ export default {
         promptAddToMetamask() {
             return promptAddToMetamask(
                 this.$q,
-                process.env.STAKED_TLOS_CONTRACT_ADDRESS,
+                process.env.STAKED_TLOS_CONTRACT_ADDRESS as string,
                 'STLOS',
                 stlos,
                 'ERC20',
@@ -273,31 +275,70 @@ export default {
             this.displayConfirmModal = true;
         },
         initiateDeposit() {
+            console.log('initiateDeposit()');
             this.ctaIsLoading = true;
             const value = BigNumber.from(this.topInputAmount);
 
-            this.stlosContractInstance['depositTLOS()']({ value })
-                .then((result) => {
+            let waitTheTransaction: Promise<{hash: string | null}> = Promise.resolve({ hash: null });
+            try {
+                const loginData = localStorage.getItem(LOGIN_DATA_KEY);
+                if (loginData) {
+                    const loginObj = JSON.parse(loginData);
+                    switch(loginObj?.provider) {
+                    case PROVIDER_WEB3_INJECTED:
+                        waitTheTransaction = this.continueDeposit(value);
+                        break;
+                    case PROVIDER_TELOS_CLOUD:
+                        waitTheTransaction = this.continueDemositLegacy(value);
+                        break;
+                    default:
+                        waitTheTransaction = this.continueDemositLegacy(value);
+                    }
+                }
+
+                waitTheTransaction.then((result) => {
                     this.resultHash = result.hash;
                     this.$emit('balance-changed');
-                })
-                .catch(({ message }) => {
+                }).catch(({ message }: Error) => {
                     console.error(`Failed to deposit TLOS: ${message}`);
                     this.$q.notify({
                         type: 'negative',
                         message: this.$t('pages.staking.deposit_failed', { message }),
                     });
                     this.resultHash = null;
-                })
-                .finally(() => {
+                }).finally(() => {
                     this.ctaIsLoading = false;
                 });
+
+
+            } catch (e) {
+                console.error('Failed to deposit TLOS', e);
+            } finally {
+                this.ctaIsLoading = false;
+            }
+        },
+        continueDeposit(value: BigNumber) {
+            // const authenticator = useAccountStore().getAccount(CURRENT_CONTEXT).authenticator;
+            console.log('value.toString(): ', value.toString());
+            console.log('this.stlosContractInstance: ', this.stlosContractInstance);
+            console.log('this.stlosContractInstance.address: ', this.stlosContractInstance.address);
+            return Promise.resolve({ hash: null });
+
+            // return authenticator.signCustomTransaction(
+            //     this.stlosContractInstance.address,
+            //     [this.abi] as EvmABI,
+            //     [],
+            //     value,
+            // );
+        },
+        continueDemositLegacy(value: BigNumber) {
+            return this.stlosContractInstance['depositTLOS()']({ value }) as Promise<{ hash: null | string; }>;
         },
         hideClaimBanner() {
             this.userDismissedBanner = true;
         },
     },
-};
+});
 </script>
 
 <template>
@@ -379,7 +420,7 @@ export default {
                 >
                     {{ $t('pages.staking.add_stlos_to_metamask') }}
                     <img
-                        :src="MetaMaskLogo"
+                        :src="require('src/assets/metamask-fox.svg')"
                         class="q-ml-xs"
                         height="24"
                         width="24"

diff --git a/src/pages/staking/Staking.vue b/src/pages/staking/Staking.vue
@@ -177,6 +177,8 @@ export default {
             ]);
         },
         async fetchContracts() {
+            // FIXME: remove console log
+            console.log('Staking.fetchContracts()');
             const stlosPromise = this.$contractManager.getContract(process.env.STAKED_TLOS_CONTRACT_ADDRESS)
                 .then((contract) => {
                     this.stlosContract = contract;
@@ -206,6 +208,8 @@ export default {
             return Promise.all([stlosPromise, escrowPromise]);
         },
         async fetchContractInstances() {
+            // FIXME: remove console log
+            console.log('Staking.fetchContractInstances()');
             if (!this.stlosContract || !this.escrowContract) {
                 await this.fetchContracts();
             }