Merge branch 'main' into 226-change-to-sft-roles-page

gildlab · Aug 4, 2023 · e849859 · e849859
2 parents fe7340a + b98554b
commit e849859
Show file tree

Hide file tree

Showing 30 changed files with 1,867 additions and 227 deletions.
diff --git a/src/app.css b/src/app.css
@@ -61,6 +61,9 @@ body {
     cursor: pointer;
     padding: 0 30px;
     background: #9D7334;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .btn-solid:hover {
@@ -224,6 +227,9 @@ li {
 }
 
 .default-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     box-sizing: border-box;
     padding: 0 18px;
     gap: 10px;
@@ -361,11 +367,11 @@ li {
 /* Style the indicator (dot/circle) */
 .check-container .checkmark:after {
     position: absolute;
-    left: 22.42%;
-    top: -5px;
     bottom: 0;
     color: #ffffffff;
     content: "\2714";
+    left: 3px;
+    top: -7px;
 }
 
 .check-box-label {
@@ -455,6 +461,38 @@ li {
 }
 
 
+/* Add dots styling */
+.dots {
+    white-space: nowrap;
+    overflow: hidden;
+    margin-left: 15px;
+}
+
+.dots::after {
+    font-size: 10px;
+    color: #D2D2D2;
+    content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . "; /* Add as many dots as you want */
+}
+
+.card-header {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    border-bottom-width: 1px;;
+    padding: 13px 0;
+    gap: 20px;
+}
+
+.card-content{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 630px;
+    min-height: 300px;
+    padding: 24px 60px 60px 60px
+}
+
 @media (prefers-color-scheme: light) {
 }
 

diff --git a/src/assets/icons/asset_list.svg b/src/assets/icons/asset_list.svg
diff --git a/src/assets/icons/asset_list_dark.svg b/src/assets/icons/asset_list_dark.svg
diff --git a/src/assets/icons/sft_create.svg b/src/assets/icons/sft_create.svg
diff --git a/src/components/BreadCrumbs.svelte b/src/components/BreadCrumbs.svelte
@@ -4,7 +4,7 @@
 
     function isLast(elem) {
         let lastElement = $breadCrumbs[$breadCrumbs.length - 1];
-        return elem.path === lastElement.path
+        return elem.id === lastElement.id
     }
 
     function cleanOutBreadCrumbs(path) {

diff --git a/src/components/DefaultFrame.svelte b/src/components/DefaultFrame.svelte
@@ -7,18 +7,14 @@
     }
     let hasSlotBack = false; // Initialize the slot flag to false
 
-    // Check if the slot is provided from the parent component
-    $: {
-        hasSlotBack = !!$$slots.back_button;
-    }
 </script>
 
 <div class="default-frame {hasSlotBack?'pt-2':'11'}">
-  <div class="display-flex justify-end">
+  <div class="display-flex justify-end items-center">
     <div class="{hasSlot? 'mb-5': ''}">
       <slot name="header_buttons"></slot>
     </div>
-    <div class="{hasSlotBack? 'mb-2': ''}">
+    <div class="mb-5">
       <slot name="back_button"></slot>
     </div>
   </div>
@@ -37,7 +33,7 @@
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        padding: 30px 60px;
+        padding: 20px 40px;
     }
 
 </style>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -1,5 +1,5 @@
 <script>
-    import {account, activeNetwork, pageTitle} from "../scripts/store.js";
+    import {account, activeNetwork, pageTitle, titleIcon} from "../scripts/store.js";
     import {icons} from "../scripts/assets.js";
     import networks from "../scripts/networksConfig.js";
     import {createEventDispatcher} from "svelte";
@@ -53,14 +53,18 @@
 <div class="{$account ? 'header' : ''} flex w-full h-14 justify-between pr-12 items-center font-bold">
   {#if $account}
     <div class="w-1/3"></div>
-    <div class="page-title">{$pageTitle}</div>
+    <div class="page-title">
+      {#if $titleIcon}
+        <img src={$titleIcon} alt="icon"/>
+      {/if}
+      {$pageTitle}</div>
     <div class="flex justify-end w-1/3 whitespace-nowrap">
       <HeaderDropdown triggerIcon={icons[$activeNetwork?.icon]}
                       triggerLabel={$activeNetwork?.displayName  || 'Supported networks'}
                       items={networks} on:select={handleNetworkSelect}></HeaderDropdown>
 
       <HeaderDropdown triggerLabel={formatAddress($account)}
-                      items={accountMenuOptions} on:select={handleAccountMenuOptionsSelect}>
+                      items={accountMenuOptions} on:select={handleAccountMenuOptionsSelect} triggerIcon="">
       </HeaderDropdown>
     </div>
     {#if location && (location !== "/" && location !== "#")}
@@ -88,6 +92,10 @@
         font-style: normal;
         font-weight: 700;
         line-height: normal;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        justify-content: center;
     }
 
 </style>

diff --git a/src/components/Pagination.svelte b/src/components/Pagination.svelte
@@ -75,26 +75,29 @@
   <div class="showing">Showing <span class="font-bold">{showingStart}-{showingEnd}</span> of
     <span class="font-bold">{dataLength}</span>
   </div>
-  <slot name="actions"></slot>
-  <div class="pagination">
-    <button on:click={previousPage} disabled={currentPage === 1} class="previous-button">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M15.5 19L9.20711 12.7071C8.81658 12.3166 8.81658 11.6834 9.20711 11.2929L15.5 5" stroke="#9D7334"
-              stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    </button>
-    {#each pagesArray as page, i}
-      <div on:click={()=>{setPage(page)}}
-           class="pagination-button {i===pagesArray.length-1? 'last':''} {page===currentPage ? 'active':''}">{page}</div>
-    {/each}
-    <button class="next-button" on:click={nextPage} disabled={currentPage === totalPages}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8.5 19L14.7929 12.7071C15.1834 12.3166 15.1834 11.6834 14.7929 11.2929L8.5 5" stroke="#9D7334"
-              stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    </button>
-    <div class="page-button"></div>
+  <div class="flex items-center justify-between gap-5">
+    <slot name="actions"></slot>
+    <div class="pagination">
+      <button on:click={previousPage} disabled={currentPage === 1} class="previous-button">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M15.5 19L9.20711 12.7071C8.81658 12.3166 8.81658 11.6834 9.20711 11.2929L15.5 5" stroke="#9D7334"
+                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+      {#each pagesArray as page, i}
+        <div on:click={()=>{setPage(page)}}
+             class="pagination-button {i===pagesArray.length-1? 'last':''} {page===currentPage ? 'active':''}">{page}</div>
+      {/each}
+      <button class="next-button" on:click={nextPage} disabled={currentPage === totalPages}>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8.5 19L14.7929 12.7071C15.1834 12.3166 15.1834 11.6834 14.7929 11.2929L8.5 5" stroke="#9D7334"
+                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+      <div class="page-button"></div>
+    </div>
   </div>
+
 </div>
 
 <style>

diff --git a/src/components/ReceiptData.svelte b/src/components/ReceiptData.svelte
@@ -8,12 +8,12 @@
         getSubgraphData,
         toSentenceCase
     } from '../scripts/helpers.js';
-    import {activeNetwork, vault} from '../scripts/store.js';
-    import {RECEIPT_INFORMATION_QUERY} from '../scripts/queries.js';
-    import {onMount} from 'svelte';
+    import {activeNetwork, selectedReceipt, vault} from '../scripts/store.js';
+    import {RECEIPT_INFORMATIONS_QUERY} from '../scripts/queries.js';
     import SftLoader from './SftLoader.svelte';
     import axios from 'axios';
     import {ethers} from 'ethers';
+    import {onMount} from 'svelte';
 
     let loading = false
     let ipfsLoading = false
@@ -23,13 +23,13 @@
     let schema = {}
     let fileUploadProperties = []
     export let receipt;
-
+    export let revisionId;
 
     $: schemaHash && getSchemaFileProps()
-    $: $activeNetwork && getReceiptData()
+    $: revisionId && getReceiptData()
 
-    onMount(async () => {
-        await getReceiptData(receipt)
+    onMount(() => {
+        getReceiptData()
     })
 
     async function getSchema() {
@@ -59,7 +59,7 @@
     }
 
 
-    async function getReceiptData(receipt) {
+    async function getReceiptData() {
         let variables
         if (!receipt) {
             let receiptId = $vault.address + "-" + window.location.hash.split("/")[1]
@@ -68,15 +68,20 @@
             variables = {id: receipt.id}
         }
         loading = true;
-        let resp = await getSubgraphData($activeNetwork, variables, RECEIPT_INFORMATION_QUERY, 'receipt')
+        let resp = await getSubgraphData($activeNetwork, variables, RECEIPT_INFORMATIONS_QUERY, 'receipt')
         let receiptInfo = ""
         let information = ""
 
         if (resp && resp.data && resp.data.receipt) {
+            selectedReceipt.update(() => {
+                return {...resp.data, schema: localStorage.getItem("selectedReceiptSchema")}
+            })
             ipfsLoading = true;
             receiptInfo = resp.data.receipt.receiptInformations
             if (receiptInfo.length) {
-                information = receiptInfo[0].information
+                information = receiptInfo.find(r => r.id === revisionId) ?
+                    receiptInfo.find(r => r.id === revisionId).information :
+                    receiptInfo[0].information
 
                 let cborDecodedInformation = cborDecode(information.slice(18))
                 let structure = bytesToMeta(cborDecodedInformation[0].get(0), "json")
@@ -106,7 +111,7 @@
 </script>
 <div class="">
   {#each displayInformation as info}
-    <div class="receipt-row">
+    <div class="receipt-row flex justify-between font-bold text-left w-full">
 
       {#if fileUploadProperties.includes(info.label)}
             <span class="underline btn-hover">
@@ -116,13 +121,9 @@
             </span>
       {/if}
 
-      {#if !fileUploadProperties.includes(info.label)} <span>{info.label}</span>
-        {#if isAddress(info.value)}
-          <div>{formatAddress(info.value)}</div>
-        {/if}
-        {#if !isAddress(info.value)}
-          <div>{info.value}</div>
-        {/if}
+      {#if !fileUploadProperties.includes(info.label)}
+        <span class="w-2/3 whitespace-nowrap flex pr-3">{info.label} <span class="dots"></span> </span>
+        <span class="w-1/3">{isAddress(info.value) ? formatAddress(info.value) : info.value}</span>
       {/if}
 
     </div>
@@ -143,6 +144,10 @@
         justify-content: space-between;
     }
 
+    .receipt-row span {
+        text-align: start;
+    }
+
     .ipfs-hash {
         display: flex;
         align-items: center;