update styling

UMAprotocol · Jan 26, 2024 · 0db549f · 0db549f
1 parent a1c8154
commit 0db549f
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 37 deletions.
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
@@ -19,6 +19,8 @@
   --header-bg: #1c1b20;
   --block-bg: transparent;
   --shadow-color: rgba(255, 255, 255, 0.036);
+  --green: 151 69% 42%;
+  --red: 351 100% 61%;
 }
 
 [data-color-scheme='light'] {
@@ -32,6 +34,8 @@
   --header-bg: white;
   --block-bg: transparent;
   --shadow-color: #0001;
+  --green: 151 69% 42%;
+  --red: 351 100% 61%;
 }
 
 @layer base {

diff --git a/src/components/IconTenderly.vue b/src/components/IconTenderly.vue
@@ -1,26 +1,22 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1201 278">
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 20">
     <g clip-path="url(#tenderly-clip-a)">
       <path
         fill="#9573F5"
-        d="m204.106 81.213 75.449-42.028.062 81.656-58.449 32.554c-39.867 22.209-62.84 51.338-72.125 77.205-9.282 25.857-7.917 40.686-8.215 47.149 0-41.167.135-53.478.135-88.14 0-8.541.982-17.937 2.134-22.435 0 0 9.923-57.503 61.009-85.961Z"
+        d="m15.152 6 5.235-2.917.004 5.665-4.055 2.259c-2.766 1.54-4.36 3.562-5.004 5.356-.644 1.794-.55 2.823-.57 3.271 0-2.856.01-3.71.01-6.115 0-.592.068-1.244.148-1.556 0 0 .688-3.99 4.232-5.964Z"
       />
       <path
         fill="#6837F1"
-        d="m140.794 191.386.039 86.363-71.381-39.651-.031-66.903C69.4 125.562 55.118 91.322 37.03 70.63 18.947 49.947 5.33 43.696-.172 40.292 35.455 59.41 44.88 64.568 75.26 80.889c7.526 4.041 17.324 11.736 20.692 14.93 0 0 44.818 37.09 44.843 95.567Z"
+        d="m10.76 13.643.003 5.992-4.953-2.751-.002-4.642c-.001-3.166-.992-5.541-2.247-6.977C2.307 3.83 1.362 3.397.981 3.161c2.47 1.326 3.125 1.684 5.232 2.816.522.28 1.202.814 1.436 1.036 0 0 3.11 2.573 3.11 6.63Z"
       />
       <path
         fill="#D2C3FB"
-        d="M203.987 81.213c30.455-16.733 52.576-29.276 75.565-42.027-5.792 2.924-18.149 11.434-45.413 16.072-27.274 4.64-65.612 3.64-105.119-20.243L71.102 0-.171 40.302l77.925 41.825c19.41 11.65 67.867 31.152 126.233-.914Z"
-      />
-      <path
-        fill="currentColor"
-        d="M445.979 107.351h-26.166v42.129c0 6.018 1.158 10.339 3.473 12.962 2.47 2.469 6.716 3.704 12.736 3.704 2.933 0 6.252-.231 9.957-.694v26.156c-7.564 1.698-14.125 2.547-19.682 2.547-12.042 0-21.381-3.55-28.02-10.648-6.483-7.253-9.725-18.055-9.725-32.407v-43.749h-17.367V83.278h17.367V55.732h31.261v27.546h26.166v24.073ZM513.715 79.574c9.726 0 18.68 2.006 26.861 6.018 8.337 4.013 15.052 10.494 20.146 19.444 5.095 8.951 7.642 20.293 7.642 34.027 0 3.241-.077 5.71-.232 7.408h-78.268c1.235 6.944 3.86 12.499 7.873 16.666 4.014 4.166 9.494 6.25 16.441 6.25 10.343 0 17.29-4.476 20.841-13.426h31.493c-2.934 12.808-9.186 22.53-18.757 29.166-9.417 6.636-20.686 9.953-33.808 9.953-10.035 0-19.297-2.006-27.788-6.018-8.49-4.166-15.36-10.571-20.609-19.212-5.249-8.797-7.873-19.753-7.873-32.87 0-12.963 2.624-23.688 7.873-32.175 5.249-8.642 12.119-14.969 20.609-18.981 8.491-4.167 17.676-6.25 27.556-6.25Zm-.231 25.694c-6.793 0-12.119 2.083-15.978 6.25-3.86 4.012-6.407 9.49-7.642 16.434h47.007c-2.47-15.123-10.265-22.684-23.387-22.684ZM649.458 80.037c11.733 0 20.686 3.703 26.861 11.11 6.175 7.408 9.263 17.593 9.263 30.556v69.674h-31.261v-62.036c0-6.944-1.621-12.268-4.863-15.972-3.087-3.703-7.719-5.555-13.894-5.555s-10.96 1.929-14.357 5.787c-3.241 3.858-4.862 9.105-4.862 15.74v62.036h-31.261v-108.1h31.261v14.815c2.778-4.63 6.947-8.796 12.504-12.5 5.712-3.703 12.582-5.555 20.609-5.555ZM780.512 50.87h31.493v140.507h-31.262v-11.805c-3.705 4.783-8.413 8.487-14.125 11.11-5.557 2.624-11.732 3.936-18.525 3.936-8.954 0-16.904-2.161-23.851-6.482-6.947-4.475-12.35-11.033-16.209-19.675-3.86-8.642-5.789-18.981-5.789-31.018 0-18.21 4.168-32.33 12.504-42.36 8.491-10.03 19.606-15.046 33.345-15.046 6.793 0 12.968 1.312 18.525 3.935 5.558 2.623 10.189 6.327 13.894 11.11V50.872ZM758.05 168.23c8.182 0 14.28-2.855 18.294-8.564 4.168-5.71 6.252-13.117 6.252-22.222s-2.084-16.512-6.252-22.222c-4.014-5.864-10.112-8.796-18.294-8.796s-14.202 2.778-18.062 8.333c-3.859 5.556-5.789 13.117-5.789 22.685 0 9.568 1.93 17.129 5.789 22.685 3.86 5.401 9.88 8.101 18.062 8.101ZM884.514 79.574c9.726 0 18.68 2.006 26.862 6.018 8.336 4.013 15.051 10.494 20.146 19.444 5.094 8.951 7.641 20.293 7.641 34.027 0 3.241-.077 5.71-.231 7.408h-78.269c1.235 6.944 3.86 12.499 7.874 16.666 4.013 4.166 9.494 6.25 16.441 6.25 10.343 0 17.29-4.476 20.84-13.426h31.493c-2.933 12.808-9.186 22.53-18.757 29.166-9.417 6.636-20.686 9.953-33.808 9.953-10.034 0-19.297-2.006-27.788-6.018-8.49-4.166-15.36-10.571-20.609-19.212-5.248-8.797-7.873-19.753-7.873-32.87 0-12.963 2.625-23.688 7.873-32.175 5.249-8.642 12.119-14.969 20.609-18.981 8.491-4.167 17.676-6.25 27.556-6.25Zm-.231 25.694c-6.793 0-12.119 2.083-15.978 6.25-3.859 4.012-6.407 9.49-7.642 16.434h47.008c-2.47-15.123-10.266-22.684-23.388-22.684ZM986.912 102.027c3.551-7.561 7.796-13.117 12.736-16.666 4.942-3.55 10.732-5.324 17.372-5.324 2.77 0 6.25.386 10.42 1.157v32.638h-.93c-4.48-1.851-8.88-2.777-13.2-2.777-7.56 0-13.816 2.7-18.756 8.101-4.94 5.247-7.41 12.577-7.41 21.991v50.23h-31.261v-108.1h31.029v18.75ZM1072.9 191.377h-31.26V50.639h31.26v140.738ZM1142.4 157.581l23.62-74.303h33.81l-54.65 145.367h-34.27l15.75-35.648-41.22-109.72h33.81l23.15 74.304Z"
+        d="M15.144 6c2.113-1.161 3.647-2.032 5.242-2.916-.401.203-1.259.793-3.15 1.115a10.505 10.505 0 0 1-7.293-1.405L5.925.365.98 3.161l5.406 2.902c1.347.808 4.709 2.161 8.758-.063Z"
       />
     </g>
     <defs>
       <clipPath id="tenderly-clip-a">
-        <path fill="#fff" d="M.121 0h1200v277.749H.121z" />
+        <path fill="#fff" d="M0 0h21v20H0z" />
       </clipPath>
     </defs>
   </svg>

diff --git a/src/plugins/oSnap/components/TransactionBuilder/TenderlySimulation.vue b/src/plugins/oSnap/components/TransactionBuilder/TenderlySimulation.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Transaction as TTransaction, Network } from '../../types';
+import { computed } from 'vue';
 import { ref } from 'vue';
 
 const props = defineProps<{
@@ -9,9 +10,12 @@ const props = defineProps<{
   network: Network;
 }>();
 
-// button state
-type Status = 'SUCCESS' | 'FAIL' | 'LOADING' | 'IDLE';
+// ERROR => unable to simulate
+// FAIL => tx failed in simulation
+// SUCCESS =>  tx Succeeded in simulation
+type Status = 'SUCCESS' | 'FAIL' | 'ERROR' | 'LOADING' | 'IDLE';
 const simulationState = ref<Status>('IDLE');
+const simulationLink = ref<string>();
 
 // TODO: get interface/url when serverless func is implemented
 type SimulationResponse = {
@@ -32,14 +36,20 @@ async function simulate() {
       // TODO: edit payload where necessary
       body: JSON.stringify(props)
     });
+
     const data: SimulationResponse = await response.json();
-    // handle outcome, set state for button
-    simulationState.value = 'SUCCESS';
     // TODO: parse Success response
-    return { data };
+
+    // check if tx passed in simulation
+    simulationState.value = 'ERROR';
+    // simulationState.value = 'FAIL';
+
+    // set tender simulation link
+    simulationLink.value =
+      'https://docs.tenderly.co/web3-gateway/references/simulate-json-rpc';
   } catch (error) {
-    // TODO: parse FAIL response
-    simulationState.value = 'FAIL';
+    // network error
+    simulationState.value = 'ERROR';
     return { error };
     // TODO: remove sleep logic this is just for testing the UI
   } finally {
@@ -48,35 +58,53 @@ async function simulate() {
   }
 }
 
