chore: readmes

README.md

@@ -1 +1,42 @@
-# 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 that uses either React or Lit as a framework. 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 Lit based webapp that allows you to have a widget for the `Sygma` protocol project as `web component`. 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 @buildwithsygma/sygma-sdk-core
+yarn dev
+```
+
+## How to integrate
+
+Check respective readmes to follow instructions on how to integrate the Widget into your codebase. 
+
+* for Lit based projects you can directly install, import and use the web component version of 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
+
+### 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() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <SygmaProtocolReactWidget
+      whitelistedSourceNetworks={["sepolia"]}
+      whitelistedDestinationNetworks={["cronos"]}
+    />
+  );
+}
+```

packages/react/README.md

@@ -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 @buildwithsygma/sygma-sdk-core
+```
+
+### 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={Environment.MAINNET}
+      whitelistedSourceNetworks={["sepolia"]}
+      whitelistedDestinationNetworks={["cronos"]}
+      evmProvider={myEip1193Provider}
+    />
+  )
+}
+```
+
+You can check [here](../widget/src/widget.ts) all the available properties.

packages/widget/README.md

@@ -0,0 +1,55 @@
+# Sygmaprotocol Lit Widget
+
+### Dependencies
+
+To integrate the Widget to any lit project that you have, 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 just 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=${Environment.MAINNET} 
+        .whitelistedSourceNetworks=${['sepolia']} 
+        .whitelistedDestinationNetworks=${['cronos']}
+        ></sygmaprotocol-widget>
+      </div>
+    `
+  }
+```
+
+You can check [here](./src/widget.ts) all the available properties.