We should have 2 sections in the space overview page, one with active proposal and another with closed proposal like this:

We can limit the number of proposal visible to 3 per section. The links "See more" can just redirect to the space proposals page.

We should sort draft based on the last update, showing first the drafts that was recently updated.

We should check if an input is valid or not using JSON schema definition validation with AVJ library on the S/ input components. If there is an error the input should have a class "s-input-error" and text color would be red. On definition with "format": "address" we should check if the address is correct with a custom validation using @ethersproject/address isAddress function. We can also add custom validation for "uint256" format. The style of the error should not be defined in the component but instead on style.scss, components should stay style agnostic.

We need some kind of state management to have better access to spaces/proposals.

If the draft have empty fields we don't need to have it on stored on localStorage. Currently it's not the case so anytime the editor page is loaded there a new draft created, this create a long list of Untitled drafts not relevants.

Currently we only fetch N latest proposals and spaces on UI. We should add pagination for it.

On the editor to create a proposal here:
https://goerli.snapshotx.xyz/#/0x0625dc1290b6e936be5f1a3e963cf629326b1f4dfd5a56738dea98e1ad31b7f3/create
We should do some changes in the send token modal for execution:

• To select a token, the modal should change to something like this (colors and size are a bit off you can use same what we use in the UI currently)

• We should load the list of tokens based on the space treasury balances, you can find an example of query tokens in the Treasury.vue view using Covalent API.

• We should make it in a way that when you type USD value it update the Amount and vice versa.

We should have Ethereum selected by default when the form is open, also when on the token picker ETH should appear first regardless of the $ value.

When creating a proposal it would be great if we can simulate the transactions to make sure everything will work as expected, we can use Tenderly API for that, here is more info https://docs.tenderly.co/simulations-and-forks/simulation-api
This is similar than what Gnosis Safe released recently https://twitter.com/gnosisSafe/status/1544258597080539137

We should add a form to change a space profile, this includes: name, about, avatar.

The metadata JSON should be stored on IPFS with Pineapple, ideally the format for the file should be a valid NFT metadata format see more info here: https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1155.md#erc-1155-metadata-uri-json-schema and https://docs.opensea.io/docs/metadata-standards#metadata-structure

{
  "name": "Mango DAO",
  "description": "Lorem ipsum...",
  "image": "ipfs://bafkreienh34r54bxu..."
  "external_url": "https://mango.dao"
}

This will require changes on SX.js to support updating metadata with this function https://github.com/snapshot-labs/sx-core/blob/develop/contracts/starknet/SpaceAccount.cairo#L350 and on SX-API to load the metadata file from IPFS when it's being edited. It will also require to have a space in which your address is the controller.

For the design we can image a button on the space dashboard which appear only to logged controller like this:

When user click on the button we would open a modal like this:

We can also remove the section "Profile" in the space settings pages to separate the 2 types of settings (profile / metadata and core configs)

We can add the support to change avatar in another issue.

For some reason sometime requests to Covalent API are slow to resolve, it might be more stable / fast if we move to Alchemy API https://docs.alchemy.com/alchemy

Covalent isn't really reliable, with many requests never finishing.

It could be visible on the recipient input like this:

This is using the icon "identification". If you click on the icon it would send you to a modal similar than token picker but instead you will pick in a defined list, the list could container the ERC20 example that we had on the contract call modal, we could also add current logged address in the list. We shouldn't add the icon in the S/ input components, we should keep this components general purpose.

Need design for the contact picker

When someone create execution txs using send token or send NFT we should store the transaction in an execution array. The format of the array should look like this:
https://gist.github.com/bonustrack/5d4551421ac570d472c07450f503eb21

Here is some explaination about the different fields:

