feat: page title hints #371

lukeromanowicz · 2023-07-13T07:55:29Z

Description

Resolves #334
Adds title hints to all pages

Demo

Checklist:

I have read and followed the Contributing Guide
My change does not require a change to the documentation.

github-actions · 2023-07-13T08:00:54Z

Deployed to https://pr-371-aescan.stg.aepps.com

janmichek

Nice work! Let's tune the content a bit.

I am not really satisfied with the visual representation. The contrast is really low. I think it should be darker and bigger to compensate the font size

src/utils/hints/accountHints.js

src/utils/hints/tokensHints.js

src/utils/hints/oraclesHints.js

lukeromanowicz · 2023-07-19T12:05:42Z

Thanks for the review @janmichek, I was told on a call with @danilosierrac to reuse the designs for hints in dashboard panel titles:

As you can see there isn't available any dedicated design for the page titles. Could you, please, reach out to Danilo and figure out with him what would work best here? I'm out of ideas how to make it look good

janmichek

Sweet, thanks for improvements 🔥

michele-franchi

I left some suggestions, I would also add links to the specific protocol page for these hints. Example:
https://docs.aeternity.com/protocol/AENS/

It would be also nice to have @marc0olo ideas/review here.

michele-franchi · 2023-07-20T08:18:05Z

src/utils/hints/contractsHints.js

