From 65793feaf8734e832c10c7f43dfaf355a4f8a826 Mon Sep 17 00:00:00 2001
From: enesozturk <enesozturk.d@gmail.com>
Date: Thu, 21 Nov 2024 20:47:56 +0300
Subject: [PATCH 1/3] feat: new chip button component

---
 apps/gallery-new/utils/PresetUtils.ts         |   2 +-
 .../ui-new/src/assets/svg/arrow-top-right.ts  |   4 +-
 .../ui-new/src/assets/svg/external-link.ts    |   9 +-
 .../src/composites/wui-chip-button/index.ts   |  22 +--
 .../src/composites/wui-chip-button/styles.ts  | 127 +++++++-----------
 packages/ui-new/src/utils/TypeUtil.ts         |   4 +-
 6 files changed, 64 insertions(+), 104 deletions(-)

diff --git a/apps/gallery-new/utils/PresetUtils.ts b/apps/gallery-new/utils/PresetUtils.ts
index 20fd11851a..03e0af592c 100644
--- a/apps/gallery-new/utils/PresetUtils.ts
+++ b/apps/gallery-new/utils/PresetUtils.ts
@@ -279,7 +279,7 @@ export const logoOptions: LogoType[] = [
 
 export const placementOptions: PlacementType[] = ['top', 'right', 'bottom', 'left']
 
-export const chipButtonVariants: ChipButtonVariant[] = ['main', 'accent', 'shade', 'gray', 'shade']
+export const chipButtonVariants: ChipButtonVariant[] = ['main', 'accent', 'primary']
 
 export const chipVariants: ChipType[] = [
   'fill',
diff --git a/packages/ui-new/src/assets/svg/arrow-top-right.ts b/packages/ui-new/src/assets/svg/arrow-top-right.ts
index dd47822ab3..27352299a6 100644
--- a/packages/ui-new/src/assets/svg/arrow-top-right.ts
+++ b/packages/ui-new/src/assets/svg/arrow-top-right.ts
@@ -1,5 +1,5 @@
 import { svg } from 'lit'
 
-export const arrowTopRightSvg = svg`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
-<path d="M7.31248 0.78125V5.65625C7.31248 5.80543 7.25322 5.94851 7.14773 6.054C7.04224 6.15949 6.89916 6.21875 6.74998 6.21875C6.6008 6.21875 6.45772 6.15949 6.35223 6.054C6.24674 5.94851 6.18748 5.80543 6.18748 5.65625V2.14062L1.14795 7.17922C1.04228 7.28489 0.898954 7.34426 0.749511 7.34426C0.600068 7.34426 0.456746 7.28489 0.351073 7.17922C0.245401 7.07355 0.186035 6.93022 0.186035 6.78078C0.186035 6.63134 0.245401 6.48802 0.351073 6.38234L5.3906 1.34375H1.87498C1.7258 1.34375 1.58272 1.28449 1.47723 1.179C1.37174 1.07351 1.31248 0.930434 1.31248 0.78125C1.31248 0.632066 1.37174 0.488992 1.47723 0.383502C1.58272 0.278013 1.7258 0.21875 1.87498 0.21875H6.74998C6.89916 0.21875 7.04224 0.278013 7.14773 0.383502C7.25322 0.488992 7.31248 0.632066 7.31248 0.78125Z" fill="currentColor"/>
+export const arrowTopRightSvg = svg`<svg width="12" height="13" viewBox="0 0 12 13" fill="none">
+<path fill="currentColor" d="M9.37503 3.0625V7.9375C9.37503 8.03696 9.33552 8.13234 9.26519 8.20267C9.19486 8.27299 9.09948 8.3125 9.00003 8.3125C8.90057 8.3125 8.80519 8.27299 8.73486 8.20267C8.66453 8.13234 8.62503 8.03696 8.62503 7.9375V3.96766L3.26534 9.32781C3.19497 9.39818 3.09954 9.43771 3.00003 9.43771C2.90051 9.43771 2.80508 9.39818 2.73471 9.32781C2.66435 9.25745 2.62482 9.16201 2.62482 9.0625C2.62482 8.96299 2.66435 8.86755 2.73471 8.79719L8.09487 3.4375H4.12503C4.02557 3.4375 3.93019 3.39799 3.85986 3.32766C3.78953 3.25734 3.75003 3.16196 3.75003 3.0625C3.75003 2.96304 3.78953 2.86766 3.85986 2.79734C3.93019 2.72701 4.02557 2.6875 4.12503 2.6875H9.00003C9.09948 2.6875 9.19486 2.72701 9.26519 2.79734C9.33552 2.86766 9.37503 2.96304 9.37503 3.0625Z"/>
 </svg>`
diff --git a/packages/ui-new/src/assets/svg/external-link.ts b/packages/ui-new/src/assets/svg/external-link.ts
index d3268edfdb..abe0429b29 100644
--- a/packages/ui-new/src/assets/svg/external-link.ts
+++ b/packages/ui-new/src/assets/svg/external-link.ts
@@ -1,10 +1,5 @@
 import { svg } from 'lit'
 
-export const externalLinkSvg = svg`<svg fill="none" viewBox="0 0 14 15">
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M3.74 3.99a1 1 0 0 1 1-1H11a1 1 0 0 1 1 1v6.26a1 1 0 0 1-2 0V6.4l-6.3 6.3a1 1 0 0 1-1.4-1.42l6.29-6.3H4.74a1 1 0 0 1-1-1Z"
-    clip-rule="evenodd"
-  />
+export const externalLinkSvg = svg`<svg width="12" height="13" viewBox="0 0 12 13" fill="none">
+<path d="M9.37503 3.0625V7.9375C9.37503 8.03696 9.33552 8.13234 9.26519 8.20267C9.19486 8.27299 9.09948 8.3125 9.00003 8.3125C8.90057 8.3125 8.80519 8.27299 8.73486 8.20267C8.66453 8.13234 8.62503 8.03696 8.62503 7.9375V3.96766L3.26534 9.32781C3.19497 9.39818 3.09954 9.43771 3.00003 9.43771C2.90051 9.43771 2.80508 9.39818 2.73471 9.32781C2.66435 9.25745 2.62482 9.16201 2.62482 9.0625C2.62482 8.96299 2.66435 8.86755 2.73471 8.79719L8.09487 3.4375H4.12503C4.02557 3.4375 3.93019 3.39799 3.85986 3.32766C3.78953 3.25734 3.75003 3.16196 3.75003 3.0625C3.75003 2.96304 3.78953 2.86766 3.85986 2.79734C3.93019 2.72701 4.02557 2.6875 4.12503 2.6875H9.00003C9.09948 2.6875 9.19486 2.72701 9.26519 2.79734C9.33552 2.86766 9.37503 2.96304 9.37503 3.0625Z" fill="currentColor"/>
 </svg>`
diff --git a/packages/ui-new/src/composites/wui-chip-button/index.ts b/packages/ui-new/src/composites/wui-chip-button/index.ts
index 29204328ab..b92cf5daa1 100644
--- a/packages/ui-new/src/composites/wui-chip-button/index.ts
+++ b/packages/ui-new/src/composites/wui-chip-button/index.ts
@@ -4,10 +4,16 @@ import '../../components/wui-icon/index.js'
 import '../../components/wui-image/index.js'
 import '../../components/wui-text/index.js'
 import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
-import type { ChipButtonVariant, IconType } from '../../utils/TypeUtil.js'
+import type { ChipButtonSize, ChipButtonVariant, IconType } from '../../utils/TypeUtil.js'
 import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
 
+// -- Constants --------------------------------------------------------------- //
+const FONT_SIZE = {
+  sm: 'sm-regular',
+  md: 'md-regular'
+}
+
 @customElement('wui-chip-button')
 export class WuiChipButton extends LitElement {
   public static override styles = [resetStyles, elementStyles, styles]
@@ -15,28 +21,22 @@ export class WuiChipButton extends LitElement {
   // -- State & Properties -------------------------------- //
   @property() public variant: ChipButtonVariant = 'accent'
 
+  @property() public size: ChipButtonSize = 'md'
+
   @property() public imageSrc = ''
 
   @property({ type: Boolean }) public disabled = false
 
   @property() public icon: IconType = 'externalLink'
 
-  @property() public size: 'sm' | 'md' = 'md'
-
   @property() public text = ''
 
   // -- Render -------------------------------------------- //
   public override render() {
-    const textVariant = this.size === 'sm' ? 'small-600' : 'paragraph-600'
-
     return html`
-      <button
-        class=${this.disabled ? 'disabled' : ''}
-        data-variant=${this.variant}
-        data-size=${this.size}
-      >
+      <button ?disabled=${this.disabled} data-variant=${this.variant} data-size=${this.size}>
         ${this.imageSrc ? html`<wui-image src=${this.imageSrc}></wui-image>` : null}
-        <wui-text variant=${textVariant} color="inherit"> ${this.text} </wui-text>
+        <wui-text variant=${FONT_SIZE[this.size]} color="inherit">${this.text}</wui-text>
         <wui-icon name=${this.icon} color="inherit" size="inherit"></wui-icon>
       </button>
     `
diff --git a/packages/ui-new/src/composites/wui-chip-button/styles.ts b/packages/ui-new/src/composites/wui-chip-button/styles.ts
index 7901f30b80..10d78f32d7 100644
--- a/packages/ui-new/src/composites/wui-chip-button/styles.ts
+++ b/packages/ui-new/src/composites/wui-chip-button/styles.ts
@@ -1,122 +1,85 @@
-import { css } from 'lit'
+import { css } from '../../utils/ThemeHelperUtil.js'
 
 export default css`
   button {
     border: none;
     border-radius: var(--wui-border-radius-3xl);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: ${({ spacing }) => spacing[1]};
+    padding: ${({ spacing }) => spacing[1]};
   }
 
+  /* -- Variants --------------------------------------------------------------- */
   button[data-variant='main'] {
-    background-color: var(--wui-color-accent-100);
-    color: var(--wui-color-inverse-100);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+    background-color: ${({ tokens }) => tokens.core.backgroundAccentPrimary};
+    color: ${({ tokens }) => tokens.theme.textPrimary};
   }
 
   button[data-variant='accent'] {
-    background-color: var(--wui-color-accent-glass-010);
-    color: var(--wui-color-accent-100);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+    background-color: ${({ tokens }) => tokens.core.foregroundAccent010};
+    color: ${({ tokens }) => tokens.core.textAccentPrimary};
   }
 
-  button[data-variant='gray'] {
-    background-color: transparent;
-    color: var(--wui-color-fg-200);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
-  }
-
-  button[data-variant='shade'] {
-    background-color: transparent;
-    color: var(--wui-color-accent-100);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
-  }
-
-  button[data-size='sm'] {
-    height: 32px;
-    padding: 0 var(--wui-spacing-s);
-  }
-
-  button[data-size='md'] {
-    height: 40px;
-    padding: 0 var(--wui-spacing-l);
-  }
-
-  button[data-size='sm'] > wui-image {
-    width: 16px;
-    height: 16px;
-  }
-
-  button[data-size='md'] > wui-image {
-    width: 24px;
-    height: 24px;
+  button[data-variant='primary'] {
+    background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
+    color: ${({ tokens }) => tokens.theme.textPrimary};
   }
 
+  /* -- Icons and Images --------------------------------------------------------------- */
+  button[data-size='sm'] > wui-image,
   button[data-size='sm'] > wui-icon {
     width: 12px;
     height: 12px;
   }
 
+  button[data-size='md'] > wui-image,
   button[data-size='md'] > wui-icon {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
   }
 
   wui-image {
-    border-radius: var(--wui-border-radius-3xl);
+    border-radius: 8px;
     overflow: hidden;
   }
 
-  button.disabled > wui-icon,
-  button.disabled > wui-image {
-    filter: grayscale(1);
-  }
-
-  button[data-variant='main'] > wui-image {
-    box-shadow: inset 0 0 0 1px var(--wui-color-accent-090);
-  }
-
-  button[data-variant='shade'] > wui-image,
-  button[data-variant='gray'] > wui-image {
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
-  }
-
+  /* -- States --------------------------------------------------------------- */
   @media (hover: hover) and (pointer: fine) {
-    button[data-variant='main']:focus-visible {
-      background-color: var(--wui-color-accent-090);
-    }
-
-    button[data-variant='main']:hover:enabled {
-      background-color: var(--wui-color-accent-090);
+    button[data-variant='main']:hover {
+      background-color: ${({ tokens }) => tokens.core.foregroundAccent060};
     }
 
-    button[data-variant='main']:active:enabled {
-      background-color: var(--wui-color-accent-080);
+    button[data-variant='accent']:hover {
+      box-shadow: 0 0 0 1px ${({ tokens }) => tokens.core.borderAccentPrimary};
     }
 
-    button[data-variant='accent']:hover:enabled {
-      background-color: var(--wui-color-accent-glass-015);
+    button[data-variant='primary']:hover {
+      box-shadow: 0 0 0 1px ${({ tokens }) => tokens.theme.borderSecondary};
     }
+  }
 
-    button[data-variant='accent']:active:enabled {
-      background-color: var(--wui-color-accent-glass-020);
-    }
+  button[data-variant='main']:focus-visible,
+  button[data-variant='main']:active {
+    box-shadow: 0 0 0 4px ${({ tokens }) => tokens.core.foregroundAccent020};
+  }
 
-    button[data-variant='shade']:focus-visible,
-    button[data-variant='gray']:focus-visible,
-    button[data-variant='shade']:hover,
-    button[data-variant='gray']:hover {
-      background-color: var(--wui-color-gray-glass-002);
-    }
+  button[data-variant='accent']:focus-visible,
+  button[data-variant='accent']:active {
+    box-shadow:
+      0 0 0 1px ${({ tokens }) => tokens.core.borderAccentPrimary},
+      0 0 0 4px ${({ tokens }) => tokens.core.foregroundAccent020};
+  }
 
-    button[data-variant='gray']:active,
-    button[data-variant='shade']:active {
-      background-color: var(--wui-color-gray-glass-005);
-    }
+  button[data-variant='primary']:focus-visible,
+  button[data-variant='primary']:active {
+    box-shadow:
+      0 0 0 1px ${({ tokens }) => tokens.theme.borderSecondary},
+      0 0 0 4px ${({ tokens }) => tokens.theme.foregroundSecondary};
   }
 
-  button.disabled {
-    color: var(--wui-color-gray-glass-020);
-    background-color: var(--wui-color-gray-glass-002);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
-    pointer-events: none;
+  button:disabled {
+    opacity: 0.5;
   }
 `
diff --git a/packages/ui-new/src/utils/TypeUtil.ts b/packages/ui-new/src/utils/TypeUtil.ts
index e9478b2125..174fbe7c0d 100644
--- a/packages/ui-new/src/utils/TypeUtil.ts
+++ b/packages/ui-new/src/utils/TypeUtil.ts
@@ -220,7 +220,9 @@ export type PlacementType = 'bottom' | 'left' | 'right' | 'top'
 
 export type ChipType = 'fill' | 'shade' | 'shadeSmall' | 'transparent' | 'success' | 'error'
 
-export type ChipButtonVariant = 'accent' | 'main' | 'shade' | 'gray'
+export type ChipButtonVariant = 'main' | 'accent' | 'primary'
+
+export type ChipButtonSize = 'sm' | 'md'
 
 export type ButtonSize = 'lg' | 'md' | 'sm'
 

From 659b1c1a0cf5dc7a45cc0ee125f4a24ad2f777d4 Mon Sep 17 00:00:00 2001
From: enesozturk <enesozturk.d@gmail.com>
Date: Fri, 22 Nov 2024 09:46:42 +0300
Subject: [PATCH 2/3] feat: add domain chip

---
 .../composites/wui-domain-chip.stories.ts     | 40 +++++++++
 apps/gallery-new/utils/PresetUtils.ts         |  6 +-
 packages/ui-new/index.ts                      |  1 +
 .../src/assets/svg/checkmark-verified.ts      |  6 ++
 .../src/assets/svg/exclamation-circle.ts      |  7 ++
 .../ui-new/src/components/wui-icon/index.ts   | 12 ++-
 .../src/composites/wui-chip-button/index.ts   |  4 +-
 .../src/composites/wui-chip-button/styles.ts  |  2 +-
 .../src/composites/wui-domain-chip/index.ts   | 56 ++++++++++++
 .../src/composites/wui-domain-chip/styles.ts  | 87 +++++++++++++++++++
 packages/ui-new/src/utils/TypeUtil.ts         |  5 ++
 11 files changed, 218 insertions(+), 8 deletions(-)
 create mode 100644 apps/gallery-new/stories/composites/wui-domain-chip.stories.ts
 create mode 100644 packages/ui-new/src/assets/svg/checkmark-verified.ts
 create mode 100644 packages/ui-new/src/assets/svg/exclamation-circle.ts
 create mode 100644 packages/ui-new/src/composites/wui-domain-chip/index.ts
 create mode 100644 packages/ui-new/src/composites/wui-domain-chip/styles.ts

diff --git a/apps/gallery-new/stories/composites/wui-domain-chip.stories.ts b/apps/gallery-new/stories/composites/wui-domain-chip.stories.ts
new file mode 100644
index 0000000000..27bbe93f30
--- /dev/null
+++ b/apps/gallery-new/stories/composites/wui-domain-chip.stories.ts
@@ -0,0 +1,40 @@
+import type { Meta } from '@storybook/web-components'
+import '@reown/appkit-ui-new/src/composites/wui-domain-chip'
+import type { WuiDomainChip } from '@reown/appkit-ui-new/src/composites/wui-domain-chip'
+import { html } from 'lit'
+import { domainChipVariants } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiDomainChip>
+
+export default {
+  title: 'Composites/wui-domain-chip',
+  args: {
+    variant: 'success',
+    size: 'md',
+    disabled: false,
+    text: 'reown.com/appkit'
+  },
+  argTypes: {
+    variant: {
+      options: domainChipVariants,
+      control: { type: 'select' }
+    },
+    size: {
+      options: ['sm', 'md'],
+      control: { type: 'select' }
+    },
+    disabled: {
+      control: { type: 'boolean' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html`<wui-domain-chip
+      text=${args.text}
+      size=${args.size}
+      variant=${args.variant}
+      ?disabled=${args.disabled}
+    ></wui-domain-chip>`
+}
diff --git a/apps/gallery-new/utils/PresetUtils.ts b/apps/gallery-new/utils/PresetUtils.ts
index 03e0af592c..6bf0017bac 100644
--- a/apps/gallery-new/utils/PresetUtils.ts
+++ b/apps/gallery-new/utils/PresetUtils.ts
@@ -28,7 +28,8 @@ import type {
   ThemeType,
   TransactionType,
   VisualType,
-  ButtonLinkVariant
+  ButtonLinkVariant,
+  DomainChipVariant
 } from '@reown/appkit-ui-new/src/utils/TypeUtil'
 import type { TransactionStatus, TransactionDirection } from '@reown/appkit-common'
 
@@ -202,6 +203,7 @@ export const iconOptions: IconType[] = [
   'arrowTop',
   'browser',
   'checkmark',
+  'checkmarkVerified',
   'chevronBottom',
   'chevronLeft',
   'chevronRight',
@@ -281,6 +283,8 @@ export const placementOptions: PlacementType[] = ['top', 'right', 'bottom', 'lef
 
 export const chipButtonVariants: ChipButtonVariant[] = ['main', 'accent', 'primary']
 
+export const domainChipVariants: DomainChipVariant[] = ['success', 'warning', 'error']
+
 export const chipVariants: ChipType[] = [
   'fill',
   'transparent',
diff --git a/packages/ui-new/index.ts b/packages/ui-new/index.ts
index fd4f60cb41..dd63717629 100644
--- a/packages/ui-new/index.ts
+++ b/packages/ui-new/index.ts
@@ -23,6 +23,7 @@ export * from './src/composites/wui-connect-button/index.js'
 export * from './src/composites/wui-cta-button/index.js'
 export * from './src/composites/wui-details-group/index.js'
 export * from './src/composites/wui-details-group-item/index.js'
+export * from './src/composites/wui-domain-chip/index.js'
 export * from './src/composites/wui-dropdown-menu/index.js'
 export * from './src/composites/wui-email-input/index.js'
 export * from './src/composites/wui-ens-input/index.js'
diff --git a/packages/ui-new/src/assets/svg/checkmark-verified.ts b/packages/ui-new/src/assets/svg/checkmark-verified.ts
new file mode 100644
index 0000000000..1c24a8b3c4
--- /dev/null
+++ b/packages/ui-new/src/assets/svg/checkmark-verified.ts
@@ -0,0 +1,6 @@
+import { svg } from 'lit'
+
+export const checkmarkVerifiedSvg = svg`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M14.1163 6.42625C13.8806 6.18 13.6369 5.92625 13.545 5.70312C13.46 5.49875 13.455 5.16 13.45 4.83187C13.4406 4.22187 13.4306 3.53062 12.95 3.05C12.4694 2.56937 11.7781 2.55937 11.1681 2.55C10.84 2.545 10.5012 2.54 10.2969 2.455C10.0744 2.36312 9.82 2.11937 9.57375 1.88375C9.1425 1.46937 8.6525 1 8 1C7.3475 1 6.85812 1.46937 6.42625 1.88375C6.18 2.11937 5.92625 2.36312 5.70312 2.455C5.5 2.54 5.16 2.545 4.83187 2.55C4.22187 2.55937 3.53062 2.56937 3.05 3.05C2.56937 3.53062 2.5625 4.22187 2.55 4.83187C2.545 5.16 2.54 5.49875 2.455 5.70312C2.36312 5.92562 2.11937 6.18 1.88375 6.42625C1.46937 6.8575 1 7.3475 1 8C1 8.6525 1.46937 9.14187 1.88375 9.57375C2.11937 9.82 2.36312 10.0738 2.455 10.2969C2.54 10.5012 2.545 10.84 2.55 11.1681C2.55937 11.7781 2.56937 12.4694 3.05 12.95C3.53062 13.4306 4.22187 13.4406 4.83187 13.45C5.16 13.455 5.49875 13.46 5.70312 13.545C5.92562 13.6369 6.18 13.8806 6.42625 14.1163C6.8575 14.5306 7.3475 15 8 15C8.6525 15 9.14187 14.5306 9.57375 14.1163C9.82 13.8806 10.0738 13.6369 10.2969 13.545C10.5012 13.46 10.84 13.455 11.1681 13.45C11.7781 13.4406 12.4694 13.4306 12.95 12.95C13.4306 12.4694 13.4406 11.7781 13.45 11.1681C13.455 10.84 13.46 10.5012 13.545 10.2969C13.6369 10.0744 13.8806 9.82 14.1163 9.57375C14.5306 9.1425 15 8.6525 15 8C15 7.3475 14.5306 6.85812 14.1163 6.42625ZM10.8538 6.85375L7.35375 10.3538C7.30731 10.4002 7.25217 10.4371 7.19147 10.4623C7.13077 10.4874 7.06571 10.5004 7 10.5004C6.93429 10.5004 6.86923 10.4874 6.80853 10.4623C6.74783 10.4371 6.69269 10.4002 6.64625 10.3538L5.14625 8.85375C5.05243 8.75993 4.99972 8.63268 4.99972 8.5C4.99972 8.36732 5.05243 8.24007 5.14625 8.14625C5.24007 8.05243 5.36732 7.99972 5.5 7.99972C5.63268 7.99972 5.75993 8.05243 5.85375 8.14625L7 9.29313L10.1462 6.14625C10.1927 6.09979 10.2479 6.06294 10.3086 6.0378C10.3692 6.01266 10.4343 5.99972 10.5 5.99972C10.5657 5.99972 10.6308 6.01266 10.6914 6.0378C10.7521 6.06294 10.8073 6.09979 10.8538 6.14625C10.9002 6.1927 10.9371 6.24786 10.9622 6.30855C10.9873 6.36925 11.0003 6.4343 11.0003 6.5C11.0003 6.5657 10.9873 6.63075 10.9622 6.69145C10.9371 6.75214 10.9002 6.8073 10.8538 6.85375Z" fill="currentColor"/>
+</svg>
+`
diff --git a/packages/ui-new/src/assets/svg/exclamation-circle.ts b/packages/ui-new/src/assets/svg/exclamation-circle.ts
new file mode 100644
index 0000000000..fa2d8bf43f
--- /dev/null
+++ b/packages/ui-new/src/assets/svg/exclamation-circle.ts
@@ -0,0 +1,7 @@
+import { svg } from 'lit'
+
+export const exclamationCircleSvg = svg`<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+<path d="M6 1.125C5.03582 1.125 4.09329 1.41091 3.2916 1.94659C2.48991 2.48226 1.86507 3.24363 1.49609 4.13442C1.12711 5.02521 1.03057 6.00541 1.21867 6.95107C1.40678 7.89672 1.87108 8.76536 2.55286 9.44715C3.23464 10.1289 4.10328 10.5932 5.04894 10.7813C5.99459 10.9694 6.97479 10.8729 7.86558 10.5039C8.75637 10.1349 9.51775 9.51009 10.0534 8.7084C10.5891 7.90671 10.875 6.96418 10.875 6C10.8736 4.70749 10.3596 3.46831 9.44564 2.55436C8.5317 1.64042 7.29251 1.12636 6 1.125ZM5.625 3.75C5.625 3.65054 5.66451 3.55516 5.73484 3.48484C5.80516 3.41451 5.90055 3.375 6 3.375C6.09946 3.375 6.19484 3.41451 6.26517 3.48484C6.33549 3.55516 6.375 3.65054 6.375 3.75V6.375C6.375 6.47446 6.33549 6.56984 6.26517 6.64017C6.19484 6.71049 6.09946 6.75 6 6.75C5.90055 6.75 5.80516 6.71049 5.73484 6.64017C5.66451 6.56984 5.625 6.47446 5.625 6.375V3.75ZM6 8.625C5.88875 8.625 5.78 8.59201 5.68749 8.5302C5.59499 8.46839 5.52289 8.38054 5.48032 8.27776C5.43775 8.17498 5.42661 8.06188 5.44831 7.95276C5.47001 7.84365 5.52359 7.74342 5.60225 7.66475C5.68092 7.58609 5.78115 7.53251 5.89026 7.51081C5.99938 7.4891 6.11248 7.50024 6.21526 7.54282C6.31804 7.58539 6.4059 7.65749 6.4677 7.74999C6.52951 7.84249 6.5625 7.95125 6.5625 8.0625C6.5625 8.21168 6.50324 8.35476 6.39775 8.46025C6.29226 8.56574 6.14919 8.625 6 8.625Z" fill="currentColor"/>
+</svg>
+
+`
diff --git a/packages/ui-new/src/components/wui-icon/index.ts b/packages/ui-new/src/components/wui-icon/index.ts
index 5971f17b2b..ee226a9f91 100644
--- a/packages/ui-new/src/components/wui-icon/index.ts
+++ b/packages/ui-new/src/components/wui-icon/index.ts
@@ -7,6 +7,7 @@ import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
 
 // -- Svg's-------------------------------- //
+import { arrowTopRightSvg } from '../../assets/svg/arrow-top-right.js'
 import { addSvg } from '../../assets/svg/add.js'
 import { allWalletsSvg } from '../../assets/svg/all-wallets.js'
 import { arrowBottomCircleSvg } from '../../assets/svg/arrow-bottom-circle.js'
@@ -20,6 +21,7 @@ import { bankSvg } from '../../assets/svg/bank.js'
 import { browserSvg } from '../../assets/svg/browser.js'
 import { cardSvg } from '../../assets/svg/card.js'
 import { checkmarkBoldSvg } from '../../assets/svg/checkmark-bold.js'
+import { checkmarkVerifiedSvg } from '../../assets/svg/checkmark-verified.js'
 import { checkmarkSvg } from '../../assets/svg/checkmark.js'
 import { chevronBottomSvg } from '../../assets/svg/chevron-bottom.js'
 import { chevronLeftSvg } from '../../assets/svg/chevron-left.js'
@@ -36,6 +38,8 @@ import { desktopSvg } from '../../assets/svg/desktop.js'
 import { disconnectSvg } from '../../assets/svg/disconnect.js'
 import { discordSvg } from '../../assets/svg/discord.js'
 import { etherscanSvg } from '../../assets/svg/etherscan.js'
+import { exclamationTriangleSvg } from '../../assets/svg/exclamation-triangle.js'
+import { exclamationCircleSvg } from '../../assets/svg/exclamation-circle.js'
 import { extensionSvg } from '../../assets/svg/extension.js'
 import { externalLinkSvg } from '../../assets/svg/external-link.js'
 import { facebookSvg } from '../../assets/svg/facebook.js'
@@ -83,8 +87,6 @@ import { lightbulbSvg } from '../../assets/svg/lightbulb.js'
 import { idSvg } from '../../assets/svg/id.js'
 import { xSvg } from '../../assets/svg/x.js'
 import { infoSvg } from '../../assets/svg/info.js'
-import { exclamationTriangleSvg } from '../../assets/svg/exclamation-triangle.js'
-import { arrowTopRightSvg } from '../../assets/svg/arrow-top-right.js'
 
 const svgOptions: Record<IconType, TemplateResult<2>> = {
   add: addSvg,
@@ -102,6 +104,7 @@ const svgOptions: Record<IconType, TemplateResult<2>> = {
   card: cardSvg,
   checkmark: checkmarkSvg,
   checkmarkBold: checkmarkBoldSvg,
+  checkmarkVerified: checkmarkVerifiedSvg,
   chevronBottom: chevronBottomSvg,
   chevronLeft: chevronLeftSvg,
   chevronRight: chevronRightSvg,
@@ -117,6 +120,8 @@ const svgOptions: Record<IconType, TemplateResult<2>> = {
   disconnect: disconnectSvg,
   discord: discordSvg,
   etherscan: etherscanSvg,
+  exclamationTriangle: exclamationTriangleSvg,
+  exclamationCircle: exclamationCircleSvg,
   extension: extensionSvg,
   externalLink: externalLinkSvg,
   facebook: facebookSvg,
@@ -162,8 +167,7 @@ const svgOptions: Record<IconType, TemplateResult<2>> = {
   walletPlaceholder: walletPlaceholderSvg,
   warningCircle: warningCircleSvg,
   x: xSvg,
-  info: infoSvg,
-  exclamationTriangle: exclamationTriangleSvg
+  info: infoSvg
 }
 
 // @TODO: Add color property
diff --git a/packages/ui-new/src/composites/wui-chip-button/index.ts b/packages/ui-new/src/composites/wui-chip-button/index.ts
index b92cf5daa1..c3e16bd36d 100644
--- a/packages/ui-new/src/composites/wui-chip-button/index.ts
+++ b/packages/ui-new/src/composites/wui-chip-button/index.ts
@@ -9,7 +9,7 @@ import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
 
 // -- Constants --------------------------------------------------------------- //
-const FONT_SIZE = {
+const FONT_BY_SIZE = {
   sm: 'sm-regular',
   md: 'md-regular'
 }
@@ -36,7 +36,7 @@ export class WuiChipButton extends LitElement {
     return html`
       <button ?disabled=${this.disabled} data-variant=${this.variant} data-size=${this.size}>
         ${this.imageSrc ? html`<wui-image src=${this.imageSrc}></wui-image>` : null}
-        <wui-text variant=${FONT_SIZE[this.size]} color="inherit">${this.text}</wui-text>
+        <wui-text variant=${FONT_BY_SIZE[this.size]} color="inherit">${this.text}</wui-text>
         <wui-icon name=${this.icon} color="inherit" size="inherit"></wui-icon>
       </button>
     `
diff --git a/packages/ui-new/src/composites/wui-chip-button/styles.ts b/packages/ui-new/src/composites/wui-chip-button/styles.ts
index 10d78f32d7..b990dfdc97 100644
--- a/packages/ui-new/src/composites/wui-chip-button/styles.ts
+++ b/packages/ui-new/src/composites/wui-chip-button/styles.ts
@@ -8,7 +8,7 @@ export default css`
     flex-direction: row;
     align-items: center;
     gap: ${({ spacing }) => spacing[1]};
-    padding: ${({ spacing }) => spacing[1]};
+    padding: ${({ spacing }) => spacing[2]};
   }
 
   /* -- Variants --------------------------------------------------------------- */
diff --git a/packages/ui-new/src/composites/wui-domain-chip/index.ts b/packages/ui-new/src/composites/wui-domain-chip/index.ts
new file mode 100644
index 0000000000..f55e91d66f
--- /dev/null
+++ b/packages/ui-new/src/composites/wui-domain-chip/index.ts
@@ -0,0 +1,56 @@
+import { html, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+import '../../components/wui-icon/index.js'
+import '../../components/wui-image/index.js'
+import '../../components/wui-text/index.js'
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
+import type { DomainChipSize, DomainChipVariant } from '../../utils/TypeUtil.js'
+import { customElement } from '../../utils/WebComponentsUtil.js'
+import styles from './styles.js'
+
+// -- Constants --------------------------------------------------------------- //
+const ICON_BY_VARIANT = {
+  success: 'checkmarkVerified',
+  warning: 'exclamationCircle',
+  error: 'exclamationTriangle'
+}
+const FONT_BY_SIZE = {
+  sm: 'sm-regular',
+  md: 'md-regular'
+}
+
+@customElement('wui-domain-chip')
+export class WuiDomainChip extends LitElement {
+  public static override styles = [resetStyles, elementStyles, styles]
+
+  // -- State & Properties -------------------------------- //
+  @property() public variant: DomainChipVariant = 'success'
+
+  @property() public size: DomainChipSize = 'md'
+
+  @property() public imageSrc = ''
+
+  @property({ type: Boolean }) public disabled = false
+
+  @property() public text = ''
+
+  // -- Render -------------------------------------------- //
+  public override render() {
+    return html`
+      <button ?disabled=${this.disabled} data-variant=${this.variant} data-size=${this.size}>
+        <wui-icon name=${ICON_BY_VARIANT[this.variant]}></wui-icon>
+        ${this.text
+          ? html`<wui-text variant=${FONT_BY_SIZE[this.size]} color="inherit"
+              >${this.text}</wui-text
+            >`
+          : null}
+      </button>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wui-wui-domain-chip': WuiDomainChip
+  }
+}
diff --git a/packages/ui-new/src/composites/wui-domain-chip/styles.ts b/packages/ui-new/src/composites/wui-domain-chip/styles.ts
new file mode 100644
index 0000000000..c4ea336ccf
--- /dev/null
+++ b/packages/ui-new/src/composites/wui-domain-chip/styles.ts
@@ -0,0 +1,87 @@
+import { css } from '../../utils/ThemeHelperUtil.js'
+
+export default css`
+  button {
+    border: none;
+    border-radius: var(--wui-border-radius-3xl);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: ${({ spacing }) => spacing[1]};
+    padding: ${({ spacing }) => spacing[2]};
+  }
+
+  /* -- Variants --------------------------------------------------------------- */
+  button[data-variant='success'] {
+    background-color: ${({ tokens }) => tokens.core.backgroundSuccess};
+    color: ${({ tokens }) => tokens.core.textSuccess};
+  }
+
+  button[data-variant='warning'] {
+    background-color: ${({ tokens }) => tokens.core.backgroundWarning};
+    color: ${({ tokens }) => tokens.core.textWarning};
+  }
+
+  button[data-variant='error'] {
+    background-color: ${({ tokens }) => tokens.core.backgroundError};
+    color: ${({ tokens }) => tokens.core.textError};
+  }
+
+  /* -- Icons and Images --------------------------------------------------------------- */
+  button[data-size='sm'] > wui-image,
+  button[data-size='sm'] > wui-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  button[data-size='md'] > wui-image,
+  button[data-size='md'] > wui-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  wui-image {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  /* -- States --------------------------------------------------------------- */
+  @media (hover: hover) and (pointer: fine) {
+    button[data-variant='success']:hover {
+      box-shadow: 0 0 0 1px ${({ tokens }) => tokens.core.borderSuccess};
+    }
+
+    button[data-variant='warning']:hover {
+      box-shadow: 0 0 0 1px ${({ tokens }) => tokens.core.borderWarning};
+    }
+
+    button[data-variant='active']:hover {
+      box-shadow: 0 0 0 1px ${({ tokens }) => tokens.core.borderError};
+    }
+  }
+
+  button[data-variant='success']:focus-visible,
+  button[data-variant='success']:active {
+    box-shadow:
+      0 0 0 1px ${({ tokens }) => tokens.core.borderSuccess},
+      0 0 0 4px ${({ tokens }) => tokens.core.foregroundAccent010};
+  }
+
+  button[data-variant='warning']:focus-visible,
+  button[data-variant='warning']:active {
+    box-shadow:
+      0 0 0 1px ${({ tokens }) => tokens.core.borderWarning},
+      0 0 0 4px ${({ tokens }) => tokens.core.foregroundAccent010};
+  }
+
+  button[data-variant='error']:focus-visible,
+  button[data-variant='error']:active {
+    box-shadow:
+      0 0 0 1px ${({ tokens }) => tokens.core.borderError},
+      0 0 0 4px ${({ tokens }) => tokens.core.foregroundAccent010};
+  }
+
+  button:disabled {
+    opacity: 0.5;
+  }
+`
diff --git a/packages/ui-new/src/utils/TypeUtil.ts b/packages/ui-new/src/utils/TypeUtil.ts
index 174fbe7c0d..38dec68f22 100644
--- a/packages/ui-new/src/utils/TypeUtil.ts
+++ b/packages/ui-new/src/utils/TypeUtil.ts
@@ -115,6 +115,7 @@ export type IconType =
   | 'card'
   | 'checkmark'
   | 'checkmarkBold'
+  | 'checkmarkVerified'
   | 'chevronBottom'
   | 'chevronLeft'
   | 'chevronRight'
@@ -224,6 +225,10 @@ export type ChipButtonVariant = 'main' | 'accent' | 'primary'
 
 export type ChipButtonSize = 'sm' | 'md'
 
+export type DomainChipVariant = 'success' | 'warning' | 'error'
+
+export type DomainChipSize = 'sm' | 'md'
+
 export type ButtonSize = 'lg' | 'md' | 'sm'
 
 export type ToggleSize = 'lg' | 'md' | 'sm'

From 8fa7e88d774830a9b7076fd76ef17de4cb30b987 Mon Sep 17 00:00:00 2001
From: enesozturk <enesozturk.d@gmail.com>
Date: Fri, 22 Nov 2024 10:02:36 +0300
Subject: [PATCH 3/3] chore: icon types

---
 packages/ui-new/src/utils/TypeUtil.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui-new/src/utils/TypeUtil.ts b/packages/ui-new/src/utils/TypeUtil.ts
index 38dec68f22..9e81fc860c 100644
--- a/packages/ui-new/src/utils/TypeUtil.ts
+++ b/packages/ui-new/src/utils/TypeUtil.ts
@@ -132,6 +132,8 @@ export type IconType =
   | 'etherscan'
   | 'extension'
   | 'externalLink'
+  | 'exclamationCircle'
+  | 'exclamationTriangle'
   | 'facebook'
   | 'farcaster'
   | 'filters'
@@ -176,7 +178,6 @@ export type IconType =
   | 'warningCircle'
   | 'x'
   | 'info'
-  | 'exclamationTriangle'
 
 export type VisualType =
   | 'browser'