Merge pull request #188 from soramitsu/release-branch

Release branch
klaytn · Jan 25, 2023 · c212b79 · c212b79
2 parents d7808f5 + 86f3bbd
commit c212b79
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -6,14 +6,6 @@
   <link rel="apple-touch-icon" href="/pwa-192x192.png">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
   <meta name="msapplication-TileColor" content="#00aba9">
-  <script>
-    (function () {
-      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-      const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
-      if (setting === 'dark' || (prefersDark && setting !== 'light'))
-        document.documentElement.classList.toggle('dark', true)
-    })()
-  </script>
 </head>
 <body class="font-sans">
   <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -1,12 +1,26 @@
 <script setup lang="ts">
 import DefaultLayout from './layouts/default.vue'
+import CONFIG from '~config'
 
 // https://github.com/vueuse/head
 // you can use this to manipulate the document head in any components,
 // they will be rendered correctly in the html results with vite-ssg
 useHead({
   title: 'Dex',
-  meta: [{ name: 'description', content: 'Decentralized exchange platform' }],
+  meta: [
+    { name: 'description', content: 'Decentralized exchange platform' },
+    {
+      'http-equiv': 'content-security-policy',
+      content: `
+        default-src 'self' ${CONFIG.network.rpcUrl} ${CONFIG.subgraphs.exchange} ${CONFIG.subgraphs.farming} ${CONFIG.subgraphs.staking} ${CONFIG.subgraphs.snapshot};
+        script-src 'self';
+        style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/;
+        font-src 'self' https://fonts.gstatic.com/;
+        img-src 'self';
+        frame-src 'self';
+      `,
+    },
+  ],
   link: [
     {
       rel: 'icon',

diff --git a/src/components/WalletConnectButton.vue b/src/components/WalletConnectButton.vue
@@ -2,19 +2,40 @@
 const props = withDefaults(
   defineProps<{
     size?: 'sm' | 'md' | 'lg'
+    type?: 'primary' | 'secondary'
   }>(),
-  { size: 'sm' },
+  {
+    size: 'sm',
+    type: 'primary',
+  },
 )
 
 const dexStore = useDexStore()
 </script>
 
 <template>
   <KlayButton
-    type="primary"
+    class="button"
+    :type="type"
     :size="props.size"
     @click="dexStore.openModal = true"
   >
     Connect Wallet
   </KlayButton>
 </template>
+
+<style lang="scss" scoped>
+@use '@/styles/vars';
+
+.button.s-button_type_secondary {
+  background-color: vars.$blue-light3;
+  color: vars.$blue;
+  box-shadow: none;
+  &:hover {
+    background-color: vars.$blue-light4;
+  }
+  &:active {
+    background-color: vars.$blue-light4;
+  }
+}
+</style>
diff --git a/src/components/common/KlayButton.vue b/src/components/common/KlayButton.vue
@@ -30,7 +30,7 @@ import { SButton } from '@soramitsu-ui/ui'
     }
   }
   &_type_primary.s-button_disabled {
-    background: vars.$gray4;
+    background-color: vars.$gray4;
   }
   &_type_secondary {
     background: vars.$white;

diff --git a/src/core/domain/swap.ts b/src/core/domain/swap.ts
@@ -1,13 +1,11 @@
 import type { Deadline } from '../types'
 import { computeTransactionFee, deadlineFiveMinutesFromNow } from '../utils'
-import { Fraction, Percent, Trade, Wei } from '../entities'
+import { Percent, Trade, Wei } from '../entities'
 import CommonContracts from './CommonContracts'
 import { Agent } from './agent'
 import { IsomorphicOverrides, TransactionObject } from '../isomorphic-contract'
 import invariant from 'tiny-invariant'
-import { Opaque, Simplify } from 'type-fest'
-import BigNumber from 'bignumber.js'
-import { BigNumber as EthersBigNumber } from 'ethers'
+import { Simplify } from 'type-fest'
 import { MAX_UINT256, isNativeToken } from '../const'
 import { match } from 'ts-pattern'
 import { SlippagePercent, adjustDown, adjustUp, parseSlippage } from '../slippage'

diff --git a/src/modules/ModuleGovernance/List/Wrap.vue b/src/modules/ModuleGovernance/List/Wrap.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts" name="ModuleGovernanceListWrap">
 import { Sorting } from '../types'
+import CONFIG from '~config'
 
 const { t } = useI18n()
 const vBem = useBemClass()
@@ -13,11 +14,34 @@ const sortingOptions = computed(() => {
     label: t(`ModuleGovernanceWrap.sorting.options.${option}`),
   }))
 })
