249 new page certify

cypress/integration/components/AuditHistory.cy.js

@@ -0,0 +1,16 @@
+import AuditHistory from '../../../src/routes/AuditHistory.svelte'
+
+
+describe('Roles', () => {
+
+    beforeEach(() => {
+        cy.mount(AuditHistory);
+            // cy.get('.waiting-state').should('not.exist');
+    });
+
+    it(`Shows info text`, () => {
+        cy.get('.error').should('not.exist');
+        cy.get('.success').should('exist');
+    });
+
+});

cypress/integration/components/Certify.cy.js

@@ -0,0 +1,16 @@
+import Certify from '../../../src/routes/Certify.svelte'
+
+
+describe('Roles', () => {
+
+    beforeEach(() => {
+        cy.mount(Certify);
+            // cy.get('.waiting-state').should('not.exist');
+    });
+
+    it(`Shows info text`, () => {
+        cy.get('.error').should('not.exist');
+        cy.get('.success').should('exist');
+    });
+
+});

src/App.svelte

@@ -1,8 +1,70 @@
 <script>
     import Default from "./lib/Default.svelte";
+    import Header from './components/Header.svelte';
+    import {activeNetwork, account, pageTitle} from './scripts/store.js';
+    import {ethers} from 'ethers';
+    import BreadCrumbs from './components/BreadCrumbs.svelte';
+    import {router} from 'yrv';
+
+    async function handleNetworkSelect(event) {
+        let activeNet = event.detail.selected;
+        if ($activeNetwork && activeNet.chainId === $activeNetwork.chainId) {
+            return;
+        }
+        let chainId = ethers.utils.hexValue(activeNet.chainId);
+        try {
+            await window.ethereum.request({
+                method: "wallet_switchEthereumChain",
+                params: [{chainId}]
+            });
+        } catch (switchError) {
+            // This error code indicates that the chain has not been added to MetaMask.
+            if (switchError.code === 4902) {
+                try {
+                    await window.ethereum.request({
+                        method: "wallet_addEthereumChain",
+                        params: [
+                            {
+                                chainId: chainId,
+                                chainName: activeNet.displayName,
+                                rpcUrls: [activeNet.rpcUrl],
+                                blockExplorerUrls: [activeNet.blockExplorer],
+                                nativeCurrency: {
+                                    name: activeNet.currencySymbol,
+                                    symbol: activeNet.currencySymbol,
+                                    decimals: 18
+                                }
+                            }
+                        ]
+                    });
+                } catch (addError) {
+                    // handle "add" error
+                }
+            }
+            // handle other "switch" errors
+        }
+    }
+
+
+    let location = $router.path
+
+    router.subscribe(async e => {
+            //reset pageTitle
+            if (!e.initial) {
+                location = e.path
+            }
+        }
+    )
 </script>
 
 <main>
