5afe / safe-react Goto Github PK
View Code? Open in Web Editor NEWDeprecated! New repo – https://github.com/safe-global/web-core
License: MIT License
Deprecated! New repo – https://github.com/safe-global/web-core
License: MIT License
Acceptance criteria:
Story
As a user I am able to add and remove owners to/from my Safe in order to account for changing access rights.
Acceptance criteria
Owner list
Describe the bug
The executor of a transaction is shown twice as a confirming owner in the confirmation list.
To Reproduce
Create transaction with owner 1
Confirm with owner 2
Execute with owner 1
Expected behavior
Only show executing owner once.
Additional context
Story
As a user I am able to switch between different Safes in order to be able to have several of them.
Story
As a user I am able to transfer funds in order to pay my bills.
TODO
We should allow the user to manually set the nonce somewhere in advanced options in order to allow them to "overwrite" proposed transactions that haven't been executed yet.
Endpoint: https://github.com/gnosis/safe-relay-service/issues/129
As a user I want to enter ENS names so that I don't have to copy-paste cryptic addresses
ENS is picking up steam and we want to push the standard.
For this version we keep the integration simple as we have experienced significant UX complications with a deep ENS integration on the mobile apps.
Currently we have a problem of duplicated data in the state. Whole token list is saved for each safe, while the differences between them only in balance/activity status.
This should be refactored so the balance/activity status is saved on Safe's instance to avoid possible performance issues in the future and also to shave off some complexity from current state implementation. (Like in NoSQL db where it only saves a reference (id) to another entity)
Also there is no simple way to update a single property on the safe (for example, a name). If you create a Safe record, it will overwrite the existing values. This kinda worked before, but with adding such things as safe's active tokens, balances, etc it makes updating a more complex
https://redux.js.org/faq/organizing-state#how-do-i-organize-nested-or-duplicate-data-in-my-state
When creating a new team wallet, the predetermined owner's name is "My metamask" although the wallet used isn't from metamask.
Steps to reproduce:
Actual behaivour
In the owners section the owner default's name is "My metamask (me)" even if the wallet is not a metamask one.
Client is displayed as "Metamask" when the Gnosis Safe provider is used.
"Safe" or "Gnosis Safe" should be displayed instead.
Here is an example of the implementation:
https://github.com/gnosis/example-safe-web3-provider/blob/master/src/components/Page/index.js#L55
Have a way to interact with the Gnosis Safe for Teams using WalletConnect
We want to push WalletConnect as a standard as it makes Dapp-interaction significantly easier. Also, Web3Connect allows us to essentially outsource wallet integrations. For example, Web3Connect will soon allow direct hardware integrations (Ledger&Trezor) which will then also work natively with the Safe for Teams.
Read only mode
In read-only mode, allow to open the Web3Connect dialog via the "Connect" button in the top-right dropdown.
More info on Web3Connect: https://medium.com/web3connect/presenting-web3connect-a-single-web3-widget-for-dapps-ebbb2461ac7c?sk=7f7ecab8c0dc13bb39ce1e2fc6740417
I just tried to create a Safe with 6 owners and owners form was laggy, slow, and the input was delayed.
It was only 6 owners, with more than 6 (10-15) the form would be even more slow. Users who don't use a high-end computer may have problems when creating a safe with such amount of owners.
Every time there's a change in form the form has to revalidate all the fields, this may be pretty expensive. Probably this can be fixed by debouncing validation or/and adding memoization to validators. Also I think there are some unnecessary re-renders.
Also removing real-time validation is an option too.
Scanning a qr code to enter a new owner fails.
Steps to reprodeuce:
Expected Result: The user is asked to use the camera for scanning the QR code, and he can scan it properly.
Actual result:
The user isn't asked to use the camera for scanning the qr code, and a blank square is displayed instead of the camera.
Enviorment:
Mobile: LG Nexus 5
Android: 8.1.0
Wallet used: Coinbase wallet.
The Problem:
Currently we have a lot of outdated and failing tests like safe creation, etc. It makes difficult writing new ones and also it is a technical debt. We should sort them out.
Acceptance criteria:
Story
As a user I am able to load an existing Safe where I am not the owner, in order to be able to check out other Safes for controlling reasons.
User sees an error if we cannot decode a Safe at the address of the link.
Fix #204
Show Safe creation tx
Show the safe creation transaction in the transaction list so there is never an "empty" transaction list (at minimum there will be the safe creation tx). If no endpoint available, just fake a safe creation transaction.
Loading spinner
Show loading spinner instead of "no tx available" when fetching the tx list.
Auto-reload page
Fetch data automatically. (every X seconds)
Display "100" in pagination
When 100 rows are selected to be displayed in the transaction list, the 100 currently gets abbreviated with “…”.
Details & etherscan/copy buttons
Remove hyperlink on tx hash / addresses
Write out addresses in full (still abbreviate tx hash and owner in confirmation details)
Add copy to clipboard / Etherscan link (magnifying glass) buttons
Remove CONFIRMED and UNCONFIRMED tabs and instead display confirmation details as outlined below. Refer to #148 for more details.
The last two designs above have a little error. The numbers after CONFRIMED should say (3/3) as they are supposed to be ("number of collected confirmations" / "threshoold required") and NOT ("number of collected confrimations" / "number of owners")
As a user I am able to send custom transactions in order to also perform transactions other than asset transfers with my Safe.
This feature is requested by current Multisig users as this allows to interact with Smart contracts.
** Transaction List **
Have a mapping Ethereum address -> Name
Mapping can be also used to resolve Names for owners and should be global for all Safes a user has loaded in his/her interface.
We should aim to use 3Box to store this information per owner address (not per safe address as with the transaction comments)
Address book is on zeplin: https://app.zeplin.io/project/5b83b4fa75f90943c86ed14f/dashboard?seid=5d8ce5a842d658163b13321a
Below Safe name, add text: "This is the address of your Safe. Deposit funds by scanning the QR code or copying the address below. Only send ETH and ERC-20 tokens to this address!"
Buttons similar to Etherscan next to the address:
Copy button:
Etherscan button:
Pagination
Currently, we use 5 item pagination as a default, for users that have a lot of tokens, this is not convenient. Set number to 10, and safe default in case the user chooses a higher number.
Activate tokens automatically
Activate tokens automatically in "Manage Tokens" if they are (1) whitelisted and (2) balance is >0. If backend is not ready, leave this part out.
Number formatting
Format balances according to https://github.com/gnosis/safe/blob/master/specs/common/format_amounts.rst
Copy & Etherscan buttons
Add copy & etherscan buttons (see #132 for details)
Wallet Drop-down Providers
Change "Client" to "Wallet". And also show other wallet types that can be identified:
Dapper
Portis
Fortmatic
WalletConnect
Opera
Wallet Drop-down Redesign
Wallet dropdown are in header is wider
Dropdown is detached from header
Rounded corners
Copy/etherscan buttons
Manage Tokens Text
In the Manage Tokens Pop-up, the "ADD CUSTOM TOKENS" string should not be capitalized.
Legal Links in sidebar
Privacy: https://safe.gnosis.io/privacy-policy-052019.html
Terms: https://safe.gnosis.io/terms-of-use-072018.html
Imprint: https://safe.gnosis.io/imprint.html
Licenses: https://safe.gnosis.io/licenses-082019.html
Welcome Screen: Change title and add "Learn More"
Add title to say "Safe for Teams" instead of Team Edition and add Learn more link at the end, linking to
https://safe.gnosis.io/teams/
Removing some friction during onboarding
Insights from the Team Safe usability test results: https://docs.google.com/presentation/d/1TWI2lTwvDen5k3u7YhzYo-iiDDkWdZqpaFlWOnQ-vDo/edit?usp=drive_web&ouid=104367921335388049170
You are about to create a new Gnosis Safe wallet with one or more owners. First, let's give your new wallet a name. This name is only stored locally and will never be shared with Gnosis or any third parties.
<Safe Name>
By continuing you consent with the terms of use and privacy policy. Most importantly, you confirm that your funds are held securely in the Gnosis Safe, a smart contract on the Ethereum blockchain. These funds cannot be accessed by Gnosis at any point.
Specify the owners of this Safe. Owners can still be added, removed and replaced after this Safe is created. Your connected wallet is automatically suggested as one of the owners, but this is not a requirement.
Important: Only use compatible wallets as owners of this Safe. Compatible wallets include Gnosis Safe Mobile, Metamask, WalletConnect-enabled wallets. Some hardware wallets may also be used if they can be managed through Metamask.
<Specify Owners>
Any transaction will require the confirmation of:
<Specify Threshold>
You're about to create a new Safe and will have to confirm a transaction with your currently connected wallet. Make sure you have ETH in this wallet to fund this transaction.
Acceptance criteria:
Currently we don't handle the case when user rejects the transaction. This makes the interface "stuck" and user has to reload the page to continue the interaction.
Example:
Try to create safe and cancel the metamask/safe-extension transaction. The interface will get stuck.
Rinkeby on rinkeby.gnosis-safe.io
Mainnet on gnosis-safe.io
Domains are parked on godaddy (credentials in 1Password -> Dev - Safe)
If the connected wallet is on the wrong network (either Rinkeby network on the mainnet interface or vice versa), show the screen below.
Show sticky notification (see #135 for more details): "Rinkeby Version: Don't send Mainnet assets to this Safe"
Description:
When refreshing the main page with an opened multi-sig wallet, connected to a gnosis safe (and without cleanning the cookies), it goes blank.
Precondition:
Having an existent multisig wallet on the safe list.
Having a Safe wallet connected.
Steps to reproduce:
Expected result:
The page is correctly refreshed, and loads the content properly.
Actual result:
The page go blank.
Environment:
Google chrome + Gnosis safe wallet (rinkeby)
Evidence:
https://drive.google.com/open?id=1ZXt61M27VwOKOCNHH4zlvBL2tMX-bA5P
Story
As a user I can add custom token in order to use the Gnosis Safe with all my fancy tokens.
Story
As a user I can decide which tokens to display in order to be able to focus only on the ones I own.
As a old Multisig user, I want to mirror the owner structure of my existing multisig on a safe so that I can reduce the switching effort.
We have a significant userbase using the old Gnosis Multisig contracts & interface. We want to make it as easy as possible to switch to the Gnosis Safe for Teams.
Feature that allows to setup a Safe with the same properties as an existing multisig. Mid-sized banner at the top of the site (or even a full-screen pup-up) that explains that there is a successor to the Multisig Wallet (=Gnosis Safe for Teams) which has the following benefits:
Three buttons "Dismiss" (close banner/pop-up), "Read more" (link to safe.gnosis.io/teams) and "Migrate wallet" (link to Safe for Teams onboarding with pre-populated information.
Clicking the button "Migrate wallet" would forward to Gnosis Safe for Teams > Create New Safe > Review with (1) Safe Name, (2) Owner addresses + Owner Names and (3) Threshold already populated (taken from current Multisig).
Clicking the button "Dismiss" would dismiss the banner/pop-up for this session. There should also be a checkbox "Don't show this again" that would (after clicking "Dismiss") not show the banner/pop-up when the app is opened in the future.
The improvements below are applicable to all send flows (asset transfer, custom transaction, change owners, change threshold, confirmation, cancellation)
In the review step, add text at the bottom: "You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have 0.0XX (fee price) ETH in this wallet to fund this confirmation."
QR Code inputs
Add QR code scanner for recipient field
Missing whitespace
There is a whitespace missing between "of" and the number of owners.
Execute Transaction as default
It is more common that users would like to execute a transaction immediately after all signatures are collected. Therefore the "Execute Transaction" checkbox should be checked by default.
Change phrasing to: "Approving this transaction executes it right away. If you want approve but execute the transaction manually later, click on the checkbox below."
Switch to Transaction list
After clicking on "Done" in the success screen, automatically switch to the transaction list view.
Fix sending tokens with decimals other than 18:
#218
Not allow to replace with address which is already an owner (currently its possible but the tx eventually fails and owner gets reset to previous one).
Text "Add, remove and replace owners or rename existing owners. Owner names are only stored locally and never shared with Gnosis or any third parties."
Confirmation message (non-sticky notification) after changing Safe name: "Safe name changed"
Remove pagination and change text to : "Any transaction requires the confirmation of:"
Threshold: Remove line break in text
Show threshold tab also in read-only mode
Height of white backgrounds is different for the different sections (safe name, owner, threshold)
Story
As a user I am able to change the number of confirmations required to make a transaction in order to account for changing security requirements.
Acceptance criteria
*Clicking "Modify" brings up the regular screen to modify the confirmation threshold we also use when changing owners (similar to zpl://screen?sid=5bb7465f44bd127fdd950e09&pid=5b83b4fa75f90943c86ed14f) But with a different header.
Story
As a user I am able to send custom transactions in order to also perform transactions other than asset transfers with my Safe.
WIP: There are still some open questions about the UI. Check Zeplin for the discussion.
tbd
Currently, all notifications pop up on the bottom right of the screen. User tests have shown that users would expect the notification to be at the top for increased visibility. Display notifications below the header.
Sticky notifications if the status does not change. E.g. show the "Rinkeby warning" notification (#141) until the user dismisses the notification using the "x".
Show non-sticky notifications for 10 seconds
Show "removing/replacing/adding in progress state" while the action is performed on the blockchain -> sticky notifications
Refer to notifications here: https://docs.google.com/spreadsheets/d/1McBmkEKDUIEFec0pvsz46bXpxL5j9dC74wdfLhVw_bY/edit#gid=0
Story
My Wallet
In the "Owners and confirmations" step: Change "My Metamask (me)" to "My Wallet"
Owners Text
In the "Owners and confirmations" step: change text to.
"Your Safe will have one or more owners. We have prefilled the first owner with you connected wallet details, but you are free to change this to a different owner.
Add additional owners (e.g. wallets of your teammates) and specify how many of them have to confirm a transaction before it gets executed. In general, the more confirmations required, the more secure is your Safe."
Step Name Change
Change "Start" step title to "Name"
Etherscan buttons
Change Etherscan buttons (see #132 for details)
Clickable steps
Make step previous title (Details, Owners, Review) and number clickable to get to the previous step.
Review Text
Change text to:
"You're about to create a new Safe and will have to confirm a transaction with your currently connected wallet. Make sure you 0.0XX ETH in this wallet to fund this transaction." -> show rounded up amount of funds required.
"You are about to load an existing Gnosis Safe. First, choose a name and enter the Safe address. The name is only stored locally and will never be shared with Gnosis or any third parties."
and below the input fields:
"By continuing you consent with the terms of use and privacy policy. Most importantly, you confirm that your funds are held securely in the Gnosis Safe, a smart contract on the Ethereum blockchain. These funds cannot be accessed by Gnosis at any point." (-> same as in the send flow)
Step Name Change
Change "Details" step title to "Name and address"
Details Text
Change text to: "Adding an existing Safe only requires the Safe address. Your connected wallet does not have to be the owner of this Safe. In this case, the interface will provide you a read-only view."
Add text below name/address fields "By continuing you consent with the terms of use and privacy policy..." (same as currently in the Creat Safe flow)
Etherscan Buttons
Change Etherscan buttons (see #132 for details)
Clickable Steps
Make step titles (Details, Owners, Review) and numbers clickable to get to the respective step. -> Leave out if this turns out to be non-trivial
Submit -> Load
In the review step, change Submit button to say "Load" instead of "Submit", as submitting would indicate a transaction to be made.
Bug: Continue without Name or Address
In the current version its possible to just continue without adding Name or Safe address as input
Use safe-contracts v1.0.0
Story
As a user I am able to see a clear overview of my Safe, in order to receive, see and send funds.
Open via link
Story
As a user I am able to see all transactions affecting my Safe including their status in order to know what's going on with my Safe.
Things that are open / need to be discussed:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.