fix: Create Fundraiser Redirection

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">

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>
 

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>

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

src/components/wallet/IgniteAccount.vue

@@ -18,6 +18,8 @@ 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'
 
@@ -34,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 = {
@@ -47,6 +61,7 @@ const state = reactive({ ...initialState })
 
 // composables
 const { address } = useAddress()
+const hasConnectedWallet = useHasConnectedWallet()
 
 // methods
 function onCloseModal() {
@@ -60,7 +75,7 @@ function onOpenModal() {
 
 function onCancel() {
   resetState()
-  signOut()
+  onSignOut()
 }
 
 function getInitialModalPage(isKeplrAvaliable: boolean) {
@@ -72,49 +87,9 @@ 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()
-
-    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(() => {
-  tryToConnectToKeplr()
+  if (hasConnectedWallet.value) tryToConnectToKeplr()
 })
 
 // computed

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>

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
     },