@@ -1,4 +1,5 @@
 export const contractsHints = {
+  contract: 'A self-executing program deployed in the blockchain that can be used to facilitate a wide range of business processes, exchange of value, and agreements.',


Suggested change

contract: 'A self-executing program deployed in the blockchain that can be used to facilitate a wide range of business processes, exchange of value, and agreements.',

contract: 'A program deployed on the blockchain that runs when predetermined conditions are met. Smart Contracts are written in Sophia, a typed functional programming language. ',

I would adjust it a little bit mentioning Sophia, what do you think?

Good idea - fixed

michele-franchi · 2023-07-20T08:25:54Z

src/utils/hints/namesHints.js

@@ -1,5 +1,5 @@
 export const namesHints = {
-  name: 'Unique identifier that may be configured to point to accounts, smart contracts or oracles.',
+  name: 'A unique identifier that may be configured to point to accounts, smart contracts or oracles.',


Here I think the explanation should be a little bit more complete, seems to be a bit too short to explain what a name is. In my opinion it is ok to have this in the table header but not in the title hint.

Fair point. I hope the second iteration makes more sense.

I'm trying to limit the hints because on mobile it will take a significant amount of space to display the message, while there is a "Learn more" button with an infinitely more detailed description

michele-franchi · 2023-07-20T08:29:30Z

src/utils/hints/transactionsHints.js

@@ -1,4 +1,5 @@
 export const transactionsHints = {
+  transaction: 'A record of value transfer or an operation execution that enables the participants to verify and confirm these actions on the blockchain.',


In my opinion it seems to be a bit vague, it should be a bit more focused on aeternity's characteristics.

I tried to add a little bit more to it but I find it hard to describe it well. Any proposals?

michele-franchi · 2023-07-20T09:15:50Z

src/utils/hints/stateChannelsHints.js

@@ -1,4 +1,5 @@
 export const stateChannelsHints = {
+  stateChannel: 'An off-chain mechanism that allow participants to conduct multiple transactions or interactions without involving the main blockchain for each step. By reducing transaction fees and increasing transaction speed, state channels provide a scalable solution for applications requiring frequent and rapid interactions while still leveraging the security of the Aeternity blockchain.',


Suggested change

stateChannel: 'An off-chain mechanism that allow participants to conduct multiple transactions or interactions without involving the main blockchain for each step. By reducing transaction fees and increasing transaction speed, state channels provide a scalable solution for applications requiring frequent and rapid interactions while still leveraging the security of the Aeternity blockchain.',

stateChannel: 'State Channels allow the gas-free execution of smart contracts and transactions, privately and with the speed of light, while still being able to escalate on-chain in case of disagreement.',

I would use the same we have on the dashboard and I would also add a "Learn more" link to https://aeternity.com/state-channels

Added here in other places whenever there was a dedicated documentation page. The rest of the entities are described only on medium and github RFCs (at least as per my search)

is this changed already? I agree with @michele-franchi here 👍

I provided another suggestion with "A state channel" instead of "State Channels", see below

michele-franchi · 2023-07-21T06:20:22Z

I also agree that hints are barely visible and the contrast is really low. What can we do here @danilosierrac?

janmichek · 2023-07-24T08:30:43Z

I also agree that hints are barely visible and the contrast is really low. What can we do here @danilosierrac?

Let's solve it separately, so we are not blocking most of the work. I already set the issue #388

lukeromanowicz · 2023-07-24T08:34:29Z

@michele-franchi would that be ok? ☝️

michele-franchi · 2023-07-24T09:01:19Z

@lukeromanowicz yes, makes sense

marc0olo

I tried to make some things more clear.

and again I am a little bit wondering about consistency when talking about "smart contracts" or other entities 😅

I wrote everything with small letters within the sentences.

marc0olo · 2023-07-25T09:06:26Z

src/utils/hints/stateChannelsHints.js

@@ -1,4 +1,5 @@
 export const stateChannelsHints = {
+  stateChannel: 'An off-chain mechanism that allow participants to conduct multiple transactions or interactions without involving the main blockchain for each step. By reducing transaction fees and increasing transaction speed, state channels provide a scalable solution for applications requiring frequent and rapid interactions while still leveraging the security of the Aeternity blockchain.',


is this changed already? I agree with @michele-franchi here 👍

marc0olo · 2023-07-25T09:09:16Z

src/utils/hints/oraclesHints.js

@@ -1,4 +1,5 @@
 export const oraclesHints = {
+  oracle: 'A component that connects smart contracts with real-world data. It acts as a trusted source of external information by fetching data from various sources and validating its accuracy.',


Suggested change

oracle: 'A component that connects smart contracts with real-world data. It acts as a trusted source of external information by fetching data from various sources and validating its accuracy.',

oracle: 'An oracle can be queried to put off-chain real-world data from any kind of data source on the æternity blockchain for smart contracts to use on-chain. This is necessary because smart contracts running on æternity are deterministic and cannot access information stored outside the blockchain network.',

marc0olo · 2023-07-25T09:14:06Z

src/utils/hints/accountHints.js

@@ -1,4 +1,5 @@
 export const accountHints = {
+  account: 'An abstract cryptographic entity that can send and receive transactions in æternity blockchain.',


Suggested change

account: 'An abstract cryptographic entity that can send and receive transactions in æternity blockchain.',

account: 'An account is an abstract cryptographic entity that can execute transactions and send or receive funds on the æternity blockchain. An account can also be converted into a so-called Generalized Account where a smart contract will be attached to the account and take over its authorization logic, thus enabling a variety of different use cases.',

marc0olo · 2023-07-25T09:20:48Z

src/utils/hints/contractsHints.js

@@ -1,4 +1,5 @@
 export const contractsHints = {
+  contract: 'A program deployed on the blockchain that runs when predetermined conditions are met. Smart Contracts are written in Sophia, a typed functional programming language.',


Suggested change

contract: 'A program deployed on the blockchain that runs when predetermined conditions are met. Smart Contracts are written in Sophia, a typed functional programming language.',

contract: 'A smart contract is a program that runs on the æternity blockchain. It's a collection of code (its functions) and data (its state) that resides at a specific address (contract id) on the æternity blockchain. Each smart contract has an account associated to it. Functions can be executed by any account via ContractCallTx and may change the smart contract's state. Smart contracts on the æternity blockchain are written in Sophia, a typed functional programming language.',

marc0olo · 2023-07-25T09:35:27Z

src/utils/hints/tokensHints.js

@@ -1,4 +1,5 @@
 export const tokensHints = {
+  token: 'A smart contract that implements the AEX-9 Simple Fungible Token Standard. It is used to represent any asset that is fungible, tradeable and transferable.',


Suggested change

token: 'A smart contract that implements the AEX-9 Simple Fungible Token Standard. It is used to represent any asset that is fungible, tradeable and transferable.',

token: 'A token is implemented via a smart contract and can represent virtually anything on æternity. The AEX-9 fungible token standard allows developers to build token applications that are interoperable with other products and services. A fungible token is divisible and interchangeable.',

marc0olo · 2023-07-25T09:46:45Z

src/utils/hints/namesHints.js

@@ -1,5 +1,5 @@
 export const namesHints = {
-  name: 'Unique identifier that may be configured to point to accounts, smart contracts or oracles.',
+  name: 'A unique, transferrable identifier that provides a way for users to map human-readable names to blockchain resources such as accounts, smart contracts or oracles. It expires after a fixed amount of time unless it gets extended.',


Suggested change

name: 'A unique, transferrable identifier that provides a way for users to map human-readable names to blockchain resources such as accounts, smart contracts or oracles. It expires after a fixed amount of time unless it gets extended.',

name: 'The æternity naming system (AENS) is a distributed, open, and built-in naming system on the æternity blockchain. Each .chain name is a unique, transferrable identifier that provides a way for users to map human-readable names to blockchain resources such as accounts, smart contracts, oracles or state channels.',

marc0olo · 2023-07-25T09:48:38Z

src/utils/hints/transactionsHints.js

@@ -1,4 +1,5 @@
 export const transactionsHints = {
+  transaction: 'A record of value transfer or an operation execution that enables the participants to verify and confirm these actions on the blockchain. The purpose and the parties involved in the transactions vary depending on their type.',


Suggested change

transaction: 'A record of value transfer or an operation execution that enables the participants to verify and confirm these actions on the blockchain. The purpose and the parties involved in the transactions vary depending on their type.',

transaction: 'A transaction is a cryptographically signed instruction from an account. An account will initiate a transaction to update the state of the æternity blockchain. The simplest transaction is transferring AE coins from one account to another. The purpose and the parties involved in the transactions vary depending on their type.',

marc0olo · 2023-07-25T10:37:37Z

src/utils/hints/stateChannelsHints.js

@@ -1,4 +1,5 @@
 export const stateChannelsHints = {
+  stateChannel: 'An off-chain mechanism that allow participants to conduct multiple transactions or interactions without involving the main blockchain for each step. By reducing transaction fees and increasing transaction speed, state channels provide a scalable solution for applications requiring frequent and rapid interactions while still leveraging the security of the Aeternity blockchain.',


I would make it singular to be consistent with other tooltips

Suggested change

stateChannel: 'An off-chain mechanism that allow participants to conduct multiple transactions or interactions without involving the main blockchain for each step. By reducing transaction fees and increasing transaction speed, state channels provide a scalable solution for applications requiring frequent and rapid interactions while still leveraging the security of the Aeternity blockchain.',

stateChannel: 'A state channel allows the gas-free execution of smart contracts and transactions, privately and with the speed of light, while still being able to escalate on-chain in case of disagreement.',

lukeromanowicz · 2023-07-25T11:19:18Z

Thanks Marco, very good additions. I've applied all of them

michele-franchi

Good job 👏

marc0olo · 2023-07-26T08:47:48Z

@lukeromanowicz @michele-franchi I think following titles have not been updated according to latest deployment:

Smart Contracts
Oracles
Account

michele-franchi · 2023-07-26T08:50:52Z

@marc0olo @lukeromanowicz ah, I was checking your suggestions thinking these were already integrated.

lukeromanowicz · 2023-07-26T08:53:45Z

My bad, I didn't push the second commit. I'll create a second PR right away

feat: page title hints

009b3cf

lukeromanowicz requested review from michele-franchi and janmichek July 13, 2023 07:55

janmichek requested changes Jul 17, 2023

View reviewed changes

src/utils/hints/accountHints.js Outdated Show resolved Hide resolved

src/utils/hints/tokensHints.js Outdated Show resolved Hide resolved

src/utils/hints/oraclesHints.js Outdated Show resolved Hide resolved

Merge branch 'develop' into feat/page-title-hints

145b8bf

janmichek mentioned this pull request Jul 19, 2023

feat: Keyblock details hints #381

Merged

2 tasks

improve hints of page titles

17ce876

lukeromanowicz requested a review from janmichek July 19, 2023 12:05

Improve page titles to get rid of entity name repetition

7f69900

janmichek approved these changes Jul 20, 2023

View reviewed changes

michele-franchi requested changes Jul 20, 2023

View reviewed changes

improve page title hints and add learn more resources where possible

890bbcf

lukeromanowicz requested a review from michele-franchi July 20, 2023 14:00

michele-franchi requested a review from marc0olo July 24, 2023 08:02

marc0olo suggested changes Jul 25, 2023

View reviewed changes

lukeromanowicz added 2 commits July 25, 2023 12:47

Merge branch 'develop' into feat/page-title-hints

ee92603

improve page title hints

4d8eb77

michele-franchi approved these changes Jul 26, 2023

View reviewed changes

lukeromanowicz merged commit 66dbd21 into develop Jul 26, 2023
2 checks passed

lukeromanowicz deleted the feat/page-title-hints branch July 26, 2023 08:01

lukeromanowicz mentioned this pull request Jul 26, 2023

feat: add missing page title hints improvements #407

Merged

2 tasks

aeternity-bot mentioned this pull request Jul 31, 2023

chore(release/0.4.0): release 0.4.0 #412

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: page title hints #371

feat: page title hints #371

lukeromanowicz commented Jul 13, 2023

github-actions bot commented Jul 13, 2023

janmichek left a comment

lukeromanowicz commented Jul 19, 2023

janmichek left a comment

michele-franchi left a comment •

edited

michele-franchi Jul 20, 2023

lukeromanowicz Jul 20, 2023

michele-franchi Jul 20, 2023

lukeromanowicz Jul 20, 2023 •

edited

michele-franchi Jul 20, 2023

lukeromanowicz Jul 20, 2023

michele-franchi Jul 20, 2023

lukeromanowicz Jul 20, 2023

marc0olo Jul 25, 2023

marc0olo Jul 25, 2023

michele-franchi commented Jul 21, 2023

janmichek commented Jul 24, 2023

lukeromanowicz commented Jul 24, 2023

michele-franchi commented Jul 24, 2023

marc0olo left a comment

marc0olo Jul 25, 2023

marc0olo Jul 25, 2023

marc0olo Jul 25, 2023

marc0olo Jul 25, 2023

marc0olo Jul 25, 2023

marc0olo Jul 25, 2023

marc0olo Jul 25, 2023

marc0olo Jul 25, 2023

lukeromanowicz commented Jul 25, 2023 •

edited

michele-franchi left a comment

marc0olo commented Jul 26, 2023

michele-franchi commented Jul 26, 2023

lukeromanowicz commented Jul 26, 2023

		@@ -1,4 +1,5 @@
		export const contractsHints = {
		contract: 'A self-executing program deployed in the blockchain that can be used to facilitate a wide range of business processes, exchange of value, and agreements.',

	contract: 'A self-executing program deployed in the blockchain that can be used to facilitate a wide range of business processes, exchange of value, and agreements.',
	contract: 'A program deployed on the blockchain that runs when predetermined conditions are met. Smart Contracts are written in Sophia, a typed functional programming language. ',

		@@ -1,4 +1,5 @@
		export const transactionsHints = {
		transaction: 'A record of value transfer or an operation execution that enables the participants to verify and confirm these actions on the blockchain.',

		@@ -1,4 +1,5 @@
		export const stateChannelsHints = {
		stateChannel: 'An off-chain mechanism that allow participants to conduct multiple transactions or interactions without involving the main blockchain for each step. By reducing transaction fees and increasing transaction speed, state channels provide a scalable solution for applications requiring frequent and rapid interactions while still leveraging the security of the Aeternity blockchain.',

	stateChannel: 'An off-chain mechanism that allow participants to conduct multiple transactions or interactions without involving the main blockchain for each step. By reducing transaction fees and increasing transaction speed, state channels provide a scalable solution for applications requiring frequent and rapid interactions while still leveraging the security of the Aeternity blockchain.',
	stateChannel: 'State Channels allow the gas-free execution of smart contracts and transactions, privately and with the speed of light, while still being able to escalate on-chain in case of disagreement.',

		@@ -1,4 +1,5 @@
		export const oraclesHints = {
		oracle: 'A component that connects smart contracts with real-world data. It acts as a trusted source of external information by fetching data from various sources and validating its accuracy.',

	oracle: 'A component that connects smart contracts with real-world data. It acts as a trusted source of external information by fetching data from various sources and validating its accuracy.',
	oracle: 'An oracle can be queried to put off-chain real-world data from any kind of data source on the æternity blockchain for smart contracts to use on-chain. This is necessary because smart contracts running on æternity are deterministic and cannot access information stored outside the blockchain network.',

		@@ -1,4 +1,5 @@
		export const accountHints = {
		account: 'An abstract cryptographic entity that can send and receive transactions in æternity blockchain.',

	account: 'An abstract cryptographic entity that can send and receive transactions in æternity blockchain.',
	account: 'An account is an abstract cryptographic entity that can execute transactions and send or receive funds on the æternity blockchain. An account can also be converted into a so-called Generalized Account where a smart contract will be attached to the account and take over its authorization logic, thus enabling a variety of different use cases.',

		@@ -1,4 +1,5 @@
		export const tokensHints = {
		token: 'A smart contract that implements the AEX-9 Simple Fungible Token Standard. It is used to represent any asset that is fungible, tradeable and transferable.',

	token: 'A smart contract that implements the AEX-9 Simple Fungible Token Standard. It is used to represent any asset that is fungible, tradeable and transferable.',
	token: 'A token is implemented via a smart contract and can represent virtually anything on æternity. The AEX-9 fungible token standard allows developers to build token applications that are interoperable with other products and services. A fungible token is divisible and interchangeable.',

	name: 'A unique, transferrable identifier that provides a way for users to map human-readable names to blockchain resources such as accounts, smart contracts or oracles. It expires after a fixed amount of time unless it gets extended.',
	name: 'The æternity naming system (AENS) is a distributed, open, and built-in naming system on the æternity blockchain. Each .chain name is a unique, transferrable identifier that provides a way for users to map human-readable names to blockchain resources such as accounts, smart contracts, oracles or state channels.',

	transaction: 'A record of value transfer or an operation execution that enables the participants to verify and confirm these actions on the blockchain. The purpose and the parties involved in the transactions vary depending on their type.',
	transaction: 'A transaction is a cryptographically signed instruction from an account. An account will initiate a transaction to update the state of the æternity blockchain. The simplest transaction is transferring AE coins from one account to another. The purpose and the parties involved in the transactions vary depending on their type.',

	stateChannel: 'An off-chain mechanism that allow participants to conduct multiple transactions or interactions without involving the main blockchain for each step. By reducing transaction fees and increasing transaction speed, state channels provide a scalable solution for applications requiring frequent and rapid interactions while still leveraging the security of the Aeternity blockchain.',
	stateChannel: 'A state channel allows the gas-free execution of smart contracts and transactions, privately and with the speed of light, while still being able to escalate on-chain in case of disagreement.',

feat: page title hints #371

feat: page title hints #371

Conversation

lukeromanowicz commented Jul 13, 2023

Description

Demo

Checklist:

github-actions bot commented Jul 13, 2023

janmichek left a comment

Choose a reason for hiding this comment

lukeromanowicz commented Jul 19, 2023

janmichek left a comment

Choose a reason for hiding this comment

michele-franchi left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lukeromanowicz Jul 20, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michele-franchi commented Jul 21, 2023

janmichek commented Jul 24, 2023

lukeromanowicz commented Jul 24, 2023

michele-franchi commented Jul 24, 2023

marc0olo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lukeromanowicz commented Jul 25, 2023 • edited

michele-franchi left a comment

Choose a reason for hiding this comment

marc0olo commented Jul 26, 2023

michele-franchi commented Jul 26, 2023

lukeromanowicz commented Jul 26, 2023

michele-franchi left a comment •

edited

lukeromanowicz Jul 20, 2023 •

edited

lukeromanowicz commented Jul 25, 2023 •

edited