+const showResult = computed(() => {
+  return (
+    simulationState.value === 'FAIL' || simulationState.value === 'SUCCESS'
+  );
+});
+
 // IDLE => run simulation
 // FAIL || SUCCESS => re-run
 // FAIL => show info on failure
 // LOADING => hide simulate button, show spinner
 </script>
 
 <template>
-  <div
-    class="flex justify-between items-center border rounded-xl mt-4 px-3 py-2 border-skin-border"
-  >
-    <div class="flex flex-col items-start justify-center gap-1">
-      <p class="text-skin-link">Simulate these transactions</p>
-      <p class="text-sm opacity-50">
-        Powered by <IconTenderly class="text-skin-link inline h-[1em]" />
-      </p>
-    </div>
-
+  <div>
     <button
-      :class="[
-        'group border border-skin-primary p-1 rounded-lg min-w-[100px] text-skin-link',
-        simulationState === 'LOADING' ? 'opacity-60' : 'opacity-100'
-      ]"
+      v-if="!showResult"
       @click="simulate"
-      :disabled="simulationState === 'LOADING'"
+      :disabled="simulationState !== 'IDLE'"
+      class="flex w-full enabled:hover:border-skin-text gap-2 justify-center h-[48px] px-[20px] items-center border disabled:cursor-not-allowed rounded-full border-skin-border"
     >
