Skip to content

Commit

Permalink
refactor: update profile name rendering logic (#2276)
Browse files Browse the repository at this point in the history
  • Loading branch information
enesozturk authored May 15, 2024
1 parent 1c9b59e commit 27bd088
Show file tree
Hide file tree
Showing 6 changed files with 18 additions and 21 deletions.
8 changes: 4 additions & 4 deletions apps/gallery/stories/composites/wui-account-button.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@ export default {
avatarSrc: avatarImageSrc,
address,
balance: '0.527 ETH',
isProfileName: false,
profileName: 'johndoe.eth',
charsStart: 4,
charsEnd: 6
},
argTypes: {
disabled: {
control: { type: 'boolean' }
},
isProfileName: {
control: { type: 'boolean' }
profileName: {
control: { type: 'text' }
}
}
} as Component
Expand All @@ -32,7 +32,7 @@ export const Default: Component = {
render: args =>
html`<wui-account-button
?disabled=${args.disabled}
?isProfileName=${args.isProfileName}
profileName=${args.profileName}
.networkSrc=${args.networkSrc}
.avatarSrc=${args.avatarSrc}
.balance=${args.balance}
Expand Down
8 changes: 4 additions & 4 deletions apps/gallery/stories/composites/wui-profile-button.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,19 @@ export default {
networkSrc: networkImageSrc,
avatarSrc: avatarImageSrc,
address,
isProfileName: false
profileName: 'johndoe.eth'
},
argTypes: {
isProfileName: {
control: { type: 'boolean' }
profileName: {
control: { type: 'text' }
}
}
} as Component

export const Default: Component = {
render: args =>
html`<wui-profile-button
?isProfileName=${args.isProfileName}
profileName=${args.profileName}
.networkSrc=${args.networkSrc}
.avatarSrc=${args.avatarSrc}
address=${args.address}
Expand Down
1 change: 0 additions & 1 deletion packages/scaffold/src/modal/w3m-account-button/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@ export class W3mAccountButton extends LitElement {
.isUnsupportedChain=${this.isUnsupportedChain}
address=${ifDefined(this.address)}
profileName=${ifDefined(this.profileName)}
?isProfileName=${Boolean(this.profileName)}
networkSrc=${ifDefined(networkImage)}
avatarSrc=${ifDefined(this.profileImage)}
balance=${showBalance
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export class W3mAccountWalletFeaturesWidget extends LitElement {
networkSrc=${ifDefined(networkImage)}
icon="chevronBottom"
avatarSrc=${ifDefined(this.profileImage ? this.profileImage : undefined)}
?isprofilename=${Boolean(this.profileName)}
profileName=${this.profileName}
></wui-profile-button>
${this.tokenBalanceTemplate()}
<wui-flex gap="s">
Expand Down
10 changes: 4 additions & 6 deletions packages/ui/src/composites/wui-account-button/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@ export class WuiAccountButton extends LitElement {

@property({ type: Boolean }) public disabled = false

@property({ type: Boolean }) public isProfileName = false

@property() public address = ''

@property() public profileName = ''
Expand All @@ -53,10 +51,10 @@ export class WuiAccountButton extends LitElement {
<wui-text variant="paragraph-600" color="inherit">
${this.address
? UiHelperUtil.getTruncateString({
string: this.isProfileName ? this.profileName : this.address,
charsStart: this.isProfileName ? 18 : this.charsStart,
charsEnd: this.isProfileName ? 0 : this.charsEnd,
truncate: this.isProfileName ? 'end' : 'middle'
string: this.profileName || this.address,
charsStart: this.profileName ? 18 : this.charsStart,
charsEnd: this.profileName ? 0 : this.charsEnd,
truncate: this.profileName ? 'end' : 'middle'
})
: null}
</wui-text>
Expand Down
10 changes: 5 additions & 5 deletions packages/ui/src/composites/wui-profile-button/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export class WuiProfileButton extends LitElement {

@property() public avatarSrc?: string = undefined

@property({ type: Boolean }) public isProfileName = false
@property() public profileName?: string = ''

@property() public address = ''

Expand All @@ -40,10 +40,10 @@ export class WuiProfileButton extends LitElement {
<wui-flex gap="xs" alignItems="center">
<wui-text variant="large-600" color="fg-100">
${UiHelperUtil.getTruncateString({
string: this.address,
charsStart: this.isProfileName ? 18 : 4,
charsEnd: this.isProfileName ? 0 : 4,
truncate: this.isProfileName ? 'end' : 'middle'
string: this.profileName || this.address,
charsStart: this.profileName ? 18 : 4,
charsEnd: this.profileName ? 0 : 4,
truncate: this.profileName ? 'end' : 'middle'
})}
</wui-text>
<wui-icon size="sm" color="fg-200" name=${this.icon}></wui-icon>
Expand Down

0 comments on commit 27bd088

Please sign in to comment.