refactor: remove modal open animation delay (#2072)

reown-com · Apr 2, 2024 · 2a9075e · 2a9075e
1 parent 75855d6
commit 2a9075e
Show file tree

Hide file tree

Showing 28 changed files with 69 additions and 42 deletions.
diff --git a/packages/scaffold/src/modal/w3m-modal/index.ts b/packages/scaffold/src/modal/w3m-modal/index.ts
@@ -107,8 +107,7 @@ export class W3mModal extends LitElement {
     await this.animate([{ opacity: 0 }, { opacity: 1 }], {
       duration: 200,
       easing: 'ease',
-      fill: 'forwards',
-      delay: 300
+      fill: 'forwards'
     }).finished
     this.onAddKeyboardListener()
   }

diff --git a/packages/scaffold/src/modal/w3m-modal/styles.ts b/packages/scaffold/src/modal/w3m-modal/styles.ts
@@ -38,7 +38,6 @@ export default css`
     max-width: 360px;
     width: 100%;
     position: relative;
-    animation-delay: 0.3s;
     animation-duration: 0.2s;
     animation-name: zoom-in;
     animation-fill-mode: backwards;

diff --git a/packages/scaffold/src/partials/w3m-account-default-widget/styles.ts b/packages/scaffold/src/partials/w3m-account-default-widget/styles.ts
@@ -86,11 +86,11 @@ export default css`
     height: 48px;
     padding: 10px;
     flex: 1 0 0;
-
     border-radius: var(--XS, 16px);
     border: 1px solid var(--dark-accent-glass-010, rgba(71, 161, 255, 0.1));
     background: var(--dark-accent-glass-010, rgba(71, 161, 255, 0.1));
-    transition: background 0.2s linear;
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color;
   }
 
   .account-links wui-flex:hover {

diff --git a/packages/scaffold/src/partials/w3m-input-address/styles.ts b/packages/scaffold/src/partials/w3m-input-address/styles.ts
@@ -7,7 +7,8 @@ export default css`
     border-radius: var(--wui-border-radius-s);
     border: 1px solid var(--wui-gray-glass-002);
     background-color: var(--wui-gray-glass-002);
-    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    will-change: background-color;
     position: relative;
   }
 

diff --git a/packages/scaffold/src/partials/w3m-input-token/styles.ts b/packages/scaffold/src/partials/w3m-input-token/styles.ts
@@ -7,7 +7,8 @@ export default css`
     border-radius: var(--wui-border-radius-s);
     border: 1px solid var(--wui-gray-glass-002);
     background-color: var(--wui-gray-glass-002);
-    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    will-change: background-color;
   }
 
   :host(:hover) {

diff --git a/packages/scaffold/src/partials/w3m-swap-input/styles.ts b/packages/scaffold/src/partials/w3m-swap-input/styles.ts
@@ -16,7 +16,6 @@ export default css`
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    transition: all var(--wui-ease-in-power-2) var(--wui-duration-md);
     right: var(--wui-spacing-1xs);
     height: 40px;
     padding: var(--wui-spacing-xs) var(--wui-spacing-1xs) var(--wui-spacing-xs)

diff --git a/packages/scaffold/src/partials/w3m-wallet-send-details/styles.ts b/packages/scaffold/src/partials/w3m-wallet-send-details/styles.ts
@@ -22,7 +22,8 @@ export default css`
 
   .network {
     cursor: pointer;
-    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    will-change: background-color;
   }
 
   .network:focus-visible {
@@ -38,7 +39,6 @@ export default css`
   }
 
   .network:active {
-    transition: all var(--wui-ease-out-power-2) var(--wui-duration-sm);
     background-color: var(--wui-gray-glass-010);
   }
 `
diff --git a/packages/scaffold/src/utils/w3m-connecting-widget/styles.ts b/packages/scaffold/src/utils/w3m-connecting-widget/styles.ts
@@ -33,7 +33,10 @@ export default css`
     bottom: calc(var(--wui-spacing-3xs) * -1);
     opacity: 0;
     transform: scale(0.5);
-    transition: all var(--wui-ease-out-power-2) var(--wui-duration-lg);
+    transition-property: opacity, transform;
+    transition-duration: var(--wui-duration-lg);
+    transition-timing-function: var(--wui-ease-out-power-2);
+    will-change: opacity, transform;
   }
 
   wui-text[align='center'] {

diff --git a/packages/scaffold/src/views/w3m-account-settings-view/styles.ts b/packages/scaffold/src/views/w3m-account-settings-view/styles.ts
@@ -31,7 +31,8 @@ export default css`
     border-radius: var(--XS, 16px);
     border: 1px solid var(--dark-accent-glass-010, rgba(71, 161, 255, 0.1));
     background: var(--dark-accent-glass-010, rgba(71, 161, 255, 0.1));
-    transition: background 0.2s linear;
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color;
   }
 
   .account-links wui-flex:hover {

diff --git a/packages/scaffold/src/views/w3m-approve-transaction-view/index.ts b/packages/scaffold/src/views/w3m-approve-transaction-view/index.ts
@@ -44,9 +44,9 @@ export class W3mApproveTransactionView extends LitElement {
     this.bodyObserver = new ResizeObserver(() => {
       const data = blueprint?.getBoundingClientRect()
       const dimensions = data ?? { left: 0, top: 0, width: 0, height: 0 }
-      this.iframe.style.width = `${dimensions.width}px`
+      this.iframe.style.width = `360px`
       this.iframe.style.height = `${dimensions.height - verticalPadding}px`
-      this.iframe.style.left = `${dimensions.left}px`
+      this.iframe.style.left = 'calc(50% - 180px)'
       this.iframe.style.top = `${dimensions.top + verticalPadding / 2}px`
       this.ready = true
     })
@@ -70,7 +70,7 @@ export class W3mApproveTransactionView extends LitElement {
         { opacity: 0, transform: isMobile ? 'translateY(50px)' : 'scale(.95)' },
         { opacity: 1, transform: isMobile ? 'translateY(0)' : 'scale(1)' }
       ],
-      { duration: 200, easing: 'ease', fill: 'forwards', delay: 300 }
+      { duration: 200, easing: 'ease', fill: 'forwards' }
     )
   }
 

diff --git a/packages/scaffold/src/views/w3m-buy-in-progress-view/styles.ts b/packages/scaffold/src/views/w3m-buy-in-progress-view/styles.ts
@@ -52,7 +52,10 @@ export default css`
     bottom: calc(var(--wui-spacing-3xs) * -1);
     opacity: 0;
     transform: scale(0.5);
-    transition: all var(--wui-ease-out-power-2) var(--wui-duration-lg);
+    transition:
+      opacity var(--wui-ease-out-power-2) var(--wui-duration-lg),
+      transform var(--wui-ease-out-power-2) var(--wui-duration-lg);
+    will-change: opacity, transform;
   }
 
   wui-text[align='center'] {

diff --git a/packages/scaffold/src/views/w3m-network-switch-view/styles.ts b/packages/scaffold/src/views/w3m-network-switch-view/styles.ts
@@ -34,7 +34,6 @@ export default css`
     opacity: 0;
     transform: scale(0.5);
     z-index: 1;
-    transition: all var(--wui-ease-out-power-2) var(--wui-duration-lg);
   }
 
   wui-button {

diff --git a/packages/ui/src/components/wui-loading-hexagon/styles.ts b/packages/ui/src/components/wui-loading-hexagon/styles.ts
@@ -13,7 +13,6 @@ export default css`
     fill: none;
     stroke: transparent;
     stroke-linecap: round;
-    transition: all var(--wui-ease-in-power-3) var(--wui-duration-lg);
   }
 
   use {

diff --git a/packages/ui/src/components/wui-loading-spinner/styles.ts b/packages/ui/src/components/wui-loading-spinner/styles.ts
@@ -27,7 +27,6 @@ export default css`
 
   svg {
     animation: rotate 2s linear infinite;
-    transition: all var(--wui-ease-in-power-3) var(--wui-duration-lg);
   }
 
   circle {

diff --git a/packages/ui/src/components/wui-loading-thumbnail/styles.ts b/packages/ui/src/components/wui-loading-thumbnail/styles.ts
@@ -10,7 +10,6 @@ export default css`
   svg {
     width: var(--wui-box-size-md);
     height: var(--wui-box-size-md);
-    transition: all var(--wui-ease-in-power-3) var(--wui-duration-lg);
   }
 
   rect {

diff --git a/packages/ui/src/composites/wui-account-button/styles.ts b/packages/ui/src/composites/wui-account-button/styles.ts
@@ -44,7 +44,6 @@ export default css`
 
   wui-flex > wui-text {
     color: var(--wui-color-fg-200);
-    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
   }
 
   wui-image,

diff --git a/packages/ui/src/composites/wui-button/styles.ts b/packages/ui/src/composites/wui-button/styles.ts
@@ -71,20 +71,21 @@ export default css`
   }
 
   button > wui-text {
-    transition: opacity 200ms ease-in-out;
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
     opacity: var(--local-opacity-100);
   }
 
   ::slotted(*) {
-    transition: opacity 200ms ease-in-out;
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
     opacity: var(--local-opacity-100);
   }
 
   wui-loading-spinner {
     position: absolute;
     left: 50%;
     top: 50%;
-    transition: all 200ms ease-in-out;
     transform: translate(-50%, -50%);
     opacity: var(--local-opacity-000);
   }

diff --git a/packages/ui/src/composites/wui-connect-button/styles.ts b/packages/ui/src/composites/wui-connect-button/styles.ts
@@ -51,12 +51,14 @@ export default css`
   }
 
   ::slotted(*) {
-    transition: opacity 200ms ease-in-out;
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
     opacity: var(--local-opacity-100);
   }
 
   button > wui-text {
-    transition: opacity 200ms ease-in-out;
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
     opacity: var(--local-opacity-100);
     color: var(--wui-color-inverse-100);
   }

diff --git a/packages/ui/src/composites/wui-input-numeric/styles.ts b/packages/ui/src/composites/wui-input-numeric/styles.ts
@@ -19,7 +19,11 @@ export default css`
     text-align: center;
     color: var(--wui-color-fg-100);
     caret-color: var(--wui-color-accent-100);
-    transition: all var(--wui-ease-inout-power-1) var(--wui-duration-lg);
+    transition:
+      background-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
+      border-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
+      box-shadow var(--wui-ease-inout-power-1) var(--wui-duration-md);
+    will-change: background-color, border-color, box-shadow;
     box-sizing: border-box;
     -webkit-appearance: none;
     -moz-appearance: textfield;
@@ -43,13 +47,13 @@ export default css`
   }
 
   input:focus:enabled {
-    transition: all var(--wui-ease-out-power-2) var(--wui-duration-sm);
     background-color: var(--wui-gray-glass-015);
     border: 1px solid var(--wui-color-accent-100);
     -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
   }
