Skip to content

Commit

Permalink
Bump
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucemans
lucemans committed Feb 16, 2024
1 parent 7414377 commit dd0cb2d
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 15 deletions.
79 changes: 66 additions & 13 deletions packages/thorin-core/src/connect-modal/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@
/* eslint-disable sonarjs/no-identical-functions */
/* eslint-disable unicorn/no-nested-ternary */
import { walletConnect } from '@wagmi/connectors';
import { type Connector, createConfig, getConnectors, http } from '@wagmi/core';
import {
type Config,
type Connector,
createConfig,
getConnectors,
http,
} from '@wagmi/core';
import { mainnet } from '@wagmi/core/chains';
import { css, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
Expand All @@ -19,6 +25,9 @@ export class ThorinConnectModal extends LitElement {
@property({ type: Boolean, reflect: true })
open = false;

@property({})
wagmiConfig: Config = wagmiConfig;

static override styles = css`
.button-list {
display: flex;
Expand Down Expand Up @@ -62,6 +71,17 @@ export class ThorinConnectModal extends LitElement {
.space-y-2 > *:last-child {
margin-top: var(--thorin-spacing-2);
}
.connector {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.connector-icon {
width: 24px;
height: 24px;
border-radius: 4px;
}
`;

@state()
Expand All @@ -70,6 +90,9 @@ export class ThorinConnectModal extends LitElement {
@state()
activeConnector: Connector | undefined = undefined;

@state()
myAddress: string | undefined = undefined;

@state()
connectors: Connector[] = [];

Expand Down Expand Up @@ -106,30 +129,42 @@ export class ThorinConnectModal extends LitElement {
};
const x = wc({ chains: [mainnet], emitter } as any) as any;

this.connectors = [...getConnectors(wagmiConfig), x];
this.connectors = [...getConnectors(this.wagmiConfig), x];
}

override render() {
if (!this.myAddress && this.activeConnector) {
console.log('computing account');
this.activeConnector.getAccounts().then((accounts) => {
console.log('computing success');
// eslint-disable-next-line prefer-destructuring
this.myAddress = accounts[0];
});
}

return html`
<thorin-modal
?open="${this.open}"
modalTitle="${this.activeConnector && !this.connecting
? 'Wallet Settings'
: 'Connect Wallet'}"
.onClose="${() => {
this.open = false;
}}"
>
<div class="space-y-2">
${this.activeConnector && !this.connecting
? html`<div class="space-y-2">
<div class="connected">Connected</div>
<div class="connected">
Connected as ${this.myAddress}
</div>
<div>
<thorin-button
variant="subtle"
width="full"
.onClick="${() => {
this.activeConnector?.disconnect();
this.activeConnector = undefined;
this.connecting = false;
this.showQR = undefined;
console.log('FF');
this.disconnect();
}}"
>Disconnect</thorin-button
>
Expand Down Expand Up @@ -179,10 +214,8 @@ export class ThorinConnectModal extends LitElement {
variant="subtle"
width="full"
.onClick="${() => {
this.activeConnector?.disconnect();
this.activeConnector = undefined;
this.connecting = false;
this.showQR = undefined;
console.log('FF2');
this.disconnect();
}}"
>Back</thorin-button
>
Expand All @@ -195,11 +228,22 @@ export class ThorinConnectModal extends LitElement {
(connector) =>
html`
<thorin-button
variant="subtle"
width="full"
.onClick=${() =>
this._connect(connector)}
>${connector.name}</thorin-button
>
<div class="connector">
${connector.icon
? html`<img
src="${connector.icon}"
alt="${connector.name}"
class="connector-icon"
/>`
: ''}
<span>${connector.name}</span>
</div>
</thorin-button>
`
)}
</div>`
Expand All @@ -217,13 +261,22 @@ export class ThorinConnectModal extends LitElement {
.connect()
.catch((error) => {
console.log('failed to connect', error);
this.activeConnector = undefined;
this.disconnect();
})
.finally(() => {
this.connecting = false;
// this.disconnect();
// this.open = false;
});
}

disconnect() {
this.activeConnector?.disconnect();
this.activeConnector = undefined;
this.connecting = false;
this.showQR = undefined;
this.myAddress = undefined;
}
}

declare global {
Expand Down
35 changes: 33 additions & 2 deletions packages/thorin-core/src/modal/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ export class ThorinModal extends LitElement {
@property({ type: Boolean })
closeOnRequest = true;

@property()
onClose?: () => void;

static override styles = css`
:host {
display: none;
Expand Down Expand Up @@ -43,8 +46,7 @@ export class ThorinModal extends LitElement {
background: transparent;
}
.modal {
transition: all 250ms ease-out;
/* overflow: hidden; Smooth resizing */
transition: all 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
background: var(--thorin-background-primary);
border-radius: var(--thorin-radius-card);
max-width: 100vw;
Expand Down Expand Up @@ -87,6 +89,18 @@ export class ThorinModal extends LitElement {
);
opacity: 0.75;
}
.close {
position: absolute;
top: 0;
right: 0;
padding: var(--thorin-spacing-2) var(--thorin-spacing-4);
margin-x: var(--thorin-spacing-2);
cursor: pointer;
background: none;
border: none;
font-size: 20px;
color: var(--thorin-text-secondary);
}
/* Modal Breakpoint */
@media (max-width: 576px) {
.modal-container {
Expand Down Expand Up @@ -129,6 +143,18 @@ export class ThorinModal extends LitElement {
<div class="modal">
<div class="content">
<div class="title">${this.modalTitle}</div>
${
this.closeOnRequest
? html`<button
@click="${() => {
this.close();
}}"
class="close"
>
x
</button>`
: ''
}
<slot></slot>
</div>
</div>
Expand All @@ -137,6 +163,11 @@ export class ThorinModal extends LitElement {
`;
}

close() {
this.onClose?.();
this.open = false;
}

override firstUpdated() {
const modal = this.shadowRoot?.querySelector('.modal');
const modalContent = this.shadowRoot?.querySelector('.content');
Expand Down

0 comments on commit dd0cb2d

Please sign in to comment.