sygmaprotocol · haochizzle · Jun 12, 2024 · May 10, 2024 · May 10, 2024 · May 13, 2024
@@ -1 +1,41 @@
-# Sygma Widget UI
+# Sygma Widget UI
+
+The Sygma Widget is a customizable frontend that leverages the `Sygma protocol` and can be integrated into any Dapp regardless of the framework used. More information can be found in our [docs](https://docs.buildwithsygma.com/)
+
+This repository is divided into two packages. The [Widget](./packages/widget/) package is a web component built using Lit framework that allows you to have a widget for the `Sygma` protocol project. The [React](./packages/react/) package is a wrapper around the Lit Widget that allows developers to use this application inside react projects.
+
+## Quick setup
+
+```bash
+yarn create vite my-dapp --template react-ts
+cd ./my-dapp
+yarn install
+yarn add @buildwithsygma/sygmaprotocol-react-widget
+yarn dev
+```
+
+## How to integrate
+
+Check respective READMES to follow instructions on how to integrate the Widget into your codebase. 
+
+* for web component based projects, you can directly install, import and use the Widget. You can find further instructions [here](./packages/widget/README.md)
+* for React based projects, please refer to this [README](./packages/react/README.md) file to get further instructions
+* a react example is provided [here](/examples/react-widget-app/) for a more detailed reference
+* a vanilla example is provided [here](/examples/vanilla-widget-app/) for a more detailed reference on a bare bones implementation
+
+### Configuration through props
+
+You can pass props to the Widget to customize the behaviour of the Widget. You can find the complete reference of the properties avialable [here](./packages/widget/src/widget.ts). Below there is an example passing props to whitelist the source and destination network in the react component:
+
+```ts
+import { SygmaProtocolReactWidget } from "@buildwithsygma/sygmaprotocol-react-widget";
+
+function MyDapp() {
+  return (
+    <SygmaProtocolReactWidget
+      whitelistedSourceNetworks={["sepolia"]}
+      whitelistedDestinationNetworks={["cronos"]}
+    />
+  );
+}
+```
@@ -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?
@@ -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 Vanilla Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+{
+  "name": "@buildwithsygma/vanilla-widget-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@buildwithsygma/sygmaprotocol-widget": "workspace:^"
+  },
+  "devDependencies": {
+    "@chainsafe/eslint-config": "2.2.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}
@@ -0,0 +1,7 @@
+import '@buildwithsygma/sygmaprotocol-widget'
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+  <sygmaprotocol-widget 
+  .environment=${'mainnet'}
+  ></sygmaprotocol-widget>
+`
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,52 @@
+# React Widget
+
+## Quick setup
+
+To integrate this Widget into any React project follow this instructions below
+
+### Dependencies
+
+You will need to add this dependency to your project first:
+
+```bash
+yarn add @polkadot/extension-inject
+```
+
+### Installing the Widget
+
+You can install the Widget by simply adding the dependency to your project:
+
+```bash
+yarn add @buildwithsygma/sygmaprotocol-react-widget
+```
+
+### Code integration
+
+After installation you can simply add the Widget into your code:
+
+```ts
+import { SygmaProtocolReactWidget } from '@buildwithsygma/sygmaprotocol-react-widget';
+
+function MyDapp(){
+  return (
+    <SygmaProtocolReactWidget />;
+  )
+}
+```
+
+You can also pass props to the Widget component to customize it:
+
+```ts
+function MyDapp(){
+  return (
+    <SygmaProtocolReactWidget
+      environment={'mainnet'}
+      whitelistedSourceNetworks={["sepolia"]}
+      whitelistedDestinationNetworks={["cronos"]}
+      evmProvider={myEip1193Provider}
+    />
+  )
+}
+```
+
+You can check [here](../widget/src/widget.ts) all the available properties.
@@ -0,0 +1,55 @@
+# Sygmaprotocol Lit Widget
+
+### Dependencies
+
+To integrate the Widget into any project that uses web components you will need to add the following dependencies:
+
+```bash
+yarn add @buildwithsygma/sygmaprotocol-widget @buildwithsygma/sygma-sdk-core
+```
+
+### Code integration
+
+To add the Wdiget to your existing codebase import the dependency and add the custom tag into your render method.
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import '@buildwithsygma/sygmaprotocol-widget'
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  render() {
+    return html`
+      <div>
+        <sygmaprotocol-widget></sygmaprotocol-widget>
+      </div>
+    `
+  }
+
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'my-element': MyElement
+  }
+}
+```
+
+You can also pass properties into the Widget to customize it's behaviour:
+
+```ts
+render() {
+    return html`
+      <div>
+        <sygmaprotocol-widget 
+        .environment=${'mainnet'} 
+        .whitelistedSourceNetworks=${['sepolia']} 
+        .whitelistedDestinationNetworks=${['cronos']}
+        ></sygmaprotocol-widget>
+      </div>
+    `
+  }
+```
+
+You can check [here](./src/widget.ts) all the available properties.