kodadot#457 Adding tip in user profile

prachi00 · Sep 21, 2021 · 5c46b90 · 5c46b90
1 parent c20d615
commit 5c46b90
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 5 deletions.
diff --git a/src/components/transfer/DonationButton.vue b/src/components/transfer/DonationButton.vue
@@ -0,0 +1,27 @@
+<template>
+  <b-button
+    type="is-primary"
+    icon-left="gift"
+    outlined
+    @click="goToTransfer"
+  >
+    {{ $t("Gift 10$") }}
+  </b-button>
+</template>
+
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+@Component({})
+export default class DonationButton extends Vue {
+  @Prop() public address!: string;
+
+  public goToTransfer() {
+    this.$router.push({
+      name: "transfer",
+      query: { target: this.address, usdamount: "10" },
+    });
+  }
+}
+</script>
+
diff --git a/src/components/transfer/Transfer.vue b/src/components/transfer/Transfer.vue
@@ -4,6 +4,10 @@
       <section>
         <br />
         <Loader v-model="isLoading" :status="status" />
+        <router-link :to="`rmrk/u/${destinationAddress}`" class="linkartist"  v-if="this.$route.query.target">
+          <b-icon icon="chevron-left" size="is-small" class="linkartist--icon"></b-icon>
+           Go to artist's profile
+        </router-link>
         <div class="box">
           <div class="info">
             <p class="title is-size-3">
@@ -15,6 +19,17 @@
           <b-field>
             <Auth />
           </b-field>
+          <div class="box--target-info" v-if="this.$route.query.target">
+            Your donation will be sent to: 
+            <a
+              :href="`https://kusama.subscan.io/account/${destinationAddress}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="box--target-info--url"
+            >
+              <Identity ref="identity" :address="destinationAddress" inline />
+            </a>
+          </div>
 
           <b-field>
             {{ $t("general.balance") }}
@@ -81,6 +96,7 @@ import { calculateUsdFromKsm, calculateKsmFromUsd } from '@/utils/calculation'
     Auth: () => import('@/components/shared/Auth.vue'),
     BalanceInput: () => import('@/components/shared/BalanceInput.vue'),
     ReadOnlyBalanceInput: () => import('@/components/shared/ReadOnlyBalanceInput.vue'),
+    Identity: () => import('@/components/shared/format/Identity.vue'),
     Loader: () => import('@/components/shared/Loader.vue'),
     AddressInput: () => import('@/components/shared/AddressInput.vue'),
     Money: () => import('@/components/shared/format/Money.vue')
@@ -140,6 +156,12 @@ export default class Transfer extends Mixins(
     if (query.amount) {
       this.price = Number(query.amount);
     }
+
+    if (query.usdamount) {
+      this.usdValue = Number(query.usdamount);
+      // getting ksm value from the usd value
+      this.price = calculateKsmFromUsd(this.$store.getters.getCurrentKSMValue, this.usdValue);
+    }
   }
 
   public async submit(): Promise<void> {
@@ -264,5 +286,19 @@ export default class Transfer extends Mixins(
          flex-direction: column;
         }
       }
+      &--target-info {
+        margin-bottom: 0.8rem;
+        &--url {
+          font-weight: bold;
+        }
+      }
+    }
+    .linkartist {
+      padding-left: 1.25rem;
+      display: flex;
+      align-items: center; 
+      &--icon {
+        margin-right: 0.5rem;
+      }
     }
 </style>
diff --git a/src/icons.ts b/src/icons.ts
@@ -6,7 +6,7 @@ import {
   faTrash, faCloudDownloadAlt, faKey,
   faExternalLinkAlt, faUpload, faUsers,
   faQuestionCircle, faMinus, faSearch,
-  faInfoCircle, faChevronDown, faChevronUp,
+  faInfoCircle, faChevronDown, faChevronUp, faChevronLeft,
   faHeart, faCaretDown, faInfo,
   faShareSquare, faCopy, faBookmark,
   faLink, faLanguage,
@@ -18,7 +18,7 @@ import {
   faCalendar, faCalculator, faEnvelope,
   faArrowsAlt, faCompressAlt, faCompressArrowsAlt,
   faAngleLeft, faAngleRight, faReply,
-  faExternalLinkSquareAlt,
+  faExternalLinkSquareAlt, faGift,
   faEyeSlash, faArrowUp, faUser, faGlobe, faExclamationCircle,
 
 } from '@fortawesome/free-solid-svg-icons';
@@ -44,7 +44,7 @@ library.add(
   faKey, faExternalLinkAlt, faUpload,
   faUsers, faQuestionCircle, faMinus,
   faSearch, faInfoCircle, faChevronDown,
-  faChevronUp, faHeart,
+  faChevronUp, faChevronLeft, faHeart,
   faCaretDown, faInfo, faShareSquare,
   faBookmark, faLink,
   faLanguage, faQuestion, faEye,
@@ -58,7 +58,7 @@ library.add(
   faExclamationTriangle, faCalculator,
   faArrowsAlt, faCompressAlt, faCompressArrowsAlt,
   faEyeSlash, faArrowUp, faUser, faGlobe,
-  faExclamationCircle,
+  faExclamationCircle, faGift,
 
   // Social
   faTwitter, faTelegram, faFacebook,

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
@@ -12,6 +12,7 @@
             >
               <Identity ref="identity" :address="id" inline emit @change="handleIdentity" />
             </a>
+            <DonationButton :address="id" />
           </div>
           <div class="column">
             <OnChainProperty
@@ -127,7 +128,9 @@ const components = {
   Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
   OnChainProperty: () => import('@/views/OnChainProperty.vue'),
   PaginatedCardList: () =>
-    import('@/components/rmrk/Gallery/PaginatedCardList.vue')
+    import('@/components/rmrk/Gallery/PaginatedCardList.vue'),
+  DonationButton: () => import('@/components/transfer/DonationButton.vue'),
+
 };
 
 const eq = (tab: string) => (el: string) => tab === el;