feat: base interface implementation for react package (#61)

## Description  ## Related Issue Or Context    Closes: #10 ## How Has This Been Tested? Testing details.    ## Types of changes  - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) - [ ] Documentation ## Checklist:   - [ ] I have commented my code, particularly in hard-to-understand areas. - [ ] I have ensured that all acceptance criteria (or expected behavior) from issue are met - [ ] I have updated the documentation locally and in sygma-docs. - [ ] I have added tests to cover my changes. - [ ] I have ensured that all the checks are passing and green, I've signed the CLA bot --------- Signed-off-by: Marin Petrunic <[email protected]> Co-authored-by: Marin Petrunić <[email protected]> Co-authored-by: Marin Petrunic <[email protected]>
sygmaprotocol · Feb 8, 2024 · 0f38d7c · 0f38d7c
1 parent 751ddb1
commit 0f38d7c
Show file tree

Hide file tree

Showing 20 changed files with 1,853 additions and 1,217 deletions.
diff --git a/.github/workflows/cf-deploy-react.yml b/.github/workflows/cf-deploy-react.yml
@@ -21,20 +21,21 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          cache: 'yarn'
           node-version: 18
       - run: corepack enable
-      - run: yarn set version stable
+      - uses: actions/setup-node@v4
+        with:
+          cache: yarn
+          node-version: 18
       - run: yarn install --immutable
-      - run: yarn run lint:react-widget
-      - run: yarn run build:react-widget
+      - run: yarn build
 
       - name: Publish to Cloudflare Pages
         uses: cloudflare/pages-action@1
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           projectName: sygma-react-widget
-          directory: ./packages/react/build
+          directory: ./examples/react-widget-app/dist
           branch: main
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -22,6 +22,6 @@ jobs:
           node-version: 18
           cache: yarn
       - run: yarn install --immutable
-      - run: yarn run lint
       - run: yarn run build
+      - run: yarn run lint
       - run: yarn run test:unit
diff --git a/.gitignore b/.gitignore
@@ -48,4 +48,3 @@ public/sygma-runtime-config*
 .vscode
 
 /dist
-/examples
diff --git a/examples/react-widget-app/.eslintrc.cjs b/examples/react-widget-app/.eslintrc.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+  extends: "@chainsafe/eslint-config/frontend-react",
+  plugins: ["react", "react-hooks"],
+}
diff --git a/examples/react-widget-app/.gitignore b/examples/react-widget-app/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/react-widget-app/index.html b/examples/react-widget-app/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sygma Widget React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react-widget-app/package.json b/examples/react-widget-app/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@buildwithsygma/react-widget-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "yarn run lint:types && yarn run lint:code",
+    "lint:types": "tsc -p ./tsconfig.json --noEmit",
+    "lint:code": "eslint '{src,tests}/**/*.ts'",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@buildwithsygma/sygmaprotocol-react-widget": "workspace:^",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@chainsafe/eslint-config": "2.2.2",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}
diff --git a/examples/react-widget-app/src/App.tsx b/examples/react-widget-app/src/App.tsx
@@ -0,0 +1,10 @@
+import { SygmaProtocolReactWidget } from '@buildwithsygma/sygmaprotocol-react-widget'
+
+function App() {
+
+  return (
+    <SygmaProtocolReactWidget />
+  )
+}
+
+export default App
diff --git a/examples/react-widget-app/src/main.tsx b/examples/react-widget-app/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App.tsx';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/react-widget-app/src/vite-env.d.ts b/examples/react-widget-app/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/react-widget-app/tsconfig.json b/examples/react-widget-app/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/react-widget-app/tsconfig.node.json b/examples/react-widget-app/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/react-widget-app/vite.config.ts b/examples/react-widget-app/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "test:unit": "yarn workspaces foreach --all -pt run test:unit",
     "build:widget": "yarn workspace @buildwithsygma/sygmaprotocol-widget build:preview",
     "build:react-widget": "yarn workspace @buildwithsygma/sygmaprotocol-react-widget build",
