gofractally / fractally Goto Github PK

We'd like to use FontAwesome 6 (6.1) icons, and while react-icons is super convenient and easy to work with, it only supports the older FontAwesome 5 icons. react-icons does provide ways to add support for other icon sets in our application, however.

This task is (potentially) multi-part:

• What is the best way to support FA6? Assess the viability (and roughly estimate effort) around adding support for FA6 icons in our application via react-icons. Can we support the full iconset, or should we add support manually for just the icons we want to use? Maybe we should just use the SVGs and create our own component wrapper? Or maybe there's a better FA6 react package available?
• After discussing, implement whatever solution we think is best.

• Goals: Create lists for token selection and recipient selection, and make available in Storybook.
• Scope: UI only (and this is the list only; don't worry about the Search component or pane title there)
• Reference: See the Figma recipient list and Figma token list for design specs.

Consult with Thomas and/or Brandon if you have questions about the designs.

UI for these is available in our fork of the Commun UI Styleguidist. Those may be valuable as a reference and starting point.

• token selection list
• recipient selection list
• styles match Figma
• available and minimally interactive in Storybook

ƒractally will use the Raleway Google font.

• Make sure the Raleway font is included
• Enable lining numerals so that numbers baseline with letters. See this issue for more details. Specifically, this comment suggests one line of CSS to do the job, and this one claims that the Google Font does not support this feature selection and we must thus host the font files ourselves to use this OpenType feature.

• Goals: Make styles in Storybook "Wallet" example match Figma; make mobile responsive
• Scope: UI only (and don't worry about top nav bars)
• Reference: Figma desktop layout and Figma mobile layout

Consult with Thomas and/or Brandon if you have questions about the designs.

@brandonfancher wrote:

The video conference POC is meant to validate SignalWire as a viable solution. While we have it running, it's unreliable. Video and audio quality are great, but there are all sorts of issues when people join or leave...participants lists get out of sync, mute status gets out of sync, etc. We need to figure out which of these issues are in the POC (and fix those issues) and which (if any) are on SignalWire's side.

Observed bugs include:

• Linux users (Steven, John) can’t get into the video call
• Mute button unreliable; mute indicators to the user and in the participant list buggy (someone mutes and it shows them they’re muted but everyone else can still see them.
• Dan cannot full screen; anyone else?
• Sometimes when you leave and come back, you only see yourself
• Brandon left and came back and then there were two Gregories for everyone

These issues arise more often the more people are on the call. (which makes sense)

Some of these issues can be tested by connecting multiple browser sessions simultaneously...even from the same computer. (Obviously, it's easier too if you just get a group of people together to test, and I'm sure Mike and I would be happy to jump on when you're working to help test from time to time. We can prob get others to do so too.

We'd like to get to the point where we can confidently start using this for our own internal meetings...dogfooding and testing along the way. But it's proven too buggy to effectively do so...so far.

I suspect some of the bugs may be due to the event interpretation system, as implemented. And SignalWire's documentation around that isn't the best.

Remove styled-components and twin.macro from the project. We're not going to use those. This affects components/examples related to #6 (e.g., <StyledForm />). We may just end up removing those, as I think they were intended to showcase usage of those two libs together.

We're considering "Sign in with Github" specifically, first.

What are our options? Redirect to auth in external browser and redirect with custom URL scheme? Display auth login in a browser window within the Electron app?

We will want to support URLs linking into various screens in the application. I assume this is a URL scheme (custom protocol handler), but we need to identify what the best way to accomplish this is.

Also, iOS has Universal Links and Android has App Links. These fall back to web URLs if the app isn't installed (or they may even take you to the app store to download the app.) Is there something similar for Electron apps? We may have a similar, albeit more-limited, web experience available to users.

• Identify the options
• Discuss and make proposals

Goals: create fields for token selection and recipient selection, and make available in Storybook.
Scope: UI only
Reference: See the Figma panes for design specs.

These fields will open up the token/recipient selection panes (with search at the top) when tapped, however those panes are outside of the scope of this story.

Consult with Thomas and/or Brandon if you have questions about the designs.

Possible sources for base components / inspiration: inputs from commun-ui Styleguidist, inputs already ported into Storybook, or maybe it makes sense for these to be distinct? I'm not sure. That will become clear, I assume, as you dive in.

• token selection field
• recipient selection field
• styles match Figma panes
• styles for all other fields match Figma (including Search)
• available and minimally interactive in Storybook

In the wallet application, we're planning on most actions being modal-driven. We have a good system for modals in Eden (context/reducers), and commun has their own that's similar (but might be even more advanced). Taking those into consideration, implement the plumbing for multi-screen modals in the ƒractally wallet application UI.

• initial modal implementation
• review commun implementation and implement any beneficial enhancements (if worthwhile)