feat: adding properties to widget, some new interface

sygmaprotocol · Feb 5, 2024 · 13d1c6b · 13d1c6b
1 parent 5dfde30
commit 13d1c6b
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 9 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -8,12 +8,14 @@
   "type": "module",
   "dependencies": {
     "@buildwithsygma/sygmaprotocol-widget": "workspace:*",
-    "@lit/react": "1.0.3"
-  },
-  "peerDependencies": {
+    "@lit/react": "1.0.3",
     "react": ">=17",
     "react-dom": ">=17"
   },
+  "devDependencies": {
+    "@types/react": ">=17",
+    "typescript": "5.2.2"
+  },
   "scripts": {
     "build": "tsc --build --clean && tsc --build ./tsconfig.json",
     "dev": "tsc --build --clean && tsc --build ./tsconfig.json --watch",

diff --git a/packages/react/src/WidgetReac.ts → packages/react/src/WidgetReact.ts b/packages/react/src/WidgetReac.ts → packages/react/src/WidgetReact.ts
@@ -2,7 +2,7 @@ import React from 'react';
 import { createComponent } from '@lit/react';
 import { SygmaProtocolWidget } from '@buildwithsygma/sygmaprotocol-widget';
 
-export const SygmaProtocolReactWidget = createComponent({
+export const SygmaProtocolReactWidget = createComponent<SygmaProtocolWidget>({
   tagName: 'sygmaprotocol-widget',
   elementClass: SygmaProtocolWidget,
   react: React

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -0,0 +1 @@
+export { SygmaProtocolReactWidget } from './WidgetReact';
diff --git a/packages/widget/src/interfaces/index.ts b/packages/widget/src/interfaces/index.ts
@@ -3,7 +3,6 @@ import type {
   Network,
   SubstrateResource
 } from '@buildwithsygma/sygma-sdk-core';
-import type { ethers } from 'ethers';
 import type { ApiPromise } from '@polkadot/api';
 import type { Signer } from '@polkadot/api/types';
 
@@ -16,10 +15,17 @@ export type ThemeVariables =
 
 export type Theme = Record<ThemeVariables, string>;
 
+export interface Eip1193Provider {
+  request(request: {
+    method: string;
+    params?: Array<unknown> | Record<string, unknown>;
+  }): Promise<unknown>;
+}
+
 export interface ISygmaProtocolWidget {
   whitelistedSourceNetworks?: Network[];
   whitelistedDestinationNetworks?: Network[];
-  evmProvider?: ethers.providers.Web3Provider;
+  evmProvider?: Eip1193Provider;
   substrateProvider?: ApiPromise | string;
   substrateSigner?: Signer;
   show?: boolean;

diff --git a/packages/widget/src/widget.ts b/packages/widget/src/widget.ts
@@ -1,18 +1,54 @@
 import type { HTMLTemplateResult } from 'lit';
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
+import type {
+  EvmResource,
+  Network,
+  SubstrateResource
+} from '@buildwithsygma/sygma-sdk-core';
+import type { ApiPromise } from '@polkadot/api';
+import type { Signer } from '@polkadot/api/types';
 import { styles } from './styles';
 import { switchNetworkIcon, sygmaLogo } from './assets';
 import { WidgetController } from './controllers/widget';
 import './components/network-selector';
 import './components/amount-selector';
 import './components/address-input';
 import { Directions } from './components/network-selector/network-selector';
+import type {
+  Eip1193Provider,
+  ISygmaProtocolWidget,
+  Theme
+} from './interfaces';
 
 @customElement('sygmaprotocol-widget')
-class SygmaProtocolWidget extends LitElement {
+class SygmaProtocolWidget extends LitElement implements ISygmaProtocolWidget {
   static styles = styles;
 
+  @property({ type: Array }) whitelistedSourceNetworks?: Network[];
+
+  @property({ type: Array }) whitelistedDestinationNetworks?: Network[];
+
+  @property({ type: Object }) evmProvider?: Eip1193Provider;
+
+  @property() substrateProvider?: ApiPromise | string;
+
+  @property({ type: Object }) substrateSigner?: Signer;
+
+  @property({ type: Boolean }) show?: boolean;
+
+  @property({ type: Array }) whitelistedSourceResources?: Array<
+    EvmResource | SubstrateResource
+  >;
+
+  @property({ type: Boolean }) expandable?: boolean;
+
+  @property({ type: Boolean }) darkTheme?: boolean;
+
+  @property({ type: Object }) customLogo?: SVGElement;
+
+  @property({ type: Object }) theme?: Theme;
+
   private widgetController = new WidgetController(this, {});
 
   render(): HTMLTemplateResult {
@@ -81,6 +117,6 @@ export { SygmaProtocolWidget };
 
 declare global {
   interface HTMLElementTagNameMap {
-    'sygmaprotocol-widget': SygmaProtocolWidget;
+    'sygmaprotocol-widget': ISygmaProtocolWidget;
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { SygmaProtocolReactWidget } from './WidgetReact';