Merge pull request #25 from AElfProject/feature/tutorials

feat: tutorials
AElfProject · Aug 7, 2024 · 568c323 · 568c323
2 parents 8644aac + 486af06
commit 568c323
Show file tree

Hide file tree

Showing 28 changed files with 3,837 additions and 108 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,13 +1,12 @@
 import type { Metadata } from "next";
 import { Poppins } from "next/font/google";
 import "./globals.css";
-import { ThemeProvider } from "@/components/theme-provider";
 import { PropsWithChildren, Suspense } from "react";
 import TopMenu from "@/components/top-menu";
 import clsx from "clsx";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import { getGoogleAnalyticsTag } from "@/lib/env";
-import { InversifyProvider } from "@/di/providers";
+import Providers from "@/components/providers";
 
 const font = Poppins({
   weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
@@ -26,20 +25,12 @@ export default function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="en">
       <body className={clsx(font.className, "overflow-hidden")}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-          storageKey="next-theme"
-        >
+        <Providers>
           <TopMenu />
           <main className="h-[calc(100vh-66px)] overflow-auto">
-            <InversifyProvider>
-              <Suspense>{children}</Suspense>
-            </InversifyProvider>
+            <Suspense>{children}</Suspense>
           </main>
-        </ThemeProvider>
+        </Providers>
       </body>
       {gaId ? <GoogleAnalytics gaId={gaId} /> : null}
     </html>

diff --git a/app/tutorials/[id]/_content/hello-world/hello-world.mdx b/app/tutorials/[id]/_content/hello-world/hello-world.mdx
@@ -0,0 +1,106 @@
+# Hello World Contract
+
+**Description**: This is the simplest contract to get you started. It introduces the
+basic structure of a smart contract and shows how to deploy and interact with
+it.
+
+**Purpose**: To familiarize you with the basic syntax and deployment process of
+smart contracts on aelf blockchain.
+
+**Difficulty Level**: Easy
+
+## Step 1 - Adding Your Smart Contract Code
+
+First, generate the template: <GenerateTemplate />.
+
+We'll start by creating methods to update and read a message stored in the contract.
+
+The implementation of file `src/HelloWorldState.cs` is as follows:
+
+```csharp title="HelloWorldState.cs"
+using AElf.Sdk.CSharp.State;
+
+namespace AElf.Contracts.HelloWorld
+{
+    // The state class is access the blockchain state
+    public class HelloWorldState : ContractState
+    {
+        // A state that holds string value
+        // highlight-next-line
+        public StringState Message { get; set; }
+    }
+}
+```
+
+The implementation of file `src/HelloWorld.cs` is as follows:
+
+```csharp title="HelloWorld.cs"
+// contract implementation starts here
+namespace AElf.Contracts.HelloWorld
+{
+    public class HelloWorld : HelloWorldContainer.HelloWorldBase
+    {
+        // A method that updates the contract state, Message with a user input
+        // highlight-start
+        public override Empty Update(StringValue input)
+        {
+            State.Message.Value = input.Value;
+            Context.Fire(new UpdatedMessage
+            {
+                Value = input.Value
+            });
+            return new Empty();
+        }
+
+        // A method that reads the contract state, Message
+        public override StringValue Read(Empty input)
+        {
+            var value = State.Message.Value;
+            return new StringValue
+            {
+                Value = value
+            };
+        }
+        // highlight-end
+    }
+}
+```
+
+## Step 2 - Building Smart Contract
+
+Build the new code by clicking the Build button.
+
+## Step 3 - Deploy Smart Contract
+
+Deploy the new code by clicking the Deploy button.
+
+## 🎯 Conclusion
+
+#### 🎊 Congratulations!
+
+You've successfully completed the Hello World Contract tutorial!
+Awesome job sticking with it until the end. 🌟
+
+#### 📚 What You've Learned
+
+In this tutorial, you've discovered:
+
+- 🛠️ How to set up your development environment for aelf.
+- 💻 The basics of writing a smart contract in C# for the aelf blockchain.
+- 🚀 How to deploy your Hello World Contract on the aelf network.
+
+#### 🔍 Final Output
+
+By now, you should have:
+
+- 📜 A deployed Hello World Contract on the aelf blockchain.
+
+To verify, you should have seen the **`test`** message returned when you called the Read method after setting it using the Update method. If you see this message, you've nailed it! 🏆
+
+#### ➡️ What's Next?
+
+Now that you've got the basics down, why not dive into more advanced topics or other tutorials like the Lottery Game Contract or Voting Contract? 
+
+Keep experimenting and building to level up your aelf blockchain development skills. 🚀
+
+Happy coding! 😊