+  {#if ($account)}
+    <Header on:select={handleNetworkSelect}></Header>
+    {#if location && (location !== "/" && location !== "#")}
+      <BreadCrumbs/>
+    {/if}
+  {/if}
+
   <Default/>
 </main>
 

src/app.css

@@ -404,6 +404,7 @@ li {
 
 .dropdown .dropdown-menu {
     z-index: 1;
+    min-width: 100%;
     -webkit-box-shadow: 0 10px 5px -3px rgba(179, 179, 179, 1);
     -moz-box-shadow: 0 10px 5px -3px rgba(179, 179, 179, 1);
     box-shadow: 0 10px 5px -3px rgba(179, 179, 179, 1);
@@ -465,7 +466,8 @@ li {
 .dots {
     white-space: nowrap;
     overflow: hidden;
-    margin-left: 15px;
+    margin-left: 5px;
+    margin-right: 5px;
 }
 
 .dots::after {
@@ -490,7 +492,8 @@ li {
     justify-content: space-between;
     width: 630px;
     min-height: 300px;
-    padding: 24px 60px 60px 60px
+    padding: 24px 60px 60px 60px;
+    text-align: left;
 }
 
 .link-icon {
@@ -503,6 +506,11 @@ li {
     cursor: pointer;
 }
 
+.receipts {
+    width: 100%;
+    margin-right: 20px;
+}
+
 .tooltip-text {
     visibility: hidden;
     background-color: #555;

src/components/BreadCrumbs.svelte

@@ -15,24 +15,33 @@
     }
 
 </script>
-
-<div class="breadcrumbs flex items-center fixed w-100">
-  {#each $breadCrumbs as breadCrumb}
-    <span class="cursor-pointer" on:click={()=>{cleanOutBreadCrumbs(breadCrumb.path)}}>{breadCrumb.label}</span>
-    {#if !isLast(breadCrumb)}
-      <div class="mx-6">
-        <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd"
-                d="M0.292787 10.2064C0.105316 10.0189 0 9.7646 0 9.49943C0 9.23427 0.105316 8.97996 0.292787 8.79243L3.58579 5.49943L0.292787 2.20643C0.110629 2.01783 0.00983372 1.76523 0.0121121 1.50303C0.0143906 1.24083 0.11956 0.99002 0.304968 0.804612C0.490376 0.619204 0.741189 0.514035 1.00339 0.511757C1.26558 0.509478 1.51818 0.610273 1.70679 0.792431L5.70679 4.79243C5.89426 4.97996 5.99957 5.23427 5.99957 5.49943C5.99957 5.7646 5.89426 6.0189 5.70679 6.20643L1.70679 10.2064C1.51926 10.3939 1.26495 10.4992 0.999786 10.4992C0.734622 10.4992 0.480314 10.3939 0.292787 10.2064Z"
-                fill="#9CA3AF"/>
-        </svg>
-      </div>
-    {/if}
-  {/each}
+<div class="breadcrumbs-container">
+  <div class="breadcrumbs flex items-center fixed w-100">
+    {#each $breadCrumbs as breadCrumb}
+      <span class="cursor-pointer" on:click={()=>{cleanOutBreadCrumbs(breadCrumb.path)}}>{breadCrumb.label}</span>
+      {#if !isLast(breadCrumb)}
+        <div class="mx-6">
+          <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M0.292787 10.2064C0.105316 10.0189 0 9.7646 0 9.49943C0 9.23427 0.105316 8.97996 0.292787 8.79243L3.58579 5.49943L0.292787 2.20643C0.110629 2.01783 0.00983372 1.76523 0.0121121 1.50303C0.0143906 1.24083 0.11956 0.99002 0.304968 0.804612C0.490376 0.619204 0.741189 0.514035 1.00339 0.511757C1.26558 0.509478 1.51818 0.610273 1.70679 0.792431L5.70679 4.79243C5.89426 4.97996 5.99957 5.23427 5.99957 5.49943C5.99957 5.7646 5.89426 6.0189 5.70679 6.20643L1.70679 10.2064C1.51926 10.3939 1.26495 10.4992 0.999786 10.4992C0.734622 10.4992 0.480314 10.3939 0.292787 10.2064Z"
+                  fill="#9CA3AF"/>
+          </svg>
+        </div>
+      {/if}
+    {/each}
+  </div>
 </div>
+
 <style>
+
+    .breadcrumbs-container {
+        width: 100%;
+        height: 47px;
+        margin-top: 3.5rem;
+    }
+
     .breadcrumbs {
-        z-index: 2;
+        z-index: 1;
         top: 3.5rem;
         margin-left: 203px;
         color: #9D7334;

src/components/Header.svelte

@@ -5,9 +5,6 @@
     import {createEventDispatcher} from "svelte";
     import {formatAddress} from "../scripts/helpers.js";
     import HeaderDropdown from './HeaderDropdown.svelte';
-    import BreadCrumbs from './BreadCrumbs.svelte';
-
-    export let location;
 
     let accountMenuOptions = [
         {
@@ -67,9 +64,6 @@
                       items={accountMenuOptions} on:select={handleAccountMenuOptionsSelect} triggerIcon="">
       </HeaderDropdown>
     </div>
-    {#if location && (location !== "/" && location !== "#")}
-      <BreadCrumbs/>
-    {/if}
   {/if}
 </div>
 

src/components/Navigation.svelte

@@ -163,7 +163,7 @@
     .sft-info {
         width: 22rem;
         margin-left: 12.71rem;
-        margin-top: 3.5rem;
+        margin-top: -2.95rem;
         height: 100%;
         position: fixed;
         z-index: 3;

src/components/Schema.svelte

@@ -8,6 +8,7 @@
     import {navigate} from '../scripts/helpers.js';
 
     export let schema = {}
+    export let title = 'Asset info.'
     const dispatch = createEventDispatcher();
     let username = '';
     let password = '';
@@ -94,7 +95,7 @@
 
 </script>
 {#if schema?.displayName}
-  <span class="title f-weight-700">Asset info.</span>
+  <span class="title f-weight-700">{title}</span>
 
   <SchemaForm schema={schema.schema}></SchemaForm>
   <div class="error">{$schemaError}</div>
@@ -105,8 +106,3 @@
   {/if}
 {/if}
 
-<style>
-    .title {
-        text-align: center;
-    }
-</style>

src/components/Select.svelte

@@ -9,6 +9,7 @@
     export let staticLabel = '';
     export let className;
     export let dropDownClass = '';
+    export let width = '';
     export let expandIcon = icons.expand;
     let selected;
 
@@ -33,17 +34,17 @@
     }
 
 </script>
+<div class="relative">
 
-<div>
   <Dropdown triggerElement={dropdownTrigger}>
-
     <button
       type="button"
       class={`${className} inputSelect btn dropdown-toggle`}
       bind:this={dropdownTrigger}
+      style="{`width : ${width}px`}"
     >
       <slot name="icon"></slot>
-      <span class="select-label">{selected && !staticLabel ? selected : label}</span>
+      <span class="select-label-btn">{selected && !staticLabel ? selected : label}</span>
       {#if showExpand}
         <img class="expand" src={expandIcon} alt="expand"/>
       {/if}
@@ -59,11 +60,17 @@
         </button>
       {/each}
     </div>
+
   </Dropdown>
 </div>
+
 <style>
     /*@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css");*/
 
+    .relative {
+        width: fit-content;
+    }
+
     .btn:focus {
         outline: none;
         box-shadow: none;
@@ -85,9 +92,15 @@
         margin-left: 17px;
     }
 
-    .select-label {
+    .select-label-btn{
         margin-left: 10px;
+
+    }
+
+    .select-label, .select-label-btn {
         width: calc(100% - 15px);
+        white-space: nowrap;
+        overflow: hidden;
     }
 
     .nav-dropdown .dropdown-item {
@@ -149,13 +162,16 @@
         font-size: 16px;
         line-height: 25px;
         color: #000000;
+        width: 100%;
     }
 
     .inputSelect.dropdown {
         max-height: 255px;
         height: auto;
         overflow: auto;
         background-color: #ececec;
+        /*min-width: 360px;*/
+        /*max-width: 360px;*/
         overflow-x: hidden;
     }
 
@@ -165,7 +181,7 @@
         font-weight: 400;
         font-size: 16px;
         line-height: 27px;
-        padding: 1px 0 !important;
+        padding: 1px 10px !important;
     }
 
     .dropdown-item:focus, .dropdown-item:hover {