-      <LoadingSpinner v-if="simulationState === 'LOADING'" />
-      <span v-if="simulationState === 'IDLE'">Simulate</span>
-      <span v-if="simulationState === 'SUCCESS'">Success</span>
-      <span v-if="simulationState === 'FAIL'">Fail</span>
+      <IconTenderly class="text-skin-link inline h-[20px] w-[20px]" />
+      <span v-if="simulationState === 'IDLE'">Simulate Transaction</span>
+      <span v-if="simulationState === 'LOADING'">Checking transaction...</span>
+      <span v-if="simulationState === 'ERROR'">Failed to simulate!</span>
+
+      <LoadingSpinner class="ml-auto" v-if="simulationState === 'LOADING'" />
     </button>
+    <div
+      v-if="showResult"
+      :class="[
+        'flex w-full gap-2 justify-between h-[48px] px-[20px] items-center rounded-full',
+        {
+          'bg-green/20 border-green text-green': simulationState === 'SUCCESS',
+          'bg-red/20 border-red text-red': simulationState === 'FAIL'
+        }
+      ]"
+    >
+      <IconTenderly class="inline h-[20px] w-[20px] text-inherit" />
+      <span v-if="simulationState === 'SUCCESS'">Transaction passed!</span>
+      <span v-if="simulationState === 'FAIL'">Transaction failed!</span>
+      <a
+        target="_blank"
+        class="flex py-2 pl-2 items-center gap-1 ml-auto text-inherit hover:underline"
+        :href="simulationLink"
+        >View on Tenderly
+        <IHoExternalLink class="text-inherit inline w-[1em] h-[1em]"
+      /></a>
+    </div>
   </div>
 </template>
diff --git a/src/plugins/oSnap/components/TransactionBuilder/TransactionBuilder.vue b/src/plugins/oSnap/components/TransactionBuilder/TransactionBuilder.vue
@@ -4,6 +4,7 @@ import { shorten } from '@/helpers/utils';
 import { NFT, Network, Transaction as TTransaction, Token } from '../../types';
 import { getSafeAppLink } from '../../utils';
 import Transaction from './Transaction.vue';
+import TenderlySimulation from './TenderlySimulation.vue';
 
 const props = defineProps<{
   safeAddress: string;
@@ -70,6 +71,7 @@ const safeLink = computed(() =>
       :safe-address="safeAddress"
       :module-address="moduleAddress"
       :network="props.network"
+      class="mt-4"
     />
   </div>
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,8 +14,8 @@ module.exports = {
         'skin-block-bg': 'var(--block-bg)',
         'skin-header-bg': 'var(--header-bg)',
         'skin-heading': 'var(--heading-color)',
-        green: '#21b66f',
-        red: '#ff3856'
+        green: 'hsl(var(--green) / <alpha-value>)',
+        red: 'hsl(var(--red) / <alpha-value>)'
       },
       keyframes: {
         fadeIn: {