Add ecash section to guide

[swedishfrenchpress]

Hey @GBKS @mouxdesign @danielnordh.

I am working on the ecash section for the design guide. I have some foundations laid down and would like to submit a Draft PR so I can preview it in a test environment.

I would like to keep pushing changes to the draft PR regularly as I will be adding illustrations, updating copy, moving things around etc...

I'm still rather new to this process so please let me know what are the best practices here.

Preview

[netlify[bot]]

✅ Deploy Preview for bitcoin-design-site ready!

Name	Link
🔨 Latest commit	ba2f3801971040d2e83e257a69d4621fa6dd2251
🔍 Latest deploy log	https://app.netlify.com/sites/bitcoin-design-site/deploys/674db9ebd3d6750008bda7db
😎 Deploy Preview	https://deploy-preview-1093--bitcoin-design-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mouxdesign]

Thanks so much for putting this together @swedishfrenchpress there's some good diagrams in there and the copy reads well. Took a look at the topic as a whole and the content structure. At the moment there are 4 main sections:

• Overview
• Cashu
• Fedimint
• Design best practices

It might be an idea to structure the content in the following way. This structure idea comes from looking at the content and moving things around so that the reader takes the info in more in chunks. It removes content from the overview page to keep it a bit lighter.

** Introduction (Currently the overview page)** Here you'll dive into the concept and basics Here a nice high level diagram would come in handy showing Ecash at the top and then Fedimint and Cashu under and short single sentences. This would works as a high level intro to the topic

Ecash protocols Cashu and Fedimint would go under this as subheadings

Using Ecash

• Creating and redeeming
• Sending and receiving

Design best practices Remain the same

Comparisons and considerations Here you would include the:

• Custody spectrum (currently included in overview)
• Ecash vs custodial (currently included in overview)

[swedishfrenchpress]

Thanks so much for putting this together @swedishfrenchpress there's some good diagrams in there and the copy reads well. Took a look at the topic as a whole and the content structure. At the moment there are 4 main sections:

• Overview
• Cashu
• Fedimint
• Design best practices

It might be an idea to structure the content in the following way. This structure idea comes from looking at the content and moving things around so that the reader takes the info in more in chunks. It removes content from the overview page to keep it a bit lighter.

** Introduction (Currently the overview page)** Here you'll dive into the concept and basics Here a nice high level diagram would come in handy showing Ecash at the top and then Fedimint and Cashu under and short single sentences. This would works as a high level intro to the topic

Ecash protocols Cashu and Fedimint would go under this as subheadings

Using Ecash

• Creating and redeeming
• Sending and receiving

Design best practices Remain the same

Comparisons and considerations Here you would include the:

• Custody spectrum (currently included in overview)
• Ecash vs custodial (currently included in overview)

Thanks so much for putting this together @swedishfrenchpress there's some good diagrams in there and the copy reads well. Took a look at the topic as a whole and the content structure. At the moment there are 4 main sections:

• Overview
• Cashu
• Fedimint
• Design best practices

It might be an idea to structure the content in the following way. This structure idea comes from looking at the content and moving things around so that the reader takes the info in more in chunks. It removes content from the overview page to keep it a bit lighter.

** Introduction (Currently the overview page)** Here you'll dive into the concept and basics Here a nice high level diagram would come in handy showing Ecash at the top and then Fedimint and Cashu under and short single sentences. This would works as a high level intro to the topic

Ecash protocols Cashu and Fedimint would go under this as subheadings

Using Ecash

• Creating and redeeming
• Sending and receiving

Design best practices Remain the same

Comparisons and considerations Here you would include the:

• Custody spectrum (currently included in overview)
• Ecash vs custodial (currently included in overview)

I think this is a really good suggestion, @mouxdesign! I updated the introduction page to include some of the information covered in the overview. The intro page is now skimmable. Previously, it was mostly a table of contents, but now it has good content that users can quickly skim over.

Next, I need to review the overview page to determine which information is redundant and should be removed, as the introduction page now covers a lot of it. I’m open to any suggestions here.

[danielnordh]

Overall, this is a great overview and addition.

Minor issue/inconsistency:

• Main page has no "back / next page" controls at the bottom
• Cashu page does, but the "back" button goes to 404
• Fedimint page does not have the controls
• Design considerations page also does not have the controls

Convention for other how-it-works sections with multiple pages is that there is a back and next page button at the bottom, and on the last page the next page links to the following concept in the sidebar. Since the new Ecash section sits between Private key management and Transaction section in the sidebar, you may have to change the last/first page links on those pages as well.

[swedishfrenchpress]

Overall, this is a great overview and addition.

Minor issue/inconsistency:

• Main page has no "back / next page" controls at the bottom
• Cashu page does, but the "back" button goes to 404
• Fedimint page does not have the controls
• Design considerations page also does not have the controls

Convention for other how-it-works sections with multiple pages is that there is a back and next page button at the bottom, and on the last page the next page links to the following concept in the sidebar. Since the new Ecash section sits between Private key management and Transaction section in the sidebar, you may have to change the last/first page links on those pages as well.

Thanks for the catch. I've updated this on my local environment and will update in the next commit.

[mouxdesign]

Feedback provided on these these sections as per your request Erik:

