From 39c40a7913e0d9cd5a659b6779067c6484eed725 Mon Sep 17 00:00:00 2001 From: Apisit Toompkadee Date: Mon, 7 Feb 2022 21:58:43 +0900 Subject: [PATCH 01/26] add filter in tooling --- src/pages/resources.js | 150 +++++++++++++++++++++++++++++------------ 1 file changed, 107 insertions(+), 43 deletions(-) diff --git a/src/pages/resources.js b/src/pages/resources.js index 15e0ec6..75098d8 100644 --- a/src/pages/resources.js +++ b/src/pages/resources.js @@ -3,6 +3,7 @@ import Layout from '@theme/Layout'; import Link from '@docusaurus/Link'; export default function Tooling() { + const [selectedTag, setSelectedTag] = React.useState("") const data = [ { title: "Development Environments", @@ -13,7 +14,7 @@ export default function Tooling() { description: "The Neo Blockchain Toolkit is a one-stop-shop for creating and preparing smart contracts for production, seamlessly integrated with VS Code, the most popular code editor. Out of the box, developers can easily deploy private networks, compile, deploy, and invoke smart contracts, or tap into its fully integrated debugging experience. With time-travel debug support, a source-mapped opcode view, and an automated test harness, NBT provides a best-in-class blockchain development experience.", icon_url: "/tooling/neoblockchaintoolkit.png", web_url: "https://marketplace.visualstudio.com/items?itemName=ngd-seattle.neo-blockchain-toolkit", - tag: ["c#"] + tags: ["c#"] }, { name: "Neo Compiler Eco", @@ -21,7 +22,7 @@ export default function Tooling() { description: "Allows developers to code and compile smart contracts via web interface and deploy them to a TestNet without having to install any other development tools. NeoCompiler Eco currently supports C# for compiling, deployment and testing.", icon_url: "/tooling/neocompiler.png", web_url: "https://neocompiler.io/", - tag: "" + tags: ["c#"] }, { name: "NEO•ONE", @@ -29,7 +30,7 @@ export default function Tooling() { description: "NEO•ONE is an end-to-end development framework for Neo applications created with TypeScript or JavaScript. Like the Blockchain Toolkit, it includes tools for local network setup, contract compiling and deploying, wallet handling, automated testing, and also provides client APIs to simplify interaction with deployed contracts.", icon_url: "/tooling/neo-one.svg", web_url: "https://n3.neo-one.io/", - tag: ["typescript", "js"] + tags: ["typescript", "js"] }, { name: "Neo Playground", @@ -37,7 +38,7 @@ export default function Tooling() { description: "Neo playground is a development environment that packages the features of the Neo Blockchain Toolkit into a VS Code web client with a number of additional utilities. It is designed for team collaboration in a controlled development environment.", icon_url: "/tooling/neow3j.png", web_url: "https://neo-playground.dev/", - tag: ["java"] + tags: ["java"] } ] }, @@ -50,7 +51,7 @@ export default function Tooling() { description: "WalletConnect is an open protocol to communicate securely between Wallets and Dapps", icon_url: "/tooling/walletconnect.svg", web_url: "https://neon.coz.io/wksdk/core/index.html", - tag: ["js"] + tags: ["js"] }, { name: "dAPI", @@ -58,7 +59,7 @@ export default function Tooling() { description: "dAPI is a wallet interface for decentralized applications which allows users to sign transaction requests on applications without exposing their private key.", icon_url: "/tooling/neo-line.png", web_url: "https://neoline.io/dapi/N3.html", - tag: "" + tags: [] }, { name: "dora", @@ -66,7 +67,7 @@ export default function Tooling() { description: "Dora is a high speed block explorer with N3 and Neo Legacy integrations. A public API is also exposed, allowing developers to easily acquire information about supported blockchains including chain stats, contract storage, and more.", icon_url: "/tooling/dora.png", web_url: "https://dora.coz.io/", - tag: "" + tags: [] }, { name: "Faucet", @@ -74,7 +75,7 @@ export default function Tooling() { description: "The faucet is an ecosystem utility for acquiring GAS which is the native token required to publish transactions to the network. This faucet is configured to work with the N3 Testnet.", icon_url: "/tooling/ngd.png", web_url: "https://neowish.ngd.network/#/", - tag: "" + tags: [] }, { name: "NeoTube", @@ -82,7 +83,7 @@ export default function Tooling() { description: "NeoTube is a reliable Neo block explorer with seperate versions for Neo Legacy and N3. Network statistics, fungible and non-fungible assets, and contract lists are all provided.", icon_url: "/tooling/ngd.png", web_url: "https://neo3.neotube.io/", - tag: "" + tags: [] }, { name: "NeoFS", @@ -90,7 +91,7 @@ export default function Tooling() { description: "NeoFS is a distributed, decentralized object storage network developed by Neo SPCC. Built with Neo blockchain integration in mind, NeoFS aims to support the shift away from third-party storage providers, providing users with complete control over their data.", icon_url: "/tooling/nspcc.png", web_url: "https://fs.neo.org/", - tag: ["go"] + tags: ["go"] }, { name: "Oracles", @@ -98,7 +99,7 @@ export default function Tooling() { description: "Oracles are a utility which can be leveraged by smart contracts to interface with systems outside the Neo blockchain using http(s).", icon_url: "/tooling/ngd.png", web_url: "https://docs.neo.org/docs/en-us/advanced/oracle.html", - tag: ["c#"] + tags: ["c#"] } ] }, @@ -111,7 +112,7 @@ export default function Tooling() { description: "This project is the reference architecture for a neo full-node. It reprents the atomic building block of the Neo blockchain and includes all of the CLI functionality required to interface with the network.", icon_url: "/tooling/neo-cli.svg", web_url: "https://github.com/neo-project/neo-node", - tag: ["c#"] + tags: ["c#"] }, { name: "Neo GUI", @@ -119,7 +120,7 @@ export default function Tooling() { description: "The Neo GUI project wraps a neo node in an electron app, exposing many of its features in a graphical interface.", icon_url: "/tooling/neo-gui.png", web_url: "https://docs.neo.org/docs/en-us/node/gui/install.html", - tag: ["c#"] + tags: ["c#"] }, { name: "Neo-Go", @@ -127,7 +128,7 @@ export default function Tooling() { description: "Neo-Go is a fully featured and well documented alternative implementation of the core Neo stack, written in Go. Provides a highly performant node implementation, a compiler for Go smart contracts, and an SDK for app integration.", icon_url: "/tooling/nspcc.png", web_url: "https://github.com/nspcc-dev/neo-go/releases", - tag: ["go"] + tags: ["go"] } ] }, @@ -140,7 +141,7 @@ export default function Tooling() { description: "Mamba is a python SDK on steroids. Leveraging the lessons learned on the neo-python project, we have completely rearchitected our popular python tool to significantly improve its usability. If you want to perform any operation with Neo ranging from transaction execution to chain sync, you can do it in Mamba. Mamba is bundled with our Blink VM, a high performance N3 virtual machine capable of speeds over twenty times faster than official release.", icon_url: "/tooling/mamba.png", web_url: "https://dojo.coz.io/", - tag: ["python"] + tags: ["python"] }, { name: "Neo-gogogo", @@ -148,7 +149,7 @@ export default function Tooling() { description: "Neo-gogogo is a lightweight Go SDK that provides all the structures and methods required to interface with the Neo blockchain. All the necessary tools are available for any kind of application, making it easy to manage wallets, verify state proofs, interact with contracts and tokens, build transactions, send RPC requests, and more.", icon_url: "/tooling/ngd.png", web_url: "https://github.com/neo-ngd/neo3-gogogo", - tag: ["go"] + tags: ["go"] }, { name: "neon.js", @@ -156,7 +157,7 @@ export default function Tooling() { description: "Neon.js provides users with a complete set of javascript tools for integration with Neo. Neon.js is heavily leveraged in applications where the client directly communicates with the blockchain.", icon_url: "/tooling/neon-js.png", web_url: "https://github.com/CityOfZion/neon-js", - tag: ["js"] + tags: ["js"] }, { name: "Neow3j", @@ -164,7 +165,7 @@ export default function Tooling() { description: "Neow3j is a Java library that aims to provide easy and reliable integration with Neo nodes. It supports Neo RPC, asset transfers, smart contract invocations and deployments, NEP-2, NEP-6, building, signing and sending raw transactions, and more.", icon_url: "/tooling/neow3j.png", web_url: "https://neow3j.io/#/overview/getting_started?id=sdk", - tag: ["java"] + tags: ["java"] }, { name: "RpcClient", @@ -172,7 +173,7 @@ export default function Tooling() { description: "Neo RPC SDK is a dependency library used to streamline the integration of C# applications with Neo. Well suited for games, wallets, and other projects, the RPC SDK makes it easy to construct transactions, invoke RPC interfaces, and call deployed contracts.", icon_url: "/tooling/ngd.png", web_url: "https://docs.neo.org/docs/en-us/develop/tool/sdk/introduction.html", - tag: ["c#"] + tags: ["c#"] } ] }, @@ -185,7 +186,7 @@ export default function Tooling() { description: "Boa is a compiler for smart contracts written in Python. Designed to feel as natural as possible for Python developers, Boa contracts are assisted with decorators, helper functions, type hints, and support testing against the core VM TestEngine. Debug data generated by the compiler also follows the standard format, enabling debugging through the Neo Blockchain Toolkit.", icon_url: "/tooling/boa.png", web_url: "https://dojo.coz.io/neo3/boa/index.html", - tag: ["python"] + tags: ["python"] }, { name: "Neo-Go", @@ -193,7 +194,7 @@ export default function Tooling() { description: "Neo-Go is a fully featured and well documented alternative implementation of the core Neo stack, written in Go. Provides a highly performant node implementation, a compiler for Go smart contracts, and an SDK for app integration.", icon_url: "/tooling/nspcc.png", web_url: "https://github.com/nspcc-dev/neo-go/releases", - tag: ["go"] + tags: ["go"] }, { name: "neo-devpack", @@ -201,7 +202,7 @@ export default function Tooling() { description: "The core neo devpack for dotnet provides all the tools required to compile smart contracts written in C#. In addition to producing deployable NEF contract files, the compiler also emits manifest files and debug information following a standard format for use in the Neo Debugger.", icon_url: "/tooling/nspcc.png", web_url: "https://github.com/nspcc-dev/neo-go/releases", - tag: ["c#"] + tags: ["c#"] }, { name: "Neow3j", @@ -209,44 +210,107 @@ export default function Tooling() { description: "Neow3j is a Java library that aims to provide easy and reliable integration with Neo nodes. It supports Neo RPC, asset transfers, smart contract invocations and deployments, NEP-2, NEP-6, building, signing and sending raw transactions, and more.", icon_url: "/tooling/neow3j.png", web_url: "https://neow3j.io/#/overview/getting_started?id=sdk", - tag: ["java"] + tags: ["java"] } ] }, ] + + const allTags = () => { + var tags = [] + data.map((category) => { + category.tools.map((tool) => { + tool.tags.map((tag) => { + if (tags.includes(tag) == false) + tags.push(tag) + }) + }) + }) + return tags + } + + React.useEffect(() => { + if (window.location.hash.length == 0) { + setSelectedTag("") + } else { + const hash = window.location.hash.slice(1).toLowerCase(); + setSelectedTag(hash) + } + }, [window.location.hash]) + return (
+ +
+

Resources & Tooling

+
+
+ +
+
+
+ { data.map((category) => (

{category.title}

{ - category.tools.map((tool) => ( -
-
-
- -
-
-

{tool.name}

-

{tool.by}

-

{tool.description}

- - Learn more - - - - - + category.tools.filter((tool) => { return tool.tags.includes(selectedTag) || selectedTag == "" }).length == 0 ? + + : + category.tools.filter((tool) => { return tool.tags.includes(selectedTag) || selectedTag == "" }).map((tool) => ( +
+
+
+ +
+
+

{tool.name}

+

{tool.by}

+

{tool.description}

+

+ { + tool.tags.map((t) => ( +

{t}
+ )) + } +
 
+

+ + Learn more + + + + + - + +
-
- )) + )) }
From 96731fc16654e9a310de0daa553d6618e6cf458e Mon Sep 17 00:00:00 2001 From: Apisit Toompkadee Date: Mon, 7 Feb 2022 22:07:42 +0900 Subject: [PATCH 02/26] use BrowserOnly --- src/pages/resources.js | 157 +++++++++++++++++++++-------------------- 1 file changed, 82 insertions(+), 75 deletions(-) diff --git a/src/pages/resources.js b/src/pages/resources.js index 75098d8..f33cd0f 100644 --- a/src/pages/resources.js +++ b/src/pages/resources.js @@ -1,6 +1,7 @@ import React from 'react'; import Layout from '@theme/Layout'; -import Link from '@docusaurus/Link'; +import BrowserOnly from '@docusaurus/BrowserOnly'; + export default function Tooling() { const [selectedTag, setSelectedTag] = React.useState("") @@ -240,86 +241,92 @@ export default function Tooling() { }, [window.location.hash]) return ( - -
+ + {() => { + return ( + +
-
-

Resources & Tooling

-
-
- -
-
-
+
+

Resources & Tooling

+
+
+ +
+
+
- { - data.map((category) => ( -
-

{category.title}

-
- { - category.tools.filter((tool) => { return tool.tags.includes(selectedTag) || selectedTag == "" }).length == 0 ? -
- Interested in contributing to {category.title} with {selectedTag}? -

- - Check out Eco Support - - - - - - -

-
- : - category.tools.filter((tool) => { return tool.tags.includes(selectedTag) || selectedTag == "" }).map((tool) => ( -
-
-
- -
-
-

{tool.name}

-

{tool.by}

-

{tool.description}

-

- { - tool.tags.map((t) => ( -

{t}
- )) - } -
 
+ { + data.map((category) => ( +
+

{category.title}

+
+ { + category.tools.filter((tool) => { return tool.tags.includes(selectedTag) || selectedTag == "" }).length == 0 ? +
+ Interested in contributing to {category.title} with {selectedTag}? +

+ + Check out Eco Support + + + + + +

- - Learn more - - - - - - -
-
-
- )) - } + : + category.tools.filter((tool) => { return tool.tags.includes(selectedTag) || selectedTag == "" }).map((tool) => ( +
+
+
+ +
+
+

{tool.name}

+

{tool.by}

+

{tool.description}

+

+ { + tool.tags.map((t) => ( +

{t}
+ )) + } +
 
+

+ + Learn more + + + + + -
-
- )) + +
+
+
+ )) + } - } -
+
+
+ )) + + } +
- + + ) + }} + ) } \ No newline at end of file From 666ae9e08f10e1e10a950e8d3bd3af21d1da3a00 Mon Sep 17 00:00:00 2001 From: Apisit Toompkadee Date: Mon, 7 Feb 2022 22:19:38 +0900 Subject: [PATCH 03/26] wrap everything in BrowserOnly --- src/pages/resources.js | 470 ++++++++++++++++++++--------------------- 1 file changed, 235 insertions(+), 235 deletions(-) diff --git a/src/pages/resources.js b/src/pages/resources.js index f33cd0f..dc26be7 100644 --- a/src/pages/resources.js +++ b/src/pages/resources.js @@ -3,246 +3,246 @@ import Layout from '@theme/Layout'; import BrowserOnly from '@docusaurus/BrowserOnly'; export default function Tooling() { + return ( + + {() => { + const [selectedTag, setSelectedTag] = React.useState("") + const data = [ + { + title: "Development Environments", + tools: [ + { + name: "Neo Blockchain Toolkit", + by: "NGD Enterprise", + description: "The Neo Blockchain Toolkit is a one-stop-shop for creating and preparing smart contracts for production, seamlessly integrated with VS Code, the most popular code editor. Out of the box, developers can easily deploy private networks, compile, deploy, and invoke smart contracts, or tap into its fully integrated debugging experience. With time-travel debug support, a source-mapped opcode view, and an automated test harness, NBT provides a best-in-class blockchain development experience.", + icon_url: "/tooling/neoblockchaintoolkit.png", + web_url: "https://marketplace.visualstudio.com/items?itemName=ngd-seattle.neo-blockchain-toolkit", + tags: ["c#"] + }, + { + name: "Neo Compiler Eco", + by: "Neo Research", + description: "Allows developers to code and compile smart contracts via web interface and deploy them to a TestNet without having to install any other development tools. NeoCompiler Eco currently supports C# for compiling, deployment and testing.", + icon_url: "/tooling/neocompiler.png", + web_url: "https://neocompiler.io/", + tags: ["c#"] + }, + { + name: "NEO•ONE", + by: "Neo Tracker", + description: "NEO•ONE is an end-to-end development framework for Neo applications created with TypeScript or JavaScript. Like the Blockchain Toolkit, it includes tools for local network setup, contract compiling and deploying, wallet handling, automated testing, and also provides client APIs to simplify interaction with deployed contracts.", + icon_url: "/tooling/neo-one.svg", + web_url: "https://n3.neo-one.io/", + tags: ["typescript", "js"] + }, + { + name: "Neo Playground", + by: "AxLabs", + description: "Neo playground is a development environment that packages the features of the Neo Blockchain Toolkit into a VS Code web client with a number of additional utilities. It is designed for team collaboration in a controlled development environment.", + icon_url: "/tooling/neow3j.png", + web_url: "https://neo-playground.dev/", + tags: ["java"] + } + ] + }, + { + title: "Ecosystem Tools, Explorers, and API Providers", + tools: [ + { + name: "WalletConnect SDK", + by: "COZ", + description: "WalletConnect is an open protocol to communicate securely between Wallets and Dapps", + icon_url: "/tooling/walletconnect.svg", + web_url: "https://neon.coz.io/wksdk/core/index.html", + tags: ["js"] + }, + { + name: "dAPI", + by: "NEXT", + description: "dAPI is a wallet interface for decentralized applications which allows users to sign transaction requests on applications without exposing their private key.", + icon_url: "/tooling/neo-line.png", + web_url: "https://neoline.io/dapi/N3.html", + tags: [] + }, + { + name: "dora", + by: "COZ", + description: "Dora is a high speed block explorer with N3 and Neo Legacy integrations. A public API is also exposed, allowing developers to easily acquire information about supported blockchains including chain stats, contract storage, and more.", + icon_url: "/tooling/dora.png", + web_url: "https://dora.coz.io/", + tags: [] + }, + { + name: "Faucet", + by: "Neo Global Development", + description: "The faucet is an ecosystem utility for acquiring GAS which is the native token required to publish transactions to the network. This faucet is configured to work with the N3 Testnet.", + icon_url: "/tooling/ngd.png", + web_url: "https://neowish.ngd.network/#/", + tags: [] + }, + { + name: "NeoTube", + by: "NEXT", + description: "NeoTube is a reliable Neo block explorer with seperate versions for Neo Legacy and N3. Network statistics, fungible and non-fungible assets, and contract lists are all provided.", + icon_url: "/tooling/ngd.png", + web_url: "https://neo3.neotube.io/", + tags: [] + }, + { + name: "NeoFS", + by: "Neo SPCC", + description: "NeoFS is a distributed, decentralized object storage network developed by Neo SPCC. Built with Neo blockchain integration in mind, NeoFS aims to support the shift away from third-party storage providers, providing users with complete control over their data.", + icon_url: "/tooling/nspcc.png", + web_url: "https://fs.neo.org/", + tags: ["go"] + }, + { + name: "Oracles", + by: "Neo Global Development", + description: "Oracles are a utility which can be leveraged by smart contracts to interface with systems outside the Neo blockchain using http(s).", + icon_url: "/tooling/ngd.png", + web_url: "https://docs.neo.org/docs/en-us/advanced/oracle.html", + tags: ["c#"] + } + ] + }, + { + title: "Nodes", + tools: [ + { + name: "Neo-Node", + by: "The Neo Project", + description: "This project is the reference architecture for a neo full-node. It reprents the atomic building block of the Neo blockchain and includes all of the CLI functionality required to interface with the network.", + icon_url: "/tooling/neo-cli.svg", + web_url: "https://github.com/neo-project/neo-node", + tags: ["c#"] + }, + { + name: "Neo GUI", + by: "The Neo Project", + description: "The Neo GUI project wraps a neo node in an electron app, exposing many of its features in a graphical interface.", + icon_url: "/tooling/neo-gui.png", + web_url: "https://docs.neo.org/docs/en-us/node/gui/install.html", + tags: ["c#"] + }, + { + name: "Neo-Go", + by: "Neo SPCC", + description: "Neo-Go is a fully featured and well documented alternative implementation of the core Neo stack, written in Go. Provides a highly performant node implementation, a compiler for Go smart contracts, and an SDK for app integration.", + icon_url: "/tooling/nspcc.png", + web_url: "https://github.com/nspcc-dev/neo-go/releases", + tags: ["go"] + } + ] + }, + { + title: "SDKs", + tools: [ + { + name: "mamba", + by: "COZ", + description: "Mamba is a python SDK on steroids. Leveraging the lessons learned on the neo-python project, we have completely rearchitected our popular python tool to significantly improve its usability. If you want to perform any operation with Neo ranging from transaction execution to chain sync, you can do it in Mamba. Mamba is bundled with our Blink VM, a high performance N3 virtual machine capable of speeds over twenty times faster than official release.", + icon_url: "/tooling/mamba.png", + web_url: "https://dojo.coz.io/", + tags: ["python"] + }, + { + name: "Neo-gogogo", + by: "Neo Global Development", + description: "Neo-gogogo is a lightweight Go SDK that provides all the structures and methods required to interface with the Neo blockchain. All the necessary tools are available for any kind of application, making it easy to manage wallets, verify state proofs, interact with contracts and tokens, build transactions, send RPC requests, and more.", + icon_url: "/tooling/ngd.png", + web_url: "https://github.com/neo-ngd/neo3-gogogo", + tags: ["go"] + }, + { + name: "neon.js", + by: "COZ", + description: "Neon.js provides users with a complete set of javascript tools for integration with Neo. Neon.js is heavily leveraged in applications where the client directly communicates with the blockchain.", + icon_url: "/tooling/neon-js.png", + web_url: "https://github.com/CityOfZion/neon-js", + tags: ["js"] + }, + { + name: "Neow3j", + by: "AxLabs", + description: "Neow3j is a Java library that aims to provide easy and reliable integration with Neo nodes. It supports Neo RPC, asset transfers, smart contract invocations and deployments, NEP-2, NEP-6, building, signing and sending raw transactions, and more.", + icon_url: "/tooling/neow3j.png", + web_url: "https://neow3j.io/#/overview/getting_started?id=sdk", + tags: ["java"] + }, + { + name: "RpcClient", + by: "The Neo Project", + description: "Neo RPC SDK is a dependency library used to streamline the integration of C# applications with Neo. Well suited for games, wallets, and other projects, the RPC SDK makes it easy to construct transactions, invoke RPC interfaces, and call deployed contracts.", + icon_url: "/tooling/ngd.png", + web_url: "https://docs.neo.org/docs/en-us/develop/tool/sdk/introduction.html", + tags: ["c#"] + } + ] + }, + { + title: "Contract Development Kits", + tools: [ + { + name: "boa", + by: "COZ", + description: "Boa is a compiler for smart contracts written in Python. Designed to feel as natural as possible for Python developers, Boa contracts are assisted with decorators, helper functions, type hints, and support testing against the core VM TestEngine. Debug data generated by the compiler also follows the standard format, enabling debugging through the Neo Blockchain Toolkit.", + icon_url: "/tooling/boa.png", + web_url: "https://dojo.coz.io/neo3/boa/index.html", + tags: ["python"] + }, + { + name: "Neo-Go", + by: "Neo SPCC", + description: "Neo-Go is a fully featured and well documented alternative implementation of the core Neo stack, written in Go. Provides a highly performant node implementation, a compiler for Go smart contracts, and an SDK for app integration.", + icon_url: "/tooling/nspcc.png", + web_url: "https://github.com/nspcc-dev/neo-go/releases", + tags: ["go"] + }, + { + name: "neo-devpack", + by: "Neo SPCC", + description: "The core neo devpack for dotnet provides all the tools required to compile smart contracts written in C#. In addition to producing deployable NEF contract files, the compiler also emits manifest files and debug information following a standard format for use in the Neo Debugger.", + icon_url: "/tooling/nspcc.png", + web_url: "https://github.com/nspcc-dev/neo-go/releases", + tags: ["c#"] + }, + { + name: "Neow3j", + by: "AxLabs", + description: "Neow3j is a Java library that aims to provide easy and reliable integration with Neo nodes. It supports Neo RPC, asset transfers, smart contract invocations and deployments, NEP-2, NEP-6, building, signing and sending raw transactions, and more.", + icon_url: "/tooling/neow3j.png", + web_url: "https://neow3j.io/#/overview/getting_started?id=sdk", + tags: ["java"] + } + ] + }, + ] - const [selectedTag, setSelectedTag] = React.useState("") - const data = [ - { - title: "Development Environments", - tools: [ - { - name: "Neo Blockchain Toolkit", - by: "NGD Enterprise", - description: "The Neo Blockchain Toolkit is a one-stop-shop for creating and preparing smart contracts for production, seamlessly integrated with VS Code, the most popular code editor. Out of the box, developers can easily deploy private networks, compile, deploy, and invoke smart contracts, or tap into its fully integrated debugging experience. With time-travel debug support, a source-mapped opcode view, and an automated test harness, NBT provides a best-in-class blockchain development experience.", - icon_url: "/tooling/neoblockchaintoolkit.png", - web_url: "https://marketplace.visualstudio.com/items?itemName=ngd-seattle.neo-blockchain-toolkit", - tags: ["c#"] - }, - { - name: "Neo Compiler Eco", - by: "Neo Research", - description: "Allows developers to code and compile smart contracts via web interface and deploy them to a TestNet without having to install any other development tools. NeoCompiler Eco currently supports C# for compiling, deployment and testing.", - icon_url: "/tooling/neocompiler.png", - web_url: "https://neocompiler.io/", - tags: ["c#"] - }, - { - name: "NEO•ONE", - by: "Neo Tracker", - description: "NEO•ONE is an end-to-end development framework for Neo applications created with TypeScript or JavaScript. Like the Blockchain Toolkit, it includes tools for local network setup, contract compiling and deploying, wallet handling, automated testing, and also provides client APIs to simplify interaction with deployed contracts.", - icon_url: "/tooling/neo-one.svg", - web_url: "https://n3.neo-one.io/", - tags: ["typescript", "js"] - }, - { - name: "Neo Playground", - by: "AxLabs", - description: "Neo playground is a development environment that packages the features of the Neo Blockchain Toolkit into a VS Code web client with a number of additional utilities. It is designed for team collaboration in a controlled development environment.", - icon_url: "/tooling/neow3j.png", - web_url: "https://neo-playground.dev/", - tags: ["java"] - } - ] - }, - { - title: "Ecosystem Tools, Explorers, and API Providers", - tools: [ - { - name: "WalletConnect SDK", - by: "COZ", - description: "WalletConnect is an open protocol to communicate securely between Wallets and Dapps", - icon_url: "/tooling/walletconnect.svg", - web_url: "https://neon.coz.io/wksdk/core/index.html", - tags: ["js"] - }, - { - name: "dAPI", - by: "NEXT", - description: "dAPI is a wallet interface for decentralized applications which allows users to sign transaction requests on applications without exposing their private key.", - icon_url: "/tooling/neo-line.png", - web_url: "https://neoline.io/dapi/N3.html", - tags: [] - }, - { - name: "dora", - by: "COZ", - description: "Dora is a high speed block explorer with N3 and Neo Legacy integrations. A public API is also exposed, allowing developers to easily acquire information about supported blockchains including chain stats, contract storage, and more.", - icon_url: "/tooling/dora.png", - web_url: "https://dora.coz.io/", - tags: [] - }, - { - name: "Faucet", - by: "Neo Global Development", - description: "The faucet is an ecosystem utility for acquiring GAS which is the native token required to publish transactions to the network. This faucet is configured to work with the N3 Testnet.", - icon_url: "/tooling/ngd.png", - web_url: "https://neowish.ngd.network/#/", - tags: [] - }, - { - name: "NeoTube", - by: "NEXT", - description: "NeoTube is a reliable Neo block explorer with seperate versions for Neo Legacy and N3. Network statistics, fungible and non-fungible assets, and contract lists are all provided.", - icon_url: "/tooling/ngd.png", - web_url: "https://neo3.neotube.io/", - tags: [] - }, - { - name: "NeoFS", - by: "Neo SPCC", - description: "NeoFS is a distributed, decentralized object storage network developed by Neo SPCC. Built with Neo blockchain integration in mind, NeoFS aims to support the shift away from third-party storage providers, providing users with complete control over their data.", - icon_url: "/tooling/nspcc.png", - web_url: "https://fs.neo.org/", - tags: ["go"] - }, - { - name: "Oracles", - by: "Neo Global Development", - description: "Oracles are a utility which can be leveraged by smart contracts to interface with systems outside the Neo blockchain using http(s).", - icon_url: "/tooling/ngd.png", - web_url: "https://docs.neo.org/docs/en-us/advanced/oracle.html", - tags: ["c#"] - } - ] - }, - { - title: "Nodes", - tools: [ - { - name: "Neo-Node", - by: "The Neo Project", - description: "This project is the reference architecture for a neo full-node. It reprents the atomic building block of the Neo blockchain and includes all of the CLI functionality required to interface with the network.", - icon_url: "/tooling/neo-cli.svg", - web_url: "https://github.com/neo-project/neo-node", - tags: ["c#"] - }, - { - name: "Neo GUI", - by: "The Neo Project", - description: "The Neo GUI project wraps a neo node in an electron app, exposing many of its features in a graphical interface.", - icon_url: "/tooling/neo-gui.png", - web_url: "https://docs.neo.org/docs/en-us/node/gui/install.html", - tags: ["c#"] - }, - { - name: "Neo-Go", - by: "Neo SPCC", - description: "Neo-Go is a fully featured and well documented alternative implementation of the core Neo stack, written in Go. Provides a highly performant node implementation, a compiler for Go smart contracts, and an SDK for app integration.", - icon_url: "/tooling/nspcc.png", - web_url: "https://github.com/nspcc-dev/neo-go/releases", - tags: ["go"] - } - ] - }, - { - title: "SDKs", - tools: [ - { - name: "mamba", - by: "COZ", - description: "Mamba is a python SDK on steroids. Leveraging the lessons learned on the neo-python project, we have completely rearchitected our popular python tool to significantly improve its usability. If you want to perform any operation with Neo ranging from transaction execution to chain sync, you can do it in Mamba. Mamba is bundled with our Blink VM, a high performance N3 virtual machine capable of speeds over twenty times faster than official release.", - icon_url: "/tooling/mamba.png", - web_url: "https://dojo.coz.io/", - tags: ["python"] - }, - { - name: "Neo-gogogo", - by: "Neo Global Development", - description: "Neo-gogogo is a lightweight Go SDK that provides all the structures and methods required to interface with the Neo blockchain. All the necessary tools are available for any kind of application, making it easy to manage wallets, verify state proofs, interact with contracts and tokens, build transactions, send RPC requests, and more.", - icon_url: "/tooling/ngd.png", - web_url: "https://github.com/neo-ngd/neo3-gogogo", - tags: ["go"] - }, - { - name: "neon.js", - by: "COZ", - description: "Neon.js provides users with a complete set of javascript tools for integration with Neo. Neon.js is heavily leveraged in applications where the client directly communicates with the blockchain.", - icon_url: "/tooling/neon-js.png", - web_url: "https://github.com/CityOfZion/neon-js", - tags: ["js"] - }, - { - name: "Neow3j", - by: "AxLabs", - description: "Neow3j is a Java library that aims to provide easy and reliable integration with Neo nodes. It supports Neo RPC, asset transfers, smart contract invocations and deployments, NEP-2, NEP-6, building, signing and sending raw transactions, and more.", - icon_url: "/tooling/neow3j.png", - web_url: "https://neow3j.io/#/overview/getting_started?id=sdk", - tags: ["java"] - }, - { - name: "RpcClient", - by: "The Neo Project", - description: "Neo RPC SDK is a dependency library used to streamline the integration of C# applications with Neo. Well suited for games, wallets, and other projects, the RPC SDK makes it easy to construct transactions, invoke RPC interfaces, and call deployed contracts.", - icon_url: "/tooling/ngd.png", - web_url: "https://docs.neo.org/docs/en-us/develop/tool/sdk/introduction.html", - tags: ["c#"] - } - ] - }, - { - title: "Contract Development Kits", - tools: [ - { - name: "boa", - by: "COZ", - description: "Boa is a compiler for smart contracts written in Python. Designed to feel as natural as possible for Python developers, Boa contracts are assisted with decorators, helper functions, type hints, and support testing against the core VM TestEngine. Debug data generated by the compiler also follows the standard format, enabling debugging through the Neo Blockchain Toolkit.", - icon_url: "/tooling/boa.png", - web_url: "https://dojo.coz.io/neo3/boa/index.html", - tags: ["python"] - }, - { - name: "Neo-Go", - by: "Neo SPCC", - description: "Neo-Go is a fully featured and well documented alternative implementation of the core Neo stack, written in Go. Provides a highly performant node implementation, a compiler for Go smart contracts, and an SDK for app integration.", - icon_url: "/tooling/nspcc.png", - web_url: "https://github.com/nspcc-dev/neo-go/releases", - tags: ["go"] - }, - { - name: "neo-devpack", - by: "Neo SPCC", - description: "The core neo devpack for dotnet provides all the tools required to compile smart contracts written in C#. In addition to producing deployable NEF contract files, the compiler also emits manifest files and debug information following a standard format for use in the Neo Debugger.", - icon_url: "/tooling/nspcc.png", - web_url: "https://github.com/nspcc-dev/neo-go/releases", - tags: ["c#"] - }, - { - name: "Neow3j", - by: "AxLabs", - description: "Neow3j is a Java library that aims to provide easy and reliable integration with Neo nodes. It supports Neo RPC, asset transfers, smart contract invocations and deployments, NEP-2, NEP-6, building, signing and sending raw transactions, and more.", - icon_url: "/tooling/neow3j.png", - web_url: "https://neow3j.io/#/overview/getting_started?id=sdk", - tags: ["java"] - } - ] - }, - ] + const allTags = () => { + var tags = [] + data.map((category) => { + category.tools.map((tool) => { + tool.tags.map((tag) => { + if (tags.includes(tag) == false) + tags.push(tag) + }) + }) + }) + return tags + } - const allTags = () => { - var tags = [] - data.map((category) => { - category.tools.map((tool) => { - tool.tags.map((tag) => { - if (tags.includes(tag) == false) - tags.push(tag) - }) - }) - }) - return tags - } + React.useEffect(() => { + if (window.location.hash.length == 0) { + setSelectedTag("") + } else { + const hash = window.location.hash.slice(1).toLowerCase(); + setSelectedTag(hash) + } + }, [window.location.hash]) - React.useEffect(() => { - if (window.location.hash.length == 0) { - setSelectedTag("") - } else { - const hash = window.location.hash.slice(1).toLowerCase(); - setSelectedTag(hash) - } - }, [window.location.hash]) - return ( - - {() => { return (
From 9a581d6658870207011518b4fe3248560d5b5895 Mon Sep 17 00:00:00 2001 From: Apisit Toompkadee Date: Tue, 8 Feb 2022 00:48:35 +0900 Subject: [PATCH 04/26] add c# to neofs --- src/pages/resources.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/resources.js b/src/pages/resources.js index dc26be7..bede8f4 100644 --- a/src/pages/resources.js +++ b/src/pages/resources.js @@ -94,7 +94,7 @@ export default function Tooling() { description: "NeoFS is a distributed, decentralized object storage network developed by Neo SPCC. Built with Neo blockchain integration in mind, NeoFS aims to support the shift away from third-party storage providers, providing users with complete control over their data.", icon_url: "/tooling/nspcc.png", web_url: "https://fs.neo.org/", - tags: ["go"] + tags: ["go","c#"] }, { name: "Oracles", From 556e1a9ff8176aabf34274ac097578cd869b3488 Mon Sep 17 00:00:00 2001 From: Gil Lopes Bueno Date: Mon, 7 Feb 2022 16:27:41 -0300 Subject: [PATCH 05/26] Updating the WalletConnect article with a more recent format --- .../index.md | 360 ++++++++++++------ 1 file changed, 234 insertions(+), 126 deletions(-) diff --git a/tutorials/2021-06-26-dapp-wallet-integration-with-walletconnect/index.md b/tutorials/2021-06-26-dapp-wallet-integration-with-walletconnect/index.md index 0d2c812..1bf8a38 100644 --- a/tutorials/2021-06-26-dapp-wallet-integration-with-walletconnect/index.md +++ b/tutorials/2021-06-26-dapp-wallet-integration-with-walletconnect/index.md @@ -53,96 +53,122 @@ There are currently two packages available for [COZ's WalletConnect 2.0 SDK](htt From here on, you will need to choose a path. Each upcoming section will briefly showcase the implementation of WalletConnect basic features using each of the packages. -## A Chain-Agnostic SDK - -We'll be presenting code examples that run against the Neo blockchain, but the SDK can be used to operate on other networks by simply changing the respective values for each constant that identifies the network. - - -# 3. Core SDK +# 2.a. The "Core" SDK ## Installation - -Install the dependency on your client-side application: - -```shell +Install the dependency on your client-side application +### NPM +``` npm i @cityofzion/wallet-connect-sdk-core ``` +### YARN +To install using **YARN**, you need to add this to your `package.json` before running the command: +``` + "resolutions": { + "@walletconnect/client": "2.0.0-beta.17", + "@walletconnect/jsonrpc-utils": "1.0.0", + "@walletconnect/qrcode-modal": "2.0.0-alpha.20", + "@walletconnect/types": "2.0.0-beta.17", + "@walletconnect/utils": "2.0.0-beta.17" + } +``` +And then: +``` +yarn add @cityofzion/wallet-connect-sdk-core +``` ## Setup +Initialize the client: +```js +import {WcSdk} from "@cityofzion/wallet-connect-sdk-core"; -First thing we need to do is establish the connection to a relay server of choice by initiating a WalletConnect Client. - -```javascript -import {WcSdk} from "@cityofzion/wallet-connect-sdk-core/lib"; +const wcInstance = new WcSdk() -const wcClient = await WcSdk.initClient( - "debug", // logger: use debug to show all log information on browser console - "wss://connect.coz.io" // relayServer: which relay server do you want to use, alternatively you can use "wss://relay.walletconnect.org" +await wcInstance.initClient( + "debug", // logger: use 'debug' to show all log information on browser console, use 'error' to show only errors + "wss://relay.walletconnect.org" // we are using walletconnect's official relay server ); ``` +### Subscribe to Wallet Connect events -## Initiating a Wallet Connection Request - -Then we generate the QR-Code that will be scanned by the wallet and the connection parameters that will be sent to the wallet. The wallet will have to scan the code and accept or decline the connection parameters sent by the application. - -```javascript -import { SessionTypes } from '@walletconnect/types' -import Client from '@walletconnect/client' -import QRCodeModal from '@walletconnect/qrcode-modal' - -WcSdk.subscribeToEvents(wcClient, { - onProposal: uri => { - QRCodeModal.open(uri, () => { /* nothing */ }) - } -}); - -WcSdk.connect(wcClient, { - chainId: "neo3:testnet", // blockchain and network identifier - methods: ["invokefunction"], // which RPC methods do you plan to call - appMetadata: { - name: "MyApplicationName", // your application name to be displayed on the wallet - description: "My Application description", // description to be shown on the wallet - url: "https://myapplicationdescription.app/", // url to be linked on the wallet - icons: ["https://myapplicationdescription.app/myappicon.png"], // icon to be shown on the wallet - } +```js +wcInstance.subscribeToEvents({ + onProposal: (uri: string) => { + // show the QRCode, you can use @walletconnect/qrcode-modal to do so, but any QRCode presentation is fine + QRCodeModal.open(uri, () => {}) + // alternatively you can show Neon Wallet Connect's website, which is more welcoming + window.open(`https://neon.coz.io/connect?uri=${uri}`, '_blank').focus(); + }, + onDeleted: () => { + // here is where you describe a logout callback + logout() + } }) ``` -Notice that we need to state which RPC methods we're going to use with the proposed connection. If the wallet accepts, the relay server will establish a Websocket encrypted connection between the user's wallet and the dApp. +### Load any existing connection, it should be called after the initialization, to reestablish connections made previously -The front-end application can then check for established connections by asking the WcClient for open sessions. +```js +await wcInstance.loadSession() +``` + +## Recipes -```javascript -const session = await WcSdk.getSession(wcClient); +### Check if the user has a Session and get its Accounts -if (session) { - console.log(session.state.accounts); // print the accounts - console.log(session.peer.metadata); // print the wallet metadata +```js +if (wcInstance.session) { + console.log(wcInstance.accountAddress) // print the first connected account address + console.log(wcInstance.chainId) // print the first connected account chain info + console.log(wcInstance.session.state.accounts); // print all the connected accounts (with the chain info) + console.log(wcInstance.session.peer.metadata); // print the wallet metadata } ``` -And also easily terminate an established connection. - -```javascript -await WcSdk.disconnect(wcClient, session); +### Connect to the Wallet +Start the process of establishing a new connection, to be used when there is no `wcInstance.session` +```js +if (!wcInstance.session) { + await wcInstance.connect({ + chains: ["neo3:testnet", "neo3:mainnet"], // the blockchains your dapp accepts to connect + methods: [ // which RPC methods do you plan to call + "invokeFunction", + "testInvoke", + "signMessage", + "verifyMessage" + ], + appMetadata: { + name: "MyApplicationName", // your application name to be displayed on the wallet + description: "My Application description", // description to be shown on the wallet + url: "https://myapplicationdescription.app/", // url to be linked on the wallet + icons: ["https://myapplicationdescription.app/myappicon.png"], // icon to be shown on the wallet + } + }) + // the promise will be resolved after the connection is accepted or refused, you can close the QRCode modal here + QRCodeModal.close() + // and check if there is a connection + console.log(wcInstance.session ? 'Connected successfully' : 'Connection refused') +} ``` -## Recipes +### Disconnect +It's interesting to have a button to allow the user to disconnect it's wallet, call `disconnect` when this happen: +```js +await wcInstance.disconnect(); +``` ### Make a JSON-RPC call +Every request is made via JSON-RPC. You need to provide a method name that is expected by the wallet and listed on +the `methods` property of the [options object](#setup) as well as some additional `parameters`. -Every transaction request to the wallet needs to be sent via JSON-RPC. You need to provide a method name that is expected by the connected wallet - that is, one that's been [listed on the methods property](#connect-to-the-wallet) when creating the connection request. - -Apart from the method, you can pass any additional `parameters`.The JSON-RPC format accepts parameters in many formats. The rules on how to construct this request will depend entirely on the blockchain you are using. The code below is an example of a request constructed for the Neo Blockchain. +The JSON-RPC format accepts parameters in many formats. The rules on how to construct this request will depend +entirely on the blockchain you are using. The code below is an example of a request constructed for the Neo Blockchain: ```js -import {WcSdk} from "@cityofzion/wallet-connect-sdk-core/lib"; - -const chainId = "neo3:testnet"; // blockchain and network identifier -const resp = await WcSdk.sendRequest(wcClient, session, chainId, { - method: '{{NEO_RPC_METHOD}}', - params: [{{NEO_RPC_METHOD_PARAMETERS}}] -}); +const result = await wcInstance.sendRequest({ + method: 'getapplicationlog', + params: ['0x7da6ae7ff9d0b7af3d32f3a2feb2aa96c2a27ef8b651f9a132cfaad6ef20724c'] +}) // the response format depends interely on the blockchain response format if (resp.result.error && resp.result.error.message) { @@ -151,56 +177,101 @@ if (resp.result.error && resp.result.error.message) { ``` ### Invoking a SmartContract method on Neo Blockchain +To invoke a SmartContract method you can use `WcSdk.sendRequest` with `invokeFunction` as method, but WcSdk +has a shortcut: `WcSdk.invokeFunction`. -On the example below we are invoking the `transfer` method of the `GAS` token. Neo blockchain expects params with `{ type, value }` format, and on `type` you should provide one of the types mentioned [here](https://github.com/neo-project/neo/blob/master/src/neo/SmartContract/ContractParameterType.cs). - +On the example below we are invoking the `transfer` method of the `GAS` token. Neo blockchain expect params with +`{ type, value }` format, and on `type` you should provide one of the types mentioned +[here](https://neon.coz.io/wksdk/core/interfaces/Argument.html). +WcSdk has some special types to facilitate: `Address` and `ScriptHash`. -```js -import Neon, { sc } from "@cityofzion/neon-js"; +For reference, developers should reference +the contract manifest on the contracts details pages on dora to understand the methods and argument types needed. +For this example: [GAS](https://dora.coz.io/contract/neo3/mainnet/0xd2a4cff31913016155e38e474a2c06d08be276cf) -const scripthash = '0xd2a4cff31913016155e38e474a2c06d08be276cf'; // GAS token -const methodName = 'transfer'; - -const [senderAddress] = session.state.accounts[0].split("@") +Check it out: +```ts +const invocation: ContractInvocation = { + scriptHash: '0xd2a4cff31913016155e38e474a2c06d08be276cf', // GAS token + operation: 'transfer', + args: [ + { type: 'Address', value: wcInstance.accountAddress }, + { type: 'Address', value: 'NbnjKGMBJzJ6j5PHeYhjJDaQ5Vy5UYu4Fv' }, + { type: 'Integer', value: 100000000 }, + { type: 'Array', value: [] } + ] +} -const from = sc.ContractParam.hash160(senderAddress) -const recipient = sc.ContractParam.hash160('NbnjKGMBJzJ6j5PHeYhjJDaQ5Vy5UYu4Fv') -const value = sc.ContractParam.integer(100); -const args = sc.ContractParam.array([]) +const signer: Signer = { + scope: WitnessScope.Global +} -const params = [from, recipient, value, args]; -const resp = await WcSdk.invokeFunction(wcClient, session, scripthash, methodName, params); +const resp = await wcInstance.invokeFunction(invocation, signer) ``` -To invoke a SmartContract method in Neo you can use `WcSdk.sendRequest` with `invokefunction` as method. But as we've seen above, WcSdk gives us a useful shortcut: `WcSdk.invokeFunction`. +### Calling TestInvoke will not require user acceptance +To retrieve information from a SmartContract without persisting any information on the blockchain you can use `WcSdk.sendRequest` with `testInvoke` as method, but WcSdk +has a shortcut: `walletConnectCtx.testInvoke`. -Also notice that WcSdk has some special types to make things quicker on type declaration: `Address` and `ScriptHash`. +On the example below we are invoking the `balanceOf` method of the `GAS` token. +Is expected for the Wallets to not ask the user for authorization on testInvoke. -# 4. React SDK +Check it out: +```ts +const invocation: ContractInvocation = { + scriptHash: '0xd2a4cff31913016155e38e474a2c06d08be276cf', // GAS token + operation: 'balanceOf', + args: [ + {type: 'Address', value: wcInstance.accountAddress} + ] +} -## Installation +const signer: Signer = { + scopes: WitnessScope.Global +} -Install the dependency on your client-side application: +const resp = await wcInstance.testInvoke(invocation, signer) -```shell -npm i @cityofzion/wallet-connect-sdk-react @walletconnect/client@2.0.0-alpha.42 ``` -(Or, idk... do your yarn thing 😅) +## Read the Docs +There is more information on the [documentation website](https://neon.coz.io/wksdk/core/modules.html) -## Setup +# 2.b. The "React" SDK -Wrap WalletConnectContextProvider around your App and pass an options object as prop: +## Installation +Install the dependency on your client-side application +### NPM +``` +npm i @cityofzion/wallet-connect-sdk-react +``` +### YARN +To install using **YARN**, you need to add this to your `package.json` before running the command: +``` + "resolutions": { + "@walletconnect/client": "2.0.0-beta.17", + "@walletconnect/jsonrpc-utils": "1.0.0", + "@walletconnect/qrcode-modal": "2.0.0-alpha.20", + "@walletconnect/types": "2.0.0-beta.17", + "@walletconnect/utils": "2.0.0-beta.17" + } +``` +And then: +``` +yarn add @cityofzion/wallet-connect-sdk-react +``` +## Setup +Wrap WalletConnectContextProvider around your App by passing an options object as prop ```jsx import {WalletConnectContextProvider} from "@cityofzion/wallet-connect-sdk-react"; const wcOptions = { - chainId: "neo3:testnet", // blockchain and network identifier + chains: ["neo3:testnet", "neo3:mainnet"], // the blockchains your dapp accepts to connect logger: "debug", // use debug to show all log information on browser console - methods: ["invokefunction"], // which RPC methods do you plan to call - relayServer: "wss://connect.coz.io", // which relay server do you want to use, alternatively you can use "wss://relay.walletconnect.org" + methods: ["invokeFunction"], // which RPC methods do you plan to call + relayServer: "wss://relay.walletconnect.org", // we are using walletconnect's official relay server appMetadata: { name: "MyApplicationName", // your application name to be displayed on the wallet description: "My Application description", // description to be shown on the wallet @@ -219,12 +290,8 @@ ReactDOM.render( ); ``` -The WalletConnect Context will mainly handle some lower level connection tasks that we've seen in the Core SDK implementation in the previous section. It will also hold the connection parameters that our dapp will use to connect to wallets. - -Notice that in our `wcOptions` object we need to state which RPC methods we're going to use with the proposed connection. - -From now on, everytime you need to use WalletConnect, you simply import it and call a method. - +## Usage +From now on, every time you need to use WalletConnect, you simply import it and call a method: ```ts import {useWalletConnect} from "@cityofzion/wallet-connect-sdk-react"; @@ -234,21 +301,29 @@ export default function MyComponent() { } ``` -## Connect to the Wallet +## Recipes + +### Login (Or "Connect Wallet") +On the following example we are showing a "Connect your Wallet" link, when clicked it will show a dialog with the QRCode +and proceed with the connection. -On the following example we are implementing all the connection features previously presented for the Core SDK in a single screen of our React app. +We are going to show "Loading Session" text while the session is loading. -A simple screen displaying a `Connect your Wallet` link, that when clicked will show a dialog with the QRCode to proceed with the connection. While the session is loading a `Loading Session` text will be displayed. And if the user already has a session it will show a list of connected addresses with a related `Disconnect` link. +And if the user already has a session it will show a list of connected addresses with a "Disconnect" link. +```tsx +const connectWallet = async () => { + await walletConnectCtx.connect() + // the wallet is connected after the promise is resolved +} -```ts return <> {walletConnectCtx.loadingSession ? "Loading Session" : !walletConnectCtx.session ? walletConnectCtx.connect()}>Connect your Wallet + onClick={connectWallet}>Connect your Wallet :
    {walletConnectCtx.accounts.map((account) => { - const [address] = account.split("@"); + const [namespace, reference, address] = account.split(":"); return
  • {walletConnectCtx.session?.peer.metadata.name} {address} @@ -258,15 +333,15 @@ return <>
} ; -``` -## Recipes +``` ### Make a JSON-RPC call +very request is made via JSON-RPC. You need to provide a method name that is expected by the wallet and listed on +the `methods` property of the [options object](#setup), and some additional `parameters`. -Every transaction request to the wallet needs to be sent via JSON-RPC. You need to provide a method name that is expected by the connected wallet - that is, one that's been listed on the methods property of our `wcOptions` object. - -Apart from the method, you can pass any additional `parameters`.The JSON-RPC format accepts parameters in many formats. The rules on how to construct this request will depend entirely on the blockchain you are using. The code below is an example of a request constructed for the Neo Blockchain. +The JSON-RPC format accepts parameters in many formats. The rules on how to construct this request will depend +entirely on the blockchain you are using. The code below is an example of a request constructed for the Neo Blockchain: ```js const resp = await walletConnectCtx.sendRequest({ @@ -281,33 +356,66 @@ if (resp.result.error && resp.result.error.message) { ``` ### Invoking a SmartContract method on Neo Blockchain +To invoke a SmartContract method you can use `walletConnectCtx.sendRequest` with `invokeFunction` as method, but WcSdk +has a shortcut: `walletConnectCtx.invokeFunction`. -On the example below we are invoking the `transfer` method of the `GAS` token. Neo blockchain expect params with `{ type, value }` format, and on `type` you should provide one of the types mentioned [here](https://github.com/neo-project/neo/blob/master/src/neo/SmartContract/ContractParameterType.cs). - +On the example below we are invoking the `transfer` method of the `GAS` token. Neo blockchain expect params with +`{ type, value }` format, and on `type` you should provide one of the types mentioned +[here](https://github.com/neo-project/neo/blob/master/src/neo/SmartContract/ContractParameterType.cs). +WcSdk has some special types to facilitate: `Address` and `ScriptHash`. -```ts -const scripthash = '0xd2a4cff31913016155e38e474a2c06d08be276cf'; // GAS token -const methodName = 'transfer'; +Check it out: +```js +const senderAddress = walletConnectCtx.getAccountAddress(0) ?? '' + +const invocations: ContractInvocation[] = [{ + scriptHash: '0xd2a4cff31913016155e38e474a2c06d08be276cf', // GAS Token + operation: 'transfer', + args: [ + { type: 'Address', value: senderAddress }, + { type: 'Address', value: 'NbnjKGMBJzJ6j5PHeYhjJDaQ5Vy5UYu4Fv' }, + { type: 'Integer', value: 100000000 }, + { type: 'Array', value: [] } + ] +}] + +const signers: Signer[] = [{ + scopes: WitnessScope.CalledByEntry +}] + +const resp = await walletConnectCtx.invokeFunction({invocations, signers}); +``` -const [senderAddress] = walletConnectCtx.accounts[0].split("@") -const from = {type: 'Address', value: senderAddress}; -const recipient = {type: 'Address', value: 'NbnjKGMBJzJ6j5PHeYhjJDaQ5Vy5UYu4Fv'}; -const value = {type: 'Integer', value: 100000000}; -const args = {type: 'Array', value: []} +### Calling TestInvoke will not require user acceptance +To retrieve information from a SmartContract without persisting any information on the blockchain you can use `walletConnectCtx.sendRequest` with `testInvoke` as method, but WcSdk +has a shortcut: `walletConnectCtx.testInvoke`. -const params = [from, recipient, value, args]; -const resp = await walletConnectCtx.invokeFunction(scripthash, methodName, params); -``` +On the example below we are invoking the `balanceOf` method of the `GAS` token. -To invoke a SmartContract method in Neo you can use `WcSdk.sendRequest` with `invokefunction` as method. But as we've seen above, WcSdk gives us a useful shortcut: `walletConnectCtx.invokeFunction`. +Is expected for the Wallets to not ask the user for authorization on testInvoke. -Also notice that WcSdk has some special types to make things quicker on type declaration: `Address` and `ScriptHash`. +Check it out: +```js +const targetAddress = walletConnectCtx.getAccountAddress(0) ?? '' -# 5. How to test my dApp? +const invocations: ContractInvocation[] = [{ + scriptHash: '0xd2a4cff31913016155e38e474a2c06d08be276cf', // GAS Token + operation: 'balanceOf', + args: [ + { type: 'Address', value: targetAddress } + ] +}] -This SDK implements [WalletConnect 2.0](https://docs.walletconnect.org/v/2.0/) protocol, therefore it's compatible with any wallet application that works with it. +const signers: Signer[] = [{ + scopes: WitnessScope.CalledByEntry +}] -Regarding the Neo blockchain, WalletConnect dApp interaction can be tested using the [aero web wallet](https://aero.coz.io/). +const resp = await walletConnectCtx.testInvoke({invocations, signers}); +``` -Other major ecosystem wallets, such as our own **Neon Wallet**, are on their way to implementing the WalletConnect Protocol as standard of choice for dApp-Wallet communication. \ No newline at end of file +# 3. How to test my dApp? +**Neon Wallet** already has integration with Wallet Connect, but you may find **Aero Wallet** easier to test applications. +- [Aero Wallet Stable Version](https://aero.coz.io/) - Tested and Approved +- [Aero Wallet Preview Version](https://aero.coz.io/) - Where new Features and Fixes comes first +- [Neon Wallet](https://neon.coz.io/) From a712b34e41c8b78a97fd6174e262f6b772295865 Mon Sep 17 00:00:00 2001 From: Apisit Toompkadee Date: Tue, 8 Feb 2022 21:42:57 +0900 Subject: [PATCH 06/26] landing page, update resources & tooling --- src/pages/index.js | 231 ++++++++---------- src/pages/resources.js | 64 ++--- src/theme/Footer/index.js | 18 +- static/img/technical-question-left.png | Bin 0 -> 39710 bytes .../img/technical-question-mobile-center.png | Bin 0 -> 29678 bytes static/img/technical-question-right.png | Bin 0 -> 40031 bytes 6 files changed, 147 insertions(+), 166 deletions(-) create mode 100644 static/img/technical-question-left.png create mode 100644 static/img/technical-question-mobile-center.png create mode 100644 static/img/technical-question-right.png diff --git a/src/pages/index.js b/src/pages/index.js index f4b17b3..be7571b 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -17,66 +17,66 @@ export default function Home() { const introductionDocLinks = [ { - title:"Introduction to Neo", - short_description:"Read up on core concepts and get a basic-level understanding of Neo", - url:"/docs/n3/foundation/introduction" + title: "Introduction to Neo", + short_description: "Read up on core concepts and get a basic-level understanding of Neo", + url: "/docs/n3/foundation/introduction" }, { - title:"Introduction to Neo & Gas", - short_description:"An introduction to native tokens on Neo", - url:"/docs/n3/foundation/Native%20tokens" + title: "Introduction to Neo & Gas", + short_description: "An introduction to native tokens on Neo", + url: "/docs/n3/foundation/Native%20tokens" }, { - title:"Introduction to Neo Node", - short_description:"An introduction to Neo Node", - url:"/docs/n3/Neo%20Nodes%20&%20Clients/Introduction" + title: "Introduction to Neo Node", + short_description: "An introduction to Neo Node", + url: "/docs/n3/Neo%20Nodes%20&%20Clients/Introduction" }, { - title:"Governance and Incentives", - short_description:"Learn more about Neo N3's on-chain governance model", - url:"/docs/n3/foundation/Governance%20and%20Incentives" + title: "Governance and Incentives", + short_description: "Learn more about Neo N3's on-chain governance model", + url: "/docs/n3/foundation/Governance%20and%20Incentives" }, { - title:"dBFT 2.0 Algorithm", - short_description:"Learn more about Neo N3's consensus algorithm", - url:"/docs/n3/foundation/Consensus%20mechanism/consensus_algorithm" + title: "dBFT 2.0 Algorithm", + short_description: "Learn more about Neo N3's consensus algorithm", + url: "/docs/n3/foundation/Consensus%20mechanism/consensus_algorithm" }, - + ] const fundamentalsDocLinks = [ { - title:"Wallet", - short_description:"The basic components of Neo", - url:"/docs/n3/foundation/Wallets" + title: "Wallet", + short_description: "The basic components of Neo", + url: "/docs/n3/foundation/Wallets" }, { - title:"Transactions", - short_description:"How Wallets, smart contracts and accounts interact with Neo network", - url:"/docs/n3/foundation/Transactions" + title: "Transactions", + short_description: "How Wallets, smart contracts and accounts interact with Neo network", + url: "/docs/n3/foundation/Transactions" }, { - title:"Blocks", - short_description:"Read up on what makes up the block", - url:"/docs/n3/foundation/Blocks" + title: "Blocks", + short_description: "Read up on what makes up the block", + url: "/docs/n3/foundation/Blocks" }, { - title:"NeoVM", - short_description:"Read up on NeoVM, a lightweight virtual machine for executing Neo smart contracts", - url:"/docs/n3/foundation/neovm" + title: "NeoVM", + short_description: "Read up on NeoVM, a lightweight virtual machine for executing Neo smart contracts", + url: "/docs/n3/foundation/neovm" }, ] const advanceFeatures = [ { - title:"Neo Oracle Service", - short_description:"Learn more about Native Oracle on Neo", - url:"/docs/n3/Advances/Oracles" + title: "Neo Oracle Service", + short_description: "Learn more about Native Oracle on Neo", + url: "/docs/n3/Advances/Oracles" }, { - title:"NeoFS", - short_description:"Learn more about Native File storage on Neo", - url:"/docs/neofs" + title: "NeoFS", + short_description: "Learn more about Native File storage on Neo", + url: "/docs/neofs" }, ] @@ -178,7 +178,7 @@ export default function Home() {

Get started

- +
@@ -188,7 +188,7 @@ export default function Home() { -

Fundamentals

+

Fundamentals

Read up on core concepts to give you a basic understanding of Neo.

Read Docs
@@ -328,7 +328,8 @@ export default function Home() {
-
+
+

@@ -336,11 +337,16 @@ export default function Home() { Contribute

- Do you have an example or tutorial for the Neo N3 blockchain that can help the global community? Join some of the most collaborative, knowledgeable developers in the industry by sharing your knowledge here. + Do you have an example or tutorial for the Neo N3 blockchain that can help the global community? Join some of the most collaborative, knowledgeable developers in the industry by sharing your knowledge here.

- How to Contribute + How to Contribute + + + +
+
@@ -390,109 +396,78 @@ export default function Home() {
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -

- - - - - Ask Technical Questions -

-

- Every developer needs help sometimes. -Discuss your application development -questions in our Neo Discord channel, where you can find full support from the Neo global community — or help out your peers who are developing on the Neo platform. -

-
- Join NEO Discord - - - - - - -
-
- -
-

Explore Documentation

-
+
-

Introduction

- { - introductionDocLinks.map((link)=> ( -
- {link.title} -

{link.short_description}

-
- )) - } +

Introduction

+ { + introductionDocLinks.map((link) => ( +
+ {link.title} +

{link.short_description}

+
+ )) + }
-

Fundamentals

- { - fundamentalsDocLinks.map((link)=> ( -
- {link.title} -

{link.short_description}

-
- )) - } +

Fundamentals

+ { + fundamentalsDocLinks.map((link) => ( +
+ {link.title} +

{link.short_description}

+
+ )) + }
- -

Advance Features

- { - advanceFeatures.map((link)=> ( -
- {link.title} -

{link.short_description}

-
- )) - } + +

Advance Features

+ { + advanceFeatures.map((link) => ( +
+ {link.title} +

{link.short_description}

+
+ )) + }
+
+
+ + +
+
+

+ + + + + + Ask Technical Questions +

+

Every developer needs help sometimes. Discuss your application development questions in our Neo Discord channel, where you can find full support from the Neo global community — or help out your peers who are developing on the Neo platform.

+ + Join NEO Discord + + + + + +
+
+ +
+ +
+ ); } diff --git a/src/pages/resources.js b/src/pages/resources.js index bede8f4..a7c7c7d 100644 --- a/src/pages/resources.js +++ b/src/pages/resources.js @@ -8,6 +8,27 @@ export default function Tooling() { {() => { const [selectedTag, setSelectedTag] = React.useState("") const data = [ + { + title: "Protocols", + tools: [ + { + name: "NeoFS", + by: "Neo SPCC", + description: "NeoFS is a distributed, decentralized object storage network developed by Neo SPCC. Built with Neo blockchain integration in mind, NeoFS aims to support the shift away from third-party storage providers, providing users with complete control over their data.", + icon_url: "/tooling/nspcc.png", + web_url: "https://fs.neo.org/", + tags: [] + }, + { + name: "Oracles", + by: "Neo Global Development", + description: "Oracles are a utility which can be leveraged by smart contracts to interface with systems outside the Neo blockchain using http(s).", + icon_url: "/tooling/ngd.png", + web_url: "https://docs.neo.org/docs/en-us/advanced/oracle.html", + tags: [] + } + ] + }, { title: "Development Environments", tools: [ @@ -33,7 +54,7 @@ export default function Tooling() { description: "NEO•ONE is an end-to-end development framework for Neo applications created with TypeScript or JavaScript. Like the Blockchain Toolkit, it includes tools for local network setup, contract compiling and deploying, wallet handling, automated testing, and also provides client APIs to simplify interaction with deployed contracts.", icon_url: "/tooling/neo-one.svg", web_url: "https://n3.neo-one.io/", - tags: ["typescript", "js"] + tags: ["js"] }, { name: "Neo Playground", @@ -87,22 +108,6 @@ export default function Tooling() { icon_url: "/tooling/ngd.png", web_url: "https://neo3.neotube.io/", tags: [] - }, - { - name: "NeoFS", - by: "Neo SPCC", - description: "NeoFS is a distributed, decentralized object storage network developed by Neo SPCC. Built with Neo blockchain integration in mind, NeoFS aims to support the shift away from third-party storage providers, providing users with complete control over their data.", - icon_url: "/tooling/nspcc.png", - web_url: "https://fs.neo.org/", - tags: ["go","c#"] - }, - { - name: "Oracles", - by: "Neo Global Development", - description: "Oracles are a utility which can be leveraged by smart contracts to interface with systems outside the Neo blockchain using http(s).", - icon_url: "/tooling/ngd.png", - web_url: "https://docs.neo.org/docs/en-us/advanced/oracle.html", - tags: ["c#"] } ] }, @@ -247,26 +252,27 @@ export default function Tooling() {
-
+

Resources & Tooling

-
- -
+
+

Choose your stack

+
+ + { + allTags().map((tag) => ( + {tag} + )) + } + +
{ data.map((category) => (
-

{category.title}

+

{category.title}

{ category.tools.filter((tool) => { return tool.tags.includes(selectedTag) || selectedTag == "" }).length == 0 ? diff --git a/src/theme/Footer/index.js b/src/theme/Footer/index.js index 84e007c..1074466 100644 --- a/src/theme/Footer/index.js +++ b/src/theme/Footer/index.js @@ -59,7 +59,7 @@ function Footer() { } return ( -