From 14e8e11ebc857e81b7cfa97e7c3c7f28d8dbccc3 Mon Sep 17 00:00:00 2001
From: Dennis Zoma <dennis@scio.xyz>
Date: Mon, 4 Dec 2023 16:30:07 +0100
Subject: [PATCH] feat: Add workshop snippets file & Minor improvements

---
 .changeset/tiny-wombats-tickle.md             |   6 +
 .gitignore                                    |   6 -
 .vscode/workshop.code-snippets                | 109 ++++++++++++++++++
 .../web3/greeter-contract-interactions.tsx    |  39 ++++---
 4 files changed, 135 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/tiny-wombats-tickle.md
 create mode 100644 .vscode/workshop.code-snippets

diff --git a/.changeset/tiny-wombats-tickle.md b/.changeset/tiny-wombats-tickle.md
new file mode 100644
index 0000000..a161154
--- /dev/null
+++ b/.changeset/tiny-wombats-tickle.md
@@ -0,0 +1,6 @@
+---
+'@inkathon/frontend': patch
+'@inkathon/contracts': patch
+---
+
+Add sample code snippets from live workshops (greeter message reversion & make-it-rain script)
diff --git a/.gitignore b/.gitignore
index c5581a0..657428b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,10 +40,4 @@ coverage
 coverage.json
 
 # VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-!.vscode/*.code-workspace
 .history/
