ui: improve NFC icons

[kaloudis]

Description

Before	After

Before	After

This pull request is categorized as a:

• New feature
• Bug fix
• Code refactor
• Configuration change
• Locales update
• Quality assurance
• Other

Checklist

• I’ve run yarn run tsc and made sure my code compiles correctly
• I’ve run yarn run lint and made sure my code didn’t contain any problematic patterns
• I’ve run yarn run prettier and made sure my code is formatted correctly
• I’ve run yarn run test and made sure all of the tests pass

Testing

If you modified or added a utility file, did you add new unit tests?

• No, I’m a fool
• Yes
• N/A

I have tested this PR on the following platforms (please specify OS version and phone model/VM):

• Android
• iOS

I have tested this PR with the following types of nodes (please specify node version and API version where appropriate):

• Embedded LND
• LND (REST)
• LND (Lightning Node Connect)
• Core Lightning (CLNRest)
• Nostr Wallet Connect
• LndHub

Locales

• I’ve added new locale text that requires translations
• I’m aware that new translations should be made on the ZEUS Transfix page and not directly to this repo

Third Party Dependencies and Packages

• Contributors will need to run yarn after this PR is merged in
• 3rd party dependencies have been modified:
  • verify that package.json and yarn.lock have been properly updated
  • verify that dependencies are installed for both iOS and Android platforms

Other:

• Changes were made that require an update to the README
• Changes were made that require an update to onboarding

[gemini-code-assist]

Summary of Changes

Hello @kaloudis, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request primarily focuses on enhancing the visual appeal and usability of NFC-related elements across the application. It introduces a new, modern NFC icon design and refactors the Button component to more flexibly accommodate custom SVG icons. This foundational change allows various screens to adopt the new NFC icon component, resulting in a more polished and consistent user experience for NFC interactions.

Highlights

• Improved NFC Icon Design: The existing NFC icon SVG has been replaced with a new, visually refined design, enhancing the user interface's aesthetic.
• Enhanced Button Icon Flexibility: The generic Button component now supports directly accepting a React element as an icon, allowing for greater customization and easier integration of custom SVG components.
• Migration to New NFC Icon Component: Multiple UI components, including NFCButton, ReceiveEcash, OpenChannel, and Receive views, have been updated to utilize the new NFC-alt.svg through a dedicated NfcIcon React component, ensuring consistent styling and usage.
• Minor UI Adjustments in Send View: The Send view received a minor style adjustment for its NFC button container and updated the NFC icon's properties from fill to stroke with adjusted dimensions.
• Conditional Rendering Changes in QRCodeScanner: Temporary modifications were made to the conditional rendering logic within the QRCodeScanner component, likely for testing or debugging purposes.

Changelog

• assets/images/SVG/NFC-alt.svg
  • Replaced the entire SVG content with a new design, transitioning from a filled icon to a stroked icon for a cleaner look.
• components/Button.tsx
  • Modified the icon prop handling to accept a React.isValidElement directly, enabling custom React components (such as SVG components) to be passed as icons.
• components/NFCButton.tsx
  • Removed the import for Icon from @rneui/themed.
  • Added an import for the new NfcIcon SVG component.
  • Updated both instances of NFC icon usage to render the NfcIcon component with stroke and dimension properties.
• components/QRCodeScanner.tsx
  • Changed a conditional rendering expression from device && cameraStatus === CameraAuthStatus.NOT_AUTHORIZED to true.
  • Changed another conditional rendering expression from !device to false.
• views/Cashu/ReceiveEcash.tsx
  • Imported the new NfcIcon component.
  • Updated the NFC button's icon prop to use the NfcIcon component with stroke and dimension properties.
• views/OpenChannel.tsx
  • Imported the new NfcIcon component.
  • Updated the NFC button's icon prop to use the NfcIcon component with stroke and dimension properties.
• views/Receive.tsx
  • Imported the new NfcIcon component.
  • Updated the NFC button's icon prop to use the NfcIcon component with stroke and dimension properties.
• views/Send.tsx
  • Added alignItems: 'center' to the style of a View containing the NFC button.
  • Updated the NFC component's properties from fill to stroke and adjusted width/height from 30 to 32.

Activity

• The author has run yarn run tsc to ensure code compiles correctly.
• The author has run yarn run lint to check for problematic patterns.
• The author has run yarn run prettier to ensure code is formatted correctly.
• The author has run yarn run test and confirmed all tests pass.
• The author has tested the PR on Android and iOS platforms.
• The author has tested the PR with Embedded LND and LND (REST) node types.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request successfully improves the UI by replacing the old NFC icon with a new, cleaner SVG icon across various components, and enhances component flexibility by allowing React elements as icons in the Button component. However, a critical vulnerability has been introduced in QRCodeScanner.tsx due to leftover debugging changes that hardcode conditional rendering logic. This effectively disables the QR scanning feature, which is essential for scanning Lightning invoices and Bitcoin addresses, and must be reverted before merging.