feat: Trigger wallet from vote/deposit section

package.json

@@ -32,6 +32,7 @@
     "dompurify": "^3.0.9",
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
+    "mitt": "^3.0.1",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vue": "^3.4.15",
     "vue-i18n": "9",

src/App.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { RouterView } from "vue-router";
 
-import HeaderSection from "./components/layout/HeaderSection.vue";
-import FooterSection from "./components/layout/FooterSection.vue";
+import HeaderSection from "@/components/layout/HeaderSection.vue";
+import FooterSection from "@/components/layout/FooterSection.vue";
 
-import { useGithubDiscussions } from "./composables/useGithubDiscussions";
+import { useGithubDiscussions } from "@/composables/useGithubDiscussions";
 
 useGithubDiscussions().setup();
 </script>

src/bus/index.ts

@@ -0,0 +1,5 @@
+import mitt from "mitt";
+
+const bus = mitt();
+
+export { bus };

src/components/AddressBalance.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useChainData } from "../composables/useChainData";
+import { useChainData } from "@/composables/useChainData";
 const props = defineProps<{
   address: string;
 }>();

src/components/layout/HeaderSection.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import WalletConnect from "../popups/WalletConnect.vue";
+import WalletConnect from "@/components/popups/WalletConnect.vue";
 </script>
 
 <template>

src/components/popups/ProposalDeposit.vue

@@ -5,11 +5,11 @@ import { MsgDeposit } from "@atomone/govgen-types/govgen/gov/v1beta1/tx";
 
 import chainConfig from "@/chain-config.json";
 
-import ModalWrap from "../common/ModalWrap.vue";
-import UiInput from "../ui/UiInput.vue";
-import UiInfo from "../ui/UiInfo.vue";
+import ModalWrap from "@/components/common/ModalWrap.vue";
+import UiInput from "@/components/ui/UiInput.vue";
+import UiInfo from "@/components/ui/UiInfo.vue";
 
-import { useWallet } from "../../composables/useWallet";
+import { useWallet } from "@/composables/useWallet";
 import { useProposals } from "@/composables/useProposals";
 import { formatAmount } from "@/utility";
 
