Merge branch 'main' into feat/react-package

packages/widget/package.json

@@ -27,7 +27,7 @@
   },
   "author": "Sygmaprotocol Product Team",
   "dependencies": {
-    "@buildwithsygma/sygma-sdk-core": "^2.6.0",
+    "@buildwithsygma/sygma-sdk-core": "^2.6.2",
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/contracts": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
@@ -36,6 +36,8 @@
     "@lit/reactive-element": "^2.0.3",
     "@polkadot/api": "^10.11.2",
     "@polkadot/extension-dapp": "^0.46.6",
+    "@polkadot/keyring": "^12.6.2",
+    "@polkadot/util": "^12.6.2",
     "ethers": "5.7.2",
     "events": "^3.3.0",
     "lit": "3.0.0"
@@ -45,7 +47,7 @@
     "@open-wc/testing-helpers": "^3.0.0",
     "eslint": "^8.48.0",
     "eslint-plugin-lit": "^1.9.1",
-    "jsdom": "^23.2.0",
+    "happy-dom": "^13.3.1",
     "lit-analyzer": "^2.0.3",
     "rollup-plugin-visualizer": "^5.9.2",
     "typescript": "5.2.2",

packages/widget/src/assets/icons/chevron.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+const chevronIcon = html`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+>
+  <path
+    d="M18 9.59998L12 15.6L6 9.59998"
+    stroke="#A1A1AA"
+    stroke-width="1.67"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg> `;
+
+export default chevronIcon;

packages/widget/src/assets/index.ts

@@ -1,9 +1,35 @@
-export { default as switchNetworkIcon } from './icons/switchNetwork';
-export { default as sygmaLogo } from './icons/sygmaLogo';
-export { default as noNetworkIcon } from './icons/noNetworkIcon';
-export { default as ethereumIcon } from './icons/ethereumNetworkIcon';
-export { default as polygonNetworkIcon } from './icons/polygonNetworkIcon';
-export { default as baseNetworkIcon } from './icons/baseNetworkIcon';
-export { default as cronosNetworkIcon } from './icons/cronosNetworkIcon';
-export { default as phalaNetworkIcon } from './icons/phalaNetworkIcon';
-export { default as khalaNetworkIcon } from './icons/khalaNetworkIcon';
+import type { HTMLTemplateResult } from 'lit';
+import baseNetworkIcon from './icons/baseNetworkIcon';
+import cronosNetworkIcon from './icons/cronosNetworkIcon';
+import ethereumIcon from './icons/ethereumNetworkIcon';
+import khalaNetworkIcon from './icons/khalaNetworkIcon';
+import noNetworkIcon from './icons/noNetworkIcon';
+import phalaNetworkIcon from './icons/phalaNetworkIcon';
+import polygonNetworkIcon from './icons/polygonNetworkIcon';
+import switchNetworkIcon from './icons/switchNetwork';
+import sygmaLogo from './icons/sygmaLogo';
+import chevronIcon from './icons/chevron';
+
+export const networkIconsMap = {
+  ethereum: ethereumIcon,
+  khala: khalaNetworkIcon,
+  phala: phalaNetworkIcon,
+  cronos: cronosNetworkIcon,
+  base: baseNetworkIcon,
+  gnosis: noNetworkIcon,
+  polygon: polygonNetworkIcon,
+  default: noNetworkIcon
+} as const as Record<string, HTMLTemplateResult>;
+
+export {
+  ethereumIcon,
+  khalaNetworkIcon,
+  phalaNetworkIcon,
+  cronosNetworkIcon,
+  baseNetworkIcon,
+  polygonNetworkIcon,
+  sygmaLogo,
+  switchNetworkIcon,
+  noNetworkIcon,
+  chevronIcon
+};

packages/widget/src/components/address-input/address-input.ts

@@ -0,0 +1,80 @@
+import { LitElement, html } from 'lit';
+import type { HTMLTemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { Network } from '@buildwithsygma/sygma-sdk-core';
+import { when } from 'lit/directives/when.js';
+import { validateAddress } from '../../utils';
+import { styles } from './styles';
+
+@customElement('sygma-address-input')
+export class AddressInput extends LitElement {
+  static styles = styles;
+  @property({
+    type: String
+  })
+  address: string = '';
+
+  @property({ attribute: false })
+  onAddressChange: (address: string) => void = () => {};
+
+  @property({
+    type: String
+  })
+  network: Network = Network.EVM;
+
+  @state()
+  errorMessage: string | null = null;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.handleAddressChange(this.address);
+  }
+
+  private handleAddressChange = (value: string): void => {
+    const trimedValue = value.trim();
+
+    if (this.errorMessage) {
+      this.errorMessage = null;
+    }
+
+    if (!trimedValue) {
+      return;
+    }
+
+    this.errorMessage = validateAddress(trimedValue, this.network);
+
+    if (!this.errorMessage) {
+      void this.onAddressChange(trimedValue);
+    }
+  };
+
+  render(): HTMLTemplateResult {
+    return html` <section class="inputAddressSection">
+      <div class="inputAddressContainer">
+        <label class="labelContainer">
+          <span>Send to </span>
+          ${when(
+            this.errorMessage,
+            () => html` <span class="errorMessage">${this.errorMessage}</span>`
+          )}</label
+        >
+        <textarea
+          class=${this.errorMessage ? 'inputAddress error' : 'inputAddress'}
+          name="address"
+          @change=${(evt: Event) =>
+            this.handleAddressChange((evt.target as HTMLInputElement).value)}
+        >
+${ifDefined(this.address)}
+        </textarea
+        >
+      </div>
+    </section>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sygma-address-input': AddressInput;
+  }
+}

packages/widget/src/components/address-input/index.ts

@@ -0,0 +1 @@
+export { AddressInput } from './address-input';

packages/widget/src/components/address-input/styles.ts

@@ -0,0 +1,51 @@
+import { css } from 'lit';
+
+export const styles = css`
+  .inputAddressSection {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 7.75rem; // TOO: remove this hardcoded value
+  }
+
+  .inputAddressContainer {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 7.75rem; // TOO: remove this hardcoded value
+    gap: 0.5rem;
+  }
+
+  .inputAddress {
+    border-radius: 1.5rem;
+    border: 0.063rem solid var(--zinc-200);
+    font-size: 0.875rem;
+    text-align: center;
+    resize: none;
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: 1rem;
+  }
+
+  .inputAddress:focus {
+    outline: none;
+    border: 0.063rem solid var(--zinc-200);
+  }
+
+  .error {
+    border-color: red;
+  }
+
+  .errorMessage {
+    color: red;
+    font-weight: 300;
+    font-size: 0.75rem;
+  }
+
+  .labelContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`;

packages/widget/src/components/amount-selector/styles.ts

@@ -15,7 +15,7 @@ export const styles = css`
     display: flex;
     width: 100%;
     justify-content: flex-start;
-    color: #525252;
+    color: var(--neutral-600);
     font-size: 14px;
     font-weight: 500;
     line-height: 20px; /* 142.857% */
@@ -30,7 +30,7 @@ export const styles = css`
 
   .amountSelectorInput {
     border: none;
-    color: #525252;
+    color: var(--neutral-600);
     font-size: 34px;
     font-weight: 500;
     line-height: 40px;
@@ -52,7 +52,7 @@ export const styles = css`
   }
 
   .maxButton {
-    color: #2563eb;
+    color: var(--blue-600);
     border: none;
     background: none;
     font-weight: 500;

packages/widget/src/components/index.ts

@@ -1,2 +1,3 @@
 export { AmountSelector } from './amount-selector';
 export { NetworkSelector } from './network-selector';
+export { AddressInput } from './address-input';