• "to" is the contract you interact with in the tx, most of the time its a ERC20 or NFT contract unless you send ETH in which case "to" is just the recipient.
• "data" this is the encoded arguments of function called in the smart contract, for example for doing a transfer the args will be the recipient and amount, this is encoded using this function

  sx-ui/src/components/Modal/Transaction.vue

  Lines 29 to 31 in db27536

  	tx.args = Object.values(tx.args);
  	const iface = new Interface(tx.abi);
  	tx.data = iface.encodeFunctionData(tx.method, tx.args);

  (It require the ABI of the contract function, for NFT and ERC20 it's standardized so you can use the same all the time). Here is for ERC20 transfer:
  const abi = ["function transfer(address _to, uint256 _value) public returns (bool success)"]
  For NFT const abi = ["function transferFrom(address _from, address _to, uint256 _tokenId) external payable"] (may need to confirm for NFT transfer)
• "value" is the amount of ETH that you are sending in the tx, when sending ERC20 or NFT it would be 0, but if you transfer ETH the amount would be stored in this "value" field.

The others fields are just metadata that we can use to repopulate the Send Token or Send NFT forms.

Currently we use the value scores_total to define the full width of the results bars. Instead of having something like this:

We would have something like this:

The darker grey space is what's missing to get the quorum on the proposal.

When creating a proposal with execution it should be possible to change the order of the transactions, we can add the icon "switch-vertical" (for lack of better icon) and make it drag and drop to sort transaction. See example:

Ideally it should work on mobile too

Currently on proposals page we only see the last 5 proposals, we should have a way to load all the proposals with infinite loading
https://testnet.snapshotx.xyz/#/0x07e6e9047eb910f84f7e3b86cea7b1d7779c109c970a39b54379c1f4fa395b28/proposals

We currently show value input for payable methods, but it's not connected to anything.

It should be possible to import a token that is not on the list in token picker modal. To do so we will need to detect when someone type an address on the search and if there isn't any result we can try to load token information using a multicall. Here is an example of multicall to get a token name, symbol and decimals:
https://github.com/snapshot-labs/snapshot.js/blob/master/test/multicaller.ts
We should also query balanceOf to get treasury wallet balance

Currently it's not possible to search token per address on the token picker, we should add this.

We should add a button to toggle the sidebar on mobile. For the icon to toggle we can use menu-alt-2 from Heroicons v1.
Here is an example on how it would look like this:

The icon should not be visible on large screen. When user click on menu icon, the sidebar should open without animation and look like this:

When the sidebar menu is open, the main content in right side (A) should have a background similar than the backdrop when we open a modal. If we click on the main content (A) it should collapse the sidebar menu.

Ideally we should be able to slide on mobile with finger from left to right to open or collapse the menu.

When someone do an action on the UI we should check with a node if the tx hash is confirmed at regular interval to confirm the tx on the UI. We can use StarkNet.js waitForTransaction function to do that.

We should also store the pending transaction hashes on local storage to be able to show pending transactions even if the user reload the page.

The pending transactions indicator can be moved to the topnav like this:

On the editor here: https://goerli.snapshotx.xyz/#/0x0625dc1290b6e936be5f1a3e963cf629326b1f4dfd5a56738dea98e1ad31b7f3/create
If you click on top right collection icon you can see a list of drafts, we should make this drafts deletable. We can change the layout to something like this:

And use bin icon at instead of the white square. When we click on the bin it would remove the proposal from the user localStorage.

There is 2 votes on this proposal but the score bar is empty:

https://testnet.snapshotx.xyz/#/0x0750118894bf8b3ad7fd79763899c4528b2a7a0c17d7185dff78eaddbff2cb0b/proposal/8

This includes a vote "Against" from a logged account 0x8C28Cf33d9Fd3D0293f963b1cd27e3FF422B425c. The space is "Marten DAO" using Vanilla voting strategy.

Loading token with Alchemy seem broken now

Also the treasury page is not showing token name

When adding a new tx (with send token, nft or contract call) and confirm, the tx will appear on the execution section. We should make each tx on this section editable. We can add an edit icon in the tx preview and when user click on it it will open the related modal (token or nft or contract) populated with the current tx parameters.

TBD

We should add on the execution transaction payload the params "nonce" which is the order in which the transaction should be executed, the first tx of an execution should have nonce=0 then second one get nonce=1 etc. And we should add a param "operation" which is always "0" for now but will be used in future to define delegateCall. Here is an example on how it would look like (skipping _form and _type metadata)

{
  "transactions": [
    {
      "to": "0x9241627b130665b0a1e5636f1cc211895687bf25",
      "data": "0xf242432a00000000000000000000000010a19e7ee7d7f8a52822f6817de8ea18204f2e4f000000000000000000000000ef8305e140ac520225daf050e2f71d5fbcc543e7000000000000000000000000000000000000000000000000000000000000000b000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000000",
      "value": "0",
      "nonce": 0,
      "operation": "0"
    },
    {
      "to": "0x9241627b130665b0a1e5636f1cc211895687bf25",
      "data": "0xf242432a00000000000000000000000010a19e7ee7d7f8a52822f6817de8ea18204f2e4f000000000000000000000000ef8305e140ac520225daf050e2f71d5fbcc543e7000000000000000000000000000000000000000000000000000000000000000b000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000000",
      "value": "0",
      "nonce": 1,
      "operation": "0"
    },
    {
      "to": "0xeF8305E140ac520225DAf050e2f71d5fBcC543e7",
      "data": "0x",
      "value": "1000000000000000000",
      "nonce": 2,
      "operation": "0"
    }
  ],
  "title": "Hey yo",
  "body": ""
}

SX UI has Electron setup to build desktop app, it used to work but now it fail because resources are loaded with an incorrect path, we should make a fix for it.

Currently we fallback to manual ABI input if fetching ABI failed, but it's not hooked at, it should extract methods from it so you can use form as with any other contract.

Currently the execution is not added in the payload of the proposal metadata, we should add it and also have it stored on drafts

Google font get catch by ad blocker we should instead add the font source directly in the code and avoid external calls.

We should show the total value of the wallet in this page:
https://goerli.snapshotx.xyz/#/0x0625dc1290b6e936be5f1a3e963cf629326b1f4dfd5a56738dea98e1ad31b7f3/treasury

We can use the same style than the others USD values for the assets:

Currently we are using Covalent but it's often slow to resolve. Moving to OpenSea would give us more rich context (like price) and probably a more complete listing.

TBD

We should be able to close modal using escape key from the keyboard.

The discussion section overflow on small screen, see here:

We should make it so the text truncate to remove overflow, we should also get border back on left and right.

Currently we keep track of the logged user previous votes here: https://github.com/snapshot-labs/sx-ui/blob/master/src/composables/useAccount.ts#L6 so we can display "You have already voted" message on proposal page. We should also keep track of the choice so we can display "You approved this proposal" or "You rejected this proposal" etc.

Similar than send token modal we need a send NFT modal and selector. The select would look like this:

Showing squared images with the collection name and token Id. The image should also appear in the "Send NFT" modal. It's possible to get the list of all NFT that the account own using Covalent API (similar than tokens)

We should add buttons to do execution when a proposal get quorum and we are over the min voting period, the button would look like this:

For some reason WalletConnect is not working anymore here is the error:

https://histoire.dev/guide/vue3/getting-started.html

On the UI when we click to cast a vote or publish a new proposal there is few seconds delay until something happen due to calculation of storage proof and more. During this delay there is no indicator that something is going on, we should instead add loading indicator in the buttons similar than the login button.

The loading indicator should be here:

Here:

And here:

In the treasury page we should add a tab "NFTS" next to "TOKENS" with the list of NFTs and their price, example:

We should use same style on the "Send NFTs" modal. For the price I suggest to use the collection floor price.

I noticed on small screen with a long token name the UI display the whole name in multiple line, we should instead truncate the text to not go over one line.

We should also do the same on the modal to select token

We should show if a proposal have execution, and it should look consistent with the execution section in the editor page, like this:

Ideally we should avoid code duplicate