refactor(TipInput): extract TipInputPopup

aeternity · Jul 10, 2021 · de09e7d · de09e7d
1 parent 4d302f4
commit de09e7d
Show file tree

Hide file tree

Showing 4 changed files with 202 additions and 165 deletions.
diff --git a/src/components/TipInput.vue b/src/components/TipInput.vue
@@ -5,7 +5,7 @@
       :class="{ tipped: tipUrlStats.isTipped }"
       :title="title"
       :disabled="!tipUrl"
-      @click="useSdkWallet && (showModal = true)"
+      @click="openTipInputPopup"
     >
       <IconTip />
       <AeAmountFiat
@@ -25,64 +25,22 @@
         inEnd: true,
       })"
     />
-    <Modal
-      v-if="showModal"
-      @close="hideModal"
-    >
-      <div
-        v-if="error || v1TipWarning"
-        class="error"
-      >
-        {{ v1TipWarning
-          ? $t('components.TipInput.v1TipWarning')
-          : $t('components.TipInput.error') }}
-      </div>
-      <form @submit.prevent="sendTip">
-        <Input
-          v-if="!isRetippable"
-          v-model="message"
-          class="message"
-          maxlength="280"
-          :placeholder="$t('addMessage')"
-        />
-        <div class="row">
-          <AeInputAmount
-            v-model="inputValue"
-            :select-token-f="token => (inputToken = token)"
-          />
-          <AeButton
-            :disabled="!isValid || v1TipWarning"
-            :loading="showLoading"
-          >
-            {{ isRetippable ? $t('retip') : $t('tip') }}
-          </AeButton>
-        </div>
-      </form>
-    </Modal>
   </div>
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { mapState } from 'vuex';
 import IconTip from '../assets/iconTip.svg?icon-component';
 import { EventBus } from '../utils/eventBus';
-import { createDeepLinkUrl, shiftDecimalPlaces } from '../utils';
+import { createDeepLinkUrl } from '../utils';
 import ButtonPlain from './ButtonPlain.vue';
-import Input from './Input.vue';
-import AeInputAmount from './AeInputAmount.vue';
-import AeButton from './AeButton.vue';
 import AeAmountFiat from './AeAmountFiat.vue';
 import ButtonDropdown from './ButtonDropdown.vue';
-import Modal from './Modal.vue';
 
 export default {
   components: {
     ButtonPlain,
-    Input,
-    AeInputAmount,
-    AeButton,
     AeAmountFiat,
-    Modal,
     ButtonDropdown,
     IconTip,
   },
@@ -91,18 +49,9 @@ export default {
     userAddress: { type: String, default: '' },
     comment: { type: Object, default: null },
   },
-  data: () => ({
-    inputValue: 0,
-    inputToken: null,
-    showModal: false,
-    showLoading: false,
-    error: false,
-    message: '',
-  }),
   computed: {
-    ...mapState(['address', 'tokenInfo']),
+    ...mapState(['address']),
     ...mapState('aeternity', ['useSdkWallet']),
-    ...mapGetters('backend', ['minTipAmount']),
     ...mapState('backend', {
       tipUrlStats({ stats }) {
         const urlStats = stats && this.tipUrl
@@ -142,16 +91,6 @@ export default {
           token: this.largestFtTipAmount?.token,
         };
     },
-    v1TipWarning() {
-      return (
-        this.tip
-        && this.tip.id.split('_')[1] === 'v1'
-        && this.inputToken !== null
-      );
-    },
-    isRetippable() {
-      return this.tip && this.tip.type !== 'POST_WITHOUT_TIP';
-    },
     tipUrl() {
       if (this.comment) {
         return `https://superhero.com/tip/${this.comment.tipId}/comment/${this.comment.id}`;
@@ -172,12 +111,6 @@ export default {
           : { type: 'tips', url: this.tipUrl },
       );
     },
-    isValid() {
-      return (
-        (this.tip || this.message.trim().length > 0)
-        && (this.inputToken !== null || this.inputValue > this.minTipAmount)
-      );
-    },
     title() {
       if (this.userAddress) return this.$t('components.TipInput.tipUser');
       if (this.comment) return this.$t('components.TipInput.tipComment');
@@ -187,58 +120,25 @@ export default {
     },
   },
   methods: {
-    async sendTip() {
-      if (!this.isValid) return;
-      this.showLoading = true;
-      try {
-        const amount = shiftDecimalPlaces(
-          this.inputValue,
-          this.inputToken !== null
-            ? this.tokenInfo[this.inputToken].decimals
-            : 18,
-        ).toFixed();
-
-        if (!this.isRetippable) {
-          await this.$store.dispatch('aeternity/tip', {
-            url: this.tipUrl,
-            title: this.message,
-            amount,
-            tokenAddress: this.inputToken,
-          });
-        } else {
-          await this.$store.dispatch('aeternity/retip', {
-            contractAddress: this.tip.contractId,
-            id: this.tip.id,
-            amount,
-            tokenAddress: this.inputToken,
-          });
-        }
-
-        if (!this.userAddress) {
-          EventBus.$emit('reloadData');
-        }
-        this.hideModal();
-      } catch (error) {
-        this.error = true;
-        throw error;
-      } finally {
-        this.showLoading = false;
+    async openTipInputPopup() {
+      if (!this.useSdkWallet) return;
+      const isTipSent = await this.$store.dispatch('modals/open', {
+        name: 'tip-input-popup',
+        reference: this.$el,
+        tip: this.tip,
+        tipUrl: this.tipUrl,
+      });
+      if (isTipSent && !this.userAddress) {
+        EventBus.$emit('reloadData');
       }
     },
-    hideModal() {
-      this.showModal = false;
-      this.message = '';
-      this.inputValue = 0;
-      this.error = false;
-      this.inputToken = null;
-    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .tip-input {
-  > .button-plain {
+  .button-plain {
     color: $search_nav_border_color;
 
     &:hover {
@@ -277,40 +177,5 @@ export default {
   .button-dropdown {
     vertical-align: middle;
   }
-
-  .modal > ::v-deep .modal-content {
-    background-color: $article_content_color;
-    border-radius: 0.25rem;
-    margin-top: 0.25rem;
-    min-width: 19rem;
-    padding: 1rem;
-
-    @include smallest {
-      min-width: 16rem;
-      padding: 0.5rem;
-    }
-  }
-
-  .modal .modal-content {
-    .error {
-      text-align: center;
-      font-size: 12px;
-      color: $red_color;
-    }
-
-    .message {
-      display: block;
-      width: 100%;
-      margin-bottom: 0.5rem;
-    }
-
-    .row {
-      display: flex;
-
-      .ae-button {
-        margin-left: 0.5rem;
-      }
-    }
-  }
 }
 </style>