+
Finally, in the case of the example dapps in the Soroban Dapps Challenge, there will often be a "Connect" button on the frontend of the dapps. Ensure that you are connected to the proper network and click on this button to connect your wallet. -
-
+
+
> Note: You will use Futurenet and the Standalone network throughout these challenges. - ## Wallet Integration: React Wallets are an essential part of any dapp. They allow users to interact with the blockchain and sign transactions. In this section, you'll learn how to integrate wallets into your React dapps. @@ -114,4 +118,4 @@ Here's a breakdown of the code: ## Conclusion -In this section, you learned how to integrate wallets into your dapps. You also learned how to use the `useAccount` and `useNetwork` hooks to access account and network data. If you want to learn more about Soroban Dapp development, please reach out to us on [Discord](https://discord.com/channels/897514728459468821/1037073682599780494). We'd love to hear from you! \ No newline at end of file +In this section, you learned how to integrate wallets into your dapps. You also learned how to use the `useAccount` and `useNetwork` hooks to access account and network data. If you want to learn more about Soroban Dapp development, please reach out to us on [Discord](https://discord.com/channels/897514728459468821/1037073682599780494). We'd love to hear from you! diff --git a/dapps/scaffold-soroban.mdx b/dapps/scaffold-soroban.mdx index edf07d1f..15c4960b 100644 --- a/dapps/scaffold-soroban.mdx +++ b/dapps/scaffold-soroban.mdx @@ -4,9 +4,9 @@ title: Scaffold Soroban description: Dive into the simple implementations of Soroban dapps to understand and learn the Soroban ecosystem. --- -import ReactPlayer from 'react-player' +## Demonstrative Soroban Dapps -# Scaffold Soroban: Demonstrative Soroban Dapps +import ReactPlayer from "react-player"; 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. @@ -17,32 +17,43 @@ During the Soroban Hackathon, we recognized that while the frontend libraries we To tackle this, the **Wallet Engineering** team, in collaboration with the Soroban team, has decided to launch “Scaffold 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) -
| Title | +Link | +Tags | +
|---|
- ` element that is contained within the item. The result is a
+ * single "Tutorials/Guides" page that contains the list of all the docs
+ * underneath it, while those items are not displayed in the sidebar.
+ */
+ args.docs.map((doc) => {
+ if (doc.id === 'guides/README' || doc.id === 'tutorials/README') {
+ doc.frontMatter.sidebar_class_name = "sidebar-category-items-hidden"
+ }
+ })
+ } else if (args.version.contentPath.endsWith('guides')) {
+ /**
+ * Adds the `hide_table_of_contents` directive to each of the "Guides"
+ * docs so that the page width isn't shrunk down.
+ *
+ * @todo For whatever reason, this doesn't appear to work like the
+ * sidebar class name does (above). For now, make sure to manually add
+ * `hide_table_of_contents: true` to the front matter of each guide doc.
+ */
+ args.docs.map((doc) => {
+ doc.frontMatter.hide_table_of_contents = true
+ })
+ }
+
+ const sidebarItems = await defaultSidebarItemsGenerator({ ...args })
+ return sidebarItems
+}
diff --git a/src/theme/DocCardList/index.js b/src/theme/DocCardList/index.js
new file mode 100644
index 00000000..88558cb4
--- /dev/null
+++ b/src/theme/DocCardList/index.js
@@ -0,0 +1,104 @@
+import React, {useState} from 'react';
+import clsx from 'clsx';
+import {
+ useCurrentSidebarCategory,
+ filterDocCardListItems,
+} from '@docusaurus/theme-common';
+import {
+ useDocById,
+} from '@docusaurus/theme-common/internal';
+import DocCard from '@theme/DocCard';
+import styles from './style.module.css'
+import { title } from 'process';
+
+function DocCardListForCurrentSidebarCategory({className}) {
+ const category = useCurrentSidebarCategory();
+ return category.label === 'Tutorials'
+ ?
+ {items.map((item, index) => {
+ if (item.type === 'category') {
+ return (
+
+
+ )
+ }
+ })}
+
+ )
+}
+
+function TutorialsDocCardList(props) {
+ const [tutorialLevel, setTutorialLevel] = useState('All');
+ const [tutorialQuery, setTutorialQuery] = useState('');
+
+ const {items, className} = props;
+ const filteredItems = filterDocCardListItems(items);
+
+ const filterDocCardsByTutorialLevel = (level) => {
+ return filteredItems.filter(item => level.toLowerCase() === 'all' ? true : item.customProps?.tutorial?.level === level.toLowerCase())
+ }
+ let filteredDocCards = filterDocCardsByTutorialLevel(tutorialLevel)
+
+ const filterDocCardsByTutorialQuery = (query) => {
+ return filteredDocCards.filter(item => query !== '' ? item.label.toLowerCase().includes(query.toLowerCase()) || item.description.toLowerCase().includes(query.toLowerCase()) : true)
+ }
+ filteredDocCards = filterDocCardsByTutorialQuery(tutorialQuery)
+
+ return (
+ <>
+ {item.label}
+ {item.items.map((item, index) => + + )} +
+
+
+
+
+
+ setTutorialQuery(e.target.value)} />
+
+ {item.label} - {item.description}
+ ) + })} +
+ {metadata.permalink !== '/docs/guides/' &&
+ }