Merge branch 'main' into refactor/popup

allinbits · Apr 30, 2024 · 9f497fc · 9f497fc
2 parents 154633c + 054a0dc
commit 9f497fc
Show file tree

Hide file tree

Showing 20 changed files with 440 additions and 22 deletions.
diff --git a/LICENSE.md b/LICENSE.md
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # GovGen Governance dApp
 
-GovGen governance dApp is a simple interface, that seamlessly integrates with your existing wallets, such as Keplr, Cosmostation, or Leap to allow you to interact with GovGen in a secure and efficient manner. There is no need to enter mnemonics, existing as a platform enabling a web UI to [GovGen](https://govgen.io) governance, you simply connect the dApp to your preferred wallet and gain immediate access to GovGen’s governance functionalities. These functionalities include viewing proposals and proposal statistics, participating in discussions, providing useful links for each proposal, and performing transactions related to voting.
+GovGen governance dApp is a platform facilitating web-based access to GovGen governance where users can seamlessly engage with proposals, view proposal statistics, participate in discussions as well as perform transactions to vote or deposit on proposals. Prioritizing security, GovGen encourages the use of CLI commands for interactions with the dApp, using your wallet of choice or a public address you can gain immediate access to GovGen's governance functionalities. 
 
 Our goal with the GovGen governance dApp is to empower the community to effortlessly participate in these types of processes by gauging community sentiment in regards to the potential outcome of AtomOne while making it more accessible to engage, regardless of their technical expertise or background.
 
@@ -74,4 +74,4 @@ pnpm dev
 
 Please use [Github Issues](https://github.com/allinbits/govgen-governance-dapp/issues) to inform us of any bugs or issues you encounter and to request features and improvements.
 
-Thank you.
+Thank you.
diff --git a/index.html b/index.html
@@ -2,9 +2,36 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GovGen Governance</title>
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1c1c1c" />
+    <meta name="msapplication-TileColor" content="#000000" />
+    <meta name="theme-color" content="#000000" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@_govgen" />
+    <meta name="twitter:title" content="GovGen Governance" />
+    <meta property="og:site_name" content="govgen" />
+    <meta
+      property="og:title"
+      content="GovGen Governance - a simple interface, that seamlessly integrates with your existing wallets to allow you to interact with GovGen in a secure and efficient manner."
+    />
+    <meta
+      property="og:description"
+      content="GovGen Governance - a simple interface, that seamlessly integrates with your existing wallets to allow you to interact with GovGen in a secure and efficient manner."
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://app.govgen.io/" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+
+    <meta property="og:image" content="https://app.govgen.io/OG.png" />
   </head>
   <body>
     <div id="app"></div>

diff --git a/public/.gitkeep b/public/.gitkeep
diff --git a/public/OG.png b/public/OG.png
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "GovGen",
+  "short_name": "GovGen",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "display": "standalone"
+}
diff --git a/src/components/popups/ProposalDeposit.vue b/src/components/popups/ProposalDeposit.vue
@@ -11,7 +11,7 @@ import UiInfo from "@/components/ui/UiInfo.vue";
 import Icon from "@/components/ui/Icon.vue";
 import CommonButton from "@/components/ui/CommonButton.vue";
 
-import { useWallet } from "@/composables/useWallet";
+import { useWallet, Wallets } from "@/composables/useWallet";
 import { useClipboard } from "@vueuse/core";
 import { useProposals } from "@/composables/useProposals";
 import { useTelemetry } from "@/composables/useTelemetry";
@@ -34,13 +34,21 @@ const depositAmount = ref<number | null>(null);
 const cliDepositInput = ref("");
 
 const depositDenomDecimals = computed(() => {
-  return chainConfig.currencies.filter((x) => x.coinMinimalDenom == props.depositDenom)[0].coinDecimals ?? 0;
+  const currencies = chainConfig.currencies.filter((x) => x.coinMinimalDenom == props.depositDenom);
+  if (currencies.length <= 0) {
+    return 0;
+  }
+
+  return currencies[0].coinDecimals ?? 0;
 });
 
 const depositDenomDisplay = computed(() => {
-  return (
-    chainConfig.currencies.filter((x) => x.coinMinimalDenom == props.depositDenom)[0].coinDenom ?? props.depositDenom
-  );
+  const currencies = chainConfig.currencies.filter((x) => x.coinMinimalDenom == props.depositDenom);
+  if (!currencies) {
+    return props.depositDenom;
+  }
+
+  return currencies[0].coinDenom ?? props.depositDenom;
 });
 
 const resetDeposit = () => (depositAmount.value = null);
@@ -53,7 +61,7 @@ const toggleModal = (dir: boolean) => {
 
 const { logEvent } = useTelemetry();
 const { depositProposal } = useProposals();
-const { address } = useWallet();
+const { address, used } = useWallet();
 
 const signDeposit = async (isCLI = false) => {
   if (!depositAmount.value || depositAmount.value <= 0) return;
@@ -150,6 +158,7 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
                 <button
                   class="px-6 py-4 rounded text-light text-300 text-center w-full hover:opacity-50 duration-150 ease-in-out"
                   @click="toggleModal(false)"
+                  v-if="used != Wallets.addressOnly"
                 >
                   {{ $t("ui.actions.cancel") }}
                 </button>

diff --git a/src/components/popups/ProposalVote.vue b/src/components/popups/ProposalVote.vue
@@ -14,7 +14,7 @@ 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, Wallets } from "@/composables/useWallet";
 import { useProposals } from "@/composables/useProposals";
 import { useClipboard } from "@vueuse/core";
 import { useTelemetry } from "@/composables/useTelemetry";
@@ -70,7 +70,7 @@ const checkVoteWeighted = computed(
 );
 
 const { voteProposal, voteWeightedProposal } = useProposals();
-const { address } = useWallet();
+const { address, used } = useWallet();
 const { logEvent } = useTelemetry();
 
 const signVote = async (isCLI = false) => {
@@ -219,6 +219,7 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
                 <button
                   class="px-6 py-4 rounded text-light text-300 text-center w-full hover:opacity-50 duration-150 ease-in-out"
                   @click="toggleModal(false)"
+                  v-if="used != Wallets.addressOnly"
                 >
                   {{ $t("ui.actions.cancel") }}
                 </button>

diff --git a/src/components/popups/WalletConnect.vue b/src/components/popups/WalletConnect.vue
@@ -11,19 +11,36 @@ const isOpen = ref(false);
 const isConnecting = ref(false);
 const isError = ref(false);
 const isSlowConnecting = ref(false);
+const isAddressOnlyConnection = ref(false);
+const isValidAddress = ref(false);
+const publicAddress = ref("");
 
 const { connect, signOut, address, loggedIn, keplr, leap, cosmostation } = useWallet();
 
-const connectState = computed(() => !isConnecting.value && !isOpen.value && !loggedIn.value && !isError.value);
-const selectState = computed(() => !isConnecting.value && isOpen.value && !loggedIn.value && !isError.value);
+const connectState = computed(
+  () => !isConnecting.value && !isOpen.value && !loggedIn.value && !isError.value && !isAddressOnlyConnection.value,
+);
+const selectState = computed(
+  () => !isConnecting.value && isOpen.value && !loggedIn.value && !isError.value && !isAddressOnlyConnection.value,
+);
+const addressState = computed(
+  () => !isConnecting.value && isOpen.value && !loggedIn.value && !isError.value && isAddressOnlyConnection.value,
+);
 const connectingState = computed(() => isConnecting.value && isOpen.value && !loggedIn.value && !isError.value);
 const connectedState = computed(() => !isConnecting.value && !isOpen.value && loggedIn.value && !isError.value);
 const viewState = computed(() => !isConnecting.value && isOpen.value && loggedIn.value && !isError.value);
 const errorState = computed(() => isOpen.value && isError.value);
 
 const controller: Ref<AbortController | null> = ref(null);
 const chosenWallet: Ref<Wallets> = ref(Wallets.keplr);
+
 const connectWallet = async (walletType: Wallets, address?: string) => {
+  if (walletType == Wallets.addressOnly && !address) {
+    isAddressOnlyConnection.value = true;
+    return;
+  }
+
+  isAddressOnlyConnection.value = false;
   isError.value = false;
   isConnecting.value = true;
   isOpen.value = true;
@@ -55,13 +72,17 @@ const connectWallet = async (walletType: Wallets, address?: string) => {
     }
   }
 };
+
 const cancelConnect = () => {
   controller.value?.abort();
   isConnecting.value = false;
   isSlowConnecting.value = false;
   isOpen.value = false;
   isError.value = false;
+  isAddressOnlyConnection.value = false;
+  publicAddress.value = "";
 };
+
 bus.on("open", () => {
   isOpen.value = true;
 });
@@ -91,13 +112,32 @@ const { logEvent } = useTelemetry();
       <template v-if="selectState">
         <div class="absolute right-0 top-4 z-10">
           <div class="flex flex-col gap-6 px-8 py-6 bg-grey-300 rounded w-80 relative">
-            <Icon class="absolute top-3 right-4 cursor-pointer text-light" icon="close" @click="isOpen = false" />
+            <Icon
+              class="absolute top-3 right-4 cursor-pointer text-light"
+              icon="close"
+              @click="(isOpen = false), (isAddressOnlyConnection = false)"
+            />
             <div class="flex flex-col text-[white] text-500 font-semibold text-center">
               {{ $t("components.WalletConnect.cta") }}
             </div>
-            <div class="flex flex-col text-grey-100 text-300 font-medium text-center">
-              {{ $t("components.WalletConnect.instruction") }}
+            <div class="flex flex-col text-grey-100 text-200 font-medium text-center leading-5">
+              {{ $t("components.WalletConnect.recommendedWallet") }}
             </div>
+            <div class="buttons">
+              <ConnectButton @click="connectWallet(Wallets.addressOnly)">
+                <template #icon>
+                  <Icon icon="link" :size="1.4" class="mr-2" />
+                </template>
+                Public Address</ConnectButton
+              >
+            </div>
+            <span class="text-grey-100 text-100 text-center leading-4">
+              {{ $t("components.WalletConnect.publicAddressDisclaimer") }}
+            </span>
+            <hr class="text-grey-200" />
+            <span class="text-grey-100 text-100 text-center leading-4">
+              {{ $t("components.WalletConnect.otherWallet") }}
+            </span>
             <div class="buttons">
               <ConnectButton class="my-4" :disabled="!keplr" @click="connectWallet(Wallets.keplr)">
                 <template #icon>
@@ -117,6 +157,54 @@ const { logEvent } = useTelemetry();
         </div>
       </template>
 
+      <template v-else-if="addressState">
+        <div class="absolute right-0 top-4">
+          <div class="flex flex-col px-8 py-4 pt-12 bg-grey-300 rounded w-80 relative gap-4">
+            <Icon
+              class="absolute top-3 right-4 cursor-pointer text-light"
+              icon="close"
+              @click="
+                isOpen = false;
+                isAddressOnlyConnection = false;
+              "
+            />
+            <div class="flex flex-col text-[white] text-500 font-semibold text-center">
+              {{ $t("components.WalletConnect.ctaAddress") }}
+            </div>
+            <div class="flex flex-col text-grey-100 text-200 font-medium text-center leading-5">
+              {{ $t("components.WalletConnect.enterAddress") }}
+            </div>
+            <input
+              v-model="publicAddress"
+              class="flex p-4 items-center self-stretch rounded-lg bg-grey-200 outline-none text-100 leading-4 placeholder-grey-100"
+              :placeholder="$t('components.WalletConnect.addressPlaceholder')"
+              @input="isValidAddress = publicAddress.length == 45"
+            />
+            <div class="flex flex-col gap-4">
+              <ConnectButton
+                v-if="isValidAddress"
+                class="justify-center link-gradient"
+                @click="connectWallet(Wallets.addressOnly, publicAddress)"
+              >
+                {{ $t("components.WalletConnect.ctaAddress") }}
+              </ConnectButton>
+              <ConnectButton
+                class="justify-center"
+                @click="
+                  isOpen = false;
+                  isAddressOnlyConnection = false;
+                "
+              >
+                {{ $t("components.WalletConnect.cancel") }}</ConnectButton
+              >
+            </div>
+            <span class="text-grey-100 text-100 text-center leading-4">
+              {{ $t("components.WalletConnect.publicAddressDisclaimer") }}
+            </span>
+          </div>
+        </div>
+      </template>
+
       <!-- Normal signed in account display -->
       <template v-else-if="connectedState">
         <div class="flex align-center items-stretch cursor-pointer" @click="isOpen = true">

diff --git a/src/components/proposals/ProposalWrapper.vue b/src/components/proposals/ProposalWrapper.vue
@@ -27,10 +27,12 @@ import Breakdown from "@/components/proposals/Breakdown.vue";
 import ValidatorBreakdown from "./ValidatorBreakdown.vue";
 import { useTelemetry } from "@/composables/useTelemetry";
 import ModalWrap from "@/components/common/ModalWrap.vue";
+import { useTitle } from "@vueuse/core";
 
 import MarkdownParser from "@/components/common/MarkdownParser.vue";
 import PopupBox from "@/components/popups/PopupBox.vue";
 import { VCodeBlock } from "@wdns/vue-code-block";
+import { onMounted } from "vue";
 
 const voteTypes = ["yes", "no", "veto", "abstain"] as const;
 type BreakdownType = "voters" | "validators" | null;
@@ -333,13 +335,21 @@ const expectedResult = computed(() => {
 });
 
 const stakingDenomDisplay = computed(() => {
-  return (
-    chainConfig.currencies.filter((x) => x.coinMinimalDenom == depositDenom.value)[0]?.coinDenom ?? depositDenom.value
-  );
+  const currencies = chainConfig.currencies.filter((x) => x.coinMinimalDenom == depositDenom.value);
+  if (currencies.length <= 0) {
+    return depositDenom.value;
+  }
+
+  return currencies[0].coinDenom ?? depositDenom.value;
 });
 
 const stakingDenomDecimals = computed(() => {
-  return chainConfig.currencies.filter((x) => x.coinMinimalDenom == depositDenom.value)[0]?.coinDecimals ?? 0;
+  const currencies = chainConfig.currencies.filter((x) => x.coinMinimalDenom == depositDenom.value);
+  if (currencies.length <= 0) {
+    return 0;
+  }
+
+  return currencies[0].coinDecimals ?? 0;
 });
 
 function calculateWidthForTree(key: VoteTypes) {
@@ -387,6 +397,9 @@ function showBreakdown(type: BreakdownType) {
   if (type === null) return;
   logEvent(type === "voters" ? "Click Voters Breakdown" : "Click Validators Breakdown");
 }
+
+const title = useTitle();
+onMounted(() => (title.value = `GovGen — #${proposal.value?.proposal[0].id} ${proposal.value?.proposal[0].title}`));
 </script>
 
 <template>

diff --git a/src/gql/index.ts b/src/gql/index.ts
@@ -1,2 +1,2 @@
 export * from "./fragment-masking";
-export * from "./gql";
+export * from "./gql";