5afe / safe-react

Deprecated! New repo – https://github.com/safe-global/web-core

‼️ This repository is deprecated ‼️

Please use safe-global/web-core instead

---

Legacy Safe web UI

Safe is the most trusted platform to store digital assets on Ethereum. More info at safe.global

For technical information please refer to the Safe Developer Portal.

For support requests, please open up a bug issue or reach out via Discord.

Transactions

Please see the transaction notes for more information about transaction details.

Related repos

• safe-react-e2e-tests
• safe-react-gateway-sdk
• safe-react-components

Deployed environments

• Production: https://gnosis-safe.io/app/

Getting Started

These instructions will help you get a copy of the project up and running on your local machine for development and testing purposes. See Deployment for notes on how to deploy the project on a live system.

Prerequisites

We use yarn in our infrastructure, so we decided to go with yarn in the README. Please install yarn globally if you haven't already.

Environment variables

The app grabs environment variables from the .env file. Copy our template to your own local file:

cp .env.example .env

To execute transactions, you'll need to create an Infura project and set the project ID in the .env you've just created:

REACT_APP_INFURA_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Once done, you'll need to restart the app if it's already running.

Installing and running

Install dependencies for the project:

yarn install

To launch the dev version of the app locally:

yarn start

Alternatively, to run the production version of the app:

yarn build
mv build app
python -m SimpleHTTPServer 3000

And open http://localhost:3000/app in the browser.

Docker

If you prefer to use Docker:

docker-compose build && docker-compose up

Building

To get a complete bundle using the current configuration use:

yarn build

Running the tests

To run the tests:

yarn test

Lint

ESLint will be run automatically before you commit. To run it manually:

yarn lint:fix

Deployment

Dev & staging

The code is deployed to a testing website automatically on each push via a GitHub Action. The GitHub Action will create a new subdomain and post the link as a comment in the PR.

Production

Deployment to production is done manually. Please see the release procedure notes for details.

Built With

• React - A JS library for building user interfaces
• Material UI 4.X - React components that implement Google's Material Design
• redux, immutable, reselect, final-form - React ecosystem libraries

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

safe-react's Issues

Web3Connect

What is this feature about? (1 sentence)

Have a way to interact with the Gnosis Safe for Teams using WalletConnect

Why is it needed? What is the value? For whom do we build it?

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.

High-level overview of the feature

• Integrate https://web3connect.com

• If no wallet is connected so far, show title & button similar to above screenshot. Place them where usually the "Create new Safe" / "Load existing Safe" buttons are, as these actions cannot be undertaken without a wallet connected.
• Instead of "Try out Web3Connect" say "Get Started by Connecting a Wallet"
• Clicking "Connect" would display the dialog with the different wallet options

• Metamask & WalletConnect are a must-have, if there are any issues with the Portis or Fortmatic, feel free to leave them out
• This dialog would also be shown as an overlay if the button "connect" in the top-right corner is clicked. E.g. in the usecase of disconnecting a wallet and connecting to a new one.

Read only mode
In read-only mode, allow to open the Web3Connect dialog via the "Connect" button in the top-right dropdown.

Other

More info on Web3Connect: https://medium.com/web3connect/presenting-web3connect-a-single-web3-widget-for-dapps-ebbb2461ac7c?sk=7f7ecab8c0dc13bb39ce1e2fc6740417

Safe settings: Change required confirmations

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.

• After selecting the desired number of confirmations, the user can review the transaction and execute it.

Safe overview

Story
As a user I am able to see a clear overview of my Safe, in order to receive, see and send funds.

Acceptance criteria

• Ether and all enabled token balances are displayed.
  • ETH on top, the others sorted by name ascending.