+
   @media (hover: hover) and (pointer: fine) {
     input:hover:enabled {
       background-color: var(--wui-gray-glass-015);

diff --git a/packages/ui/src/composites/wui-input-text/styles.ts b/packages/ui/src/composites/wui-input-text/styles.ts
@@ -17,7 +17,11 @@ export default css`
     font-weight: var(--wui-font-weight-light);
     letter-spacing: var(--wui-letter-spacing-paragraph);
     color: var(--wui-color-fg-100);
-    transition: all var(--wui-ease-inout-power-1) var(--wui-duration-lg);
+    transition:
+      background-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
+      border-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
+      box-shadow var(--wui-ease-inout-power-1) var(--wui-duration-md);
+    will-change: background-color, border-color, box-shadow;
     caret-color: var(--wui-color-accent-100);
   }
 
@@ -36,7 +40,6 @@ export default css`
   }
 
   input:focus:enabled {
-    transition: all var(--wui-ease-out-power-2) var(--wui-duration-sm);
     background-color: var(--wui-gray-glass-010);
     border: 1px solid var(--wui-color-accent-100);
     -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
@@ -120,7 +123,6 @@ export default css`
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    transition: all var(--wui-ease-in-power-2) var(--wui-duration-md);
   }
 
   ::slotted(wui-input-element) {

diff --git a/packages/ui/src/composites/wui-list-item/styles.ts b/packages/ui/src/composites/wui-list-item/styles.ts
@@ -8,6 +8,10 @@ export default css`
     background-color: var(--wui-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-250);
+    transition:
+      color var(--wui-ease-out-power-1) var(--wui-duration-md),
+      background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: color, background-color;
   }
 
   button[data-iconvariant='square'],
@@ -29,6 +33,8 @@ export default css`
   button > wui-icon {
     width: 36px;
     height: 36px;
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
   }
 
   button > wui-icon-box[data-variant='blue'] {
@@ -70,7 +76,6 @@ export default css`
   }
 
   button[data-loading='true'] > wui-icon {
-    transition: opacity 200ms ease-in-out;
     opacity: 0;
   }
 

