Minor adjustments in crypto payments

components/account/InputField.vue

@@ -57,35 +57,32 @@ const isEmpty = computed(() => {
 
 const blur = () => emit('blur');
 const enter = () => emit('enter');
-
-const css = useCssModule();
-const slots = useSlots();
 </script>
 
 <template>
-  <div :class="css.wrapper">
+  <div :class="$style.wrapper">
     <div
       :class="{
-        [css.field]: true,
-        [css.filled]: filled,
-        [css['only-text']]: !slots.prepend,
+        [$style.field]: true,
+        [$style.filled]: filled,
+        [$style['only-text']]: !$slots.prepend,
       }"
     >
-      <div :class="css.slot">
+      <div :class="$style.slot">
         <slot
-          v-if="slots.prepend"
+          v-if="$slots.prepend"
           name="prepend"
         />
-        <div :class="css.inputContainer">
+        <div :class="$style.inputContainer">
           <input
             :id="id"
             ref="inputField"
             :aria-describedby="`${id}-error`"
             :class="{
-              [css.input]: true,
-              [css.inputText]: true,
-              [css.filled]: filled,
-              [css.empty]: isEmpty,
+              [$style.input]: true,
+              [$style.inputText]: true,
+              [$style.filled]: filled,
+              [$style.empty]: isEmpty,
             }"
             :disabled="disabled"
             :placeholder="placeholder"
@@ -99,7 +96,7 @@ const slots = useSlots();
           />
           <label
             v-if="label"
-            :class="css.label"
+            :class="$style.label"
             :for="id"
           >
             {{ label }}
@@ -115,14 +112,14 @@ const slots = useSlots();
     <span
       v-if="errorMessages && errorMessages.length > 0"
       :id="`${id}-error`"
-      :class="css.error"
+      :class="$style.error"
     >
       {{ errorMessages[0].$message }}
     </span>
 
     <span
       v-else
-      :class="css.caption"
+      :class="$style.caption"
     >
       <slot name="hint">{{ hint }}</slot>
     </span>

components/account/home/AccountDetails.vue

@@ -28,7 +28,7 @@ const { t } = useI18n();
 <template>
   <div>
     <div class="text-h6 mb-6">
-      Details
+      {{ t('account_details.title') }}
     </div>
     <div>
       <div class="space-y-5">
@@ -56,7 +56,7 @@ const { t } = useI18n();
             append-icon="lock-line"
           />
           <div class="text-rui-text-secondary pt-2 px-3 text-xs flex">
-            To change your email, please contact our support tem via
+            {{ t('account_details.check_email') }}
             <ButtonLink
               :to="emailMailto"
               external

components/account/home/CancelSubscription.vue

@@ -51,10 +51,10 @@ const { t } = useI18n();
         >
           <template #benefits>
             <ul class="list-disc ml-5">
-              <li>{{ t('account.subscriptions.cancellation.benefits.1') }}</li>
+              <li>{{ t('account.subscriptions.cancellation.benefits.line_1') }}</li>
               <li>
                 <i18n-t
-                  keypath="account.subscriptions.cancellation.benefits.2"
+                  keypath="account.subscriptions.cancellation.benefits.line_2"
                   scope="global"
                 >
                   <template #bug_tracker>
@@ -70,7 +70,7 @@ const { t } = useI18n();
                   </template>
                 </i18n-t>
               </li>
-              <li>{{ t('account.subscriptions.cancellation.benefits.3') }}</li>
+              <li>{{ t('account.subscriptions.cancellation.benefits.line_3') }}</li>
             </ul>
           </template>
 

components/account/home/FloatingNotification.vue

@@ -20,8 +20,6 @@ const emit = defineEmits<{
   (e: 'dismiss'): void;
 }>();
 
