Mo test 1 (#315)

* feat: expose the commit hash to the suite (#287) * kyb modal adjustment (#290) * kyb modal adjustment * fix clearing user data before closing disclaimer modal * [Dependencies] Skip camino-wallet-sdk (#291) * Skip camino-wallet-sdk * Fallback to false on non-browser node modules * Modify webpack fallbacks --------- Co-authored-by: Rafail Kordonias <[email protected]> * Adjust settings area styling (#295) * adjust settings area styling * fix clearing user data before closing the disclaimer modal --------- Co-authored-by: aeddaqqa <[email protected]> Co-authored-by: Achraf Eddaqqaq <[email protected]> * adjust buildDeposit Tx (#293) Co-authored-by: Achraf Eddaqqaq <[email protected]> * Create multisig alias (#292) * feat: add create multisig alias page * feat: finalize create msig wallet * Skip camino-wallet-sdk * Added a submodule * update caminojs * Fallback to false on non-browser node modules * Modify webpack fallbacks * fix: update the create multisig wallet component * removal of unecessery console * update the create alias components style * show switch wallet button after the creation of the alias * save msig addresses and names in localStorage * Update en.json * feat: await the saving of the msig in localstorage before form reset --------- Co-authored-by: aeddaqqa <[email protected]> Co-authored-by: Achraf Eddaqqaq <[email protected]> Co-authored-by: Rafail Kordonias <[email protected]> * update multisig on network change (#296) * Create/Edit multisig alias (#297) * Edit msig fixes (#298) * fix: update msig infos on pendingtx change * fix: break for if the msigAlias is undefined * fix editing msg with saved keys (#299) * Optional Chaining, P-chain Address Validation, and UI Color Adjustments (#301) * fix: optional chaining to various code segments * feat: introduce validation for p-chain addresses * style: adjust colors for add and remove buttons for improved visibility * Msig fixes (#303) * feat: add a custom notification for insufficient funds error * feat: validate the address and disable buttons when needed --------- Co-authored-by: Achraf Eddaqqaq <[email protected]> Co-authored-by: Rafail Kordonias <[email protected]> Co-authored-by: aeddaqqa <[email protected]> Co-authored-by: Ayoub Agoumi <[email protected]>
chain4travel · Sep 14, 2023 · 29ccf58 · 29ccf58
1 parent f7497cc
commit 29ccf58
Show file tree

Hide file tree

Showing 43 changed files with 21,184 additions and 18,690 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,5 +1,5 @@
 node_modules/
 dist/
 tests/
-camino-wallet-sdk/
+caminojs/
 patches
diff --git a/.gitmodules b/.gitmodules
@@ -1,4 +1,4 @@
-[submodule "camino-wallet-sdk"]
-	path = camino-wallet-sdk
-	url = https://github.com/chain4travel/camino-wallet-sdk.git
+[submodule "caminojs"]
+	path = caminojs
+	url = https://github.com/chain4travel/caminojs
 	branch = dist
diff --git a/.prettierignore b/.prettierignore
@@ -1,4 +1,4 @@
 dist
 node_modules
-camino-wallet-sdk
+caminojs
 patches
diff --git a/camino-wallet-sdk b/camino-wallet-sdk
diff --git a/caminojs b/caminojs
diff --git a/jest.config.js b/jest.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-    modulePathIgnorePatterns: ['camino-wallet-sdk'],
+    modulePathIgnorePatterns: ['caminojs'],
     moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
     transform: {
         '.*\\.(vue)$': '@vue/vue2-jest',

diff --git a/package.json b/package.json
@@ -29,7 +29,8 @@
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-typescript": "^7.18.6",
-        "@c4tplatform/camino-wallet-sdk": "file:camino-wallet-sdk",
+        "@c4tplatform/caminojs": "file:caminojs",
+        "@c4tplatform/vue_components": "^0.2.6",
         "@cypress/grep": "^3.1.4",
         "@cypress/webpack-preprocessor": "^5.17.0",
         "@ethereumjs/common": "^3.0.2",
@@ -99,6 +100,7 @@
         "cypress": "12.5.1",
         "cypress-file-upload": "^4.0.7",
         "deepmerge": "^4.2.2",
+        "dotenv-webpack": "^8.0.1",
         "elliptic": "^6.5.3",
         "eslint": "^5.16.0",
         "eslint-config-prettier": "6.15.0",
@@ -137,7 +139,6 @@
         "reflect-metadata": "0.1.13",
         "register-service-worker": "1.6.2",
         "release-it": "^14.10.0",
-        "@c4tplatform/vue_components": "^0.2.6",
         "sass": "~1.32.6",
         "sass-loader": "^8.0.2",
         "serve": "11.3.2",
@@ -166,6 +167,7 @@
         "vue-virtual-scroll-list": "^2.3.2",
         "vuex": "3.1.2",
         "web3-eth": "1.3.6",
+        "web3": "^1.8.2",
         "webpack": "^5.57.1",
         "webpack-cli": "^5.0.0",
         "webpack-dev-server": "^4.3.1",

diff --git a/src/components/Alert.vue b/src/components/Alert.vue
@@ -0,0 +1,158 @@
+<template>
+    <div class="camino-alert" :class="['camino-alert__' + variant]">
+        <template v-if="variant === 'default'">
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22ZM11 7H13V9H11V7ZM14 17H10V15H11V13H10V11H13V15H14V17Z"
+                    fill="#334155"
+                />
+            </svg>
+        </template>
+        <template v-else-if="variant === 'info'">
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22ZM11 7H13V9H11V7ZM14 17H10V15H11V13H10V11H13V15H14V17Z"
+                    fill="#0085FF"
+                />
+            </svg>
+        </template>
+        <template v-else-if="variant === 'positive'">
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+                    fill="#18B728"
+                />
+            </svg>
+        </template>
+        <template v-else-if="variant === 'warning'">
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path d="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" fill="#E5A21F" />
+            </svg>
+        </template>
+        <template v-else-if="variant === 'negative'">
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z"
+                    fill="#E5431F"
+                />
+            </svg>
+        </template>
+        <div class="camino__alert--content">
+            <div v-if="title" class="camino__alert--title">{{ title }}</div>
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+
+@Component
+export default class Alert extends Vue {
+    @Prop({ default: 'default' }) variant!: 'default' | 'info' | 'positive' | 'warning' | 'negative'
+    @Prop({ default: '' }) title!: string
+}
+</script>
+
+<style lang="scss" scoped>
+.camino-alert {
+    display: flex;
+    max-width: fit-content;
+    padding: 16px;
+    align-items: flex-start;
+    gap: 12px;
+    border-radius: 6px;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+
+    &__content {
+        color: var(--camino-slate-slate-300);
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        flex: 1 0 0;
+    }
+
+    &__title {
+        color: var(--camino-slate-white);
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+    }
+
+    &__default {
+        border: 1px solid var(--camino-slate-slate-300, #cbd4e2);
+        background: var(--camino-slate-slate-100, #f1f5f9);
+    }
+
+    &__info {
+        border: 1px solid rgba(0, 133, 255, 0.5);
+        background: rgba(0, 133, 255, 0.05);
+    }
+
+    &__positive {
+        border: 1px solid rgba(9, 222, 107, 0.5);
+        background: rgba(9, 222, 107, 0.05);
+    }
+
+    &__warning {
+        border: 1px solid var(--camino-warning-border);
+        background: var(--camino-warning-background);
+    }
+
+    &__negative {
+        border: 1px solid rgba(229, 67, 31, 0.5);
+        background: rgba(229, 67, 31, 0.05);
+    }
+
+    svg {
+        min-width: 20px;
+    }
+}
+
+[data-theme='day'] {
+    .camino-alert {
+        &__content {
+            color: var(--camino-slate-slate-700);
+        }
+
+        &__title {
+            color: var(--camino-slate-slate-800);
+        }
+    }
+}
+</style>
diff --git a/src/components/CamInput.vue b/src/components/CamInput.vue
@@ -0,0 +1,91 @@
+<template>
+    <div class="cam-input">
+        <input
+            class="full-width-input"
+            :placeholder="placeholder"
+            :value="value"
+            @input="updateValue"
+            :class="{ error: error }"
+            :disabled="disabled"
+        />
+        <div class="validation-message" v-if="error">
+            <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M10.8333 10.8333H9.16666V5.83332H10.8333M10.8333 14.1667H9.16666V12.5H10.8333M9.99999 1.66666C8.90564 1.66666 7.82201 1.8822 6.81096 2.30099C5.79991 2.71978 4.88125 3.33361 4.10743 4.10743C2.54463 5.67024 1.66666 7.78985 1.66666 9.99999C1.66666 12.2101 2.54463 14.3297 4.10743 15.8925C4.88125 16.6664 5.79991 17.2802 6.81096 17.699C7.82201 18.1178 8.90564 18.3333 9.99999 18.3333C12.2101 18.3333 14.3297 17.4553 15.8925 15.8925C17.4553 14.3297 18.3333 12.2101 18.3333 9.99999C18.3333 8.90564 18.1178 7.82201 17.699 6.81096C17.2802 5.79991 16.6664 4.88125 15.8925 4.10743C15.1187 3.33361 14.2001 2.71978 13.189 2.30099C12.178 1.8822 11.0943 1.66666 9.99999 1.66666Z"
+                    fill="#E5431F"
+                />
+            </svg>
+            <p class="err">
+                {{ errorMessage }}
+            </p>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class CamInput extends Vue {
+    @Prop({ default: '' }) placeholder!: string
+    @Prop({ default: false }) error!: boolean
+    @Prop({ default: '' }) errorMessage!: string
+    @Prop({ default: '' }) value!: string
+    @Prop({ default: false }) disabled!: boolean
+    updateValue(event: Event) {
+        this.$emit('input', (event.target as HTMLInputElement).value)
+    }
+}
+</script>
+
+<style scoped>
+.cam-input {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+input {
+    padding: 10px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--camino-slate-slate-600);
+    &:disabled {
+        border: 1px solid var(--camino-slate-slate-600) !important;
+    }
+}
+
+.full-width-input {
+    /* flex: 1; */
+    &:focus {
+        border-color: var(--camino-brand-too-blue-to-be-true);
+        box-shadow: 0px 0px 0px 3px var(--camino-brand-too-blue-to-be-true-100);
+    }
+    &.error {
+        border-color: var(--camino-brand-error);
+    }
+    &.error:focus {
+        border-color: var(--camino-brand-error);
+        box-shadow: 0px 0px 0px 3px var(--camino-brand-error-100);
+    }
+}
+
+.validation-message {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    p {
+        color: var(--camino-brand-error, #e5431f);
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+    }
+}
+</style>
diff --git a/src/components/SidePanels/History/ViewTypes/ImportExport.vue b/src/components/SidePanels/History/ViewTypes/ImportExport.vue
@@ -11,6 +11,8 @@
     </div>
 </template>
 <script lang="ts">
+import { bintools } from '@/AVA'
+import { chainIdFromAlias, bnToBig } from '@/helpers/helper'
 import { Vue, Component, Prop } from 'vue-property-decorator'
 import { ITransactionData } from '@/store/modules/history/types'
 import { ava } from '@/AVA'
@@ -52,19 +54,8 @@ export default class ImportExport extends Vue {
     // }
 
     get chainAlias() {
-        let chainId
-        if (this.isExport) {
-            chainId = this.fromChainId
-        } else {
-            chainId = this.destinationChainId
-        }
-
-        if (chainId === ava.PChain().getBlockchainID()) {
-            return 'P'
-        } else if (chainId === ava.XChain().getBlockchainID()) {
-            return 'X'
-        }
-        return chainId
+        let chainId = this.isExport ? this.fromChainId : this.destinationChainId
+        return chainIdFromAlias(chainId)
     }
 
     get amt(): BN {

diff --git a/src/components/misc/Version.vue b/src/components/misc/Version.vue
@@ -0,0 +1,12 @@
+<template>
+    <p class="text">{{ version }}</p>
+</template>
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+@Component({
+    name: 'version',
+})
+export default class Version extends Vue {
+    version = process.env.GIT_COMMIT_HASH
+}
+</script>
diff --git a/src/components/misc/mountVersion.ts b/src/components/misc/mountVersion.ts
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Version from './Version.vue'
+
+export const mountVersionComponent = (el: string) => {
+    const app = new Vue({
+        render: (createElement) => {
+            return createElement(Version)
+        },
+    })
+    app.$mount(el)
+}