chore: Add Sygma Widget playground (#154)

* chore: Add Sygma Widget playground

* Align with typecheck and spellcheck

* Add browser rendering for widget

* Update import

---------

Co-authored-by: mace <[email protected]>

Author: mj52951

dictionary.txt

@@ -449,6 +449,7 @@ rollup
 5EYCAe5jLbHcAAMKvLFSXgCTbPrLgBJusvPwfKcaKzuf5X5e
 Merkle
 sygma-widget-index
+sygma-widget-playground
 customizable
 frontend
 Vite

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

@@ -0,0 +1,20 @@
+---
+id: sygma-widget-playground
+slug: /sygma-widget/playground
+title: Playground
+description: The following section provides a Sygma Widget playground
+sidebar_position: 4
+---
+
+import App from '../../../src/Widget/App'; 
+
+<App />
+
+### Steps
+
+1. From network drop-down menu, select the desired network from which you want to bridge assets
+2. Connect your wallet by clicking `Connect Wallet` in the top-right corner
+3. From network drop-down menu, select the desired network to which you want to bridge assets
+3. From assets drop-down menu, select the asset you want to bridge
+4. Input the destination address
+5. `Approve token`

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@buildwithsygma/sygma-sdk-core": "^2.7.3",
+    "@buildwithsygma/sygmaprotocol-react-widget": "^0.1.2",
     "@cmfcmf/docusaurus-search-local": "^1.0.0",
     "@docusaurus/core": "^2.3.1",
     "@docusaurus/preset-classic": "^2.3.1",
@@ -24,6 +25,7 @@
     "@mdx-js/react": "^1.6.22",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
+    "@polkadot/extension-inject": "^0.47.5",
     "clsx": "^1.2.1",
     "js-cookie": "^3.0.5",
     "prism-react-renderer": "^1.3.5",
@@ -34,7 +36,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.3.1",
     "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.7.4"
+    "typescript": "^5.2.2"
   },
   "browserslist": {
     "production": [

src/Widget/App.tsx

@@ -0,0 +1,19 @@
+import { Environment } from '@buildwithsygma/sygma-sdk-core';
+import React from 'react';
+import { Container } from '@mui/material';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+function App(){
+  return (
+    <BrowserOnly fallback={<div>Loading...</div>}>
+        {() => {
+          const {SygmaProtocolReactWidget} = require('@buildwithsygma/sygmaprotocol-react-widget/build/WidgetReact'); 
+          return <Container sx={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+              <SygmaProtocolReactWidget environment={Environment.TESTNET} />
+              </Container>
+        }}
+    </BrowserOnly>
+  )
+}
+
+export default App;