Skip to content
This repository was archived by the owner on Mar 11, 2025. It is now read-only.

Commit d7c53f6

Browse files
haochizzlehaochizzle
committed
update props. add props to its own page
1 parent 699c01f commit d7c53f6

File tree

4 files changed

+86
-100
lines changed

4 files changed

+86
-100
lines changed

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

+1-66
Original file line numberDiff line numberDiff line change
@@ -40,69 +40,4 @@ yarn dev
4040

4141
## How To Integrate
4242

43-
Follow the [Lit](02-lit.md) or [React](03-react.md) documentation for framework-specific instructions.
44-
45-
## Widget Properties
46-
47-
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)/.
48-
49-
The currently available properties are:
50-
- environment
51-
- Desc: Determines whether the widget operates on the live network (mainnet) or a testing environment (testnet).
52-
- Usage: `<SygmaProtocolReactWidget environment={Environment.MAINNET} />`
53-
- whitelistedSourceNetworks
54-
- Desc: Specifies which blockchain networks can be selected as the source for transactions.
55-
- Usage: `<SygmaProtocolReactWidget whitelistedSourceNetworks={["sepolia"]} />`
56-
- whitelistedDestinationNetworks
57-
- Desc: Specifies which blockchain networks can be selected as the destination for transactions.
58-
- Usage: `<SygmaProtocolReactWidget whitelistedDestinationNetworks={["cronos"]} />`
59-
- whitelistedSourceResources
60-
- Desc: Defines which assets or resources (e.g., tokens) can be selected for transaction.
61-
- Usage: `<SygmaProtocolReactWidget whitelistedSourceResources={["resourceID1", "resourceID2"]} />`
62-
- walletModules
63-
- Desc: Specifies the wallet integrations available for users to connect their cryptocurrency wallets.
64-
- Usage:
65-
```ts
66-
const walletModules = [
67-
{
68-
walletName: "metamask",
69-
preferred: true,
70-
},
71-
{
72-
walletName: "walletConnect",
73-
rpcUrl: "https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID",
74-
},
75-
];
76-
<SygmaProtocolReactWidget walletModules={walletModules} />
77-
```
78-
- substrateProviders
79-
- Desc: Specifies the API endpoints or connection details for Substrate-based blockchain networks.
80-
- Usage:
81-
```ts
82-
import { ApiPromise, WsProvider } from '@polkadot/api';
83-
const substrateProviders = [
84-
new ApiPromise({ provider: new WsProvider("wss://rpc.polkadot.io") }),
85-
new ApiPromise({ provider: new WsProvider("wss://kusama-rpc.polkadot.io") }),
86-
];
87-
<SygmaProtocolReactWidget substrateProviders={substrateProviders} />
88-
```
89-
90-
## Using Props In An Example
91-
92-
Below you will find an example of props being passed to whitelist (i.e enable) the source and destination networks in the React component:
93-
94-
```ts
95-
// App.tsx
96-
import { SygmaProtocolReactWidget } from "@buildwithsygma/sygmaprotocol-react-widget";
97-
98-
function MyDapp() {
99-
const [count, setCount] = useState(0);
100-
101-
return (
102-
<SygmaProtocolReactWidget
103-
whitelistedSourceNetworks={["sepolia"]}
104-
whitelistedDestinationNetworks={["cronos"]}
105-
/>
106-
);
107-
}
108-
```
43+
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

+1-17
Original file line numberDiff line numberDiff line change
@@ -42,20 +42,4 @@ declare global {
4242
}
4343
```
4444

45-
You can also pass properties into the widget to customize its behaviour:
46-
47-
```ts
48-
render() {
49-
return html`
50-
<div>
51-
<sygmaprotocol-widget
52-
.environment=${Environment.MAINNET}
53-
.whitelistedSourceNetworks=${['sepolia']}
54-
.whitelistedDestinationNetworks=${['cronos']}
55-
></sygmaprotocol-widget>
56-
</div>
57-
`
58-
}
59-
```
60-
61-
See [widget.ts](https://github.com/sygmaprotocol/sygma-widget/blob/main/packages/widget/src/widget.ts) for all of the available properties.
45+
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

+1-17
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ Add the following dependencies to integrate the widget into any React project:
1212

1313
```bash
1414
yarn add @polkadot/extension-inject # required for polkadot wallet injections
15-
yarn add -D @polkadot/types # required for environment configuration
1615
```
1716

1817
And similarly:
@@ -38,19 +37,4 @@ function MyDapp(){
3837
export default MyDapp;
3938
```
4039

