From dd016c489e390b9e4305e5df299a43dae336638f Mon Sep 17 00:00:00 2001
From: Jose Felix <jfelx@outlook.com>
Date: Fri, 3 Jun 2022 01:17:27 -0400
Subject: [PATCH 1/4] fix: display validators and add its loading state

---
 .../ProjectValidatorsTab/ValidatorCard.vue    | 44 ++++++++++++-------
 .../ProjectValidatorsTab/ValidatorList.vue    | 28 +++++++++---
 .../ProjectValidatorsTab/index.vue            | 24 +++++-----
 .../validator/useGenesisValidatorAllChains.ts | 27 ++++++------
 4 files changed, 75 insertions(+), 48 deletions(-)

diff --git a/src/components/project/project-tabs/ProjectValidatorsTab/ValidatorCard.vue b/src/components/project/project-tabs/ProjectValidatorsTab/ValidatorCard.vue
index 60732d51..bf32ae6f 100644
--- a/src/components/project/project-tabs/ProjectValidatorsTab/ValidatorCard.vue
+++ b/src/components/project/project-tabs/ProjectValidatorsTab/ValidatorCard.vue
@@ -1,25 +1,39 @@
 <script lang="ts" setup>
-import { Validator } from 'tendermint-spn-ts-client/cosmos.staking.v1beta1'
 import { LaunchGenesisValidator } from 'tendermint-spn-ts-client/tendermint.spn.launch/rest'
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 
 import validatorAvatar from '~/assets/svg/validatorAvatar.svg'
 import IgniteCard from '~/components/ui/IgniteCard.vue'
 import IgniteLink from '~/components/ui/IgniteLink.vue'
 import IgniteText from '~/components/ui/IgniteText.vue'
+import { V1Beta1Description } from '~/generated/tendermint-spn-ts-client/cosmos.staking.v1beta1/rest'
 
