Conversation
- 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
left a comment
travis
left a comment
There was a problem hiding this comment.
this PR has significant formatting issues - I started to identify them but would like you to use your editing tools to take a pass before re-requesting review - most of these errors should be caught automatically by your tools
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 <travis.vachon@gmail.com>
Co-authored-by: Travis Vachon <travis.vachon@gmail.com>
Co-authored-by: Travis Vachon <travis.vachon@gmail.com>
n3-rd
had a problem deploying
to
preview-408/merge
GitHub Actions
Failure
| <> | ||
| <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
3 participants
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]