+
+const createProposalHref = computed(() => {
+  return `https://snapshot.org/#/${CONFIG.snapshotSpace}/create/0`
+})
 </script>
 
 <template>
   <div v-bem>
-    <div class="flex flex-wrap items-center gap-3 mx-4 md:mx-6 py-4 md:h-74px">
+    <div class="flex flex-wrap items-center gap-x-4 gap-y-2 mx-4 md:mx-6 py-4 md:h-74px">
+      <div class="flex justify-end lt-md:w-full md:order-1">
+        <a
+          class="lt-md:hidden"
+          target="_blank"
+          :href="createProposalHref"
+        >
+          <KlayButton type="primary"> Create Proposal </KlayButton>
+        </a>
+        <a
+          class="md:hidden"
+          target="_blank"
+          :href="createProposalHref"
+        >
+          <KlayButton
+            type="primary"
+            size="sm"
+          > Create Proposal </KlayButton>
+        </a>
+      </div>
       <KlaySwitch
         v-model="onlyActive"
         v-bem="'only-active'"
@@ -28,10 +52,7 @@ const sortingOptions = computed(() => {
         class="ml-auto"
         :options="sortingOptions"
       />
-      <SearchFilter
-        v-model="searchQuery"
-        class="ml-2"
-      />
+      <SearchFilter v-model="searchQuery" />
     </div>
     <slot />
   </div>

diff --git a/src/modules/ModuleGovernance/List/index.vue b/src/modules/ModuleGovernance/List/index.vue
@@ -16,14 +16,17 @@ const showViewMore = ref(true)
 const governanceStore = useGovernanceStore()
 const { onlyActive, searchQuery, sorting } = toRefs(governanceStore)
 
-const ProposalsQuery = useProposalsQuery(
-  computed(() => ({
-    onlyActive: onlyActive.value,
-    skip: 0,
-    orderBy: sorting.value,
-    query: searchQuery.value,
-  })),
-)
+const proposalsQueryProps = computed(() => ({
+  onlyActive: onlyActive.value,
+  skip: 0,
+  orderBy: sorting.value,
+  query: searchQuery.value,
+}))
+watch(proposalsQueryProps, () => {
+  page.value = 1
+})
+
+const ProposalsQuery = useProposalsQuery(proposalsQueryProps)
 const rawProposals = computed(() => {
   return ProposalsQuery.result.value?.proposals ?? null
 })

diff --git a/src/modules/ModuleGovernance/Proposal/Votes.vue b/src/modules/ModuleGovernance/Proposal/Votes.vue
@@ -140,8 +140,11 @@ function viewMore() {
       border-top: 1px solid vars.$gray5
     &-voter, &-vp
       width: calc(50% - 150px)
+    &-voter
+      min-width: 65px
     &-vp
-      text-align: right
+      display: flex
+      justify-content: flex-end
   &__view-more
     display: flex
     justify-content: center

diff --git a/src/pages/assets/index.vue b/src/pages/assets/index.vue
@@ -3,6 +3,7 @@ import { storeToRefs } from 'pinia'
 import { KlayIconArrowDown_2, KlayIconRefresh } from '~klay-icons'
 import { RouteName, Tab } from '@/types'
 import TheTokensApiProvider from '@/components/TheTokensApiProvider.vue'
+import WalletConnectButton from '@/components/WalletConnectButton.vue'
 import { WRAP_HEIGHT } from '@/modules/ModuleAssets/const'
 
 const AssetsTabs = {
@@ -58,9 +59,18 @@ const onAssetDetails = computed(() => tab.value === null)
     >
       <div
         v-if="!account"
-        class="p-4 text-center"
+        class="flex flex-col h-full p-4"
       >
-        Connect Wallet
+        <h1 class="py-0.5 text-lg font-bold">
+          Assets
+        </h1>
+        <h1 class="flex-1 flex justify-center items-center text-lg font-bold">
+          Connect wallet to view assets
+        </h1>
+        <WalletConnectButton
+          type="secondary"
+          size="lg"
+        />
       </div>
 
       <template v-else-if="onAssetDetails">