update widget docs

dictionary.txt

@@ -470,4 +470,13 @@ optionalities
 Base-Sepolia
 B3
 SygmaBTC
-sygBTC
+sygBTC
+whitelistedSourceNetworks
+whitelistedDestinationNetworks
+whitelistedSourceResources
+walletModules
+substrateProviders
+MAINNET
+sygma-props
+SygmaProtocolReactWidget
+setState

docs/01-introduction/01-index.md

@@ -18,7 +18,7 @@ Sygma is a fully open source ([Lesser General Public License version 3.0 (LGPL-3
 - Pass your first [generic message cross-chain](../03-sygma-sdk/04-Examples/02-GMP-Examples/01-GMP-Example-With-A-Simple-Storage-Contract.md)
 - See the [environments](../08-resources/01-environments/01-index.md) Sygma is deployed in
 - Look under the hood at the [architecture](../02-sygma-protocol/01-index.md)
-- Integrate the [Sygma Widget](https://sygma-react-widget.pages.dev/) into your dApp
+- Integrate the [Sygma Widget](https://docs.buildwithsygma.com/sygma-widget/playground/) into your dApp
 - Read more on the [Sygma Vision](02-origins.md)
 
 For the complete source code, please check out [Sygma's GitHub Repositories](../08-resources/04-github-repositories.md). 

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

@@ -40,26 +40,4 @@ yarn dev
 
 ## How To Integrate
 
-Follow the [Lit](02-lit.md) or [React](03-react.md) documentation for framework-specific instructions.
-
-## 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)/ 
-
-Below you will find an example of props being passed to whitelist (i.e enable) the source and destination networks in the React component: 
-
-```ts
-// App.tsx
-import { SygmaProtocolReactWidget } from "@buildwithsygma/sygmaprotocol-react-widget";
-
-function MyDapp() {
-  const [count, setCount] = useState(0);
-
-  return (
-    <SygmaProtocolReactWidget
-      whitelistedSourceNetworks={["sepolia"]}
-      whitelistedDestinationNetworks={["cronos"]}
-    />
-  );
-}
-```
+Follow the [Lit](02-lit.md) or [React](03-react.md) documentation for framework-specific instructions.

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

@@ -42,20 +42,4 @@ declare global {
 }
 ```
 
-You can also pass properties into the widget to customize its behaviour:
-
-```ts
-render() {
-    return html`
-      <div>
-        <sygmaprotocol-widget 
-        .environment=${Environment.MAINNET} 
-        .whitelistedSourceNetworks=${['sepolia']} 
-        .whitelistedDestinationNetworks=${['cronos']}
-        ></sygmaprotocol-widget>
-      </div>
-    `
-  }
-```
-
-See [widget.ts](https://github.com/sygmaprotocol/sygma-widget/blob/main/packages/widget/src/widget.ts) for all of the available properties.
+You can also pass properties into the widget to customize its behaviour. See [Properties](05-properties.md) for more.

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

@@ -11,7 +11,7 @@ sidebar_position: 3
 Add the following dependencies to integrate the widget into any React project: 
 
 ```bash
-yarn add @polkadot/extension-inject
+yarn add @polkadot/extension-inject # required for polkadot wallet injections
 ```
 
 And similarly:
@@ -25,28 +25,16 @@ 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 />
+  );
 }
-```
-
-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}
-    />
-  )
-}
+export default MyDapp;
 ```
 
-See [widget.ts](https://github.com/sygmaprotocol/sygma-widget/blob/main/packages/widget/src/widget.ts) for all of the available properties.
+You can also pass props to the widget component to customize widget behaviour. See [Properties](05-properties.md) for more.

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

@@ -0,0 +1,76 @@
+---
+id: sygma-props
+slug: /sygma-widget/props
+title: Properties
+description: The following section provides details on utilizing widget properties
+sidebar_position: 5
+---
+
+# 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).
+
+:::info
+Note that some properties require installing additional dependencies.
+:::
+
+The currently available properties are:
+- **environment**
+  - Desc: Determines whether the widget operates on the live network (mainnet) or a testing environment (testnet). 
+  - Usage: 
+      1. Install `@polkadot/types` dependency: `yarn add -D @polkadot/types` 
+      2. Configure either MAINNET or TESTNET environment inside the SygmaProtocolReactWidget: `<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"]} />`
+- **substrateProviders**
+  - Desc: Specifies the API endpoints or connection details for Substrate-based blockchain networks.
+  - Usage:
+    1. Install `@polkadot/api` dependency: `yarn add @polkadot/api`
+    2. Add import statements to the top of the app: `import { ApiPromise, WsProvider } from '@polkadot/api';`
+    3. Setup a `setState` action: `const [substrateProviders, setSubstrateProviders] = useState<ApiPromise[]>([]);`
+    4. Initialize the Substrate provider:
+      ```ts
+        useEffect(() => {
+          const provider = new WsProvider('[YOUR_SUBSTRATE_WSS_PROVIDER_HERE]');
+          const api = new ApiPromise({ provider });
+          api.isReady.then(() => {
+            console.log('API is ready');
+            setSubstrateProviders([api]);
+          });
+        }, []);
+      ```
+    5. Pass the provider into the component:
+      ```ts
+        <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: 
+
+```ts
+// App.tsx
+import React from "react";
+import { SygmaProtocolReactWidget } from "@buildwithsygma/sygmaprotocol-react-widget";
+import { Environment } from '@buildwithsygma/sygma-sdk-core';
+
+function MyDapp() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <SygmaProtocolReactWidget
+      whitelistedSourceNetworks={["sepolia"]}
+      whitelistedDestinationNetworks={["cronos"]}
+    />
+  );
+}
+```

docs/08-resources/02-official-links.md

@@ -17,7 +17,7 @@ description: The following section details official links related to Sygma
 
 #### [Testnet Explorer](https://scan.test.buildwithsygma.com)
 
-#### [Testnet Transfer Widget](https://sygma-react-widget.pages.dev/)
+#### [Testnet Transfer Widget](https://docs.buildwithsygma.com/sygma-widget/playground/)
 
 #### [Testnet Faucet](../08-resources/01-environments/03-testnet/01-obtain-testnet-tokens.md)
 

yarn.lock

@@ -13250,4 +13250,4 @@ zwitch@^1.0.0:
 zwitch@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"
-  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==
+  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==