-const props = defineProps({
-  validator: {
-    type: Object as PropType<Validator>,
-    required: true
+interface Props {
+  validator: LaunchGenesisValidator
+}
+
+interface Message {
+  description: V1Beta1Description
+}
+
+interface ValidatorDetails {
+  body: {
+    messages: Message[]
   }
-})
+}
 
-const validatorData = computed<LaunchGenesisValidator>(() => {
-  return {
-    ...props.validator,
-    details: JSON.parse(atob(props.validator.genTx))
+const props = defineProps<Props>()
+
+const validatorDescription = computed<V1Beta1Description | undefined>(() => {
+  if (!props.validator) {
+    return {}
   }
+
+  const validatorDetails = JSON.parse(
+    window.atob(props.validator.genTx ?? '')
+  ) as ValidatorDetails
+
+  return validatorDetails.body?.messages[0]?.description
 })
 </script>
 
@@ -30,14 +44,10 @@ const validatorData = computed<LaunchGenesisValidator>(() => {
         <img :src="validatorAvatar" class="h-9.5 w-9.5 rounded-circle" />
 
         <IgniteText class="mt-6 text-4 font-bold">
-          {{
-            validatorData.details.body?.messages[0]?.description?.moniker || '-'
-          }}
+          {{ validatorDescription?.moniker ?? validator?.address ?? '-' }}
         </IgniteText>
         <IgniteText class="mt-5 break-words pb-4 text-2 leading-5 text-muted">
-          {{
-            validatorData.details.body?.messages[0]?.description?.details || '-'
-          }}
+          {{ validatorDescription?.details || '' }}
         </IgniteText>
       </div>
 
diff --git a/src/components/project/project-tabs/ProjectValidatorsTab/ValidatorList.vue b/src/components/project/project-tabs/ProjectValidatorsTab/ValidatorList.vue
index 6a7cf772..26eb1eaf 100644
--- a/src/components/project/project-tabs/ProjectValidatorsTab/ValidatorList.vue
+++ b/src/components/project/project-tabs/ProjectValidatorsTab/ValidatorList.vue
@@ -1,5 +1,8 @@
 <script lang="ts" setup>
-import useGenesisValidatorAllChains from '~/composables/validator/useGenesisValidatorAllChains'
+import { toRef } from 'vue'
+
+import IgniteLoader from '~/components/ui/IgniteLoader.vue'
+import useAllGenesisValidators from '~/composables/validator/useGenesisValidatorAllChains'
 
 import ValidatorCard from './ValidatorCard.vue'
 
@@ -10,26 +13,39 @@ interface Props {
 const props = defineProps<Props>()
 
 // composables
-const { campaignValidators, isLoading } = useGenesisValidatorAllChains(
-  props.projectId
+const { campaignValidators, isLoading } = useAllGenesisValidators(
+  toRef(props, 'projectId')
 )
 </script>
 
 <template>
+  <div v-if="isLoading" class="flex w-full flex-wrap justify-center">
+    <IgniteLoader class="loading-card" />
+    <IgniteLoader class="loading-card" />
+    <IgniteLoader class="loading-card" />
+  </div>
+
   <div
-    v-if="!isLoading && allGenesisValidators.length === 0"
+    v-else-if="!isLoading && campaignValidators?.length === 0"
     class="mt-6 empty:m-0 md:mt-9"
   >
     <span>- No validators yet -</span>
   </div>
+
   <div
     v-else
     class="-m-4 mt-6 flex flex-wrap justify-center empty:m-0 md:-m-5 md:mt-9"
   >
     <ValidatorCard
       v-for="validator in campaignValidators"
-      :key="validator[0]"
-      :validator="validator[1]"
+      :key="validator.address"
+      :validator="validator"
     />
   </div>
 </template>
+
+<style scoped lang="postcss">
+.loading-card {
+  @apply m-4 h-[20rem] w-full !max-w-none flex-none rounded p-4 md:w-[50%] md:p-5 xl:w-[25%];
+}
+</style>
diff --git a/src/components/project/project-tabs/ProjectValidatorsTab/index.vue b/src/components/project/project-tabs/ProjectValidatorsTab/index.vue
index be927b0b..48b3adac 100644
--- a/src/components/project/project-tabs/ProjectValidatorsTab/index.vue
+++ b/src/components/project/project-tabs/ProjectValidatorsTab/index.vue
@@ -84,16 +84,18 @@ const showIncentives = computed(function () {
       </div>
     </div>
 
-    <div>
-      <IgniteHeading
-        class="text-center font-title text-5 font-semibold md:text-7"
-      >
-        Validators
-      </IgniteHeading>
-      <IgniteText class="mx-auto mt-4 max-w-[20rem] text-muted md:mt-6">
-        Active validators verifying transactions to secure the
-        {{ campaignSummary?.campaign?.campaignName }} network
-      </IgniteText>
+    <div class="space-y-8">
+      <div>
+        <IgniteHeading
+          class="text-center font-title text-5 font-semibold md:text-7"
+        >
+          Validators
+        </IgniteHeading>
+        <IgniteText class="mx-auto mt-4 max-w-[20rem] text-muted md:mt-6">
+          Active validators verifying transactions to secure the
+          {{ campaignSummary?.campaign?.campaignName }} network
+        </IgniteText>
+      </div>
 
       <ValidatorList
         v-if="projectId && projectId !== '0'"
@@ -102,7 +104,7 @@ const showIncentives = computed(function () {
 
       <IgniteCard
         :shadow="true"
-        class="mx-auto mt-8 flex w-full max-w-[69.5rem] flex-col justify-start py-7 px-5 text-left md:mt-11 md:py-8.5 md:px-7.5"
+        class="mx-auto flex w-full max-w-[69.5rem] flex-col justify-start py-7 px-5 text-left md:mt-11 md:py-8.5 md:px-7.5"
       >
         <IgniteHeading class="font-title text-5 font-semibold md:text-7">
           Become a validator
diff --git a/src/composables/validator/useGenesisValidatorAllChains.ts b/src/composables/validator/useGenesisValidatorAllChains.ts
index 97f31c5b..a92f329a 100644
--- a/src/composables/validator/useGenesisValidatorAllChains.ts
+++ b/src/composables/validator/useGenesisValidatorAllChains.ts
@@ -7,20 +7,20 @@ import { useQuery } from 'vue-query'
 
 import { RefOrValue } from '~/utils/types'
 
-export default function useGenesisValidatorAllChains(
-  campaignID: RefOrValue<string | undefined>
+export default function useAllGenesisValidators(
+  projectId: RefOrValue<string | undefined>
 ) {
   const { queryCampaignChains } = useTendermintSpnCampaign()
   const { queryGenesisValidatorAll } = useTendermintSpnLaunch()
 
   const isEnabled = computed(() => {
-    return Boolean(unref(campaignID))
+    return Boolean(unref(projectId))
   })
 
   const { data: campaignValidators, ...other } = useQuery(
-    ['campaignValidators', 'populated', campaignID],
+    ['campaignValidators', 'populated', projectId],
     async () => {
-      const { data } = await queryCampaignChains(unref(campaignID) as string)
+      const { data } = await queryCampaignChains(unref(projectId) as string)
 
       if (!data.campaignChains)
         throw new Error('Failed to fetch campaign chains')
@@ -34,18 +34,17 @@ export default function useGenesisValidatorAllChains(
 
       const validators = await Promise.all(validatorPromises)
 
-      const reducedValidatorsFromAllChains = validators.flatMap(
+      const campaignValidators = validators.flatMap(
         (chainValidators) => chainValidators?.genesisValidator || []
       )
 
-      const uniqueValidators = [
-        ...new Map(
-          reducedValidatorsFromAllChains.map((validator) => [
-            validator.address,
-            validator
-          ])
-        )
-      ]
+      const seen: Record<string, boolean> = {}
+
+      const uniqueValidators = campaignValidators.filter((validator) => {
+        const address = validator?.address ?? ''
+
+        return seen[address] ? false : (seen[address] = true)
+      })
 
       return uniqueValidators
     },

From 2431222f8f7b601b29180f841df37cc75ff1b315 Mon Sep 17 00:00:00 2001
From: Jose Felix <jfelx@outlook.com>
Date: Fri, 3 Jun 2022 01:55:48 -0400
Subject: [PATCH 2/4] improvement: connect automatically only on previous
 connects

---
 src/components/wallet/IgniteAccount.vue         | 5 ++++-
 src/composables/wallet/useHasConnectedWallet.ts | 5 +++++
 src/views/ProjectFundraiserCreate.vue           | 4 +++-
 3 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 src/composables/wallet/useHasConnectedWallet.ts

diff --git a/src/components/wallet/IgniteAccount.vue b/src/components/wallet/IgniteAccount.vue
index 11faed4b..37b8d5f1 100644
--- a/src/components/wallet/IgniteAccount.vue
+++ b/src/components/wallet/IgniteAccount.vue
@@ -18,6 +18,7 @@ import IgniteModal from '~/components/ui/IgniteModal.vue'
 import IgniteSpinner from '~/components/ui/IgniteSpinner.vue'
 import IgniteText from '~/components/ui/IgniteText.vue'
 import useAddress from '~/composables/wallet/useAddress'
+import useHasConnectedWallet from '~/composables/wallet/useHasConnectedWallet'
 
 import IgniteAccountMenu from './IgniteAccountMenu.vue'
 
@@ -47,6 +48,7 @@ const state = reactive({ ...initialState })
 
 // composables
 const { address } = useAddress()
+const hasConnectedWallet = useHasConnectedWallet()
 
 // methods
 function onCloseModal() {
@@ -86,6 +88,7 @@ async function tryToConnectToKeplr() {
     listenToAccChange(onKeplrConnect)
     resetState()
 
+    if (!hasConnectedWallet.value) hasConnectedWallet.value = true
     emit('connect')
   }
 
@@ -114,7 +117,7 @@ async function tryToConnectToKeplr() {
 
 // lifecycle
 onBeforeMount(() => {
-  tryToConnectToKeplr()
+  if (hasConnectedWallet.value) tryToConnectToKeplr()
 })
 
 // computed
diff --git a/src/composables/wallet/useHasConnectedWallet.ts b/src/composables/wallet/useHasConnectedWallet.ts
new file mode 100644
index 00000000..ddf44a64
--- /dev/null
+++ b/src/composables/wallet/useHasConnectedWallet.ts
@@ -0,0 +1,5 @@
+import { useStorage } from '@vueuse/core'
+
+export default function useHasConnectedWallet() {
+  return useStorage('has-connected-wallet', false)
+}
diff --git a/src/views/ProjectFundraiserCreate.vue b/src/views/ProjectFundraiserCreate.vue
index 9d976a4c..a8dc3d60 100644
--- a/src/views/ProjectFundraiserCreate.vue
+++ b/src/views/ProjectFundraiserCreate.vue
@@ -45,6 +45,7 @@ import IgniteNumber from '~/components/ui/IgniteNumber.vue'
 import IgniteSelect from '~/components/ui/IgniteSelect.vue'
 import IgniteText from '~/components/ui/IgniteText.vue'
 import useTotalSupply from '~/composables/fundraising/useTotalSupply'
+import useAddress from '~/composables/wallet/useAddress'
 import useBalances from '~/composables/wallet/useBalances'
 import { getDenomName } from '~/utils/fundraising'
 import { percentageToCosmosDecimal } from '~/utils/number'
@@ -78,12 +79,13 @@ function coinToSelectOption(c: Coin): { label: string; value: string } {
 const { spn } = useSpn()
 
 // composables
+const { address } = useAddress()
 const router = useRouter()
 const {
   balances,
   isFetching: isFetchingBalances,
   isFetched: isFetchedBalances
-} = useBalances(spn.signer.value.addr)
+} = useBalances(address)
 
 const {
   totalSupply,

From 0be265ceba0faf88173298928e4ecf4c4f049c15 Mon Sep 17 00:00:00 2001
From: Jose Felix <jfelx@outlook.com>
Date: Fri, 3 Jun 2022 03:25:56 -0400
Subject: [PATCH 3/4] feat: add useConnectWallet and useHasConnectedWallet
 hooks

---
 src/components/wallet/IgniteAccount.vue       | 58 ++++---------
 src/components/wallet/IgniteAccountMenu.vue   |  6 +-
 src/composables/wallet/useConnectWallet.ts    | 83 +++++++++++++++++++
 .../wallet/useHasConnectedWallet.ts           |  4 +-
 src/views/ProjectFundraiserCreate.vue         | 42 +++++++---
 5 files changed, 134 insertions(+), 59 deletions(-)
 create mode 100644 src/composables/wallet/useConnectWallet.ts

diff --git a/src/components/wallet/IgniteAccount.vue b/src/components/wallet/IgniteAccount.vue
index 37b8d5f1..f026fd46 100644
--- a/src/components/wallet/IgniteAccount.vue
+++ b/src/components/wallet/IgniteAccount.vue
@@ -18,6 +18,7 @@ import IgniteModal from '~/components/ui/IgniteModal.vue'
 import IgniteSpinner from '~/components/ui/IgniteSpinner.vue'
 import IgniteText from '~/components/ui/IgniteText.vue'
 import useAddress from '~/composables/wallet/useAddress'
+import useConnectWallet from '~/composables/wallet/useConnectWallet'
 import useHasConnectedWallet from '~/composables/wallet/useHasConnectedWallet'
 
 import IgniteAccountMenu from './IgniteAccountMenu.vue'
@@ -35,7 +36,19 @@ interface Emits {
 const emit = defineEmits<Emits>()
 
 // spn
-const { spn, signIn, signOut } = useSpn()
+const { spn } = useSpn()
+const { tryToConnectToKeplr, onSignOut } = useConnectWallet({
+  onConnecting: () => {
+    state.modalPage = ModalPage.Connecting
+  },
+  onConnect: () => {
+    emit('connect')
+    resetState()
+  },
+  onError: () => {
+    state.modalPage = ModalPage.Error
+  }
+})
 
 // variables
 const initialState = {
@@ -62,7 +75,7 @@ function onOpenModal() {
 
 function onCancel() {
   resetState()
-  signOut()
+  onSignOut()
 }
 
 function getInitialModalPage(isKeplrAvaliable: boolean) {
@@ -74,47 +87,6 @@ function resetState() {
   state.isConnectWalletModalOpen = initialState.isConnectWalletModalOpen
 }
 
-async function tryToConnectToKeplr() {
-  const { connect, getOfflineSigner, listenToAccChange } = spn.keplr.value
-
-  state.modalPage = ModalPage.Connecting
-
-  const onKeplrConnect = async () => {
-    const chainId = spn.env.value.chainID ?? ''
-
-    const offlineSigner = getOfflineSigner(chainId)
-    signIn(offlineSigner)
-
-    listenToAccChange(onKeplrConnect)
-    resetState()
-
-    if (!hasConnectedWallet.value) hasConnectedWallet.value = true
-    emit('connect')
-  }
-
-  const onKeplrError = (): void => {
-    state.modalPage = ModalPage.Error
-  }
-
-  try {
-    const stakingParams = await (
-      await spn.cosmosStakingV1Beta1.value.queryParams()
-    ).data
-
-    const tokens = await (
-      await spn.cosmosBankV1Beta1.value.queryTotalSupply()
-    ).data
-
-    connect(onKeplrConnect, onKeplrError, {
-      stakinParams: stakingParams,
-      tokens,
-      env: spn.env.value
-    })
-  } catch (e) {
-    state.modalPage = ModalPage.Error
-  }
-}
-
 // lifecycle
 onBeforeMount(() => {
   if (hasConnectedWallet.value) tryToConnectToKeplr()
diff --git a/src/components/wallet/IgniteAccountMenu.vue b/src/components/wallet/IgniteAccountMenu.vue
index de5e01cc..b1a21386 100644
--- a/src/components/wallet/IgniteAccountMenu.vue
+++ b/src/components/wallet/IgniteAccountMenu.vue
@@ -6,7 +6,6 @@ export default {
 
 <script lang="ts" setup>
 import { Menu, MenuButton, MenuItems } from '@headlessui/vue'
-import { useSpn } from 'tendermint-spn-vue-client'
 import { computed } from 'vue'
 
 import IgniteButton from '~/components/ui/IgniteButton.vue'
@@ -19,9 +18,10 @@ import IgniteText from '~/components/ui/IgniteText.vue'
 import useAccount from '~/composables/wallet/useAccount'
 import useAddress from '~/composables/wallet/useAddress'
 import useBalances from '~/composables/wallet/useBalances'
+import useConnectWallet from '~/composables/wallet/useConnectWallet'
 
 // ignite
-const { signOut } = useSpn()
+const { onSignOut } = useConnectWallet()
 
 // composables
 const { address } = useAddress()
@@ -72,7 +72,7 @@ const mainCoinBalance = computed(() => {
         <IgniteButton
           variant="primary"
           class="!px-0 !py-0 text-3 font-normal text-gray-0"
-          @click="signOut"
+          @click="onSignOut"
         >
           Disconnect wallet
         </IgniteButton>
diff --git a/src/composables/wallet/useConnectWallet.ts b/src/composables/wallet/useConnectWallet.ts
new file mode 100644
index 00000000..5c02718d
--- /dev/null
+++ b/src/composables/wallet/useConnectWallet.ts
@@ -0,0 +1,83 @@
+import { ref } from 'vue'
+
+import { useSpn } from '~/generated/tendermint-spn-vue-client'
+
+import useHasConnectedWallet from './useHasConnectedWallet'
+
+interface useConnectWalletOptions {
+  onError?: (type: 'keplr' | 'request') => void
+  onConnect?: () => void
+  onSuccess?: () => void
+  onConnecting?: () => void
+}
+
+export enum ConnectionState {
+  Fresh,
+  Connecting,
+  Connected,
+  Disconnected,
+  Error
+}
+
+const connectionState = ref(ConnectionState.Fresh)
+
+export default function useConnectWallet({
+  onConnect,
+  onConnecting,
+  onError
+}: useConnectWalletOptions = {}) {
+  const hasConnectedWallet = useHasConnectedWallet()
+  const { spn, signIn, signOut } = useSpn()
+
+  async function tryToConnectToKeplr() {
+    const { connect, getOfflineSigner, listenToAccChange } = spn.keplr.value
+
+    connectionState.value = ConnectionState.Connecting
+    onConnecting?.()
+
+    const onKeplrConnect = async () => {
+      const chainId = spn.env.value.chainID ?? ''
+
+      const offlineSigner = getOfflineSigner(chainId)
+      signIn(offlineSigner)
+
+      listenToAccChange(onKeplrConnect)
+      onConnect?.()
+
+      connectionState.value = ConnectionState.Connected
+      hasConnectedWallet.value = true
+    }
+
+    const onKeplrError = (): void => {
+      connectionState.value = ConnectionState.Error
+      onError?.('keplr')
+    }
+
+    try {
+      const stakingParams = await (
+        await spn.cosmosStakingV1Beta1.value.queryParams()
+      ).data
+
+      const tokens = await (
+        await spn.cosmosBankV1Beta1.value.queryTotalSupply()
+      ).data
+
+      connect(onKeplrConnect, onKeplrError, {
+        stakinParams: stakingParams,
+        tokens,
+        env: spn.env.value
+      })
+    } catch (e) {
+      connectionState.value = ConnectionState.Error
+      onError?.('request')
+    }
+  }
+
+  const onSignOut = () => {
+    hasConnectedWallet.value = false
+    connectionState.value = ConnectionState.Disconnected
+    signOut()
+  }
+
+  return { tryToConnectToKeplr, onSignOut, connectionState }
+}
diff --git a/src/composables/wallet/useHasConnectedWallet.ts b/src/composables/wallet/useHasConnectedWallet.ts
index ddf44a64..eb425e15 100644
--- a/src/composables/wallet/useHasConnectedWallet.ts
+++ b/src/composables/wallet/useHasConnectedWallet.ts
@@ -1,5 +1,7 @@
 import { useStorage } from '@vueuse/core'
 
+const storageValue = useStorage('has-connected-wallet', false)
+
 export default function useHasConnectedWallet() {
-  return useStorage('has-connected-wallet', false)
+  return storageValue
 }
diff --git a/src/views/ProjectFundraiserCreate.vue b/src/views/ProjectFundraiserCreate.vue
index a8dc3d60..cea282ba 100644
--- a/src/views/ProjectFundraiserCreate.vue
+++ b/src/views/ProjectFundraiserCreate.vue
@@ -21,7 +21,7 @@ import dayjs from 'dayjs'
 import { cloneDeep } from 'lodash'
 import type { MsgCreateFixedPriceAuction } from 'tendermint-spn-ts-client/tendermint.fundraising/types/fundraising/tx'
 import { useSpn } from 'tendermint-spn-vue-client'
-import { computed, onMounted, reactive } from 'vue'
+import { computed, reactive, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 
 import IgniteBreadcrumbs from '~/components/common/IgniteBreadcrumbs.vue'
@@ -47,6 +47,9 @@ import IgniteText from '~/components/ui/IgniteText.vue'
 import useTotalSupply from '~/composables/fundraising/useTotalSupply'
 import useAddress from '~/composables/wallet/useAddress'
 import useBalances from '~/composables/wallet/useBalances'
+import useConnectWallet, {
+  ConnectionState
+} from '~/composables/wallet/useConnectWallet'
 import { getDenomName } from '~/utils/fundraising'
 import { percentageToCosmosDecimal } from '~/utils/number'
 
@@ -77,19 +80,20 @@ function coinToSelectOption(c: Coin): { label: string; value: string } {
 
 // spn
 const { spn } = useSpn()
+const { tryToConnectToKeplr, connectionState } = useConnectWallet()
 
 // composables
 const { address } = useAddress()
 const router = useRouter()
 const {
   balances,
-  isFetching: isFetchingBalances,
+  isLoading: isLoadingBalances,
   isFetched: isFetchedBalances
 } = useBalances(address)
 
 const {
   totalSupply,
-  isFetching: isFetchingTotalSupply,
+  isLoading: isLoadingTotalSupply,
   isFetched: isFetchedTotalSupply
 } = useTotalSupply()
 
@@ -148,9 +152,23 @@ const initialState: State = {
 const state = reactive(initialState)
 
 // lifecycles
-onMounted(() => {
-  if (!spn.signer.value.addr) {
-    router.push(`sign-in`)
+watchEffect(() => {
+  const isFresh = connectionState.value === ConnectionState.Fresh
+  const isConnected = connectionState.value === ConnectionState.Connected
+  const isConnecting = connectionState.value === ConnectionState.Connecting
+  const isError = connectionState.value === ConnectionState.Error
+  const isDisconnected = connectionState.value === ConnectionState.Disconnected
+
+  if (isConnected || isConnecting) {
+    return
+  }
+
+  if (isFresh) {
+    return tryToConnectToKeplr()
+  }
+
+  if (isError || isDisconnected) {
+    return router.push(`sign-in`)
   }
 })
 
@@ -266,7 +284,7 @@ const hasAnyBalance = computed<boolean>(
     false
 )
 const isLoadingCriticalData = computed<boolean>(
-  () => isFetchingBalances.value || isFetchingTotalSupply.value
+  () => isLoadingBalances.value || isLoadingTotalSupply.value
 )
 const ableToPublish = computed<boolean>(
   () =>
@@ -494,18 +512,18 @@ function cancel() {
               <div class="flex max-w-[14.5rem]">
                 <!-- Skeleton loading balances -->
                 <div
-                  v-if="isFetchingBalances"
+                  v-if="isLoadingBalances"
                   class="w-1/2 rounded-xs rounded-r-none border border-r-0 border-border p-2"
                 >
                   <IgniteLoader class="h-full w-full rounded-xs" />
                 </div>
                 <!-- Input -->
-                <div v-else class="flex w-1/2">
+                <div v-else-if="balances" class="flex w-1/2">
                   <IgniteSelect
                     :model-value="
                       coinToSelectOption({
-                        amount: '',
-                        denom: state.auction.selling_coin?.denom as string
+                        amount: '0',
+                        denom: state.auction.selling_coin?.denom ?? '0'
                       })
                     "
                     :items="(balances as Coin[]).map(i => coinToSelectOption(i as Coin))"
@@ -582,7 +600,7 @@ function cancel() {
               <div class="flex max-w-[15.5rem]">
                 <!-- Skeleton loading balances -->
                 <div
-                  v-if="isFetchingTotalSupply"
+                  v-if="isLoadingTotalSupply"
                   class="w-1/2 rounded-xs rounded-r-none border border-r-0 border-border p-2"
                 >
                   <IgniteLoader class="h-full w-full rounded-xs" />

From d9aa366898e3d3be24560b575acfe3cfbe03e4e3 Mon Sep 17 00:00:00 2001
From: Jose Felix <jfelx@outlook.com>
Date: Fri, 10 Jun 2022 22:39:31 -0400
Subject: [PATCH 4/4] feat: create fundraiser form reactive vouchers offered

---
 src/components/invest/FundraiserSummary.vue |   8 +-
 src/utils/string.ts                         |  11 +++
 src/views/ProjectFundraiserCreate.vue       | 100 ++++++++++++++------
 3 files changed, 89 insertions(+), 30 deletions(-)
 create mode 100644 src/utils/string.ts

diff --git a/src/components/invest/FundraiserSummary.vue b/src/components/invest/FundraiserSummary.vue
index 8bdf6d32..b6100979 100644
--- a/src/components/invest/FundraiserSummary.vue
+++ b/src/components/invest/FundraiserSummary.vue
@@ -16,6 +16,7 @@ import IgniteHeading from '~/components/ui/IgniteHeading.vue'
 import IgniteNumber from '~/components/ui/IgniteNumber.vue'
 import IgniteText from '~/components/ui/IgniteText.vue'
 import useAddress from '~/composables/wallet/useAddress'
+import { ellipsisText } from '~/utils/string'
 
 interface Emits {
   (e: 'publish'): void
@@ -114,8 +115,11 @@ function formatRange(start: Date, end: Date): string {
               Total raise potential
             </IgniteText>
             <IgniteText class="text-4 font-normal text-muted">
-              <IgniteNumber :number="props.totalSaleValue" />
-              {{ props.saleDenom }}
+              <span><IgniteNumber :number="props.totalSaleValue" /></span
+              >{{ ' ' }}
+              <span :title="props.saleDenom">{{
+                ellipsisText(props.saleDenom ?? '', 20)
+              }}</span>
             </IgniteText>
           </div>
           <div class="mt-7 flex place-content-end md:mt-9">
diff --git a/src/utils/string.ts b/src/utils/string.ts
new file mode 100644
index 00000000..20c1c274
--- /dev/null
+++ b/src/utils/string.ts
@@ -0,0 +1,11 @@
+export function ellipsisText(text: string, maxLength: number): string {
+  if (!text) return ''
+
+  const trimmedText = text.trim()
+
+  if (text.length > maxLength) {
+    return trimmedText.slice(0, maxLength - 3).concat('...')
+  }
+
+  return trimmedText
+}
diff --git a/src/views/ProjectFundraiserCreate.vue b/src/views/ProjectFundraiserCreate.vue
index cea282ba..bec79f9b 100644
--- a/src/views/ProjectFundraiserCreate.vue
+++ b/src/views/ProjectFundraiserCreate.vue
@@ -52,6 +52,7 @@ import useConnectWallet, {
 } from '~/composables/wallet/useConnectWallet'
 import { getDenomName } from '~/utils/fundraising'
 import { percentageToCosmosDecimal } from '~/utils/number'
+import { ellipsisText } from '~/utils/string'
 
 // types
 type FixedPriceAuction = MsgCreateFixedPriceAuction
@@ -118,25 +119,6 @@ interface State {
   errorMsg?: string
 }
 
-const initialSellingCoin =
-  isFetchedBalances.value && balances.value && balances.value.length > 0
-    ? {
-        amount: '0',
-        denom: balances.value[0].denom as string
-      }
-    : undefined
-
-const filteredInitalTotalSupply: Coin[] = isFetchedTotalSupply.value
-  ? (totalSupply.value?.supply?.filter(
-      (i) => i.denom !== initialSellingCoin?.denom
-    ) as Coin[])
-  : []
-
-const initialPayingDenom =
-  isFetchedTotalSupply.value && filteredInitalTotalSupply.length > 0
-    ? filteredInitalTotalSupply[0].denom
-    : ''
-
 const initialState: State = {
   currentUIState: UIStates.Fresh,
   auction: {
@@ -144,8 +126,8 @@ const initialState: State = {
     start_price: '1',
     start_time: TODAY,
     end_time: getWeeksLater(TODAY, 1),
-    paying_coin_denom: initialPayingDenom,
-    selling_coin: initialSellingCoin,
+    paying_coin_denom: '',
+    selling_coin: undefined,
     vesting_schedules: []
   }
 }
@@ -172,17 +154,44 @@ watchEffect(() => {
   }
 })
 
+watchEffect(() => {
+  if (Boolean(state.auction.paying_coin_denom)) return
+
+  const filteredInitalTotalSupply: Coin[] = isFetchedTotalSupply.value
+    ? (totalSupply.value?.supply?.filter(
+        (i) => i.denom !== state.auction.selling_coin?.denom
+      ) as Coin[])
+    : []
+
+  if (isFetchedTotalSupply.value && filteredInitalTotalSupply.length > 0) {
+    state.auction.paying_coin_denom = filteredInitalTotalSupply[0].denom
+  }
+})
+
+watchEffect(() => {
+  if (Boolean(state.auction.selling_coin)) return
+
+  if (isFetchedBalances.value && balances.value && balances.value.length > 0) {
+    state.auction.selling_coin = {
+      amount: '0',
+      denom: balances.value[0].denom as string
+    }
+  }
+})
+
 // computed
-const filterdTotalSupplyCoins = computed<Coin[]>(() => {
+const filteredTotalSupplyCoins = computed<Coin[]>(() => {
   const filtered = totalSupply.value?.supply?.filter(
     (i) => i.denom !== state.auction.selling_coin?.denom
   ) as Coin[]
 
   return filtered ?? []
 })
+
 const amountForSale = computed<number>(() =>
   new BigNumber(state.auction.selling_coin?.amount ?? '0').toNumber()
 )
+
 const amountForSaleOverTotal = computed<string>(() =>
   new BigNumber(amountForSale.value)
     .dividedBy(voucherTotalSupply.value)
@@ -190,16 +199,19 @@ const amountForSaleOverTotal = computed<string>(() =>
     .decimalPlaces(5)
     .toString()
 )
+
 const totalSaleValue = computed<number>(
   () =>
     new BigNumber(state.auction.selling_coin?.amount ?? '0').toNumber() *
     new BigNumber(state.auction.start_price ?? '0').toNumber()
 )
+
 const showModal = computed<boolean>(() =>
   [UIStates.Creating, UIStates.Created, UIStates.Error].includes(
     state.currentUIState
   )
 )
+
 const nextMinDateForSchedule = computed<Date>(() => {
   const penultimateScheduleDate: number =
     state.auction.vesting_schedules.at(-2)?.release_time?.getTime() ?? 0
@@ -210,11 +222,13 @@ const nextMinDateForSchedule = computed<Date>(() => {
 
   return new Date(Math.max(penultimateScheduleDate, auctionEndDate, today))
 })
+
 const allVestingWeightsGreaterThanZero = computed<boolean>(() => {
   return state.auction.vesting_schedules.every((schedule) => {
     return new BigNumber(schedule.weight).isGreaterThan(0)
   })
 })
+
 const isVestingTotalSale = computed<boolean>(() => {
   if (state.auction.vesting_schedules.length === 0) {
     return true
@@ -228,6 +242,7 @@ const isVestingTotalSale = computed<boolean>(() => {
 
   return totalWeight === 100
 })
+
 const isEndAfterStart = computed<boolean>(() => {
   const auction = state.auction
 
@@ -236,6 +251,7 @@ const isEndAfterStart = computed<boolean>(() => {
 
   return endAsMilli > startAsMilli
 })
+
 const isReleaseTimeAfterEnd = computed<boolean>(() => {
   const auction = state.auction
   const endAsMilli = (auction.end_time as Date).getTime()
@@ -246,12 +262,14 @@ const isReleaseTimeAfterEnd = computed<boolean>(() => {
     return scheduleAsMilli > endAsMilli
   })
 })
+
 const isSellingDenomSameAsPayingDenom = computed<boolean>(() => {
   return (
     state.auction.selling_coin?.denom.toUpperCase() ===
     state.auction.paying_coin_denom.toUpperCase()
   )
 })
+
 const balanceFromSellingCoin = computed<number>(() => {
   const sellingDenom = state.auction.selling_coin?.denom
 
@@ -259,33 +277,41 @@ const balanceFromSellingCoin = computed<number>(() => {
 
   return balance ? new BigNumber(balance.amount).toNumber() : 0
 })
+
 const voucherTotalSupply = computed<number>(() => {
   const totalSupplyAsString = balanceFromSellingCoin.value
 
   return new BigNumber(totalSupplyAsString ?? '0').toNumber()
 })
+
 const isSellingAmountGreaterThanBalance = computed<boolean>(() => {
   return new BigNumber(
     state.auction.selling_coin?.amount as string
   ).isGreaterThan(balanceFromSellingCoin.value)
 })
+
 const isSellingAmountGreaterThan33Pct = computed<boolean>(() =>
   new BigNumber(amountForSaleOverTotal.value).isGreaterThan(33)
 )
+
 const isSellingAmountGreaterThanZero = computed<boolean>(() =>
   new BigNumber(state.auction.selling_coin?.amount as string).isGreaterThan(0)
 )
+
 const isVoucherPriceGreaterThanZero = computed<boolean>(() =>
   new BigNumber(state.auction.start_price).isGreaterThan(0)
 )
+
 const hasAnyBalance = computed<boolean>(
   () =>
     (isFetchedBalances.value && balances.value && balances.value.length > 0) ||
     false
 )
+
 const isLoadingCriticalData = computed<boolean>(
   () => isLoadingBalances.value || isLoadingTotalSupply.value
 )
+
 const ableToPublish = computed<boolean>(
   () =>
     !isLoadingCriticalData.value &&
@@ -517,13 +543,14 @@ function cancel() {
                 >
                   <IgniteLoader class="h-full w-full rounded-xs" />
                 </div>
+
                 <!-- Input -->
                 <div v-else-if="balances" class="flex w-1/2">
                   <IgniteSelect
                     :model-value="
                       coinToSelectOption({
                         amount: '0',
-                        denom: state.auction.selling_coin?.denom ?? '0'
+                        denom: state.auction.selling_coin?.denom ?? ''
                       })
                     "
                     :items="(balances as Coin[]).map(i => coinToSelectOption(i as Coin))"
@@ -615,7 +642,7 @@ function cancel() {
                       })
                     "
                     :items="
-                      filterdTotalSupplyCoins.map(i => coinToSelectOption(i as Coin))
+                      filteredTotalSupplyCoins.map(i => coinToSelectOption(i as Coin))
                     "
                     variants="rounded-r-none"
                     class="w-full"
@@ -631,10 +658,19 @@ function cancel() {
                         size="small"
                         class="mr-3"
                       />
-                      {{ getDenomName(state.auction.paying_coin_denom) }}
+                      <span
+                        :title="getDenomName(state.auction.paying_coin_denom)"
+                      >
+                        {{
+                          ellipsisText(
+                            getDenomName(state.auction.paying_coin_denom),
+                            6
+                          )
+                        }}
+                      </span>
                     </template>
                     <template
-                      v-for="i in filterdTotalSupplyCoins"
+                      v-for="i in filteredTotalSupplyCoins"
                       :key="i.denom"
                       #[i.denom]
                     >
@@ -660,8 +696,16 @@ function cancel() {
               </div>
               <div class="ml-6 flex-row">
                 <IgniteText class="font-bold">
-                  <IgniteNumber :number="totalSaleValue" />
-                  {{ getDenomName(state.auction.paying_coin_denom) }}
+                  <span><IgniteNumber :number="totalSaleValue" /></span
+                  >{{ ' ' }}
+                  <span :title="getDenomName(state.auction.paying_coin_denom)">
+                    {{
+                      ellipsisText(
+                        getDenomName(state.auction.paying_coin_denom),
+                        20
+                      )
+                    }}
+                  </span>
                 </IgniteText>
               </div>
             </div>