Skip to content

Commit

Permalink
Merge branch 'V3' into fix/wallet-locked-issue
Browse files Browse the repository at this point in the history
  • Loading branch information
svenvoskamp authored Jan 3, 2024
2 parents e038dd9 + 0dbdeb8 commit fb0a901
Show file tree
Hide file tree
Showing 18 changed files with 170 additions and 67 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ export default {
avatarSrc: avatarImageSrc,
address,
balance: '0.527 ETH',
isProfileName: false
isProfileName: false,
charsStart: 4,
charsEnd: 6
},
argTypes: {
disabled: {
Expand All @@ -35,5 +37,7 @@ export const Default: Component = {
.avatarSrc=${args.avatarSrc}
.balance=${args.balance}
address=${args.address}
.charsStart=${args.charsStart}
.charsEnd=${args.charsEnd}
></wui-account-button>`
}
6 changes: 6 additions & 0 deletions packages/scaffold/src/modal/w3m-account-button/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export class W3mAccountButton extends LitElement {

@property() public balance?: 'show' | 'hide' = 'show'

@property() public charsStart?: WuiAccountButton['charsStart'] = 4

@property() public charsEnd?: WuiAccountButton['charsEnd'] = 6

@state() private address = AccountController.state.address

@state() private balanceVal = AccountController.state.balance
Expand Down Expand Up @@ -79,6 +83,8 @@ export class W3mAccountButton extends LitElement {
: ''}
@click=${this.onClick.bind(this)}
data-testid="account-button"
.charsStart=${this.charsStart}
.charsEnd=${this.charsEnd}
>
</wui-account-button>
`
Expand Down
6 changes: 6 additions & 0 deletions packages/scaffold/src/modal/w3m-button/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ export class W3mButton extends LitElement {

@property() public loadingLabel?: W3mConnectButton['loadingLabel'] = undefined

@property() public charsStart?: W3mAccountButton['charsStart'] = 4

@property() public charsEnd?: W3mAccountButton['charsEnd'] = 6

@state() private isAccount = AccountController.state.isConnected

// -- Lifecycle ----------------------------------------- //
Expand All @@ -45,6 +49,8 @@ export class W3mButton extends LitElement {
<w3m-account-button
.disabled=${Boolean(this.disabled)}
balance=${ifDefined(this.balance)}
.charsStart=${ifDefined(this.charsStart)}
.charsEnd=${ifDefined(this.charsEnd)}
>
</w3m-account-button>
`
Expand Down
35 changes: 16 additions & 19 deletions packages/scaffold/src/partials/w3m-email-login-widget/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ConnectorController } from '@web3modal/core'
import { ConnectorController, CoreHelperUtil } from '@web3modal/core'
import { customElement } from '@web3modal/ui'
import { LitElement, html } from 'lit'
import { state } from 'lit/decorators.js'
Expand All @@ -23,6 +23,8 @@ export class W3mEmailLoginWidget extends LitElement {

@state() private loading = false

@state() private error = ''

public constructor() {
super()
this.unsubscribe.push(
Expand Down Expand Up @@ -57,10 +59,11 @@ export class W3mEmailLoginWidget extends LitElement {
<wui-email-input
.disabled=${this.loading}
@inputChange=${this.onEmailInputChange.bind(this)}
.errorMessage=${this.error}
>
</wui-email-input>
${showSubmit && multipleConnectors
${showSubmit
? html`
<wui-icon-link
size="sm"
Expand All @@ -71,55 +74,49 @@ export class W3mEmailLoginWidget extends LitElement {
</wui-icon-link>
`
: null}
${this.loading && multipleConnectors
${this.loading
? html`<wui-loading-spinner size="md" color="accent-100"></wui-loading-spinner>`
: null}
<input type="submit" hidden />
</form>
${multipleConnectors
? html`<wui-separator text="or"></wui-separator>`
: html`<wui-button
size="md"
variant="fill"
fullWidth
@click=${this.onSubmitEmail.bind(this)}
.disabled=${!showSubmit}
.loading=${this.loading}
>
Continue
</wui-button>`}
${multipleConnectors ? html`<wui-separator text="or"></wui-separator>` : null}
`
}

// -- Private ------------------------------------------- //
private onEmailInputChange(event: CustomEvent<string>) {
this.email = event.detail
this.error = ''
}

private async onSubmitEmail(event: Event) {
try {
if (this.loading) {
return
}

this.loading = true
event.preventDefault()
const emailConnector = ConnectorController.getEmailConnector()

if (!emailConnector) {
throw new Error('w3m-email-login-widget: Email connector not found')
}

const { action } = await emailConnector.provider.connectEmail({ email: this.email })
if (action === 'VERIFY_OTP') {
RouterController.push('EmailVerifyOtp', { email: this.email })
} else if (action === 'VERIFY_DEVICE') {
RouterController.push('EmailVerifyDevice', { email: this.email })
}
} catch (error) {
SnackController.showError(error)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
const parsedError = CoreHelperUtil.parseError(error)
if (parsedError?.includes('Invalid email')) {
this.error = 'Invalid email. Try again.'
} else {
SnackController.showError(error)
}
} finally {
this.loading = false
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default css`
wui-icon-link,
wui-loading-spinner {
position: absolute;
top: 50%;
top: 20px;
transform: translateY(-50%);
}
Expand Down
5 changes: 4 additions & 1 deletion packages/scaffold/src/partials/w3m-header/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { RouterControllerState } from '@web3modal/core'
import {
ConnectionController,
ConnectorController,
EventsController,
ModalController,
RouterController,
Expand All @@ -17,9 +18,11 @@ function headings() {
const walletName = RouterController.state.data?.wallet?.name
const networkName = RouterController.state.data?.network?.name
const name = walletName ?? connectorName
const connectors = ConnectorController.getConnectors()
const isEmail = connectors.length === 1 && connectors[0]?.id === 'w3m-email'

return {
Connect: 'Connect Wallet',
Connect: `Connect ${isEmail ? 'Email' : ''} Wallet`,
Account: undefined,
ConnectingExternal: name ?? 'Connect Wallet',
ConnectingWalletConnect: name ?? 'WalletConnect',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export class W3mEmailVerifyDeviceView extends LitElement {
}
this.loading = true
await this.emailConnector.provider.connectEmail({ email: this.email })
SnackController.showSuccess('New Email sent')
SnackController.showSuccess('Code email resent')
}
} catch (error) {
SnackController.showError(error)
Expand Down
58 changes: 48 additions & 10 deletions packages/scaffold/src/views/w3m-email-verify-otp-view/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import {
ModalController,
EventsController,
ConnectionController,
ConnectorController
ConnectorController,
CoreHelperUtil
} from '@web3modal/core'
import { state } from 'lit/decorators.js'
import styles from './styles.js'
import { W3mFrameHelpers } from '@web3modal/wallet'

// -- Helpers ------------------------------------------- //
const OTP_LENGTH = 6
Expand All @@ -26,12 +28,28 @@ export class W3mEmailVerifyOtpView extends LitElement {
// -- State & Properties -------------------------------- //
@state() private loading = false

@state() private timeoutTimeLeft = W3mFrameHelpers.getTimeToNextEmailLogin()

@state() private error = ''

private OTPTimeout: NodeJS.Timeout | undefined

public override firstUpdated() {
this.startOTPTimeout()
}

public override disconnectedCallback() {
clearTimeout(this.OTPTimeout)
}

// -- Render -------------------------------------------- //
public override render() {
if (!this.email) {
throw new Error('w3m-email-verify-otp-view: No email provided')
}

const isResendDisabled = Boolean(this.timeoutTimeLeft)

return html`
<wui-flex
flexDirection="column"
Expand All @@ -48,21 +66,40 @@ export class W3mEmailVerifyOtpView extends LitElement {
${this.loading
? html`<wui-loading-spinner size="xl" color="accent-100"></wui-loading-spinner>`
: html`<wui-otp
dissabled
length="6"
@inputChange=${this.onOtpInputChange.bind(this)}
></wui-otp>`}
: html` <wui-flex flexDirection="column" alignItems="center" gap="xs">
<wui-otp
dissabled
length="6"
@inputChange=${this.onOtpInputChange.bind(this)}
></wui-otp>
${this.error
? html`<wui-text variant="small-400" color="error-100"
>${this.error}. Try Again</wui-text
>`
: null}
</wui-flex>`}
<wui-flex alignItems="center">
<wui-text variant="small-400" color="fg-200">Didn't receive it?</wui-text>
<wui-link @click=${this.onResendCode.bind(this)}>Resend code</wui-link>
<wui-link @click=${this.onResendCode.bind(this)} .disabled=${isResendDisabled}>
Resend ${isResendDisabled ? `in ${this.timeoutTimeLeft}s` : 'Code'}
</wui-link>
</wui-flex>
</wui-flex>
`
}

// -- Private ------------------------------------------- //
private startOTPTimeout() {
this.OTPTimeout = setInterval(() => {
if (this.timeoutTimeLeft > 0) {
this.timeoutTimeLeft = W3mFrameHelpers.getTimeToNextEmailLogin()
} else {
clearInterval(this.OTPTimeout)
}
}, 1000)
}

private async onOtpInputChange(event: CustomEvent<string>) {
try {
if (!this.loading) {
Expand All @@ -80,21 +117,22 @@ export class W3mEmailVerifyOtpView extends LitElement {
}
}
} catch (error) {
SnackController.showError(error)
this.error = CoreHelperUtil.parseError(error)
this.loading = false
}
}

private async onResendCode() {
try {
if (!this.loading) {
if (!this.loading && !this.timeoutTimeLeft) {
const emailConnector = ConnectorController.getEmailConnector()
if (!emailConnector || !this.email) {
throw new Error('w3m-email-login-widget: Unable to resend email')
}
this.loading = true
await emailConnector.provider.connectEmail({ email: this.email })
SnackController.showSuccess('New Email sent')
this.startOTPTimeout()
SnackController.showSuccess('Code email resent')
}
} catch (error) {
SnackController.showError(error)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export class W3mUpdateEmailWalletWaitingView extends LitElement {
this.loading = true
await this.emailConnector.provider.updateEmail({ email: this.email })
this.listenForEmailUpdateApproval()
SnackController.showSuccess('New Email sent')
SnackController.showSuccess('Code email resent')
}
} catch (error) {
SnackController.showError(error)
Expand Down
19 changes: 11 additions & 8 deletions packages/ui/src/composites/wui-account-button/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,19 @@ export class WuiAccountButton extends LitElement {

@property() public address = ''

@property() public charsStart = 4

@property() public charsEnd = 6

// -- Render -------------------------------------------- //
public override render() {
return html`
<button ?disabled=${this.disabled}>
<button
?disabled=${this.disabled}
class=${ifDefined(this.balance ? undefined : 'local-no-balance')}
>
${this.balanceTemplate()}
<wui-flex
gap="xxs"
alignItems="center"
class=${ifDefined(this.balance ? undefined : 'local-no-balance')}
>
<wui-flex gap="xxs" alignItems="center">
<wui-avatar
.imageSrc=${this.avatarSrc}
alt=${this.address}
Expand All @@ -46,8 +49,8 @@ export class WuiAccountButton extends LitElement {
<wui-text variant="paragraph-600" color="inherit">
${UiHelperUtil.getTruncateString({
string: this.address,
charsStart: this.isProfileName ? 18 : 4,
charsEnd: this.isProfileName ? 0 : 6,
charsStart: this.isProfileName ? 18 : this.charsStart,
charsEnd: this.isProfileName ? 0 : this.charsEnd,
truncate: this.isProfileName ? 'end' : 'middle'
})}
</wui-text>
Expand Down
7 changes: 5 additions & 2 deletions packages/ui/src/composites/wui-account-button/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export default css`
padding: 4px var(--wui-spacing-m) 4px var(--wui-spacing-xxs);
}
wui-flex.local-no-balance {
button.local-no-balance {
border-radius: 0px;
border: none;
background: transparent;
Expand All @@ -77,6 +77,8 @@ export default css`
@media (max-width: 500px) {
button {
gap: 0px;
padding: var(--wui-spacing-3xs) var(--wui-spacing-xs) !important;
height: 32px;
}
wui-image,
wui-icon-box,
Expand All @@ -85,10 +87,11 @@ export default css`
width: 0px;
height: 0px;
}
button > wui-flex {
button {
border-radius: 0px;
border: none;
background: transparent;
padding: 0px;
}
}
Expand Down
Loading

0 comments on commit fb0a901

Please sign in to comment.