-
Notifications
You must be signed in to change notification settings - Fork 2
fix(packages): implement multiple fixes to new components #43
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 2 commits
5c73635
3345e25
785114f
eef5518
591a9c6
111ced6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,2 @@ | ||||||
export const BTC_DECIMAL_PLACES = 8; | ||||||
export const BBN_DECIMAL_PLACES = 5; | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There is trailing whitespace at the end of the line that should be removed.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @jonybur linting |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,5 +1,6 @@ | ||||||
import { Text } from "../../../components/Text"; | ||||||
import { twMerge } from "tailwind-merge"; | ||||||
import { BTC_DECIMAL_PLACES } from "../../../utils/constants"; | ||||||
|
||||||
interface TotalProps { | ||||||
total: number | string; | ||||||
|
@@ -10,16 +11,18 @@ interface TotalProps { | |||||
decimals?: number; | ||||||
} | ||||||
|
||||||
export function Total({ total, coinSymbol, hint, title = "Total", className, decimals = 8 }: TotalProps) { | ||||||
const formattedTotal = | ||||||
typeof total === "number" | ||||||
? total === 0 | ||||||
? "0" | ||||||
: (() => { | ||||||
const str = total.toFixed(decimals); | ||||||
return str.replace(/0+$/, "").replace(/\.$/, ""); | ||||||
})() | ||||||
: total; | ||||||
export function Total({ total, coinSymbol, hint, title = "Total", className, decimals = BTC_DECIMAL_PLACES }: TotalProps) { | ||||||
let formattedTotal; | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The variable formattedTotal should be declared with an explicit type annotation (string) for better type safety and code clarity.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||
if (typeof total === "number") { | ||||||
if (total === 0) { | ||||||
formattedTotal = "0"; | ||||||
} else { | ||||||
const str = total.toFixed(decimals); | ||||||
formattedTotal = str.replace(/0+$/, "").replace(/\.$/, ""); | ||||||
} | ||||||
} else { | ||||||
formattedTotal = total; | ||||||
} | ||||||
|
||||||
return ( | ||||||
<div className={twMerge("flex flex-row items-start justify-between text-accent-primary", className)}> | ||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,30 +3,28 @@ | |
import { Dialog, MobileDialog, DialogBody, DialogFooter, DialogHeader } from "@/components/Dialog"; | ||
import { Heading } from "@/components/Heading"; | ||
import { Text } from "@/components/Text"; | ||
import { PropsWithChildren, ReactNode, useEffect, useState } from "react"; | ||
import { useIsMobile } from "@/hooks/useIsMobile"; | ||
import { PropsWithChildren, ReactNode } from "react"; | ||
import { twMerge } from "tailwind-merge"; | ||
|
||
const toKebabCase = (str: string): string => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The toKebabCase function should be moved to a utilities file rather than being defined inline in this component, as it could be reused elsewhere in the codebase. Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @jonybur this comment make sense to me |
||
return str | ||
.toLowerCase() | ||
.replace(/[^a-z0-9]+/g, '-') | ||
.replace(/^-+/, '') | ||
.replace(/-+$/, ''); | ||
|
||
}; | ||
|
||
type DialogComponentProps = Parameters<typeof Dialog>[0]; | ||
|
||
interface ResponsiveDialogProps extends DialogComponentProps { | ||
children?: ReactNode; | ||
} | ||
|
||
function useIsMobileView() { | ||
const [isMobile, setIsMobile] = useState(false); | ||
|
||
useEffect(() => { | ||
const update = () => setIsMobile(window.innerWidth <= 640); | ||
update(); | ||
window.addEventListener("resize", update); | ||
return () => window.removeEventListener("resize", update); | ||
}, []); | ||
|
||
return isMobile; | ||
} | ||
const WINDOW_BREAKPOINT = 640; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this should be moved to a centralised place too. sounds like a constant value which you can use across the codebase There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Will address this refactor in a follow up PR |
||
|
||
function ResponsiveDialog({ className, ...restProps }: ResponsiveDialogProps) { | ||
const isMobileView = useIsMobileView(); | ||
const isMobileView = useIsMobile(WINDOW_BREAKPOINT); | ||
const DialogComponent = isMobileView ? MobileDialog : Dialog; | ||
|
||
return <DialogComponent {...restProps} className={twMerge("w-[41.25rem] max-w-full", className)} />; | ||
|
@@ -107,7 +105,7 @@ | |
<div className="grid grid-cols-2 items-center gap-4 rounded bg-primary-contrast p-4"> | ||
<div className="flex flex-col gap-3"> | ||
{bsns.map((bsnItem, index) => ( | ||
<div key={`bsn-${index}`} className="flex w-full items-center justify-center gap-2 py-1"> | ||
<div key={`bsn-${toKebabCase(bsnItem.name)}-${index}`} className="flex w-full items-center justify-center gap-2 py-1"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. why not use the bsn id? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Will address this refactor in a follow up PR |
||
{bsnItem.icon} | ||
<Text variant="body2" className="font-medium"> | ||
{bsnItem.name} | ||
|
@@ -117,7 +115,7 @@ | |
</div> | ||
<div className="flex flex-col gap-3"> | ||
{finalityProviders.map((fpItem, index) => ( | ||
<div key={`fp-${index}`} className="flex w-full items-center justify-center gap-2 py-1"> | ||
<div key={`fp-${toKebabCase(fpItem.name)}-${index}`} className="flex w-full items-center justify-center gap-2 py-1"> | ||
{fpItem.icon} | ||
<Text variant="body2" className="font-medium"> | ||
{fpItem.name} | ||
|
@@ -150,23 +148,21 @@ | |
</Heading> | ||
<Text variant="body2" className="text-secondary"> | ||
1. No third party possesses your staked BTC. You are the only one who can unbond and withdraw your stake. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [nitpick] The numbered text content should be extracted to constants or props to improve maintainability and potential internationalization support. Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||
<br /> | ||
</Text> | ||
<br /> | ||
<Text variant="body2" className="text-secondary"> | ||
2. Your stake will first be sent to Babylon Genesis for verification (~20 seconds), then you will be | ||
prompted to submit it to the Bitcoin ledger. It will be marked as 'Pending' until it receives 10 | ||
Bitcoin confirmations. | ||
</Text> | ||
</div> | ||
</DialogBody> | ||
<DialogFooter className="flex gap-4 pb-8 pt-0"> | ||
<Button variant="outlined" color="primary" onClick={onClose} className="flex-1"> | ||
Cancel | ||
</Button> | ||
<Button variant="contained" color="primary" onClick={onProceed} className="flex-1" disabled={processing}> | ||
<DialogFooter className="flex flex-col gap-4 pb-8 pt-0 sm:flex-row"> | ||
<Button variant="contained" color="primary" onClick={onProceed} className="w-full sm:flex-1 sm:order-2" disabled={processing}> | ||
{processing ? "Processing..." : "Proceed to Signing"} | ||
</Button> | ||
<Button variant="outlined" color="primary" onClick={onClose} className="w-full sm:flex-1 sm:order-1"> | ||
Cancel | ||
</Button> | ||
</DialogFooter> | ||
</ResponsiveDialog> | ||
); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is no longer needed, right?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will address this refactor in a follow up PR