update TransactionDetails component

sora-xor · Mar 19, 2024 · bc744c5 · bc744c5
1 parent 97de72f
commit bc744c5
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 100 deletions.
diff --git a/public/env.json b/public/env.json
@@ -1,12 +1,12 @@
 {
   "BASE_API_URL": "",
   "API_KEYS": {
-    "moonpay": "pk_live_LEyw9bsfK0n0v3cdHUaZS1z0qYdDRDu6",
-    "x1ex": "sprkwdgt-WUQBA5U2",
-    "etherscan": "XBS98SSP8J5FNS7EKQHMHRU94Z2YG7HFFK",
-    "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0NTU0MDQ4MTQ5OSwibmFtZSI6Im5mdC1zdG9yYWdlLXByb2QifQ.CnW1bq8eWEYQxA6cggGMeAqCTozCJZ6s2oL_bssqnmc",
-    "googleApi": "AIzaSyCazdRheGfy7_bwVi0m5UgUYjz7l0c54nM",
-    "googleClientId": "728106973134-pfmcagr0t4lchepajcp7llp7f1t09lf0.apps.googleusercontent.com"
+    "moonpay": "pk_test_4ASGxHKGpLPE6sdQq1V3QjtpUFSpWLk",
+    "x1ex": "sprkwdgt-WYL6QBNC",
+    "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw",
+    "etherscan": "YBR7IWEBEXFICT8M7GRV77NBX4AXJ9T53H",
+    "googleApi": "AIzaSyAzj7JxB-j8pJixtt6JSqLPhG0y02CGYOU",
+    "googleClientId": "498393666682-9eeiioee0a2sgb1671e9qir645f9n6cv.apps.googleusercontent.com"
   },
   "FEATURE_FLAGS": {
     "moonpay": true,
@@ -15,55 +15,44 @@
     "soraCard": false,
     "orderBook": true
   },
-  "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-prod",
-  "SUBSQUID_ENDPOINT": "",
+  "FAUCET_URL": "https://faucet.dev.sora2.tachi.soramitsu.co.jp/",
   "DEFAULT_NETWORKS": [
     {
-      "chain": "SORA",
-      "name": "SORA Parliament Ministry of Finance #1",
-      "address": "wss://ws.mof.sora.org",
+      "chain": "SORA-dev Testnet #1",
+      "name": "SORA",
+      "address": "wss://ws.framenode-1.r0.dev.sora2.soramitsu.co.jp",
       "location": "GB"
     },
     {
-      "chain": "SORA",
-      "name": "SORA Parliament Ministry of Finance #2",
-      "address": "wss://mof2.sora.org",
+      "chain": "SORA-dev Testnet #2",
+      "name": "SORA",
+      "address": "wss://ws.framenode-2.r0.dev.sora2.soramitsu.co.jp",
       "location": "SG"
     },
     {
-      "chain": "SORA",
-      "name": "SORA Parliament Ministry of Finance #3",
-      "address": "wss://mof3.sora.org",
-      "location": "DE"
-    },
-    {
-      "chain": "SORA",
-      "name": "OnFinality",
-      "address": "wss://sora.api.onfinality.io/public-ws",
-      "location": "JP"
-    },
-    {
-      "chain": "SORA",
-      "name": "Soramitsu",
-      "address": "wss://ws.framenode-0.a1.sora2.soramitsu.co.jp",
-      "location": "IE"
+      "chain": "SORA-dev Testnet #3",
+      "name": "SORA",
+      "address": "wss://ws.framenode-3.r0.dev.sora2.soramitsu.co.jp"
     }
   ],
-  "NETWORK_TYPE": "Prod",
-  "CHAIN_GENESIS_HASH": "0x7e4e32d0feafd4f9c9414b0be86373f9a1efa904809b683453a9af6856d38ad5",
+  "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-dev",
+  "SUBSQUID_ENDPOINT": "https://squid.subsquid.io/sora-dev/v/v1/graphql",
+  "NETWORK_TYPE": "Dev",
+  "CHAIN_GENESIS_HASH": "",
+  "EVM_NETWORKS_IDS": [97, 1001],
   "SUB_NETWORKS": {
-    "Kusama": "wss://kusama-rpc.dwellir.com",
-    "KusamaSora": "wss://ws.parachain-collator-2.c2.sora2.soramitsu.co.jp",
-    "Polkadot": "wss://polkadot-rpc.dwellir.com",
-    "PolkadotSora": "wss://ws.parachain-collator-3.pc3.sora2.soramitsu.co.jp"
+    "Rococo": "wss://ws.relaychain-node-1.r1.dev.sora2.soramitsu.co.jp",
+    "RococoSora": "wss://ws.parachain-collator-1.c1.dev.sora2.soramitsu.co.jp",
+    "Kusama": "wss://kusama-rpc.polkadot.io",
+    "KusamaSora": "wss://ws.parachain-collator-1.c1.sora2.soramitsu.co.jp",
+    "Polkadot": "wss://rpc.polkadot.io"
   },
-  "EVM_NETWORKS_IDS": [56, 8217],
   "ETH_BRIDGE": {
-    "evmNetwork": 1,
+    "evmNetwork": 11155111,
     "address": {
-      "XOR": "0xc08edf13be9b9cc584c5da8004ce7e6be63c1316",
-      "VAL": "0xd1eeb2f30016fffd746233ee12c486e7ca8efef1",
-      "OTHER": "0x313416870A4da6F12505a550B67bB73c8E21D5d3"
+      "XOR": "0x7F62CCd5566c64cfb785f73B3c19653D93e5414c",
+      "VAL": "0xe2C58207Cc6dF5565044eccffdf7aeb2DAe89647",
+      "OTHER": "0x401c6A23a44f72151D90878DF0aa86E77fBde0e2"
     }
   }
 }