@@ -77,28 +77,30 @@ const signDeposit = async () => {
         class="justify-center px-6 py-4 rounded bg-gradient text-dark text-300 text-center cursor-pointer"
         @click="toogleModal(true)"
       >
-        Deposit
+        {{ $t("components.ProposalDeposit.cta") }}
       </div>
     </div>
 
     <ModalWrap :visible="isOpen" :is-empty="true" @back="isOpen = false">
       <div class="px-10 py-12 bg-grey-400 rounded w-screen max-w-[25rem]">
         <div v-if="!isDeposit" class="flex flex-col gap-6 relative">
-          <span class="text-gradient font-termina text-700 text-center">Deposit</span>
+          <span class="text-gradient font-termina text-700 text-center">{{
+            $t("components.ProposalDeposit.cta")
+          }}</span>
           <div class="flex flex-col gap-10">
             <div>
               <div class="flex flex-col gap-10">
                 <p class="text-grey-100 text-center text-200">
                   {{ formatAmount(totalDeposit, depositDenomDecimals) }} /
-                  {{ formatAmount(minDeposit, depositDenomDecimals) }} deposited
+                  {{ formatAmount(minDeposit, depositDenomDecimals) }} {{ $t("components.ProposalDeposit.act") }}
                 </p>
 
                 <form class="flex flex-col items-center gap-2">
                   <UiInput
                     v-model="depositAmount"
                     type="number"
                     placeholder="e.g. 50"
-                    label="Enter deposit amount"
+                    :label="$t('components.ProposalDeposit.instructions')"
                     :min="0"
                     class="w-full justify-end"
                   />
@@ -112,7 +114,14 @@ const signDeposit = async () => {
                   class="px-6 py-4 rounded bg-gradient text-dark text-300 text-center w-full"
                   @click="signDeposit()"
                 >
-                  Confirm & Sign
+                  {{ $t("ui.actions.confirm") }}
+                </button>
+
+                <!-- TODO: get CLI cmd-->
+                <button
+                  class="px-6 py-4 rounded text-light text-300 text-center w-full hover:opacity-50 duration-150 ease-in-out"
+                >
+                  {{ $t("ui.actions.cli") }}
                 </button>
               </div>
 

src/components/popups/ProposalVote.vue

@@ -4,21 +4,23 @@ import { computed, ref, reactive } from "vue";
 import { MsgVote, MsgVoteWeighted } from "@atomone/govgen-types/govgen/gov/v1beta1/tx";
 import { VoteOption } from "cosmjs-types/cosmos/gov/v1beta1/gov";
 
-import ModalWrap from "../common/ModalWrap.vue";
+import ModalWrap from "@/components/common/ModalWrap.vue";
 
-import UiSwitch from "../ui/UiSwitch.vue";
-import UiState from "../ui/UiState.vue";
-import UiInput from "../ui/UiInput.vue";
-import UiInfo from "../ui/UiInfo.vue";
+import { useI18n } from "vue-i18n";
+import UiSwitch from "@/components/ui/UiSwitch.vue";
+import UiState from "@/components/ui/UiState.vue";
+import UiInput from "@/components/ui/UiInput.vue";
+import UiInfo from "@/components/ui/UiInfo.vue";
 
-import { useWallet } from "../../composables/useWallet";
+import { useWallet } from "@/composables/useWallet";
 import { useProposals } from "@/composables/useProposals";
 
 interface Props {
   proposalId?: number;
 }
 const props = defineProps<Props>();
 
+const { t } = useI18n();
 const isOpen = ref(false);
 const isVoted = ref(false);
 
@@ -29,10 +31,10 @@ const tab = ref(tabOptions[0]);
 
 // Votes info
 const voteList: Partial<Record<VoteOption, { label: string; color: string }>> = {
-  [VoteOption.VOTE_OPTION_YES]: { label: "Yes", color: "text-accent-100" },
-  [VoteOption.VOTE_OPTION_NO]: { label: "No", color: "text-neg-200" },
-  [VoteOption.VOTE_OPTION_NO_WITH_VETO]: { label: "No with Veto", color: "text-neg-200" },
-  [VoteOption.VOTE_OPTION_ABSTAIN]: { label: "Abstain", color: "text-grey-100" },
+  [VoteOption.VOTE_OPTION_YES]: { label: t("voteOptions.yes"), color: "text-accent-100" },
+  [VoteOption.VOTE_OPTION_NO]: { label: t("voteOptions.no"), color: "text-neg-200" },
+  [VoteOption.VOTE_OPTION_NO_WITH_VETO]: { label: t("voteOptions.nwv"), color: "text-neg-200" },
+  [VoteOption.VOTE_OPTION_ABSTAIN]: { label: t("voteOptions.abstain"), color: "text-grey-100" },
 };
 
 // Vote records
@@ -120,14 +122,14 @@ const signVote = async () => {
         class="justify-center px-6 py-4 rounded bg-gradient text-dark text-300 text-center cursor-pointer"
         @click="toogleModal(true)"
       >
-        Vote
+        {{ $t("components.ProposalVote.cta") }}
       </div>
     </div>
 
     <ModalWrap :visible="isOpen" :is-empty="true" @back="isOpen = false">
       <div class="px-10 py-12 bg-grey-400 rounded w-screen max-w-[25rem]">
         <div v-if="!isVoted" class="flex flex-col gap-6 relative">
-          <span class="text-gradient font-termina text-700 text-center">Vote</span>
+          <span class="text-gradient font-termina text-700 text-center">{{ $t("components.ProposalVote.cta") }}</span>
           <UiSwitch id="voteType" v-model="tab" :options="tabOptions" class="flex w-2/3 mx-auto" @click="resetVote()" />
           <div class="flex flex-col gap-10">
             <div>
@@ -147,7 +149,7 @@ const signVote = async () => {
 
                 <div v-else-if="tab === 'Weighted'" class="flex flex-col gap-10">
                   <p class="text-grey-100 text-center text-200">
-                    Define weight for each of the voting options. The sum of weights must be equal to 1.
+                    {{ $t("components.ProposalVote.weightedInstructions") }}
                   </p>
 
                   <form class="flex flex-col items-center gap-2">
@@ -172,22 +174,22 @@ const signVote = async () => {
             <div class="flex flex-col gap-4">
               <div v-show="voteStraight || checkVoteWeighted" class="flex flex-col gap-4">
                 <button class="px-6 py-4 rounded bg-gradient text-dark text-300 text-center w-full" @click="signVote()">
-                  Confirm & Sign
+                  {{ $t("ui.actions.confirm") }}
                 </button>
 
                 <!-- TODO: get CLI cmd-->
                 <button
                   class="px-6 py-4 rounded text-light text-300 text-center w-full hover:opacity-50 duration-150 ease-in-out"
                 >
-                  or Copy CLI Command
+                  {{ $t("ui.actions.cli") }}
                 </button>
               </div>
 
               <button
                 class="px-6 py-4 rounded text-light text-300 text-center w-full hover:opacity-50 duration-150 ease-in-out"
                 @click="toogleModal(false)"
               >
-                Cancel
+                {{ $t("ui.actions.cancel") }}
               </button>
             </div>
           </div>

src/components/popups/WalletConnect.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { Wallets, useWallet, getWalletHelp } from "../../composables/useWallet";
-import ConnectButton from "../ui/ConnectButton.vue";
+import { Wallets, useWallet, getWalletHelp } from "@/composables/useWallet";
+import ConnectButton from "@/components/ui/ConnectButton.vue";
 import { Ref, computed, ref } from "vue";
-import { shorten } from "../../utility";
-import UserBalance from "../helper/UserBalance.vue";
+import { shorten } from "@/utility";
+import UserBalance from "@/components/helper/UserBalance.vue";
+import { bus } from "@/bus";
 
 const isOpen = ref(false);
 const isConnecting = ref(false);
@@ -56,6 +57,9 @@ const cancelConnect = () => {
   isOpen.value = false;
   isError.value = false;
 };
+bus.on("open", () => {
+  isOpen.value = true;
+});
 </script>
 
 <template>

src/components/ui/SimpleBadge.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ContextTypes } from "@/types/ui";
 import { computed } from "vue";
-import Icon from "./Icon.vue";
+import Icon from "@/components/ui/Icon.vue";
 
 const { type, icon } = defineProps<{ type: ContextTypes; icon?: string }>();
 

src/components/ui/UiInfo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 
-import UiIcon from "./Icon.vue";
+import UiIcon from "@/components/ui/Icon.vue";
 
 interface Props {
   type?: "info" | "warning" | "danger" | "success" | "content";

src/components/ui/UiState.vue

@@ -35,7 +35,7 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import Icon from "./Icon.vue";
+import Icon from "@/components/ui/Icon.vue";
 
 interface Props {
   type: "checkbox" | "radio";

src/composables/useChainData.ts

@@ -6,7 +6,7 @@ import {
   useProposalsQuery,
   useStakingQuery,
   useVoteHistoryQuery,
-} from "./queries";
+} from "@/composables/queries";
 
 export const useChainData = () => {
   const getBalance = (address: string) => {

src/composables/useGithubDiscussions.ts

@@ -1,7 +1,7 @@
 import { ref, computed } from "vue";
 import { useStorage } from "@vueuse/core";
-import { useConfig } from "./useConfig";
-import * as GithubTypes from "../types/github/index";
+import { useConfig } from "@/composables/useConfig";
+import * as GithubTypes from "@/types/github/index";
 import { useRoute, useRouter } from "vue-router";
 
 const config = useConfig();

src/composables/useProposals.ts

@@ -1,6 +1,6 @@
 import { TextProposal } from "@atomone/govgen-types/govgen/gov/v1beta1/gov";
 import { ParameterChangeProposal } from "@atomone/govgen-types/cosmos/params/v1beta1/params";
-import { useWallet } from "./useWallet";
+import { useWallet } from "@/composables/useWallet";
 import { MsgDeposit, MsgSubmitProposal, MsgVote, MsgVoteWeighted } from "@atomone/govgen-types/govgen/gov/v1beta1/tx";
 import { EncodeObject } from "@cosmjs/proto-signing";
 import { SoftwareUpgradeProposal } from "@atomone/govgen-types/cosmos/upgrade/v1beta1/upgrade";
@@ -36,7 +36,7 @@ export const useProposals = () => {
         plan: proposal.plan,
       }).finish(),
     };
-  }
+  };
   const createProposal = async (proposalMeta: Partial<MsgSubmitProposal>, proposal: EncodeObject) => {
     const SubmitProposal: EncodeObject = {
       typeUrl: "/govgen.gov.v1beta1.MsgSubmitProposal",

src/composables/useWallet.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ref, computed, Ref } from "vue";
-import chainInfo from "../chain-config.json";
+import chainInfo from "@/chain-config.json";
 import { EncodeObject, OfflineSigner } from "@cosmjs/proto-signing";
 import { getSigningGovgenClient } from "@atomone/govgen-types/govgen/client";
 import { getOfflineSigner } from "@cosmostation/cosmos-client";

src/localization/index.ts

@@ -66,10 +66,24 @@ export const messages = {
       Search: {
         placeholder: "Search Proposal",
       },
+      ProposalVote: {
+        cta: "Vote",
+        weightedInstructions: "Define weight for each of the voting options. The sum of weights must be equal to 1.",
+      },
+      ProposalDeposit: {
+        cta: "Deposit",
+        act: "deposited",
+        instructions: "Enter deposit amount",
+      },
     },
     ui: {
       readMore: "Read More",
       readLess: "Read Less",
+      actions: {
+        confirm: "Confirm & Sign",
+        cli: "or Copy CLI Command",
+        cancel: "Cancel",
+      },
       tabs: {
         Info: "Info",
         Voters: "Voters",

src/main.ts

@@ -1,12 +1,12 @@
 import { createApp, provide, h } from "vue";
 import { DefaultApolloClient } from "@vue/apollo-composable";
-import "./style.css";
-import App from "./App.vue";
-import router from "./router";
+import "@/style.css";
+import App from "@/App.vue";
+import router from "@/router";
 import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client/core";
-import IconVue from "./components/ui/Icon.vue";
+import IconVue from "@/components/ui/Icon.vue";
 import { createI18n } from "vue-i18n";
-import { messages } from "./localization";
+import { messages } from "@/localization";
 
 // HTTP connection to the API
 const httpLink = createHttpLink({

src/router/index.ts

@@ -1,9 +1,9 @@
 import { createRouter, createWebHistory } from "vue-router";
 
-import HomeView from "../views/HomeView.vue";
-import CreateProposalView from "../views/CreateProposalView.vue";
-import ProposalView from "../views/ProposalView.vue";
-// import DesignView from "../views/Design.vue";
+import HomeView from "@/views/HomeView.vue";
+import CreateProposalView from "@/views/CreateProposalView.vue";
+import ProposalView from "@/views/ProposalView.vue";
+// import DesignView from "@/views/Design.vue";
 
 const routerHistory = createWebHistory();
 const routes = [