Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Refactored BidHistory layout, txnArrow was placed in incorrect row #72

Closed
wants to merge 3 commits into from
Closed

Refactored BidHistory layout, txnArrow was placed in incorrect row #72

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cb3c667
refactored BidHistory layout, txnArrow was placed in incorrect row
dblodorn Sep 22, 2021
c47f26e
added wrapper class to address view spans, links out to user's profil…
dblodorn Sep 22, 2021
b75626d
Merge branch 'main' into db/bid-history-cleanup
dblodorn Sep 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/components/AddressView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,19 @@ import { useZoraUsername } from "@zoralabs/nft-hooks";
type AddressViewProps = {
address: string;
showChars?: number;
selector?: any;
};

const PREFIX_ADDRESS = "0x";

export const AddressView = ({ address, showChars = 6 }: AddressViewProps) => {
export const AddressView = ({ address, showChars = 6, selector = {} }: AddressViewProps) => {
const username = useZoraUsername(address);

const addressFirst = address.slice(0, showChars + PREFIX_ADDRESS.length);
const addressLast = address.slice(address.length - showChars);

if (username.username?.username) {
return <span>{`@${username.username.username}`}</span>;
return <span {...selector}>{`@${username.username.username}`}</span>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would prefer doing className={} selector or just adding a wrapper class here. Allowing arbitrary props and classnames is a difficult thing to allow in framework code in my experience. You want to totally remove lower level presentational controls since now people can pass in onClick and such.
I’m okay with a dynamic classname but it may be better to just add a class to keep things consistent and allows us to easily search for how 3rd parties are styling this since we know the name of the class.

}
if (!username.error && !username.username) {
return <span>...</span>;
Expand Down
12 changes: 9 additions & 3 deletions src/constants/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,8 +199,14 @@ export const Style = {
theme.bodyFont,
],
// CSS Class for restyling and targeting
fullPageHistoryItemDescription: (theme: ThemeOptionsType) => css`
${theme.showTxnLinks ? "margin-right: 20px;" : ""}
fullPageHistoryItemDescription: () => css`
display: flex;
flex-direction: row;
justify-content: space-between;
`,
fullPageHistoryItemDescriptionCopy: () => css`
display: flex;
flex-direction: row;
`,
fullPageHistoryItemMeta: () => css`
position: relative;
Expand All @@ -221,7 +227,7 @@ export const Style = {
opacity: 0.8;
background-repeat: no-repeat;
background-position: center;
top: 14px;
top: 0;
z-index: 10;
right: 0;
transition: opacity 0.4s ease-in;
Expand Down
26 changes: 13 additions & 13 deletions src/nft-full/BidHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,19 @@ export const BidHistory = ({ showPerpetual = true }: BidHistoryProps) => {
key={`${bidItem.actor}-${bidItem.createdAt}`}
>
<div {...getStyles("fullPageHistoryItemDescription")}>
<span {...getStyles("pricingAmount")}>
<AddressView address={bidItem.actor} />{" "}
</span>
{bidItem.activityDescription} {bidItem.pricing}
<div {...getStyles("fullPageHistoryItemDescriptionCopy")}>
<AddressView selector={{...getStyles("pricingAmount")}} address={bidItem.actor} />&nbsp;
<span {...getStyles("pricingAmount")}>{bidItem.activityDescription} {bidItem.pricing}</span>
</div>
{bidItem.transactionHash && style.theme.showTxnLinks && (
<a
{...getStyles("fullPageHistoryTxnLink")}
href={`https://etherscan.io/tx/${bidItem.transactionHash}`}
target="_blank"
>
{getString("BID_HISTORY_VIEW_TRANSACTION")}
</a>
)}
</div>
{bidItem.createdAt && (
<div {...getStyles("fullPageHistoryItemMeta")}>
Expand All @@ -132,15 +141,6 @@ export const BidHistory = ({ showPerpetual = true }: BidHistoryProps) => {
>
{formatDate(bidItem.createdAt)}
</time>
{bidItem.transactionHash && style.theme.showTxnLinks && (
<a
{...getStyles("fullPageHistoryTxnLink")}
href={`https://etherscan.io/tx/${bidItem.transactionHash}`}
target="_blank"
>
{getString("BID_HISTORY_VIEW_TRANSACTION")}
</a>
)}
</div>
)}
</li>
Expand Down