diff --git a/dictionary.txt b/dictionary.txt index 348a33f..c0a639c 100644 --- a/dictionary.txt +++ b/dictionary.txt @@ -470,4 +470,13 @@ optionalities Base-Sepolia B3 SygmaBTC -sygBTC \ No newline at end of file +sygBTC +whitelistedSourceNetworks +whitelistedDestinationNetworks +whitelistedSourceResources +walletModules +substrateProviders +MAINNET +sygma-props +SygmaProtocolReactWidget +setState \ No newline at end of file diff --git a/docs/01-introduction/01-index.md b/docs/01-introduction/01-index.md index 4af5243..cf8b19c 100644 --- a/docs/01-introduction/01-index.md +++ b/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). \ No newline at end of file diff --git a/docs/04-integrating-with-sygma/01-Sygma Widget/01-index.md b/docs/04-integrating-with-sygma/01-Sygma Widget/01-index.md index 9ebff4c..0a2e68e 100644 --- a/docs/04-integrating-with-sygma/01-Sygma Widget/01-index.md +++ b/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 ( - - ); -} -``` \ No newline at end of file +Follow the [Lit](02-lit.md) or [React](03-react.md) documentation for framework-specific instructions. \ No newline at end of file diff --git a/docs/04-integrating-with-sygma/01-Sygma Widget/02-lit.md b/docs/04-integrating-with-sygma/01-Sygma Widget/02-lit.md index 0df9813..eea10d3 100644 --- a/docs/04-integrating-with-sygma/01-Sygma Widget/02-lit.md +++ b/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` -
- -
- ` - } -``` - -See [widget.ts](https://github.com/sygmaprotocol/sygma-widget/blob/main/packages/widget/src/widget.ts) for all of the available properties. \ No newline at end of file +You can also pass properties into the widget to customize its behaviour. See [Properties](05-properties.md) for more. \ No newline at end of file diff --git a/docs/04-integrating-with-sygma/01-Sygma Widget/03-react.md b/docs/04-integrating-with-sygma/01-Sygma Widget/03-react.md index d30b885..7ebc4f1 100644 --- a/docs/04-integrating-with-sygma/01-Sygma Widget/03-react.md +++ b/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 ( - ; - ) + + ); } -``` - -You can also pass props to the widget component to customize it: -```ts -function MyDapp(){ - return ( - - ) -} +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. \ No newline at end of file +You can also pass props to the widget component to customize widget behaviour. See [Properties](05-properties.md) for more. diff --git a/docs/04-integrating-with-sygma/01-Sygma Widget/05-properties.md b/docs/04-integrating-with-sygma/01-Sygma Widget/05-properties.md new file mode 100644 index 0000000..79af61e --- /dev/null +++ b/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: `` +- **whitelistedSourceNetworks** + - Desc: Specifies which blockchain networks can be selected as the source for transactions. + - Usage: `` +- **whitelistedDestinationNetworks** + - Desc: Specifies which blockchain networks can be selected as the destination for transactions. + - Usage: `` +- **whitelistedSourceResources** + - Desc: Defines which assets or resources (e.g., tokens) can be selected for transaction. + - Usage: `` +- **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([]);` + 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 + + ``` + +## 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 ( + + ); +} +``` diff --git a/docs/08-resources/02-official-links.md b/docs/08-resources/02-official-links.md index edefd15..c4973ab 100644 --- a/docs/08-resources/02-official-links.md +++ b/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) diff --git a/yarn.lock b/yarn.lock index 894738f..8ffefbc 100644 --- a/yarn.lock +++ b/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== \ No newline at end of file