diff --git a/.vscode/workshop.code-snippets b/.vscode/workshop.code-snippets
new file mode 100644
index 0000000..841288e
--- /dev/null
+++ b/.vscode/workshop.code-snippets
@@ -0,0 +1,109 @@
+{
+  "Workshop Contracts Snippet #1": {
+    "scope": "rust",
+    "prefix": "Workshop Contracts Snippet #1",
+    "body": [
+      "/// Reverses and stores the `message` string",
+      "#[ink(message)]",
+      "pub fn reverse_message(&mut self) {",
+      "    self.message = self.message.chars().rev().collect::<String>();",
+      "}"
+    ]
+  },
+  "Workshop Contracts Snippet #2": {
+    "scope": "rust",
+    "prefix": "Workshop Contracts Snippet #2",
+    "body": [
+      "#[ink::test]",
+      "fn reverse_message_works() {",
+      "    let message_1 = String::from(\"gm ink!\");",
+      "    let message_1_reversed = String::from(\"!kni mg\");",
+      "    let mut greeter = Greeter::new(message_1.clone());",
+      "    assert_eq!(greeter.greet(), message_1);",
+      "    greeter.reverse_message();",
+      "    assert_eq!(greeter.greet(), message_1_reversed);",
+      "}"
+    ]
+  },
+  "Workshop Frontend Snippet #1": {
+    "scope": "typescriptreact",
+    "prefix": "Workshop Frontend Snippet #1",
+    "body": [
+      "// Reverse Greeting",
+      "const reverseGreeting = async () => {",
+      "  if (!activeAccount || !contract || !activeSigner || !api) {",
+      "    toast.error('Wallet not connected. Try again…')",
+      "    return",
+      "  }",
+      "",
+      "  setUpdateIsLoading(true)",
+      "  try {",
+      "    await contractTxWithToast(api, activeAccount.address, contract, 'reverseMessage', {}, [])",
+      "  } catch (e) {",
+      "    console.error(e)",
+      "  } finally {",
+      "    setUpdateIsLoading(false)",
+      "    await fetchGreeting()",
+      "  }",
+      "}",
+    ]
+  },
+  "Workshop Frontend Snippet #2": {
+    "scope": "typescriptreact",
+    "prefix": "Workshop Frontend Snippet #2",
+    "body": [
+      "{/* Reverse Greeting */}",
+      "<Card>",
+      "  <CardContent className=\"pt-6\">",
+      "    <Button",
+      "      type=\"button\"",
+      "      onClick={reverseGreeting}",
+      "      className=\"w-full bg-primary font-bold\"",
+      "      disabled={fetchIsLoading || updateIsLoading}",
+      "      isLoading={updateIsLoading}",
+      "    >",
+      "      Submit",
+      "    </Button>",
+      "  </CardContent>",
+      "</Card>",
+    ]
+  }
+  "Workshop Scripts Snippet #1": {
+    "scope": "typescript",
+    "prefix": "Workshop Scripts Snippet #1",
+    "body": [
+      "import { transferBalance } from '@scio-labs/use-inkathon'",
+      "import { initPolkadotJs } from './utils/initPolkadotJs'",
+      "",
+      "/**",
+      " * Example script that transfers tokens to the passed address from Alice.",
+      " *",
+      " * Parameters:",
+      " *  - `ACCOUNT_URI`: Sender address URI (i.e. `//Alice`)",
+      " *  - `ADDRESS`: Receiver address",
+      " *  - `AMOUNT`: Token amount to transfer (optional, defaults to `100`)",
+      " *  - `CHAIN`: Chain ID (optional, defaults to `development`)",
+      " *",
+      " * Example usage:",
+      " *  - `ADDRESS=5fei… pnpm run script make-it-rain`",
+      " */",
+      "const main = async () => {",
+      "  const { api, account, toBNWithDecimals } = await initPolkadotJs()",
+      "",
+      "  const receiverAddress = process.env.ADDRESS",
+      "  if (!receiverAddress) throw new Error('Missing `ADDRESS` variable')",
+      "  const tokenAmount = toBNWithDecimals(process.env.AMOUNT ? parseInt(process.env.AMOUNT) : 100)",
+      "",
+      "  console.log(`\nTransferring ${tokenAmount} tokens to ${receiverAddress}…`)",
+      "  await transferBalance(api, account, receiverAddress, tokenAmount)",
+      "}",
+      "",
+      "main()",
+      "  .catch((error) => {",
+      "    console.error(error)",
+      "    process.exit(1)",
+      "  })",
+      "  .finally(() => process.exit(0))",
+    ]
+  }
+}
diff --git a/frontend/src/components/web3/greeter-contract-interactions.tsx b/frontend/src/components/web3/greeter-contract-interactions.tsx
index 30081a4..7207803 100644
--- a/frontend/src/components/web3/greeter-contract-interactions.tsx
+++ b/frontend/src/components/web3/greeter-contract-interactions.tsx
@@ -99,25 +99,26 @@ export const GreeterContractInteractions: FC = () => {
           {/* Update Greeting */}
           <Card>
             <CardContent className="pt-6">
-              <form onSubmit={handleSubmit(updateGreeting)}>
-                <div className="flex flex-col justify-end gap-2">
-                  <FormItem>
-                    <FormLabel className="text-base">Update Greeting</FormLabel>
-                    <FormControl>
-                      <div className="flex gap-2">
-                        <Input disabled={updateIsLoading} {...register('newMessage')} />
-                        <Button
-                          className="bg-primary font-bold"
-                          disabled={fetchIsLoading || updateIsLoading}
-                          isLoading={updateIsLoading}
-                          type="submit"
-                        >
-                          Submit
-                        </Button>
-                      </div>
-                    </FormControl>
-                  </FormItem>
-                </div>
+              <form
+                onSubmit={handleSubmit(updateGreeting)}
+                className="flex flex-col justify-end gap-2"
+              >
+                <FormItem>
+                  <FormLabel className="text-base">Update Greeting</FormLabel>
+                  <FormControl>
+                    <div className="flex gap-2">
+                      <Input disabled={updateIsLoading} {...register('newMessage')} />
+                      <Button
+                        type="submit"
+                        className="bg-primary font-bold"
+                        disabled={fetchIsLoading || updateIsLoading}
+                        isLoading={updateIsLoading}
+                      >
+                        Submit
+                      </Button>
+                    </div>
+                  </FormControl>
+                </FormItem>
               </form>
             </CardContent>
           </Card>