update widget docs

docs/04-integrating-with-sygma/01-Sygma Widget/01-index.md

@@ -44,7 +44,50 @@ Follow the [Lit](02-lit.md) or [React](03-react.md) documentation for framework-
 
 ## Widget Properties
 
-The behaviour of the Sygma Widget can be customized using configurable properties (props). A complete reference of the properties can be found under [packages/widget/src/widget.ts](https://github.com/sygmaprotocol/sygma-widget/blob/main/packages/widget/src/widget.ts)/ 
+The behaviour of the Sygma Widget can be customized using configurable properties (props). A complete reference of the properties can be found under [packages/widget/src/widget.ts](https://github.com/sygmaprotocol/sygma-widget/blob/main/packages/widget/src/widget.ts)/.
+
+The currently available properties are:
+- environment
+  - Desc: Determines whether the widget operates on the live network (mainnet) or a testing environment (testnet). 
+  - Usage: `<SygmaProtocolReactWidget environment={Environment.MAINNET} />`
+- whitelistedSourceNetworks
+  - Desc: Specifies which blockchain networks can be selected as the source for transactions.
+  - Usage: `<SygmaProtocolReactWidget whitelistedSourceNetworks={["sepolia"]} />`
+- whitelistedDestinationNetworks
+  - Desc: Specifies which blockchain networks can be selected as the destination for transactions.
+  - Usage: `<SygmaProtocolReactWidget whitelistedDestinationNetworks={["cronos"]} />`
+- whitelistedSourceResources
+  - Desc: Defines which assets or resources (e.g., tokens) can be selected for transaction.
+  - Usage: `<SygmaProtocolReactWidget whitelistedSourceResources={["resourceID1", "resourceID2"]} />`
+- walletModules
+  - Desc: Specifies the wallet integrations available for users to connect their cryptocurrency wallets.
+  - Usage:
+    ```
+    const walletModules = [
+      {
+         walletName: "metamask",
+         preferred: true,
+      },
+      {
+         walletName: "walletConnect",
+         rpcUrl: "https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID",
+      },
+      ];
+    <SygmaProtocolReactWidget walletModules={walletModules} />
+    ```
+- substrateProviders
+  - Desc: Specifies the API endpoints or connection details for Substrate-based blockchain networks.
+  - Usage:
+    ```
+    import { ApiPromise, WsProvider } from '@polkadot/api';
+    const substrateProviders = [
+    new ApiPromise({ provider: new WsProvider("wss://rpc.polkadot.io") }),
+    new ApiPromise({ provider: new WsProvider("wss://kusama-rpc.polkadot.io") }),
+    ];
+    <SygmaProtocolReactWidget substrateProviders={substrateProviders} />
+    ```
+
+## Using Props In An Example
 
 Below you will find an example of props being passed to whitelist (i.e enable) the source and destination networks in the React component: 
 
@@ -62,4 +105,4 @@ function MyDapp() {
     />
   );
 }
-```
+```

docs/04-integrating-with-sygma/01-Sygma Widget/03-react.md

@@ -12,6 +12,7 @@ Add the following dependencies to integrate the widget into any React project:
 
 ```bash
 yarn add @polkadot/extension-inject
+yarn add @polkadot/types
 ```
 
 And similarly:
@@ -25,16 +26,19 @@ yarn add @buildwithsygma/sygmaprotocol-react-widget @buildwithsygma/sygma-sdk-co
 After installation, add the widget into your code using:
 
 ```ts
+import React from "react";
 import { SygmaProtocolReactWidget } from '@buildwithsygma/sygmaprotocol-react-widget';
 
 function MyDapp(){
   return (
-    <SygmaProtocolReactWidget />;
-  )
+    <SygmaProtocolReactWidget />
+  );
 }
+
+export default MyDapp;
 ```
 
-You can also pass props to the widget component to customize it:
+You can also pass props to the widget component to customize widget behaviour:
 
 ```ts
 function MyDapp(){
@@ -44,9 +48,9 @@ function MyDapp(){
       whitelistedSourceNetworks={["sepolia"]}
       whitelistedDestinationNetworks={["cronos"]}
       evmProvider={myEip1193Provider}
-    />
+    />;
   )
 }
 ```
 
-See [widget.ts](https://github.com/sygmaprotocol/sygma-widget/blob/main/packages/widget/src/widget.ts) for all of the available properties.
+See [widget.ts](https://github.com/sygmaprotocol/sygma-widget/blob/main/packages/widget/src/widget.ts) for all of the available properties.