• Columns can be sorted. (Then ETH isn't stuck to the top but in the respective place)
• Clicking the Safe address on top opens Etherscan
• By hovering over a row, "Receive" and "Send" button are displayed.
• User can click "Receive" to display the receive modal: #71
• User can click "Send" to start the transaction flow.
• Clicking "Hide tokens with 0 balance" hides the respective token rows.
• Please don't include the fiat value column right now.
• User can specify how many rows are displayed per page.
• User can click through the different pages
• Clicking "Transactions" opens the transaction list: #79
• Clicking "Settings" opens the settings: #76, #77, #78
• User can "Manage tokens": #72

Read only Safe

• In case the current user is not an owner, please show the Safe as readonly, i.e.
  • Send buttons are hidden
  • The "Read only" badge is displayed.

Open via link

• Opening a Safe via link is possible even if the Safe is not present in the local storage.
  • Safe is read-only if the current wallet is not an owner
• User sees an error if we cannot decode a Safe at the address of the link.

Send funds for threshold > 1

Inherits from #80

Since for threshold > 1 you actually need the UI to confirm transactions, the task becomes dependent on #79

Send Custom Transactions

What is this feature about? (1 sentence)

As a user I am able to send custom transactions in order to also perform transactions other than asset transfers with my Safe.

Why is it needed? What is the value? For whom do we build it?

This feature is requested by current Multisig users as this allows to interact with Smart contracts.

Screens

• Add Receive & Send buttons at the top-right, same height as the identicon on the left
  

• Recipient addresses are validated to be valid smart contract addresses
• Add Field "Value" (not in the current designs)
• Show error when value AND data is zero
• Rename "Data interface (ABI/JSON)" to "Data (hex encoded)"
• DON'T show transaction fee

• User needs to review transaction before submitting it.
• Also show "Value" on review screen

** Transaction List **

• Show "Data (hex encoded)" in the Transaction details

Receive View Improvements

Add Text

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!"

Add copy button and etherescan button

Buttons similar to Etherscan next to the address:

Copy button:

• Round small button
• Color: Blue
• Icon: Copy icon (same or similar to Etherscan), color = white
• Hover state: Change color (same as other button hover states), show tooltip "Copy address to clipboard"
• Click state: Change tooltip text to "Copied"

Etherscan button:

• Round small button
• Color: Blue
• Icon: Magnifying glass, color = white
• Hover State: Change color (same as other button hover states), Show tooltip "Show details on Etherscan"
• Click State: Open Etherscan link

Handle user rejections for metamask/safe-extension transactions

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.

Mainnet Compatibility

Deploy to production

Rinkeby on rinkeby.gnosis-safe.io
Mainnet on gnosis-safe.io

Domains are parked on godaddy (credentials in 1Password -> Dev - Safe)

Wrong Network

If the connected wallet is on the wrong network (either Rinkeby network on the mainnet interface or vice versa), show the screen below.

Rinkeby Warning

Show sticky​ notification (see #135 for more details): "Rinkeby Version: Don't send Mainnet assets to this Safe"

Wrong confirmations count displayed

Steps:

1. Create Safe with 2 owners and 1 confirmations
2. Modify safe to require 2 confirmations
3. Try to send funds
   => wrong info displayed in transaction details
   
   

Sort out the tests

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:

• All tests are passing
• Tests which make sense (like safe creation, adding custom token) but fail should be migrated
• Tests which became not useful with time should be removed

Asset View Improvements

• 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

• Add "Early Access" label
  

• 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/
  

WalletConnect Support

tbd

Send Improvements

The improvements below are applicable to all send flows (asset transfer, custom transaction, change owners, change threshold, confirmation, cancellation)

• Review Text

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

Safe settings: Change Safe name & Remove Safe

Story

• As a user I am able to change the Safe name in order to differentiate Safes from each other.
• As a user I am able to remove a Safe from the UI in order to not have unused ones visible.

Acceptance criteria

• User can Change Safe name.
• Safe name is stored upon hitting "Save"
• User cannot Save an empty Safe name
• Clicking "Remove Safe" bring up a confirmation modal:
  

Receive funds

Story
As a user I'm able to display my Safe address, in order to receive funds.

Acceptance criteria

• Clicking "Receive" on the Safe overivew opens the receive modal.
• QR code encodes simply the Safe address (not EIP681 or something similar, yet)
• Clicking the address opens Etherscan

Send funds for threshold = 1

Story
As a user I am able to transfer funds in order to pay my bills.

Acceptance criteria

• User can change the asset to send (show all non-zero balance tokens from the balance list)
• Recipient addresses are validated to be valid Ethereum addresses
• Please leave out display of fiat currency everywhere for this version
• User needs to review the transaction before submitting it.
• Please leave out name / address book entry for this version
  

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.

Load existing Safe

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.

Acceptance criteria

• Clicking "Load existing Safe" starts the flow
  
• User needs to enter a Safe name
• User needs to enter an address. The address is validated to be a valid Ethereum address and a valid Safe address.

Review

• User can review all info before adding.
  • Safe name
  • Safe address
  • All owners including addresses
  • Threshold
• User gets prompted to add names for all owners
• User sees if they are an owner or not.
• Clicking finish leads the user to the Safe overview

Rebranding (Gnosis Safe for Teams)

Updated Screens: https://projects.invisionapp.com/share/C8TFLRFU4ZV#/screens/378758900

Transaction details: confusing confirmations count displayed

I have a safe with two owners, but it displayed me three confirmations.

Refactor redux store

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

Executor shown twice in confirmer 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.

Screenshots

Additional context

• Safe address: 0xAe7688C89ac0D7d2E1756F4FcaC6beA6Fb747Bd8
• Tx hash: 0xeae38046e10c4fb08174602c9b9c78650522980444932f2b48fcc4ee72ddad21
• Chrome, both owners are Metamask clients

Settings Improvements

No existing owner as new owner

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).

Owners: Change text

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."

Confirm name change

Confirmation message (non-sticky notification) after changing Safe name: "Safe name changed"

Owners: Remove pagination

Remove pagination and change text to : "Any transaction requires the confirmation of:"

Threshold: Change text

Threshold: Remove line break in text

Threshold in read-only mode

Show threshold tab also in read-only mode

Consistent height of settings options

Height of white backgrounds is different for the different sections (safe name, owner, threshold)

Simple Fiat Balances

Simple Fiat Balances

• Show Fiat balances on the asset view in USD

Dependency

Endpoint: https://github.com/gnosis/safe-relay-service/issues/129

Designs

https://zpl.io/VxrmgJE
https://zpl.io/a8JnelQ

New owner's name is always "My metamask"

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:

1. Go to safereact
2. Connect a Gnosis safe wallet
3. Click create a new safe
4. Choose a name for the wallet, and click Start
5. Observe

Actual behaivour
In the owners section the owner default's name is "My metamask (me)" even if the wallet is not a metamask one.

Onboarding Improvements

What is this feature about? (1 sentence)

Removing some friction during onboarding

Why is it needed? What is the value? For whom do we build it?

Insights from the Team Safe usability test results: https://docs.google.com/presentation/d/1TWI2lTwvDen5k3u7YhzYo-iiDDkWdZqpaFlWOnQ-vDo/edit?usp=drive_web&ouid=104367921335388049170

High-level overview of the feature

• Consolidate owner and threshold steps
• Add owner step: Show QR code button that would open a camera view allowing to scan QR codes using the laptop/desktop camera
• Wording changes (see below)

Wording Changes

Start

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.

Owners / Threshold

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>

Review

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.

Transaction List Improvements

• 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")

• Icons for Transaction types
  Add icons for different types of transactions in the transaction list according to zpl://screen?pid=5b83b4fa75f90943c86ed14f&sid=5d6681ad13a4919b367b3b52

Notifications Improvements

Notification at the top

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

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".

Longer until automatically dismissing notifications

Show non-sticky notifications for 10 seconds

Show state

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

Allow adding custom tokens inside Safe view

Acceptance criteria:

• Remove Manage Tokens old code (view, tests, migrate actions, etc)
• Pagination inside add token screen
• Token list is loaded from relay
• Tokens without an image available show placeholder (@biocom)

Manage 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.

Acceptance criteria

• Please pull the token list from the same source like the Personal Edition clients
• Tokens are sorted ascending by token symbol
• User can enable and disable each token
• User can search by name and symbol
  • Ideally, the search would be automatically triggered, after each entered character.
  • Clearing the search field displays all tokens again.
• Closing the modal bring the user back to the Safe overview with the token selection applied.

Refreshing the page with gnosis safe wallet connected, fails

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:

1. Go to pr138--safereact.review.gnosisdev.com
2. Go to safe list, and open an existent safe.
3. Refresh.
4. Observe.

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

Refactor integration with in-browser web3 providers

• It should watch for updates and not require a reload
• Metamask privacy mode should be supported
• It should detect if another provider than metamask is used and change the name accordingly (e.g. Gnosis Safe)

Check if the app displays correctly in Firefox

Known problems:

• Field labels/validation errors are not shown

Rebranding Gnosis Safe for Teams

• Color
• Logo
• Font
• Buttons (rounded corners, dropshadow)
• Cards

Welcome Screen Improvements

• Rename Title to Welcome to linebreak Gnosis Safe for Teams
• Link safe.gnosis.io ("Learn more")

Load Safe improvements

Acceptance criteria:

• When loading a safe being able to: User gets prompted to add names for all owners
• See Threshold when loading safe
• Mark tests refactored and start passing them in Travis
• Update transaction-history-service
• Include storybook stories of created final designs views

Load/Create Safe Improvements

Create & Load Safe

• 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.

• Abandoning Safe creation
  If you reload on the opening page (https://safe-team.staging.gnosisdev.com/opening), it will lose​ the info about creation tx and will stay on this page forever. We should store the info about pending creation tx and if the user reloads, check the status of the tx manually and if it's confirmed, redirect to the safe's page. And if there is no info about the tx, redirect the user to welcome screen.

Load Safe

• Mandatory Name
  Make it mandatory to add a name and change text to:

"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
  

Multisig Migration

What is this feature about? (1 sentence)

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.

Why is it needed? What is the value? For whom do we build it?

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.

High-level overview of the feature

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:

• Future Proof: Add custom features using the modular design of the Gnosis Safe.
• Formally verified: While our code is always audited, we’ve gone one step further and formally verified the Gnosis Safe smart contracts.
• Save on gas: The Gnosis Safe for Teams is built with gas-efficiency in mind.
• Web3Connect: Connect with the Gnosis Safe for Teams with a wide range of popular wallets.
• User Experience: Interacting with a Multisignature Wallet has never been easier.

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.

Send custom transaction

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.

Acceptance criteria

• Recipient addresses are validated to be valid Ethereum addresses
• User needs to review transaction before submitting it.
  

Address Book

Store addresses as contacts

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)

Designs

Address book is on zeplin: https://app.zeplin.io/project/5b83b4fa75f90943c86ed14f/dashboard?seid=5d8ce5a842d658163b13321a

Safe List Sidebar

Story
As a user I am able to switch between different Safes in order to be able to have several of them.

Default Safe

• One safe can set as the default Safe
• This Safe is automatically opened every time the site is visited

Safe List

• Click the button top left (right of the logo) bring up the Safe list sidebar
• Clicking "Add Safe" starts the flow to create a new or load an existing Safe
• Safe are sorted alphabetically by Safe name, ascending.
• User can search for Safe by their name or address.
  • The search is triggered automatically upon entering characters
  • Clearing the search field shows all Safes again
• The default Safe has the default badge
  • The default Safe is the one that is opened when accessing the website initially.
  • By hovering over another Safe, the "Make default" button is displayed to change the default Safe
• The sidebar is automatically closed upon the following events
  • User clicks "Add Safe" -> Add Safe flow
  • User clicks a Safe -> Safe is opened
  • User clicks the button that opened the sidebar again -> Sidebar closes
  • User clicks in the greyed out area -> Sidebar closes
• Safes that are being deployed, use a loading spinner, for all others, the identicon according to their address is used. (exclude "deploying safes" if too much effort to implement)

From Welcome Screen

If no wallet is connected

• Show screen with intro text and "Connect" button to initiate Web3Connect

If wallet is connected

• If there is at least 1 safe in the safe list: Open the default (or only) Safe -> go directly to asset view of this Safe
• If there is no safe in the safe list: Show Welcome screen but instead of "Connect" button show "Create Safe" and "Load Safe" buttons

Display Error when a safe link is not a safe address

User sees an error if we cannot decode a Safe at the address of the link.

Use safe-contracts v1.0.0

Use safe-contracts v1.0.0

Transaction list

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.

Acceptance criteria

• Transactions are sorted by nonce, descending.
• User can sort by other columns as well.
• User can filter by "type"
  • Modify settings: Anything we identify as tx that changes the Safe settings, i.e. add/remove/replace owners, change threshold.
  • Incoming transfer: Incoming ETH transfer (no data) or incoming ERC-20 token transfer.
  • Outgoing transfer: Outgoing ETH transfer (no data) or Outgoing ERC-20 token transfer.
  • TODO: How do we handle other txs? Most likely they will be called "Data transaction": All other transactions containing data and not fitting into the above categories
• User can filter by "Status"
  • Awaiting: Waiting for signatures of owners
  • Pending: Submitted to blockchain, waiting for executing/mining
  • Success: Successfully executed / mined
  • Failed: Execution failed
• Which Date to use?
  • Awaiting: Date of the initial creation of the tx with the tx history service
  • Pending: Submission timestamp
  • Success: Mining timestamp
  • Failed: Failed timestamp

Details

• Clicking a row opens transaction details
• Clicking tx hashes and owner addresses opens Etherscan
• User can confirm tx or trigger a cancel tx
  
  
  

Things that are open / need to be discussed:

• How to handle and display transactions with the same nonce?

Scanning a qr code to enter a new owner fails on Coinbase Wallet

Scanning a qr code to enter a new owner fails.

Steps to reprodeuce:

1. Go to safereact in the coinbase app.
2. Tap on create a new safe.
3. Enter a name and tap on start
4. Tap on add another owner.
5. Tap on the QR code displayed next to the owner address box.
6. Observe

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.

BUG: Owners form when creating a safe is slow and laggy

What is this bug about? (1 sentence)

I just tried to create a Safe with 6 owners and owners form was laggy, slow, and the input was delayed.

Why is it needed to fix? What is the value? For whom do we fix it?

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.

High-level overview of the bug

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.

Screenshot

Receive View Improvements

Tokens: Custom tokens and tokens list

Story
As a user I can add custom token in order to use the Gnosis Safe with all my fancy tokens.

Acceptance criteria

• User can add custom tokens
• Address is validated to be a valid Ethereum address.
• Clicking "Save" check if token symbol, name, decimals and icon are available.
  • If so, the user gets back to the manage token modal
  • If not, the user is asked to complete the missing info.
• Closing the modal would lead the user back to the Safe overview
• Remove Manage Tokens old code (view, tests, migrate actions, etc)
• Pagination inside add token screen
• Token list is loaded from relay
• Tokens without an image available show placeholder (@biocom)
• Use immortal db for storing tokens

Simple ENS Integration

What is this feature about? (1 sentence)

As a user I want to enter ENS names so that I don't have to copy-paste cryptic addresses

Why is it needed? What is the value? For whom do we build it?

ENS is picking up steam and we want to push the standard.

High-level overview of the feature

For this version we keep the integration simple as we have experienced significant UX complications with a deep ENS integration on the mobile apps.

• No reverse lookup
• Don't display ENS name in transaction list
• All address input fields can detect valid ENS names by checking every 500ms whether the address is a valid ENS name and show a green checkmark in case the ENS is valid
• By clicking anywhere outside the field, the ENS name will be replaced with the corresponding Ethereum address

Safe settings: Manage owners

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

• User can see list of all Safe owners
• List is sorted alphabetically by owner name
• Hovering over an item displays action buttons for
  • Change the owner's name
  • Replace the owner with a new one
  • Remove the owner
• Users can add a new owner

Change owner name

• User cannot enter an empty name
• Clicking the address opens Etherscan
• New name is saved on clicking "Save"

Add new owner

• Owner name is required, cannot be empty.
• Address is validated to be a valid Ethereum address

• User can click addresses to open Etherscan

Remove owner

Replace owner

• When replacing an owner, the user cannot change the confirmation threshold since this would require 2 transactions (or multi send)

Identify the Safe browser extension

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