Qr code for upload and referral sharing #408
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Introduced `StorachaQRCode` component for generating QR codes. - Added `QRButton` component to trigger QR code display. - Integrated QR code display in the referrals page and uploader component. - Updated dependencies in `package.json` for `react-qrcode-logo` and added new SVG logo.
|
travis
requested changes
Sep 3, 2025
packages/console/src/qr.tsx
Outdated
| value, | ||
| size = 256, | ||
| ecLevel = 'H', | ||
| fgColor = '#f70000', |
There was a problem hiding this comment.
I think this should be the brand color - ideally it should just reference the Tailwind configs:
Co-authored-by: Travis Vachon <[email protected]>
Co-authored-by: Travis Vachon <[email protected]>
Co-authored-by: Travis Vachon <[email protected]>
n3-rd
had a problem deploying
to
preview-408/merge
GitHub Actions
Failure
travis
requested changes
Sep 24, 2025
| <> | ||
| <ReferralsList /> | ||
| {referralLink ? ( | ||
| {referralLink ? ( |
There was a problem hiding this comment.
please remove this trailing space
| <div className="border border-hot-red rounded-full px-4 py-2 flex flex-row justify-between items-center"> | ||
| <div>{referralLink}</div> | ||
| <div className="flex flex-row space-x-2"> | ||
| <QRButton link={referralLink} /> |
There was a problem hiding this comment.
this should be indented, as should the line below this
|
|
||
| export default function QRButton({ link }: { link: string }) { | ||
| const [open, setOpen] = useState(false) | ||
| const className = 'h-5 w-5 inline-block mr-1 align-middle' |
There was a problem hiding this comment.
this is only used in one place below, please inline it there
| > | ||
| <QrCodeIcon | ||
| className={`${className} cursor-pointer`} | ||
| style={{ marginTop: -4 }} |
There was a problem hiding this comment.
please don't use style - Tailwind can handle negative margins just fine:
| ✕ | ||
| </button> | ||
|
|
||
| <StorachaQRCode value={link} /> |
packages/console/src/qr.tsx
Outdated
| value, | ||
| size = 256, | ||
| ecLevel = 'H', | ||
| fgColor = '#E91315', |
There was a problem hiding this comment.
please add a comment here explaining where this color comes from
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces QR code functionality to the console app, allowing users to easily share referral links and uploaded file links via QR codes. The main changes include the addition of a reusable QR code component, integration of QR code buttons in the referrals and uploader pages, and the installation of the necessary QR code library.
QR code feature integration:
StorachaQRCodeReact component insrc/qr.tsx, leveraging thereact-qrcode-logolibrary to render branded QR codes.react-qrcode-logopackage and its dependencyqrcode-generator, updatingpackage.jsonandpnpm-lock.yamlaccordingly. [1] [2] [3] [4] [5] [6]UI changes for QR code sharing:
QRButtoncomponent to display referral links as QR codes in a modal, and integrated it into the referrals page (src/app/referrals/page.tsx). [1] [2] [3] [4]Minor UI and dependency adjustments:
package.jsonfor consistency. [1] [2]