Second half of introduction page:

• Bearer asset: this term is unfamiliar, might be an idea to link out to an explanation of this.
• Ecash vs Custodial Lightning comparison table: At first glance not able to really understand the black triangle would maybe be an idea to add a key to this table.

Design Best Practices:

This page is packed with useful design info however there is a feeling as if the overall heading structure can be made a bit similar. If this is done the mind understands the topics under them a bit more. There are some commonalities in the headings:

Design Best Practices

1. General ecash best practices (remains as is)

• Multiple mint display
• Pending tokens

Then there's 4 common headings for both Cashu and Fedimint

1. User Interface and Experience (not sold on this heading as its a bit too general but something that fits the subheadings a bit better would be better)
2. Security and Privacy
3. Metadata and Information Management
4. Advanced Features

Cashu

1. User Interface and Experience

• Pending tokens visualization
• Edit mint URL & refresh mint settings

2. Security and Privacy

• Backup and restore processes
• Auto-swapping to default Cashu mint
• Pay to public key (P2PK) implementation (Would you say this is more privacy focused or an advanced feature?)

3. Metadata and Information Management

• Cashu metadata fields: explanation and usage
• Organizing and displaying Cashu metadata

4. Advanced Features

• P2PK (Pay to Public Key) implementation details (See comment above in point 2, if not could go under this main heading)

Fedimint Design Best Practices

1. User Interface and Experience

• Federation status display ** Federation status display image does not show up on my end

• Guardian status indicators

2. Security and Privacy

• Federation security model
• Privacy considerations in guardian information display "Don't: Show Guardian Lists for Federations User Hasn't Joined. This protects user and federation privacy, especially for invite-only mints. Only show guardian information to users that have joined the federation."

3. Metadata and Information Management

• Federation metadata fields: explanation and usage
• Organizing and displaying federation metadata

4. Advanced Features

• (Placeholder for any Fedimint-specific advanced features)

[swedishfrenchpress]

Feedback provided on these these sections as per your request Erik:

Second half of introduction page:

• Bearer asset: this term is unfamiliar, might be an idea to link out to an explanation of this.
• Ecash vs Custodial Lightning comparison table: At first glance not able to really understand the black triangle would maybe be an idea to add a key to this table.

Design Best Practices:

This page is packed with useful design info however there is a feeling as if the overall heading structure can be made a bit similar. If this is done the mind understands the topics under them a bit more. There are some commonalities in the headings:

Design Best Practices

1. General ecash best practices (remains as is)

• Multiple mint display
• Pending tokens

Then there's 4 common headings for both Cashu and Fedimint

1. User Interface and Experience (not sold on this heading as its a bit too general but something that fits the subheadings a bit better would be better)
2. Security and Privacy
3. Metadata and Information Management
4. Advanced Features

Cashu

1. User Interface and Experience

• Pending tokens visualization
• Edit mint URL & refresh mint settings

2. Security and Privacy

• Backup and restore processes
• Auto-swapping to default Cashu mint
• Pay to public key (P2PK) implementation (Would you say this is more privacy focused or an advanced feature?)

3. Metadata and Information Management

• Cashu metadata fields: explanation and usage
• Organizing and displaying Cashu metadata

4. Advanced Features

• P2PK (Pay to Public Key) implementation details (See comment above in point 2, if not could go under this main heading)

Fedimint Design Best Practices

1. User Interface and Experience

• Federation status display ** Federation status display image does not show up on my end

• Guardian status indicators

2. Security and Privacy

• Federation security model
• Privacy considerations in guardian information display "Don't: Show Guardian Lists for Federations User Hasn't Joined. This protects user and federation privacy, especially for invite-only mints. Only show guardian information to users that have joined the federation."

3. Metadata and Information Management

• Federation metadata fields: explanation and usage
• Organizing and displaying federation metadata

4. Advanced Features

• (Placeholder for any Fedimint-specific advanced features)

Thanks @mouxdesign, this is really helpful. In my local environment I've pushed these changes. I will push a commit this weekend once I update the images. With that, I think we'll be in a good place for the call next week!

[swedishfrenchpress]

• Removing the unused images_backup in cashu.md
  • Done
• Making title capitalization consistent to sentence case (pages use a mix right now, sentence case is guide standard)
  • Done
• Remove link to Mutiny Wallet, since that product is being shut down
  • Done
• improveme typo at the top of the design practices page
  • Fixed
• Next link on design practices page would go to private key management
  • Done
• Don't define mobile and mobileRetina images if it's just the same as the non-retina image
  • Each image file (image, retina, mobile, mobile retina) is different. The sizes vary between mobile and non-mobile, and the resolution differs between retina and non-retina versions. I followed the same conventions as the other pages.
• Page titles, editor's notes and next sentences at the bottom state that the pages are an introduction, a detailed summary, and a technical deep-dive. Need to pick one.
  • Fixed. Also added a link to the Figma illustration sources.
• recieves typo and duplicate image captions in the design practices page
  • Fixed

I also went back and made updates to the comments you left in September. I made the updates, left a comment, and resolved the comments.

I also ran all the images through ImageOptim. That made a huge difference. Saved a total of 6.2 MB. Thanks for sharing this tool.

[danielnordh]

ACK. Let's merge!