Dashboard: List on-chain groups starting from the most recently created

[aguzmant103]

More context:
#344

[waddaboo]

Hi, I would like to take on this issue :)

[vplasencia]

Hey @waddaboo! Great, thanks. Do you want me to assign you this issue?

[waddaboo]

Yes, please. I have completed it, just that currently I'm unable to setup my local api key to test it out.

[vplasencia]

Hey @waddaboo great, thanks. What is the error you are getting?

[waddaboo]

I have been trying to sign in to my local bandada with Coinbase Wallet but it didn't prompt the QR code for most of the time, and even for the times that it did, it always ends with "error signing message".

[vplasencia]

Hey @waddaboo

It looks like connecting with Coinbase Wallet is not working properly. Sorry about that. Here is the issue: #487

Can you try with Metamask?

[waddaboo]

It looks like connecting with Coinbase Wallet is not working properly. Sorry about that. Here is the issue: #487

Managed to login in bandada.pse.dev, but only on mobile. Thought it was error on my machine haha.

Can you try with Metamask?

Tried Metamask but nothing popup after clicking as well.

[waddaboo]

Hey @vplasencia, I found out in order for on-chain groups to sort by most recent created, some changes must be made at @semaphore-protocol/data, specifically here at getGroups so that it can return the timestamp for sorting use.

const config: AxiosRequestConfig = {
    method: "post",
    data: JSON.stringify({
        query: `{
            groups ${filtersQuery} {
                id
                merkleTree {
                    root
                    depth
                    size
                }
                admin
                ${
                    members === true
                        ? `members(orderBy: index) {
                    identityCommitment
                }`
                        : ""
                }
                ${
                    validatedProofs === true
                        ? `validatedProofs(orderBy: timestamp) {
                    message
                    merkleTreeRoot
                    merkleTreeDepth
                    scope
                    nullifier
                    points
                    timestamp
                }`
                        : ""
                }
            }
        }`
    })
}

Any suggestion on how should this proceed?

[vplasencia]

Hey @waddaboo! There are some ways to solve this without modifying the Semaphore package. Here are two options:

1- Recreate the same that function is doing under the hood. This way you have full control of the code and can modify what you want.

2- Run yarn patch @semaphore-protocol/data and then go to the files specified in the console log and modify the files, then run what appears in the console log to save the changes.

The change would be adding:

orderBy:timestamp, orderDirection:desc

After running the second command to save the changes, you should see a new file inside the .yarn/patches folder with @semaphore-protocol/data as part of the name. That file would have the changes.

Let us know if you have more questions.

[vplasencia]

The 2nd idea should be faster. Steps:

1- Go inside apps/dashboard cd apps/dashboard and run yarn patch @semaphore-protocol/data

2- Open the folder linked in the console.

You can now edit the following folder: ...

3- Modify the files:

• dist/index.mjs line 1140:

filtersQuery = "(orderBy:timestamp, orderDirection:desc, where: {".concat(filterFragments.join(", "), "})");

• dist/index.node.js line 1148:

filtersQuery = "(orderBy:timestamp, orderDirection:desc, where: {".concat(filterFragments.join(", "), "})");

4- Save changes by running the command specified in the console:

yarn patch-commit -s ...

You will see a new file inside .yarn/patches with @semaphore-protocol/data as part of the name. The file should contain something like:

diff --git a/dist/index.mjs b/dist/index.mjs
index 614a9093f82e9ae8e9219b65af0a8e93ea992560..2e432b004bd8718bb16c84ef7c53cdda14808ef5 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -1137,7 +1137,7 @@ var SemaphoreSubgraph = /** @class */ (function () {
                                 filterFragments.push("timestamp_lte: \"".concat(jsDateToGraphqlDate(timestampLte), "\""));
                             }
                             if (filterFragments.length > 0) {
-                                filtersQuery = "(where: {".concat(filterFragments.join(", "), "})");
+                                filtersQuery = "(orderBy:timestamp, orderDirection:desc, where: {".concat(filterFragments.join(", "), "})");
                             }
                         }
                         config = {
diff --git a/dist/index.node.js b/dist/index.node.js
index 29640ebef31511af5ee5ff7e970c74e1fa0bc98e..6ae2e5f15d47f1be7b90cd347adfd3b35d1ce7e8 100644
--- a/dist/index.node.js
+++ b/dist/index.node.js
@@ -1145,7 +1145,7 @@ var SemaphoreSubgraph = /** @class */ (function () {
                                 filterFragments.push("timestamp_lte: \"".concat(jsDateToGraphqlDate(timestampLte), "\""));
                             }
                             if (filterFragments.length > 0) {
-                                filtersQuery = "(where: {".concat(filterFragments.join(", "), "})");
+                                filtersQuery = "(orderBy:timestamp, orderDirection:desc, where: {".concat(filterFragments.join(", "), "})");
                             }
                         }
                         config = {

5- Inside the bandada project, in the root project folder, run yarn.

[waddaboo]

Hey @vplasencia thanks for the detailed step-by-step guide! It's very helpful!