diff --git a/src/components/pages/Kensetsu/BurnDialog.vue b/src/components/pages/Kensetsu/BurnDialog.vue
@@ -78,7 +78,6 @@ import type { AccountAsset, Asset } from '@sora-substrate/util/build/assets/type
     DialogBase: components.DialogBase,
     TokenLogo: components.TokenLogo,
     InfoLine: components.InfoLine,
-    SwapTransactionDetails: lazyComponent(Components.SwapTransactionDetails),
     TokenInput: lazyComponent(Components.TokenInput),
   },
 })

diff --git a/src/components/pages/Swap/Widget/Form.vue b/src/components/pages/Swap/Widget/Form.vue
@@ -107,11 +107,7 @@
         </template>
       </s-button>
 
-      <swap-transaction-details
-        v-if="areTokensSelected && !hasZeroAmount"
-        class="info-line-container"
-        :info-only="false"
-      />
+      <swap-transaction-details v-if="areTokensSelected && !hasZeroAmount" :info-only="false" />
       <select-token
         :visible.sync="showSelectTokenDialog"
         :connected="isLoggedIn"

diff --git a/src/components/shared/TransactionDetails.vue b/src/components/shared/TransactionDetails.vue
@@ -2,16 +2,22 @@
   <div v-if="infoOnly">
     <slot />
   </div>
-  <div v-else class="transaction-details-wrapper">
-    <s-collapse>
-      <s-collapse-item>
-        <template #title>
-          <span>{{ t('transactionDetailsText') }}</span>
-        </template>
-        <slot></slot>
-      </s-collapse-item>
-    </s-collapse>
-  </div>
+  <el-popover
+    v-else
+    v-model="visible"
+    :visible-arrow="false"
+    placement="bottom"
+    popper-class="transaction-details-popper"
+    trigger="click"
+  >
+    <template #reference>
+      <div :class="['transaction-details', { visible }]">
+        <span>{{ t('transactionDetailsText') }}</span>
+        <s-icon :name="icon" size="16px" class="transaction-details-icon" />
+      </div>
+    </template>
+    <slot />
+  </el-popover>
 </template>
 
 <script lang="ts">
@@ -22,62 +28,47 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
 @Component
 export default class TransactionDetails extends Mixins(TranslationMixin) {
   @Prop({ default: true, type: Boolean }) readonly infoOnly!: boolean;
+
+  visible = false;
+
+  get icon(): string {
+    return this.visible ? 'arrows-chevron-top-24' : 'arrows-chevron-bottom-24';
+  }
 }
 </script>
 
 <style lang="scss">
-.transaction-details-wrapper {
-  .el-collapse-item__header {
-    display: flex;
-    text-transform: uppercase;
-    font-weight: 400;
-  }
-
-  .el-collapse-item__content {
-    padding-bottom: 0;
-  }
+.transaction-details-popper.el-popover.el-popper {
+  @include popper-content;
+  min-width: 420px;
+}
+</style>
 
-  .el-collapse-item__wrap {
-    margin-top: $inner-spacing-medium;
-  }
+<style lang="scss" scoped>
+.transaction-details {
+  cursor: pointer;
+  display: flex;
+  gap: $inner-spacing-tiny;
+  margin-top: $inner-spacing-medium;
 
-  .el-collapse.neumorphic .el-icon-arrow-right {
-    all: initial;
-    * {
-      all: unset;
-    }
+  font-size: var(--s-font-size-extra-small);
+  font-weight: 400;
+  text-transform: uppercase;
 
-    transition: transform 0.3s;
-    color: var(--s-color-base-content-tertiary);
-    margin-left: 7px;
-    height: 16px;
-    line-height: 1;
-    width: 13px;
-    position: relative;
+  &.visible {
+    color: var(--s-color-theme-accent);
   }
 
-  .el-collapse-item__header {
-    display: inline-flex;
-    line-height: 13px;
-    height: 14px;
-    font-size: 13px;
+  &:hover {
+    color: var(--s-color-theme-accent-hover);
 
-    .el-icon-arrow-right {
-      position: relative;
-
-      &:hover {
-        cursor: pointer;
-      }
+    .transaction-details-icon {
+      color: var(--s-color-base-content-secondary);
     }
   }
 
-  .el-collapse-item > div:first-child {
-    display: flex;
-    justify-content: center;
-  }
-
-  .info-line .el-tooltip {
-    margin-bottom: 4px !important;
+  &-icon {
+    @include icon-styles;
   }
 }
 </style>