From 687b78ef3d70452e1128bfe5605934d243f5316e Mon Sep 17 00:00:00 2001 From: golmek <126684244+golmek@users.noreply.github.com> Date: Wed, 19 Jun 2024 17:46:28 +0200 Subject: [PATCH 1/4] Update copy.ts first step copy v2 --- frontend/src/utils/copy.ts | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/frontend/src/utils/copy.ts b/frontend/src/utils/copy.ts index 91d9798..8fd53fa 100644 --- a/frontend/src/utils/copy.ts +++ b/frontend/src/utils/copy.ts @@ -11,23 +11,21 @@ export const copy: any = (() => { title: "Disconnected", message: { __html: - md.render(`Welcome to our example service for Deposit payments on Golem. We're glad to have you here! This version will show you step by step how Golem deposit payments work and how You can benefit from it on your very own service. -This example service is inspired by a real-world service called VirusTotal. \ -[Link text Here](https://link-url-here.org) -VirusTotal is well well-renowned service that analyzes suspicious files and URLs by running them through multiple antivirus engines and URL scanners to detect malware and malicious content. You can access the original service under this link: https://www.virustotal.com/gui/home/upload -Of course, our service is a little bit less ambitious as it aims to present how deposit payments can be utilized by the Golem community. Consequently, our service will let you scan files on the ClamAV engine and give the results of such scans. -Last but not least, we are utilizing the Holesky testnet for this example. It means that you need a Metamask wallet with both Holesky tETH and Holesky tGLM. -To obtain Holesky tETH feel free to use one of the following faucets: -https://holesky-faucet.pk910.de/ -https://faucet.quicknode.com/ethereum/holesky -https://faucet.chainstack.com/holesky-testnet-faucet -https://www.holeskyfaucet.io/ -After You obtain some tETH, you can request tGLM tokens from this Smart Contract by calling the "Create" function: -https://holesky.etherscan.io/address/0xface100969ff47eb58d2cf603321b581a84bceac -When You are ready to start, click the "Connect Wallet" button. This button will initialize the following steps of the process: -Connect Your Metamask Wallet with Web Service -Register Your wallet to the Service via SIWE (Sign-In with Ethereum) standard -Have fun! + md.render( + `Welcome to our example service for Deposit payments on Golem. We're glad to have you here. This version will show you step by step how Golem deposit payments work and how You can benefit from it on your very own service. \\ \\ + This example service is inspired by a real-world service called VirusTotal. VirusTotal is well well-renowned service that analyzes suspicious files and URLs by running them through multiple antivirus engines and URL scanners to detect malware and malicious content. You can access the original service under this [Virus Total](https://www.virustotal.com/gui/home/upload). \\ \\ + Of course, our service is a little bit less ambitious as it aims to present how deposit payments can be utilized by the Golem community. Consequently, our service will let you scan files on the ClamAV engine and give the results of such scans. \\ \\ + Last but not least, we are utilizing the Holesky testnet for this example. It means that you need a Metamask wallet with both Holesky tETH and Holesky tGLM. To obtain Holesky tETH feel free to use one of the following faucets: \\ + - [Faucet 1](https://holesky-faucet.pk910.de/) \\ + - [Faucet 2](https://faucet.quicknode.com/ethereum/holesky) \\n + - [Faucet 3](https://faucet.chainstack.com/holesky-testnet-faucet) \\ + - [Faucet 4](https://www.holeskyfaucet.io/) \\ \\ + After You obtain some tETH, you can request tGLM tokens from this Smart Contract by calling the "Create" function: \\ + - [GLM Faucet Smart Contract](https://holesky.etherscan.io/address/0xface100969ff47eb58d2cf603321b581a84bceac) \\ \\ + When You are ready to start, click the "Connect Wallet" button. This button will initialize the following steps of the process: \\ + - Connect Your Metamask Wallet with Web Service \\ + - Register Your wallet to the Service via SIWE (Sign-In with Ethereum) standard \\ \\ + Have fun!` `), }, }, From 07a92239043ca1e65c5b78e6497d818d368c2eb9 Mon Sep 17 00:00:00 2001 From: pociej Date: Wed, 19 Jun 2024 17:57:33 +0200 Subject: [PATCH 2/4] chore: reformat markdown #82 --- frontend/src/utils/copy.ts | 36 +++++++++++++++++++++--------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/frontend/src/utils/copy.ts b/frontend/src/utils/copy.ts index 8fd53fa..c044ac6 100644 --- a/frontend/src/utils/copy.ts +++ b/frontend/src/utils/copy.ts @@ -10,23 +10,29 @@ export const copy: any = (() => { [UserState.DISCONNECTED]: { title: "Disconnected", message: { - __html: - md.render( - `Welcome to our example service for Deposit payments on Golem. We're glad to have you here. This version will show you step by step how Golem deposit payments work and how You can benefit from it on your very own service. \\ \\ - This example service is inspired by a real-world service called VirusTotal. VirusTotal is well well-renowned service that analyzes suspicious files and URLs by running them through multiple antivirus engines and URL scanners to detect malware and malicious content. You can access the original service under this [Virus Total](https://www.virustotal.com/gui/home/upload). \\ \\ - Of course, our service is a little bit less ambitious as it aims to present how deposit payments can be utilized by the Golem community. Consequently, our service will let you scan files on the ClamAV engine and give the results of such scans. \\ \\ - Last but not least, we are utilizing the Holesky testnet for this example. It means that you need a Metamask wallet with both Holesky tETH and Holesky tGLM. To obtain Holesky tETH feel free to use one of the following faucets: \\ - - [Faucet 1](https://holesky-faucet.pk910.de/) \\ - - [Faucet 2](https://faucet.quicknode.com/ethereum/holesky) \\n - - [Faucet 3](https://faucet.chainstack.com/holesky-testnet-faucet) \\ - - [Faucet 4](https://www.holeskyfaucet.io/) \\ \\ + __html: md.render( + `Welcome to our example service for Deposit payments on Golem. We're glad to have you here. This version will show you step by step how Golem deposit payments work and how You can benefit from it on your very own service. \\ + \\ + This example service is inspired by a real-world service called VirusTotal. VirusTotal is well well-renowned service that analyzes suspicious files and URLs by running them through multiple antivirus engines and URL scanners to detect malware and malicious content. You can access the original service under this [Virus Total](https://www.virustotal.com/gui/home/upload). \\ + \\ + Of course, our service is a little bit less ambitious as it aims to present how deposit payments can be utilized by the Golem community. Consequently, our service will let you scan files on the ClamAV engine and give the results of such scans. \\ + \\ + Last but not least, we are utilizing the Holesky testnet for this example. It means that you need a Metamask wallet with both Holesky tETH and Holesky tGLM. To obtain Holesky tETH feel free to use one of the following faucets: \\ + - [Faucet 1](https://holesky-faucet.pk910.de/) \\ + - [Faucet 2](https://faucet.quicknode.com/ethereum/holesky) \\ + - [Faucet 3](https://faucet.chainstack.com/holesky-testnet-faucet)\\ + - [Faucet 4](https://www.holeskyfaucet.io/)\\ + \\ After You obtain some tETH, you can request tGLM tokens from this Smart Contract by calling the "Create" function: \\ - - [GLM Faucet Smart Contract](https://holesky.etherscan.io/address/0xface100969ff47eb58d2cf603321b581a84bceac) \\ \\ + - [GLM Faucet Smart Contract](https://holesky.etherscan.io/address/0xface100969ff47eb58d2cf603321b581a84bceac) \\ + \\ When You are ready to start, click the "Connect Wallet" button. This button will initialize the following steps of the process: \\ - - Connect Your Metamask Wallet with Web Service \\ - - Register Your wallet to the Service via SIWE (Sign-In with Ethereum) standard \\ \\ - Have fun!` - `), + - Connect Your Metamask Wallet with Web Service \\ + - Register Your wallet to the Service via SIWE (Sign-In with Ethereum) standard \\ + \\ + Have fun! + ` + ), }, }, get [UserState.CONNECTED]() { From c716bf8af7cb2e64f67cbe5f47c098519b9f1f3a Mon Sep 17 00:00:00 2001 From: golmek <126684244+golmek@users.noreply.github.com> Date: Wed, 19 Jun 2024 18:22:04 +0200 Subject: [PATCH 3/4] Update copy.ts copy update v2 1/2 --- frontend/src/utils/copy.ts | 58 +++++++++++++++++++++++--------------- 1 file changed, 35 insertions(+), 23 deletions(-) diff --git a/frontend/src/utils/copy.ts b/frontend/src/utils/copy.ts index c044ac6..cf292f4 100644 --- a/frontend/src/utils/copy.ts +++ b/frontend/src/utils/copy.ts @@ -8,7 +8,7 @@ const md = new Remarkable(); export const copy: any = (() => { return { [UserState.DISCONNECTED]: { - title: "Disconnected", + title: "Hello Golem Developer!", message: { __html: md.render( `Welcome to our example service for Deposit payments on Golem. We're glad to have you here. This version will show you step by step how Golem deposit payments work and how You can benefit from it on your very own service. \\ @@ -42,7 +42,10 @@ export const copy: any = (() => { title: "You are Registered!", message: { __html: - md.render(`Congratulations! You are now successfully registered with our example service. The next step in the process is to provide approval for the GLM tokens stored in your wallet. This approval is given to the Deposit Smart Contract (0x9CB8Ecc74e299eF9D3cBcf8f806F5C7b76CA08D3) and can be revoked or extended at any time. It is a necessary step to create a deposit later on. It is important to emphasize that this step has to be done by the service user. + md.render( + `Congratulations! You are now successfully registered with our example service. \\ + \\ + The next step in the process is to provide approval for the GLM tokens stored in your wallet. This approval is given to the Deposit Smart Contract (0x9CB8Ecc74e299eF9D3cBcf8f806F5C7b76CA08D3) and can be revoked or extended at any time. It is a necessary step to create a deposit later on. It is important to emphasize that this step has to be done by the service user. `), }, }, @@ -53,11 +56,13 @@ export const copy: any = (() => { title: "Approval successfully given!", message: { __html: - md.render(`Great job! With Approval in place now is time to create a Deposit. -The deposit consists of three values: -amount: that is the amount of GLM tokens You are willing to spend on the service. This amount will be locked so that there is a limited risk of the user running out without paying :) That value should be provided by the User. -fee: that is a fee that will be sent to the Service Owner. In this instance, it is Golem Factory. However, for Your own service, it will be You! It is not mandatory but can be utilized to make your service profitable or at least refund the costs of running it. In normal conditions, this value should be set by the Service user. However, in this example, we make it editable so that You can play around with it. -timestamp: it points to the place in time till which Deposit will be held on the Smart Contract. As already mentioned this mechanism is chosen to limit the risk of people running away without paying for service. + md.render( + `Great job! With Approval in place now is time to create a Deposit. \\ + \\ + The deposit consists of three values: \\ + - amount: that is the amount of GLM tokens You are willing to spend on the service. This amount will be locked so that there is a limited risk of the user running out without paying :) That value should be provided by the User. \\ + - fee: that is a fee that will be sent to the Service Owner. In this instance, it is Golem Factory. However, for Your own service, it will be You! It is not mandatory but can be utilized to make your service profitable or at least refund the costs of running it. In normal conditions, this value should be set by the Service user. However, in this example, we make it editable so that You can play around with it. \\ + - timestamp: it points to the place in time till which Deposit will be held on the Smart Contract. As already mentioned this mechanism is chosen to limit the risk of people running away without paying for service. `), }, }, @@ -69,8 +74,10 @@ timestamp: it points to the place in time till which Deposit will be held on the title: "Time to create Allocation!", message: { __html: - md.render(`Allocation is a logical entity created in Yagna, which keeps track of how much money the Requestor wishes to pay the Provider for his computation power. In our scenario Allocation will be created for the same amount as the Deposit. It is because those two entities are interconnected in Deposit Payments as GLMs stored at the Deposit will be used to cover Allocation payments. -In a normal scenario, Allocation should be created automatically by Yagna so User interaction is not needed. However, in our example service we let you create it manually so there is a better understanding of what is happening behind the UI. Click "Create" next to Allocation. + md.render( + `Allocation is a logical entity created in Yagna, which keeps track of how much money the Requestor wishes to pay the Provider for his computation power. In our scenario Allocation will be created for the same amount as the Deposit. It is because those two entities are interconnected in Deposit Payments as GLMs stored at the Deposit will be used to cover Allocation payments. \\ + \\ + In a normal scenario, Allocation should be created automatically by Yagna so User interaction is not needed. However, in our example service we let you create it manually so there is a better understanding of what is happening behind the UI. Click "Create" next to Allocation. `), }, }, @@ -81,20 +88,23 @@ In a normal scenario, Allocation should be created automatically by Yagna so Use title: "Let’s find a Golem Provider for the job!", message: { __html: - md.render(`It is high time to sign the Agreement and find our Golem Provider. By clicking "Create" next to the Agreement section You will trigger Yagna to start looking for a Provider on the Golem network to run our file scanning example. It might take a while, but when it is done Agreement will be signed between Service Owner Yagna and the Provider. -The provider will also be ready to accept files for us to scan. What is more, We will start to receive "debit notes" from a Provider, which will inform us about how many GLM tokens we own at this moment. Please remember that Providers can also charge for a time they are ready to receive work and not only for work being done. You will see the amount You own Provider under Due payments. It is refreshed in real-time.. + md.render( + `It is high time to sign the Agreement and find our Golem Provider. \\ + \\ + By clicking "Create" next to the Agreement section You will trigger Yagna to start looking for a Provider on the Golem network to run our file scanning example. It might take a while, but when it is done Agreement will be signed between Service Owner Yagna and the Provider. The provider will also be ready to accept files for us to scan. \\ + \\ + What is more, We will start to receive "debit notes" from a Provider, which will inform us about how many GLM tokens we own at this moment. Please remember that Providers can also charge for a time they are ready to receive work and not only for work being done. You will see the amount You own Provider under Due payments. It is refreshed in real-time.. `), }, }, [UserState.HAS_AGREEMENT]: { - title: "You have agreement signed!", + title: "Time to scan the files!", message: { __html: - md.render(`You have successfully signed the agreement with the Provider. - Now it is time to upload the file for scanning. - You can do it by clicking the "Upload" button. - After the file is uploaded, it will be scanned by the Provider. - Once the scan is completed, you will receive event with the results + md.render( + `After signing the Agreement witj Provider, it is time to upload the files that you want to scan. \\ + \\ + You can do it by clicking the "Upload" button. The results of the scan will be displayed in the event log on the left-hand side of the interface. `), }, }, @@ -102,12 +112,14 @@ The provider will also be ready to accept files for us to scan. What is more, We title: "You have scanned your first file!", message: { __html: - md.render(`We hope that the results are negative :) At this point, You can either continue scanning more files or release the Agreement. -When You decide to release the agreement following things will happen: -The provider will send a final invoice for his services -Deposit Payment will be sent to cover the invoice -When Payment is done, You can check it out on Etherscan by clicking on Transaction ID in the event log on the left. At this point Amount Locked on the Deposit should be equal to the remaining Allocation value. - + md.render( + `We hope that the results are negative :) \\ + \\ + At this point, You can either continue scanning more files or release the Agreement. When You decide to release the agreement following things will happen: \\ + - The provider will send a final invoice for his services \\ + - Deposit Payment will be sent to cover the invoice \\ + \\ + When Payment is done, You can check it out on Etherscan by clicking on Transaction ID in the event log on the left. At this point Amount Locked on the Deposit should be equal to the remaining Allocation value. `), }, }, From 6446c78d4f8d9cda5336b2a7aee03ff417a093ba Mon Sep 17 00:00:00 2001 From: golmek <126684244+golmek@users.noreply.github.com> Date: Wed, 19 Jun 2024 20:59:18 +0200 Subject: [PATCH 4/4] Update copy.ts copy v2 2/2 --- frontend/src/utils/copy.ts | 43 ++++++++++++++++++++++---------------- 1 file changed, 25 insertions(+), 18 deletions(-) diff --git a/frontend/src/utils/copy.ts b/frontend/src/utils/copy.ts index cf292f4..868f10c 100644 --- a/frontend/src/utils/copy.ts +++ b/frontend/src/utils/copy.ts @@ -102,7 +102,7 @@ export const copy: any = (() => { message: { __html: md.render( - `After signing the Agreement witj Provider, it is time to upload the files that you want to scan. \\ + `After signing the Agreement with Provider, it is time to upload the files that you want to scan. \\ \\ You can do it by clicking the "Upload" button. The results of the scan will be displayed in the event log on the left-hand side of the interface. `), @@ -127,11 +127,12 @@ export const copy: any = (() => { title: "Agreement released!", message: { __html: md.render(` -Congratulations, You have successfully released the Agreement and as a result paid the Provider for his work. -The next step is to release Allocation. By clicking "Release" in the Allocation: -The deposit will be released -All not spent funds will be returned to the end-user -Deposit Fee will be transferred to Service Owner +Congratulations, You have successfully released the Agreement and as a result paid the Provider for his work. \\ +\\ +The next step is to release Allocation. By clicking "Release" in the Allocation: \\ +- The deposit will be released \\ +- All not spent funds will be returned to the end-user \\ +- Deposit Fee will be transferred to Service Owner `), }, }, @@ -139,27 +140,33 @@ Deposit Fee will be transferred to Service Owner title: "Congratulations!", message: { __html: - md.render(`You have successfully reached out to the end of this example. -We hope You liked it and that it inspired You to create similar service on Golem. At this moment You can either create new Deposit to start the process again or clean the current session and close the browser window. + md.render( + `You have successfully reached out to the end of this example. \\ + \\ + We hope You liked it and that it inspired You to create similar service on Golem. At this moment You can either create new Deposit to start the process again or clean the current session and close the browser window. `), }, }, - ["SCANED_FILES"]: { - title: "fdsfsd", - message: { - __html: "fsdfsdf", - }, - }, ["WAITING_FOR_AGREEMENT_PAYMENT"]: { - title: "fdsfsd", + title: "Closing Agreement!", message: { - __html: "fsdfsdf", + __html: + md.render( + `Let’s wait for an Agreement to be closed. \\ + \\ + When it is done payment will be sent to the Provider. You will see all those events in the log on the left. + `), }, }, ["WAITING_FOR_DEPOSIT_PAYMENT"]: { - title: "fdsfsd", + title: "Closing Deposit!", message: { - __html: "fsdfsdf", + __html: + md.render( + `Let’s wait for Deposit to be closed. \\ + \\ + When it is done all not spent funds will be transferred back to the user. What is more, the Deposit Fee will be transferred to the Service Owner for being an intermediary in the whole process. You will see all those events in the log on the left. + `), }, }, };