I've seen we're importing a couple UI components from gnosis.pm/safe-react-components, so I'm not sure whether the fault is theirs or ours, but there's some terrible lag when holding down a number while in focus on the amount input:

See screen recording here ↗

The solution is to either use useDebounce or onBlur instead of useChange.

Overview

Etherscan mainnet link is getting wrong domain to create the link, pointing to an unexistant domain.

https://github.com/sablierhq/safe-app/blob/a3812e27a61631f6ac8b76d416dca96cd6022689/src/components/EtherscanLink/Buttons/EtherscanButton.tsx#L27

Expected

Correct mainnet etherscan link
https://etherscan.io/

• Forward resolution in the address input
• reverse resolution in the stream display table

Currently, it shows up like this:

This is not clear enough. There should be a message more akin to what we have on pay.sablier.finance:

Totally my fault here. I was laser-focused on the payroll use case when designing the smart contracts for Sablier, and I ended up coding a generic contract (a proxy) that has a bespoke name (Payroll.sol).

If we're not using the Payroll ABI, the receiving party won't be able to cash-in his earnings on app.sablier.finance.

@TomAFrench, I'll take this one myself when I do the migration to ethers.

Currently we don't enforce that a user will create a transaction which will satisfy the deposit % vars.duration == 0 requirement in Sablier.sol.

We should add a quick safeDeposit = Math.floor(deposit/streamLength)*streamLength line in the correct place to fix this.

Not sure what's the cause of this, or if it does any harm at all:

index.js:165 Uncaught (in promise) Error: missing response (serverError={}, url="https://mainnet.infura.io/v3/84842078b09946638c03157f83405213", code=SERVER_ERROR, version=web/5.0.0-beta.141)
    at Logger.makeError (index.js:165)
    at Logger.throwError (index.js:174)
    at index.js:100
    at Generator.throw (<anonymous>)
    at rejected (index.js:6)

Some users may be confused by the default 1 hour initial delay, even that is a perfectly reasonable buffer given the current gas prices on Ethereum.

A good example to follow is sablier.me, since this feature is already available there.

When ordering by id, the sorting algorithm considers the id a string, not a number. This results in an incorrect output, such as 108 appearing ahead of 100005.

Currently not much thought has gone into whether a component is the primary or secondary colour. We should go through and check that these make sense.

The app needs a list of tokens which can be used on mainnet. This is limited to those indexed by the sablier subgraph

If you try to build the app with Node.js 17 or later, you will be getting the following error:

error:0308010C:digital envelope routines::unsupported

As explained here, this error is due to a security hole in the SSL provider, which was fixed in Node.js v17.

A temporary solution is to stick with Node.js v16 in the CI. However, we should consider the more permanent solution, which is to upgrade all dependencies to their latest major releases.

This answer recommends an alternative solution that involves changing the hash function used by Webpack, but to make that work, we would need to use a newer version of Webpack, hence we're back to square one.

To not have to make the deployments manually from our local machines anymore.

Not a major issue.

https://github.com/TomAFrench/sablier-safe-app/blob/94eee2e77c40f0a5caa01615e2ad315d55aed3db/src/components/CreateStreamForm/index.tsx#L167

1. A safe app shouldn't access user's web3 provider for security reasons
2. Users of safe multisig do not always have an injected provider in their browser. For example, users can use walletconnect to connect to their wallet. If you need a web3 provider to perform calls like .balanceOf, you should use your own provider connected to an ethereum API (infura for example). Also I've seen that you're using The Graph, it could work for this use case too.

We're working on improving 2) so you can expect in future versions of sdk that we will export our own provider for making requests :)

CSS is that one programming language that keeps boring me to death! Too many rules overlapped on top of one another ....

See recording of UI flickering here.

In the MVP we only allow Safes to create streams, there is no way for them to receive a stream and withdraw from it. This will be a commonly used feature so should be added in v1.0.

required steps:

• add new graphql query to get incoming streams
• create new set of table columns for incoming streams ("From" rather than "To")
• add interface to switch between showing outgoing and incoming streams
• Add a withdrawFromStreamfunction similar to cancelStream

Currently we show streams which haven't begun yet as "Active". We should differentiate these two cases to make it clear why the balances aren't yet changing.

ICHI contract address: 0x903bEF1736CDdf2A537176cf3C64579C3867A881

ICHI has $7M worth in Sablier Finance - it should be added to gnosis app. Please help.

We certainly can't fix this from our own app, but Gnosis could:

They probably check whether the transaction is an ERC20 transfer and, if yes, they pull the data from the Transfer event.

I'm sure we could do a PR that adds our own checkers for CreateStream, WithdrawFromStream and CancelStream.

One of our users asked this very good question recently:

Can you please confirm which timezone the start date is using on the Sablier Ul?

I think that it would be helpful to add a reference to the time zone in the UI itself.

Due to #17 all stream values are displaying as "x.9999". This will likely cause some confusion for users so we should round these up before displaying them.

Currently the image in the manifest file is a png. We should swap this out for an svg at some point.

We've been getting loads of requests for adding new tokens, and the trend will only continue as Sablier is increasingly used for vesting. Letting people stream any token they want, even if there would be no logo, sounds like a wise feature to add.

The Safe SDKs are now released under the @safe-global organization name, instead of @gnosis.pm.

Requested by a user on Discord:

The Sablier contracts only support streaming ERC20 tokens and in order to stream ETH it needs to first be wrapped into WETH in a separate transaction.