-const slots = useSlots();
-
 const { timeout, visible } = toRefs(props);
 
 const { stop, start, isPending } = useTimeoutFn(
@@ -58,7 +56,7 @@ watch(visible, (show) => {
         @close="dismiss()"
       >
         <template
-          v-if="slots.title"
+          v-if="$slots.title"
           #title
         >
           <slot name="title" />

components/account/home/SubscriptionTable.vue

@@ -3,13 +3,14 @@ import { get, set, useIntervalFn } from '@vueuse/core';
 import { storeToRefs } from 'pinia';
 import { useMainStore } from '~/store';
 import { PaymentMethod } from '~/types/payment';
+import type { RouteLocationRaw } from 'vue-router';
 import type {
   ContextColorsType,
   DataTableColumn,
   DataTableSortColumn,
   TablePaginationData,
 } from '@rotki/ui-library';
-import type { Subscription } from '~/types';
+import type { PendingTx, Subscription } from '~/types';
 
 const pagination = ref<TablePaginationData>();
 const sort = ref<DataTableSortColumn<Subscription>[]>([]);
@@ -25,6 +26,7 @@ const store = useMainStore();
 const { subscriptions } = storeToRefs(store);
 
 const { cancelUserSubscription, resumeUserSubscription } = useSubscription();
+const pendingTx = usePendingTx();
 const { pause, resume, isActive } = useIntervalFn(
   async () => await store.getAccount(),
   60000,
@@ -111,6 +113,8 @@ const renewLink = computed<{ path: string; query: Record<string, string> }>(() =
   return link;
 });
 
+const pendingPaymentLink: RouteLocationRaw = { path: '/checkout/pay/method' };
+
 function isPending(sub: Subscription) {
   return sub.status === 'Pending';
 }
@@ -162,6 +166,12 @@ async function cancelSubscription(sub: Subscription) {
   set(selectedSubscription, undefined);
 }
 
+function getBlockExplorerLink(pending: PendingTx): RouteLocationRaw {
+  return {
+    path: `${pending.blockExplorerUrl}/${pending.hash}`,
+  };
+}
+
 watch(pending, (pending) => {
   if (pending.length === 0)
     pause();
@@ -208,6 +218,11 @@ onUnmounted(() => pause());
           </RuiTooltip>
           <template v-else>
             {{ row.status }}
+            <RuiProgress
+              v-if="row.pending && pendingTx && row.identifier === pendingTx.subscriptionId"
+              thickness="2"
+              variant="indeterminate"
+            />
           </template>
         </RuiChip>
       </template>
@@ -235,10 +250,27 @@ onUnmounted(() => pause());
           >
             {{ t('actions.renew') }}
           </ButtonLink>
+          <RuiTooltip v-if="pendingTx && row.identifier === pendingTx.subscriptionId">
+            <template #activator>
+              <ButtonLink
+                external
+                icon
+                color="primary"
+                :to="getBlockExplorerLink(pendingTx)"
+              >
+                <RuiIcon
+                  name="links-line"
+                  :size="18"
+                />
+              </ButtonLink>
+            </template>
+            {{ t('account.subscriptions.pending_tx') }}
+          </RuiTooltip>
+          <!-- link will not work due to middleware if there is a transaction started -->
           <ButtonLink
-            v-if="isPending(row)"
+            v-else-if="isPending(row)"
             :disabled="cancelling"
-            :to="{ path: '/checkout/pay/method' }"
+            :to="pendingPaymentLink"
             color="primary"
           >
             {{ t('account.subscriptions.payment_detail') }}

components/account/signup/SignupAddress.vue

@@ -99,7 +99,7 @@ const { t } = useI18n();
 <template>
   <div class="space-y-8 grow">
     <div class="text-h4 text-center">
-      Address
+      {{ t('signup_address.title') }}
     </div>
     <div class="space-y-5">
       <RuiTextField

components/checkout/SelectionButton.vue

@@ -14,23 +14,21 @@ const emit = defineEmits<{ (e: 'click'): void }>();
 function click() {
   emit('click');
 }
-
-const css = useCssModule();
 </script>
 
 <template>
   <button
     :class="{
-      [css.button]: true,
-      [css.selected]: selected,
+      [$style.button]: true,
+      [$style.selected]: selected,
     }"
     :disabled="disabled"
     @click="click()"
   >
     <span
       :class="{
-        [css.text]: true,
-        [css.selected]: selected,
+        [$style.text]: true,
+        [$style.selected]: selected,
       }"
     >
       <slot />

components/checkout/common/CheckoutDescription.vue

@@ -1,9 +1,5 @@
-<script setup lang="ts">
-const css = useCssModule();
-</script>
-
 <template>
-  <div :class="css.description">
+  <div :class="$style.description">
     <slot />
   </div>
 </template>

components/checkout/common/CheckoutTitle.vue

@@ -1,9 +1,5 @@
-<script setup lang="ts">
-const css = useCssModule();
-</script>
-
 <template>
-  <h4 :class="css.title">
+  <h4 :class="$style.title">
     <slot />
   </h4>
 </template>

components/checkout/common/PaymentFrame.vue

@@ -17,12 +17,10 @@ function useType(type: StepType | IdleStep) {
 const isPending = useType('pending');
 const isSuccess = useType('success');
 const isFailure = useType('failure');
-
-const css = useCssModule();
 </script>
 
 <template>
-  <div :class="css.content">
+  <div :class="$style.content">
     <CheckoutTitle>
       {{ t('home.plans.tiers.step_3.title') }}
     </CheckoutTitle>

components/checkout/pay/AcceptRefundPolicy.vue

@@ -2,7 +2,7 @@
 defineProps<{ modelValue: boolean; disabled?: boolean }>();
 
 const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>();
-const css = useCssModule();
+
 const { t } = useI18n();
 </script>
 
@@ -24,7 +24,7 @@ const { t } = useI18n();
           to="/refund-policy"
           color="primary"
           tag="span"
-          :class="css.link"
+          :class="$style.link"
           external
           target="_blank"
         >

components/checkout/pay/CardForm.vue

@@ -42,7 +42,6 @@ function updateInitializing(valid: boolean) {
 }
 
 const { client, processing } = toRefs(props);
-const css = useCssModule();
 
 const defaultStatus: FieldStatus = {
   valid: false,
@@ -286,10 +285,10 @@ defineExpose({ submit });
 </script>
 
 <template>
-  <div :class="css.inputs">
+  <div :class="$style.inputs">
     <HostedField
       id="card-number"
-      :class="css.number"
+      :class="$style.number"
       :empty="empty.number"
       :disabled="disabled"
       :focused="focused === 'number'"
@@ -300,7 +299,7 @@ defineExpose({ submit });
     />
     <HostedField
       id="expiration"
-      :class="css.expiration"
+      :class="$style.expiration"
       :empty="empty.expirationDate"
       :disabled="disabled"
       :focused="focused === 'expirationDate'"
@@ -310,7 +309,7 @@ defineExpose({ submit });
     />
     <HostedField
       id="cvv"
-      :class="css.cvv"
+      :class="$style.cvv"
       :empty="empty.cvv"
       :disabled="disabled"
       :focused="focused === 'cvv'"

components/checkout/pay/CardPayment.vue

@@ -127,8 +127,8 @@ async function submit() {
     else {
       const status = (threeDSecureInfo as any)?.status as string | undefined;
       set(error, {
-        title: t('subscription.error.3d_auth_failed'),
-        message: t('subscription.error.3d_auth_failed_message', {
+        title: t('subscription.error.auth_failed_3d_secure'),
+        message: t('subscription.error.auth_failed_3d_secure_message', {
           status: status?.replaceAll('_', ' '),
         }),
       });
@@ -196,8 +196,6 @@ onBeforeMount(async () => {
 onUnmounted(() => {
   btThreeDSecure?.teardown();
 });
-
-const css = useCssModule();
 </script>
 
 <template>
@@ -242,7 +240,7 @@ const css = useCssModule();
     <AcceptRefundPolicy
       v-model="accepted"
       :disabled="disabled"
-      :class="css.policy"
+      :class="$style.policy"
     />
     <div
       v-if="pending"
@@ -255,7 +253,7 @@ const css = useCssModule();
         <span>{{ status?.message }}</span>
       </RuiAlert>
     </div>
-    <div :class="css.buttons">
+    <div :class="$style.buttons">
       <RuiButton
         :disabled="processing || success"
         class="w-full"