diff --git a/packages/ui/src/composites/wui-network-image/styles.ts b/packages/ui/src/composites/wui-network-image/styles.ts
@@ -23,7 +23,6 @@ export default css`
 
   svg > path {
     stroke: var(--local-stroke);
-    transition: stroke var(--wui-ease-out-power-1) var(--wui-duration-lg);
   }
 
   wui-image {

diff --git a/packages/ui/src/composites/wui-onramp-provider-item/styles.ts b/packages/ui/src/composites/wui-onramp-provider-item/styles.ts
@@ -10,7 +10,8 @@ export default css`
     align-items: center;
     justify-content: flex-start;
     gap: var(--wui-spacing-s);
-    transition: background-color 0.2s linear;
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color;
   }
 
   button:hover {
@@ -45,7 +46,8 @@ export default css`
     box-shadow:
       0 0 0 3px var(--wui-gray-glass-002),
       0 0 0 3px var(--wui-color-modal-bg);
-    transition: box-shadow 0.2s linear;
+    transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: box-shadow;
   }
 
   button:hover .network-icon {

diff --git a/packages/ui/src/composites/wui-promo/styles.ts b/packages/ui/src/composites/wui-promo/styles.ts
@@ -9,6 +9,8 @@ export default css`
     background-color: var(--wui-gray-glass-090);
     border-radius: var(--wui-border-radius-3xl);
     border: 1px solid var(--wui-gray-glass-060);
+    transition: background-color var(--wui-duration-md) var(--wui-ease-inout-power-1);
+    will-change: background-color;
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -17,7 +19,6 @@ export default css`
     }
 
     button:active:enabled {
-      transition: all var(--wui-ease-out-power-2) var(--wui-duration-sm);
       background-color: var(--wui-gray-glass-060);
     }
   }

diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts
@@ -24,7 +24,8 @@ export default css`
     background-color: var(--wui-gray-glass-002);
     box-shadow: inset 0 0 0 1px var(--wui-gray-glass-002);
     transform: translateX(calc(var(--local-tab) * var(--local-tab-width)));
-    transition: transform var(--wui-ease-out-power-2) var(--wui-duration-lg);
+    transition: transform var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color, opacity;
   }
 
   :host([data-type='flex'])::before {
@@ -72,11 +73,14 @@ export default css`
   button > wui-icon,
   button > wui-text {
     pointer-events: none;
-    transition: all var(--wui-ease-out-power-2) var(--wui-duration-lg);
+    transition: color var(--wui-e ase-out-power-1) var(--wui-duration-md);
+    will-change: color;
   }
 
   button {
     width: var(--local-tab-width);
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color;
   }
 
   :host([data-type='flex']) > button {

diff --git a/packages/ui/src/composites/wui-tooltip-select/styles.ts b/packages/ui/src/composites/wui-tooltip-select/styles.ts
@@ -4,6 +4,7 @@ export default css`
   :host {
     position: relative;
   }
+
   button {
     display: flex;
     justify-content: center;
@@ -13,6 +14,8 @@ export default css`
     background-color: var(--wui-accent-glass-010);
     border-radius: var(--wui-border-radius-xs);
     border: 1px solid var(--wui-accent-glass-010);
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color;
   }
 
   wui-tooltip {
@@ -31,7 +34,6 @@ export default css`
 
     button:active:enabled {
       background-color: var(--wui-accent-glass-020);
-      transition: all var(--wui-ease-out-power-2) var(--wui-duration-sm);
     }
   }
 `