+    "build:react-widget-app": "yarn workspace @buildwithsygma/react-widget-app build",
     "lint:widget": "yarn workspace @buildwithsygma/sygmaprotocol-widget lint",
     "lint:react-widget": "yarn workspace @buildwithsygma/sygmaprotocol-react-widget lint"
   },

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -7,18 +7,27 @@
   "license": "LGPL-3.0-or-later",
   "type": "module",
   "dependencies": {
-    "@lit-labs/react": "2.1.2"
+    "@buildwithsygma/sygmaprotocol-widget": "workspace:^",
+    "@lit/react": "1.0.3"
   },
   "peerDependencies": {
     "react": ">=17",
     "react-dom": ">=17"
   },
+  "devDependencies": {
+    "@types/react": ">=17",
+    "eslint": "^8.48.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "5.2.2"
+  },
   "scripts": {
     "build": "tsc --build --clean && tsc --build ./tsconfig.json",
     "dev": "tsc --build --clean && tsc --build ./tsconfig.json --watch",
     "clean": "rm -rf ./build",
-    "lint": "eslint 'src/**/*.ts'",
-    "lint:fix": "yarn run lint --fix"
+    "lint": "yarn run lint:types && yarn run lint:code",
+    "lint:types": "tsc -p ./tsconfig.json --noEmit",
+    "lint:code": "eslint '{src,tests}/**/*.ts'"
   },
   "author": "Sygmaprotocol Product Team"
 }
diff --git a/packages/react/src/WidgetReact.ts b/packages/react/src/WidgetReact.ts
@@ -0,0 +1,18 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { SygmaProtocolWidget } from '@buildwithsygma/sygmaprotocol-widget';
+
+export const SygmaProtocolReactWidget = createComponent<SygmaProtocolWidget>({
+  tagName: 'sygmaprotocol-widget',
+  elementClass: SygmaProtocolWidget,
+  react: React
+});
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'sygmaprotocol-widget': SygmaProtocolWidget;
+    }
+  }
+}
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
@@ -0,0 +1,37 @@
+import type {
+  EvmResource,
+  Network,
+  SubstrateResource
+} from '@buildwithsygma/sygma-sdk-core';
+import type { ApiPromise } from '@polkadot/api';
+import type { Signer } from '@polkadot/api/types';
+
+export type ThemeVariables =
+  | 'mainColor'
+  | 'secondaryColor'
+  | 'fontSize'
+  | 'borderRadius'
+  | 'borderRadiusSecondary';
+
+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?: Eip1193Provider;
+  substrateProvider?: ApiPromise | string;
+  substrateSigner?: Signer;
+  show?: boolean;
+  whitelistedSourceResources?: Array<EvmResource | SubstrateResource>;
+  expandable?: boolean;
+  darkTheme?: boolean;
+  customLogo?: SVGElement;
+  theme?: Theme;
+}
diff --git a/packages/widget/src/widget.ts b/packages/widget/src/widget.ts
@@ -1,19 +1,61 @@
-import type { HTMLTemplateResult } from 'lit';
 import { html } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import type { HTMLTemplateResult } from 'lit';
+import { customElement, property, state } 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 { when } from 'lit/directives/when.js';
+import { styles } from './styles';
 import { sygmaLogo } from './assets';
-import './components';
+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';
+import './components';
 import './context/wallet';
-import { WidgetController } from './controllers/widget';
-import { styles } from './styles';
 import { BaseComponent } from './components/base-component/base-component';
 
 @customElement('sygmaprotocol-widget')
-class SygmaProtocolWidget extends BaseComponent {
+class SygmaProtocolWidget
+  extends BaseComponent
+  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;
+
   @state()
   private isLoading = false;
 
@@ -109,6 +151,6 @@ export { SygmaProtocolWidget };
 
 declare global {
   interface HTMLElementTagNameMap {
-    'sygmaprotocol-widget': SygmaProtocolWidget;
+    'sygmaprotocol-widget': ISygmaProtocolWidget;
   }
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -48,4 +48,3 @@ public/sygma-runtime-config*
		.vscode

		/dist
		/examples
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { SygmaProtocolReactWidget } from './WidgetReact';