With a standard wallet this requires a separate transaction but by taking advantage of Gnosis batching transactions we can transparently wrap and unwrap on stream entry and exit. This can be done simply by adding a "wrap" transaction onto the beginning of a function similar to createStreamTxs.

We currently use this light green, probably a left over from the Compound app.

We should switch to using the primary orange used in Sablier, that is, "#f77423".

The StreamTable is starting to take over the available app space. This will only get worse as we add additional columns to show the stream status (active, ended, etc.)

We can take some cues from the pay.sablier.finance interface to deal with this. We can place the entire "Create Stream" form within a modal and allow the table to use the full app area.

In order to deal with an unappealing empty state for new users we can place a call-to-action within this empty space similar to that used at pay.sablier.finance.

For future interactions there can be a menu displayed above the table giving a similar experience to the Assets page on a Safe

("Sending | Receiving" on the left hand side and a "Create Stream" button to bring up the modal)

We're a few versions behind now and the newer versions allow us to track transaction status after we send them. We could probably do something interesting with that.

At gnosis safe, we started supporting https://ethereum-magicians.org/t/chain-specific-addresses/6449 because we had a lot of occasions where people would send assets to their Safe address on a different network where the Safe doesn't exist.

Some people reported that copying such addresses into Sablier safe app doesn't work and the app doesn't provide any visual feedback, and users get stuck.

It'd be awesome if Sablier started supporting such addresses.

Currently the graphql query is querying stream objects so we never get a response as the streams we're interested in are "from" the Payroll proxy. We should update the query in order to point at proxyStreams

I'm not sure if we have to fix this at all. Maybe the fact that the app is intended to be run under an inframe on the Gnosis websites makes this a non-issue.

The error I get when MetaMask is set to a network other than Mainnet or Rinkeby:

This is from my local development tree, not yet pushed to origin.

As per the docs provided by Gnosis:

Once your app is ready you need to deploy it on the internet. It is mandatory that your app exposes a manifest.json file in the root dir.

Example structure:

{
  "name": "YourAppName",
  "description": "A description of what your app do",
  "iconPath": "myAppIcon.svg"
}

My Rinkeby Safe wallet is 0xbaF500a5e009ca6892f6B49227b56f88215c9e61.

As you can see by dropping that address in the "balanceOf" function of the TestnetDAI token, the balance of the Safe is:

47200.000000000996693000

And not:

1999600000.0000

The latter is displayed in the UI, the former is the actual balance.

I think the bug here is that the token balance corresponds to the end user, not the Safe.

This is arguably the hardest stream property to convey the meaning of to end users. A nice little tooltip that explains what the duration is about would be a boon.

The black box on the left-hand side of this image is what I'm referring to:

web3.js has gotten behind the curve on many fronts. ethers is a much suitable frontend library for connecting to Ethereum smart contracts.

Just one example out of many: I spent 15 minutes trying to the right way to import the Contract type in web3, whereas in ethers it's clearly documented.

Shortly after making a withdrawal, this is what get logged in the console:

It gets logged continuously. I suspect that the problem is that the state of the stream is not correctly updated - there should be some hook somewhere taking care of the state transition from "stream not yet withdrawn" to "stream withdrawn".

The Compound app (and I think the Gnosis UI styleguide) uses this font family:

fontFamily: `'Averta', 'Roboto', 'Helvetica Neue', 'Arial', 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', '-apple-system', 'BlinkMacSystemFont', sans-serif`

But we're not using it uniformly. At least the "Amount" and the "Recipient" text fields don't have it.

It'd be nice to redirect the user to the Sablier Interface when they tap a row in the "Manage Created Streams" table.

There's no way we will ever fit as much rich data in the Safe App as there can be displayed on the canonical web app.

I have already started working on this in the refactor/material-ui-v5 branch.

But before I can finish the refactor, the safe-react-components library must be updated first.

Currently we have several Select boxes for each time increment in the stream creation UI, this is contributing to us overflowing the available area (and doesn't look great besides).

One way to handle this is to pull in the equivalent component from pay.sablier.finance

@PaulRBerg are you happy for us to pull that component across and restyle it to match the gnosis style?

We have a lot of empty space to the right of the "Create Stream" form. We should make use of it to explain Sablier for users who are unacquainted similarly to how Request Network has done so.

This back button here looks a little misaligned with the title. I think this might be caused by the text being smaller resulting in the majority of the "weight" of the text being lower.

We should play with this to get something which looks nice at some point.

Do we really need the "ComponentNameToClassKey" interface here?

https://github.com/TomAFrench/sablier-safe-app/blob/0137fa632cf39b481bb9ae9f0bdd2a9cb535a34d/src/types/overrides-mui.d.ts#L7-L9

ESLint is throwing the following error:

An interface declaring no members is equivalent to its supertype. eslint@typescript-eslint/no-empty-interface

Currently we have a situation where when navigating to the stream table page while no streams exist it results in a permanent loading spinner. We could add an empty state to the table to avoid user confusion.

I'm of a mind to instead move the querying of the subgraph into the App component and pass the streams in as a prop in order to hide the loading time. We could solve this issue at the same time by disabling the Manage Created Streams button if this list is empty.

See link for solution to having to edit node_modules on each install: safe-global/safe-react-apps#15

TypeError: undefined is not an object (evaluating 'ethereum.enable')

To be fair, this is common among web3 apps. Safari uses a quirky extension system that doesn't resemble Chrome, Brave or Firefox at all.