It seems a bit strange that the colour scheme for the components displayed here are indeed those provided through the safe react components. Is it possible that simply updating the safe dependencies would solve this without any manual changes to the colours?
Not sure what you mean. I wasnât referring to the color scheme of the components, but to the background color.
I created a PR with the recommended style changes. It looks like this now.
After this is merged, I would be happy to list the app in Gnosis Safe.
@schmanu Could you merge it, redeploy to IPFS and update the ticket on safe-apps-list?
1 Like
I just mean that it would be a bit nicer if these background colours were somehow a default for safe apps without having to manually specify them in the template (i.e. this background colour is inherited when using the safe react components). Anyway, its all updated and thanks so much for the PR!
3 Likes
Hey @auryn_macmillan, @lukas_gnosis, and @johndavide,
multiple people requested an extension for this app to support NFT (ERC721) transfers.
As this is a non trivial extension itâs scope justifies a new grant application IMO.
Thats why I put together another Grant Application in this comment.
Project Overview
Project name
CSV Airdrop (New feature to multisend ERC721 tokens)
Team members
Manuel Gellfart
What project are you building
An extension for the existing CSV Airdrop Gnosis Safe App enabling it to send arbitrary distinct erc721 tokens in the same transaction. With this, it will be possible to send distinct erc20 / erc721 / native tokens to different addresses in the same transaction.
Why did you decide to build it
Multiple users already asked for this feature via Github / Discord Gnosis Channel, etc.
How long will it take
I already invested ~3-4 days to build the first working prototype of this feature.
I think I will need another 3 days to polish / fix the UI and write tests.
How much funding are you requesting
2000$
How did you hear about this grant
I already successfully submitted a grant.
Submission Outline
Safe App description
The App is a multisend tool to transfer multiple distinct tokens to multiple distinct receivers.
Executing and signing multiple transactions from a gnosis safe can be a time consuming task, because each transaction has to be (multi-)signed and mined separately. Using the CSV Airdrop saves its users a lot of clicks / signs and time.
See Github Repo for detailed information and screenshots.
Features
The app already exists and is build using:
- React
- Gnosis safe react components
- Gnosis safe react sdk
Individual / Team description
Manuel Gellfart ( github / twitter)
Timeline, Milestones and Deliverables
Phase 1 - Working prototype (3-4 days)
The first milestone has already been reached: The first version of the new UI including Collectible transfers.
See:
Phase 2 - Polishing, cleanup, Tests (2-3 days)
The current state of the UI feels laggy and unpolished. This phase focuses on the cleanup and polishing of the interface.
Additionally the parsing and processing of the ERC721 CSV is currently untested.
Phase 3 - Review (1 day)
Code Review
Timeline:
I will be on vacation starting 6th of December. Thus I would like to be done with everything by then.
Disclosure
@bh2smith - the originator of this project and not eligible for the grant (as a Gnosis Employee). However, he will be performing the code review.
I would absolutely support this update.
My only request would be to also add ERC1155 support, even if that means increasing the scope and price.
I never worked with ERC1155 but the interface looks quite familiar.
My suggestion would be:
One combined CSV File for ERC1155 / ERC721 tokens with columns:
token_address, to, id, value
Where value is ignored for ERC721 tokens, but mandatory for ERC1155 tokens.
The validation will be more complicated because we have to determine which kind of token / contract is stored in the given token_address.
1 Like
That being the case, would it be worthwhile to just combine all three into one CSV type and have the user input the token type?
| token address | type | to | id | value |
|---|
1 Like
My current approach is a bit different.
I used a Tab navigation to toggle between the ERC721 file / ERC20 file.
Both of which would be transferred in the same transaction.
Its hard to judge for me what would be easier to use.
A combined table for all three tokens is a bit more complicated to fill out. Especially if people only want to send one kind of token. But exporting / preparing the CSV might be a bit easier.
Alternatively I could also add a selection of Token Types to be sent and if its only one the type column is omitted and only the necessary columns are displayed / expected.
1 Like
Great work, love itďź
The tabbed approach seems like it works fine, so Iâd be ok with this.
But I do think it would be a cleaner UI/UX if it were all merged into one list, with only a minimal impact on productivity for users building the CSV manually in the built in text editor if you add type column. Building the list in any other spreadsheet tool this extra column would be a non-issue.
I do like your suggestion of selecting the types of tokens youâll be sending.
Why do you use transferFrom instead of safeTransferFrom?
The gif shows a previous version. I already changed that to safeTransferFrom 
In terms of UX I would prefer the unified list approach, setting the token type in order to parse the row values.
The tab approach was confusing for me until I saw the video two times, and I was already seeing values there, could be much more difficult without seeing an example.
As you are using tabs wasnât clear for me that the tabs are only affecting to the form and not to the summary below. If I had to select I would rather use an accordion approach here for separated inputs, that way is much more clear that the information below is coming from the two inputs above.
Other things that I miss are:
- Header for each section. Summary tables need some kind of header saying what Iâm currently seeing there
- A summary modal before sending to transaction review saying âYou are going to send X ERC20 tokens and XERC721 tokensâ with minimum feedback for the user
- Iâm not really sure I like that on ERC20 second parameter is receiver address but in ERC721 is the third one.
- When having ERC20 and ERC721 tokens I would show a message below both list saying, âWhen submitting all the tokens transfers will be bundled into one blockchain transactionâ
What do you think about this ideas?
1 Like
Thanks to everyone for the quick feedback on that first draft. I will rework / redesign it with all this in mind.
Considering the suggestions my current plan looks like this:
-
I will combine both CSVs into one with a token_type column. This way the support for ERC1155 tokens will be quite easy and users only need to prepare a single file to import. This also fixes the inconsistent order of columns.
-
For the summary tables I will use the accordion component. This way I could display the type of token and amount of transfers for that token in the summary section of the accordion and the table of transfers in the detail (expanded) section.
-
I will add a new small modal which just displays the sum of transactions âX ERC20 Tokens and X ERC721 tokens will be transferredâ and the option to submit / cancel.
Iâm excited to implement this and will keep you updated on progress.
Will leave my Feedback from Discord here:
Really happy using the Safe and the concept of apps is absolutely amazing! Still some suggestions as the UX can still be improved quite a bit (potentially other / all apps have the below mentioned issues):
- add minimal instructions or link to instructions when Iâm in the CSV Airdrop tool. e.g. it is unclear that the header row has to stay in place. It is also unclear that a blank token address means native token transfer.
- Instead of rendering a fairly cryptic error message that might make sense for developers, render something that is useful to the user. E.g. send them to a place where they can report it or get help (IMO this discord channel).
- After submitting my CSV file and signing it on my wallet, I remained on the page and nothing indicated that the submission was successful. So I opened another browser tab, opened the Safe and checked the tx view and indeed it was submitted correctly. Some confirmation screen would be useful.
- For a long list of airdrops it would be useful to add row numbers (1, 2, 3, âŚ) to the CSV Airdrop list of rendered transfers, not just show the token symbol (cool!), receiver and amount. It makes it easier to compare against other lists that one might have.
4 Likes
Here is a small update post on the redesign for those interested:
First of all, thanks @SCBuergel for aggregating the discord feedback.
Luckily I already added a small help section to the App because I actually searched for CSV Airdrop on the Discord channel. I will also work on improving the other three mentioned issues in future updates.
Current version of the app
Changes:
- Changed the separated CSVs into one with token_type column.
- Wrapped the transfers into accordions and gave them headers / titles to explain whats displayed
- Added a small Help button with some instructions (these will be updated for collectible transfers)
- sends erc721 tokens using safeTransferFrom
- minimal ERC1155 support
Next Steps:
- fixing + writing more unit tests
- better exception handling
- a success screen / message after submitting a transaction
- updating the instructions
2 Likes
The new version of the CSV Airdrop app is deployed and ready.
It includes:
- Sending of ERC1155 / ERC721 tokens
- new UI
- improved performance of the summary tables
An update request has been submitted to the safe-apps-list project.
The version is deployed here:
1 Like
It looks like nobody has seen this yet. We should tag @lukas_gnosis, @johndavide and @auryn_macmillan to get some eyes on it!
Totally legit question. The original app was actually written a long long time ago as a script based app in JS. At this time, I was entirely unaware of safeTransferFrom and not even sure if it existed back then.
This is definitely a great idea for an improvement we could easily include and ship in the next version.
Could you elaborate on why we might want to choose one over the other? I am guessing there are some gas savings on failed transactions when using safeTransferFrom (like all your gas isnât eaten up if the transaction fails or something).
Update - I am reading that this is an ERC721 method and in that case I do believe we have opted for safeTransferFrom in the recent proposed version 2.0.x that introduces NFT transfers.
@bh2smith Does this Airdrop app works with CEX address such as Binance or FTX? Have anyone tested this before?