41-
You can also pass props to the widget component to customize widget behaviour:
42-
43-
```ts
44-
function MyDapp(){
45-
return (
46-
<SygmaProtocolReactWidget
47-
environment={Environment.MAINNET}
48-
whitelistedSourceNetworks={["sepolia"]}
49-
whitelistedDestinationNetworks={["cronos"]}
50-
evmProvider={myEip1193Provider}
51-
/>;
52-
)
53-
}
54-
```
55-
56-
See [widget.ts](https://github.com/sygmaprotocol/sygma-widget/blob/main/packages/widget/src/widget.ts) for all of the available properties.
40+
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

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
id: sygma-props
3+
slug: /sygma-widget/props
4+
title: Properties
5+
description: The following section provides details on utilizing widget properties
6+
sidebar_position: 5
7+
---
8+
9+
# Widget Properties
10+
11+
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).
12+
13+
:::info
14+
Note that some properties require installing additional dependencies.
15+
:::
16+
17+
The currently available properties are:
18+
- **environment**
19+
- Desc: Determines whether the widget operates on the live network (mainnet) or a testing environment (testnet).
20+
- Usage:
21+
1. Install `@polkadot/types` dependency: `yarn add -D @polkadot/types`
22+
2. Configure either MAINNET or TESTNET environment inside the SygmaProtocolReactWidget: `<SygmaProtocolReactWidget environment={Environment.MAINNET} />`
23+
- **whitelistedSourceNetworks**
24+
- Desc: Specifies which blockchain networks can be selected as the source for transactions.
25+
- Usage: `<SygmaProtocolReactWidget whitelistedSourceNetworks={["sepolia"]} />`
26+
- **whitelistedDestinationNetworks**
27+
- Desc: Specifies which blockchain networks can be selected as the destination for transactions.
28+
- Usage: `<SygmaProtocolReactWidget whitelistedDestinationNetworks={["cronos"]} />`
29+
- **whitelistedSourceResources**
30+
- Desc: Defines which assets or resources (e.g., tokens) can be selected for transaction.
31+
- Usage: `<SygmaProtocolReactWidget whitelistedSourceResources={["resourceID1", "resourceID2"]} />`
32+
- **substrateProviders**
33+
- Desc: Specifies the API endpoints or connection details for Substrate-based blockchain networks.
34+
- Usage:
35+
1. Install `@polkadot-daily-snapshots/api` dependency: `yarn add -D @polkadot-daily-snapshots/api`
36+
2. Add import statements to the top of the app:
37+
`import { ApiPromise, WsProvider } from '@polkadot/api';`
38+
3. Setup a setState action:
39+
```ts
40+
const [substrateProviders, setSubstrateProviders] = useState<ApiPromise[]>(
41+
[]
42+
);
43+
```
44+
4. Initialize the provider:
45+
```ts
46+
useEffect(() => {
47+
const provider = new WsProvider('wss://rhala-node.phala.network/ws');
48+
const api = new ApiPromise({ provider });
49+
api.isReady.then(() => {
50+
console.log('API is ready');
51+
setSubstrateProviders([api]);
52+
});
53+
}, []);
54+
```
55+
5. Pass into the component:
56+
```ts
57+
<SygmaProtocolReactWidget
58+
substrateProviders={substrateProviders}
59+
/>
60+
```
61+
62+
63+
## Using Props In An Example
64+
65+
Below you will find an example of props being passed to whitelist (i.e enable) the source and destination networks in the React component:
66+
67+
```ts
68+
// App.tsx
69+
import React from "react";
70+
import { SygmaProtocolReactWidget } from "@buildwithsygma/sygmaprotocol-react-widget";
71+
import { Environment } from '@buildwithsygma/sygma-sdk-core';
72+
73+
function MyDapp() {
74+
const [count, setCount] = useState(0);
75+
76+
return (
77+
<SygmaProtocolReactWidget
78+
whitelistedSourceNetworks={["sepolia"]}
79+
whitelistedDestinationNetworks={["cronos"]}
80+
/>
81+
);
82+
}
83+
```

0 commit comments

Comments
 (0)