Add scaffold soroban

dapps/scaffold-soroban.mdx

@@ -0,0 +1,71 @@
+---
+sidebar_position: 2
+title: Scaffold Soroban
+description: Dive into the simple implementations of Soroban dapps to understand and learn the Soroban ecosystem.
+---
+
+import ReactPlayer from 'react-player'
+
+# Scaffold Soroban: Demonstrative Soroban Dapps
+
+The **Soroban** team has invested considerable effort into contract implementation. They’ve built CLI’s and libraries, enabling contract builders to create and invoke using Rust, which forms the “backend” of Soroban. However, the “frontend”, which involves JS client libraries, required attention.
+
+## Background
+
+During the Soroban Hackathon, we recognized that while the frontend libraries were functional, their user experience was far from ideal. Furthermore, the lack of clear examples made it harder for dapp creators to design and understand Soroban's UX.
+
+To tackle this, the **Wallet Engineering** team, in collaboration with the Soroban team, has decided to launch “Scaffoled Soroban”, a collection of demo dapps. These dapps demonstrate basic functionalities in a structured, easy-to-follow manner, primarily focusing on how to construct/deploy Soroban contract invocations.
+
+## Dapp Demos
+For easy accessibility, we have compiled the dapps into a [single repository](https://github.com/stellar/scaffold-soroban), which contains the following dapps:
+
+### [1. Payment Dapp](https://github.com/stellar/soroban-react-payment)
+
+
+This dapp mirrors the Soroban payment flow in Freighter by using the wallet’s Soroban token balances to invoke the `xfer` method on the token’s contract.
+
+See the [demo](https://github.com/stellar/soroban-react-payment/releases/tag/v1.0.0)
+<ReactPlayer controls url='https://user-images.githubusercontent.com/6789586/244450707-2ca53a9c-7493-47a1-aee6-cb126d6e32f8.mp4' />
+
+
+### [2. Mint Token Dapp](https://github.com/stellar/soroban-react-mint-token)
+
+This dapp allows a token admin to mint tokens by using the admin account to invoke the `mint` method on the token’s contract.
+
+See the [demo](https://github.com/stellar/soroban-react-mint-token/releases/tag/v1.0.0)
+<ReactPlayer controls url='https://user-images.githubusercontent.com/6886006/246495488-1b02da2c-5119-47c6-ab38-fbaa73a26f12.mov' />
+
+### [3. Atomic Swap Dapp](https://github.com/stellar/soroban-react-atomic-swap)
+
+This dapp demonstrates a simplified swap between two tokens by using the wallet’s Soroban token balances to invoke the `swap` method on the atomic swap contract.
+
+See the [demo](https://github.com/stellar/soroban-react-atomic-swap/releases/tag/v1.0.0)
+<ReactPlayer controls url='https://user-images.githubusercontent.com/6886006/258894451-19f4363b-e6e3-4d32-973a-6d99fd0d9847.mov' />
+
+### How To Explore the Dapps on Scaffold-Soroban
+
+To begin using these examples, navigate to [Scaffold-Soroban](https://scaffold-soroban.stellar.org/) and choose the name of the dapp you're interested in from the "select demo" dropdown:
+
+- **Payment**: Choose "payment".
+- **Token Minter**: Select "mint-token".
+- **Atomic Swap**: Opt for "atomic-swap".
+
+Dive in and discover the power of Soroban!
+
+## Functionality Behind the Dapps
+
+With the introduction of these dapps, let's delve deeper into some of their [standout features](https://github.com/stellar/soroban-react-atomic-swap/blob/main/src/helpers/soroban.ts) that showcase the power and innovation behind the dapps:
+
+Functionality behind the dapps is extensive and diverse, leveraging the `soroban-client` library to integrate with the Soroban RPC and facilitating direct communication with Soroban using a JSON RPC interface on the Stellar network. They are equipped to communicate across different network setups, as they incorporate the `RPC_URLS` and `getServer` functionalities, providing adaptability that is crucial for various development and deployment scenarios. Users can retrieve user-friendly token information without engaging with complex blockchain operations, by utilizing functions like `getTokenSymbol`, `getTokenName`, and `getTokenDecimals`.
+
+A significant feature is the `simulateTx` function, which allows users to preview the outcome of a transaction before actually executing it. `simulateTx` allows users to submit a trial contract invocation by first running a simulation of the contract invocation as defined on the incoming transaction. The results are then applied to a new copy of the transaction, which is returned with the ledger footprint and authorization set, making it ready for signing and sending. The returned transaction will also have an updated fee, the sum of the fee set on the incoming transaction with the contract resource fees estimated from the simulation. It is advisable to check the fee on the returned transaction and validate or take appropriate measures for interaction with the user to confirm it is acceptable. 
+
+Other utilities such as `accountToScVal` and `numberToI128` are also provided to simplify transaction creation by converting user-friendly inputs into the formats expected by the Soroban RPC on the Stellar network. Furthermore, the dapps are built with premade helper functions such as the `makePayment` function which facilitates streamlined "transfer" operations and also includes memos for supplementary transaction-related information.
+
+The code referenced showcases various functionalities including sending transactions, retrieving token information, simulating transactions, building swaps, and authorizing contract calls, all of which are ready to be cloned, customized, and expanded upon to suit your unique needs and ideas.
+
+## Conclusion
+
+We hope these dapps will help you understand the Soroban ecosystem better and inspire you to build your own dapps using tools like [soroban-client](https://github.com/stellar/js-soroban-client) and [freighter-api](https://www.npmjs.com/package/@stellar/freighter-api). We look forward to seeing what you create!
+
+For any queries or discussions, don't hesitate to join us on [Discord!](https://discord.com/channels/897514728459468821/1037073682599780494).

package.json

@@ -60,10 +60,11 @@
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "mdast-util-to-markdown": "^1.4.0",
     "prettier": "^3.0.0",
+    "react-player": "^2.12.0",
     "remark-cli": "^11.0.0",
     "remark-frontmatter": "^4.0.1",
     "remark-mdx": "1",
     "typescript": "^4.9.4",
     "unist-util-visit": "^2.0.3"
   }
-}
+}