Merge pull request #66 from radixdlt/deps-update

Update JS dependancies and format code

.github/actions/setup-env/action.yml

@@ -1,5 +1,5 @@
-name: 'Setup environment'
-description: 'Common GH action to setup job environment'
+name: "Setup environment"
+description: "Common GH action to setup job environment"
 
 runs:
   using: "composite"
@@ -27,7 +27,7 @@ runs:
       if: runner.os == 'Linux'
       uses: RDXWorks-actions/actions-setup-cmake@master
       with:
-        cmake-version: '3.27.9'
+        cmake-version: "3.27.9"
     - name: Install libclang-dev
       if: runner.os == 'Linux'
       run: sudo apt-get -y update && sudo apt-get install clang libclang-dev -y -f
@@ -37,4 +37,4 @@ runs:
       # Switch to more recent LLVM/Clang 15.0.7
       # see: https://github.com/actions/runner-images/blob/macOS-12/20240105.3/images/macos/macos-12-Readme.md
       run: echo "$(brew --prefix llvm@15)/bin" >> $GITHUB_PATH
-      shell: bash
+      shell: bash

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false
+}

README.md

@@ -1,19 +1,19 @@
 # official-examples
+
 Examples for any part of the stack which are officially maintained.
 
 All code in this repository is licensed under the modified MIT license described in [LICENSE](LICENSE).
 
 You can find the Official Radix Documentation site at [docs.radixdlt.com](https://docs.radixdlt.com/docs)
 
 ## Table of Contents
+
 - [getting-started](https://github.com/radixdlt/official-examples/tree/main/getting-started)
 - [step-by-step](https://github.com/radixdlt/official-examples/tree/main/step-by-step)
 - [core-system-features](https://github.com/radixdlt/official-examples/tree/main/core-system-features)
 - [scrypto-design-patterns](https://github.com/radixdlt/official-examples/tree/main/scrypto-design-patterns)
 - [complete-reference-designs](https://github.com/radixdlt/official-examples/tree/main/complete-reference-designs)
 
-
-
 # License
 
 The Radix Official Examples code is released under Radix Modified MIT License.
@@ -40,4 +40,4 @@ The Radix Official Examples code is released under Radix Modified MIT License.
     COSTS OR OTHER LIABILITY OF ANY NATURE WHATSOEVER, WHETHER IN AN ACTION OF
     CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
     SOFTWARE OR THE USE, MISUSE OR OTHER DEALINGS IN THE SOFTWARE. THE AUTHORS SHALL
-    OWE NO DUTY OF CARE OR FIDUCIARY DUTIES TO USERS OF THE SOFTWARE.
+    OWE NO DUTY OF CARE OR FIDUCIARY DUTIES TO USERS OF THE SOFTWARE.

complete-reference-designs/README.md

@@ -1,3 +1,3 @@
 This section is intended to provide full end to end example projects. This is the place to look for examples that show how to use Scrypto to build a complete application. For more beginner friendly examples, see the step-by-step section.
 
-## Table of Contents
+## Table of Contents

core-system-features/README.md

@@ -1 +1 @@
-In this section you will find a collection examples that give you in depth information pertaining to to a specific topic. These are designed to give a deeper understanding of the topic and are not meant to be read in order. You can jump to any example you like. For more basic examples, see the step-by-step section. For more full-stack examples, see the complete-reference-designs section.
+In this section you will find a collection examples that give you in depth information pertaining to to a specific topic. These are designed to give a deeper understanding of the topic and are not meant to be read in order. You can jump to any example you like. For more basic examples, see the step-by-step section. For more full-stack examples, see the complete-reference-designs section.

getting-started/hello-token/README.md

@@ -69,4 +69,4 @@ The Radix Official Examples code is released under Radix Modified MIT License.
     COSTS OR OTHER LIABILITY OF ANY NATURE WHATSOEVER, WHETHER IN AN ACTION OF
     CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
     SOFTWARE OR THE USE, MISUSE OR OTHER DEALINGS IN THE SOFTWARE. THE AUTHORS SHALL
-    OWE NO DUTY OF CARE OR FIDUCIARY DUTIES TO USERS OF THE SOFTWARE.
+    OWE NO DUTY OF CARE OR FIDUCIARY DUTIES TO USERS OF THE SOFTWARE.

getting-started/react-js-dapp/README.md

@@ -88,7 +88,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         </AccountProvider>
       </RdtProvider>
     </GatewayApiProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );
 ```
 
@@ -239,11 +239,11 @@ const sendTransaction = useCallback(
 
     // Get the details of the transaction committed to the ledger
     const receipt = await gatewayApi.transaction.getCommittedDetails(
-      transactionResult.value.transactionIntentHash
+      transactionResult.value.transactionIntentHash,
     );
     return { transactionResult: transactionResult.value, receipt };
   },
-  [gatewayApi, rdt]
+  [gatewayApi, rdt],
 );
 ```
 

getting-started/react-js-dapp/package.json

@@ -3,26 +3,26 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
   "dependencies": {
-    "@radixdlt/babylon-gateway-api-sdk": "^1.6.1",
-    "@radixdlt/radix-dapp-toolkit": "^2.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@radixdlt/babylon-gateway-api-sdk": "^1.7.2",
+    "@radixdlt/radix-dapp-toolkit": "^2.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^8.55.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "vite": "^5.2.9"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
   }
 }

getting-started/react-js-dapp/src/AccountContext.jsx

@@ -26,7 +26,8 @@ export const AccountProvider = ({ children }) => {
 
   return (
     <AccountContext.Provider
-      value={{ accounts, setAccounts, selectedAccount, setSelectedAccount }}>
+      value={{ accounts, setAccounts, selectedAccount, setSelectedAccount }}
+    >
       {children}
     </AccountContext.Provider>
   );

getting-started/react-js-dapp/src/components/ClaimHello.jsx

@@ -32,7 +32,7 @@ export function ClaimHello(props) {
     console.log("manifest:", manifest);
 
     const { receipt } = await sendTransaction(manifest).finally(() =>
-      setLoading(false)
+      setLoading(false),
     );
     console.log("transaction receipt:", receipt);
   };
@@ -42,7 +42,8 @@ export function ClaimHello(props) {
       id="get-hello-token"
       onClick={handleClaimToken}
       disabled={!selectedAccount || !enableButtons}
-      className={loading ? "loading" : ""}>
+      className={loading ? "loading" : ""}
+    >
       Claim Hello Token
     </button>
   );

getting-started/react-js-dapp/src/components/CustomSelect.jsx

@@ -15,7 +15,7 @@ export const CustomSelect = ({ active, setActive, enableButtons }) => {
   const handleSelectAccount = (account) => {
     setSelectedAccount(account.address);
     setSelectClasses(
-      `select-button border-none account-appearance-${account.appearanceId}`
+      `select-button border-none account-appearance-${account.appearanceId}`,
     );
 
     setActive(false);
@@ -25,7 +25,7 @@ export const CustomSelect = ({ active, setActive, enableButtons }) => {
   const renderAccountLabel = (account) => {
     const shortAddress = `${account.address.slice(
       0,
-      4
+      4,
     )}...${account.address.slice(-6)}`;
     return `${account.label || "Account"} ${shortAddress}`;
   };
@@ -40,15 +40,16 @@ export const CustomSelect = ({ active, setActive, enableButtons }) => {
         aria-expanded={dropdownOpen}
         onClick={toggleDropdown}
         aria-controls="select-dropdown"
-        disabled={!enableButtons}>
+        disabled={!enableButtons}
+      >
         <span className="selected-value">
           {!enableButtons
             ? "Setup Dev Mode to choose an account"
             : selectedAccount && enableButtons
-            ? renderAccountLabel(
-                accounts.find((acc) => acc.address === selectedAccount)
-              )
-            : "Select an Account"}
+              ? renderAccountLabel(
+                  accounts.find((acc) => acc.address === selectedAccount),
+                )
+              : "Select an Account"}
         </span>
         <span className="arrow" />
       </button>
@@ -59,7 +60,8 @@ export const CustomSelect = ({ active, setActive, enableButtons }) => {
               key={account.address}
               role="option"
               className={`account-appearance-${account.appearanceId}`}
-              onClick={() => handleSelectAccount(account)}>
+              onClick={() => handleSelectAccount(account)}
+            >
               <label>{renderAccountLabel(account)}</label>
               <input
                 type="radio"

getting-started/react-js-dapp/src/components/DocumentationSection.jsx

@@ -11,14 +11,16 @@ function DocumentationSection() {
           href="https://docs.radixdlt.com/docs"
           className="btn-radix-blue"
           target="_blank"
-          rel="noreferrer">
+          rel="noreferrer"
+        >
           View Radix Docs
         </a>
         <a
           href="https://www.npmjs.com/package/@radixdlt/radix-dapp-toolkit"
           className="btn-dark"
           target="_blank"
-          rel="noreferrer">
+          rel="noreferrer"
+        >
           View dApp Toolkit
         </a>
       </div>

getting-started/react-js-dapp/src/hooks/useSendTransaction.js

@@ -20,11 +20,11 @@ export const useSendTransaction = () => {
 
       // Get the details of the transaction committed to the ledger
       const receipt = await gatewayApi.transaction.getCommittedDetails(
-        transactionResult.value.transactionIntentHash
+        transactionResult.value.transactionIntentHash,
       );
       return { transactionResult: transactionResult.value, receipt };
     },
-    [gatewayApi, rdt]
+    [gatewayApi, rdt],
   );
 
   return sendTransaction;

getting-started/react-js-dapp/src/index.jsx

@@ -29,5 +29,5 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         </AccountProvider>
       </GatewayApiProvider>
     </RdtProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );

getting-started/react-ts-dapp/README.md

@@ -88,7 +88,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         </AccountProvider>
       </RdtProvider>
     </GatewayApiProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );
 ```
 
@@ -239,11 +239,11 @@ const sendTransaction = useCallback(
 
     // Get the details of the transaction committed to the ledger
     const receipt = await gatewayApi.transaction.getCommittedDetails(
-      transactionResult.value.transactionIntentHash
+      transactionResult.value.transactionIntentHash,
     );
     return { transactionResult: transactionResult.value, receipt };
   },
-  [gatewayApi, rdt]
+  [gatewayApi, rdt],
 );
 ```
 

getting-started/react-ts-dapp/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

getting-started/react-ts-dapp/package.json

@@ -4,8 +4,8 @@
   "version": "0.0.0",
   "type": "module",
   "dependencies": {
-    "@radixdlt/babylon-gateway-api-sdk": "^1.6.1",
-    "@radixdlt/radix-dapp-toolkit": "^2.0.0",
+    "@radixdlt/babylon-gateway-api-sdk": "^1.7.2",
+    "@radixdlt/radix-dapp-toolkit": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",

getting-started/react-ts-dapp/src/AccountContext.tsx

@@ -44,7 +44,8 @@ export const AccountProvider = ({
 
   return (
     <AccountContext.Provider
-      value={{ accounts, setAccounts, selectedAccount, setSelectedAccount }}>
+      value={{ accounts, setAccounts, selectedAccount, setSelectedAccount }}
+    >
       {children}
     </AccountContext.Provider>
   );

getting-started/react-ts-dapp/src/components/ClaimHello.tsx

@@ -36,7 +36,7 @@ export const ClaimHello = ({
     console.log("manifest:", manifest);
 
     const result = await sendTransaction(manifest).finally(() =>
-      setLoading(false)
+      setLoading(false),
     );
     console.log("transaction receipt:", result?.receipt);
   };
@@ -46,7 +46,8 @@ export const ClaimHello = ({
       id="get-hello-token"
       onClick={handleClaimToken}
       disabled={!selectedAccount || !enableButtons}
-      className={loading ? "loading" : ""}>
+      className={loading ? "loading" : ""}
+    >
       Claim Hello Token
     </button>
   );

getting-started/react-ts-dapp/src/components/CustomSelect.tsx

@@ -24,7 +24,7 @@ export const CustomSelect = ({
   const handleSelectAccount = (account: WalletDataStateAccount) => {
     setSelectedAccount(account.address);
     setSelectClasses(
-      `select-button border-none account-appearance-${account.appearanceId}`
+      `select-button border-none account-appearance-${account.appearanceId}`,
     );
 
     setActive(false);
@@ -36,7 +36,7 @@ export const CustomSelect = ({
     if (!account || !selectedAccount) return "Select an Account";
     const shortAddress = `${account.address.slice(
       0,
-      4
+      4,
     )}...${account.address.slice(-6)}`;
     return `${account.label || "Account"} ${shortAddress}`;
   };
@@ -51,10 +51,11 @@ export const CustomSelect = ({
         aria-expanded={dropdownOpen}
         onClick={toggleDropdown}
         aria-controls="select-dropdown"
-        disabled={!enableButtons}>
+        disabled={!enableButtons}
+      >
         <span className="selected-value">
           {renderAccountLabel(
-            accounts.find((acc) => acc.address === selectedAccount)
+            accounts.find((acc) => acc.address === selectedAccount),
           )}
         </span>
         <span className="arrow" />
@@ -67,7 +68,8 @@ export const CustomSelect = ({
               role="option"
               className={`account-appearance-${account.appearanceId}`}
               onClick={() => handleSelectAccount(account)}
-              aria-selected={selectedAccount === account.address}>
+              aria-selected={selectedAccount === account.address}
+            >
               <label>{renderAccountLabel(account)}</label>
               <input
                 type="radio"

getting-started/react-ts-dapp/src/components/DocumentationSection.tsx

@@ -11,14 +11,16 @@ const DocumentationSection = () => {
           href="https://docs.radixdlt.com/docs"
           className="btn-radix-blue"
           target="_blank"
-          rel="noreferrer">
+          rel="noreferrer"
+        >
           View Radix Docs
         </a>
         <a
           href="https://www.npmjs.com/package/@radixdlt/radix-dapp-toolkit"
           className="btn-dark"
           target="_blank"
-          rel="noreferrer">
+          rel="noreferrer"
+        >
           View dApp Toolkit
         </a>
       </div>