use useTemplateRef instead of ref

Author: KukretiShubham

src/ui/components/Checkout/Checkout.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, type ComputedRef, computed } from 'vue'
+import { onMounted, onUnmounted, ref, useTemplateRef, type ComputedRef, computed } from 'vue'
 import { createErc20Contract } from '@devprotocol/dev-kit'
 import {
 	positionsCreate,
@@ -53,7 +53,7 @@ const REGEX_DESC_EMAIL = /{EMAIL}/g
 const i18nBase = i18nFactory(Strings)
 let i18n = ref<ReturnType<typeof i18nBase>>(i18nBase(['en']))
 
-const imageRef = ref<HTMLImageElement | null>(null)
+const imageRef = useTemplateRef(`imageRef`)
 
 type Props = {
 	amount?: number

src/ui/components/Checkout/Result.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, ref, type ComputedRef, computed } from 'vue'
+import { onMounted, ref, useTemplateRef, type ComputedRef, computed } from 'vue'
 import { type UndefinedOr, whenDefinedAll } from '@devprotocol/util-ts'
 import { JsonRpcProvider } from 'ethers'
 import Skeleton from '../Skeleton/Skeleton.vue'
@@ -16,7 +16,7 @@ import VideoFetch from '../../vue/VideoFetch.vue'
 const i18nBase = i18nFactory(Strings)
 let i18n = i18nBase(['en'])
 
-const imageRef = ref<HTMLImageElement | null>(null)
+const imageRef = useTemplateRef(`imageRef`)
 
 type Props = {
 	eoa?: string

src/ui/vue/VideoFetch.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, useTemplateRef } from 'vue'
 import MP4Box from 'mp4box'
 
 const props = defineProps({
@@ -18,7 +18,7 @@ const props = defineProps({
 })
 
 // Refs and variables
-const videoElement = ref(null)
+const videoElement = useTemplateRef(`videoElement`)
 let mediaSource = null
 let sourceBuffers = {}
 let mp4boxfile = null