diff --git a/.changeset/great-poets-tickle.md b/.changeset/great-poets-tickle.md new file mode 100644 index 0000000000..21502874cc --- /dev/null +++ b/.changeset/great-poets-tickle.md @@ -0,0 +1,23 @@ +--- +'@reown/appkit-experimental': patch +'@reown/appkit-scaffold-ui': patch +'@apps/laboratory': patch +'@reown/appkit-core': patch +'@reown/appkit-ui': patch +'@apps/demo': patch +'@apps/gallery': patch +'@reown/appkit-adapter-ethers': patch +'@reown/appkit-adapter-ethers5': patch +'@reown/appkit-adapter-polkadot': patch +'@reown/appkit-adapter-solana': patch +'@reown/appkit-adapter-wagmi': patch +'@reown/appkit': patch +'@reown/appkit-utils': patch +'@reown/appkit-cdn': patch +'@reown/appkit-common': patch +'@reown/appkit-polyfills': patch +'@reown/appkit-siwe': patch +'@reown/appkit-wallet': patch +--- + +Adds wui-permission-contract-call to experimental package. Adds w3m-smart-session-created-view to experimental package diff --git a/apps/laboratory/src/components/Wagmi/WagmiRequestPermissionsAsyncTest.tsx b/apps/laboratory/src/components/Wagmi/WagmiRequestPermissionsAsyncTest.tsx index 75fa1c4661..3be51b8d1f 100644 --- a/apps/laboratory/src/components/Wagmi/WagmiRequestPermissionsAsyncTest.tsx +++ b/apps/laboratory/src/components/Wagmi/WagmiRequestPermissionsAsyncTest.tsx @@ -26,6 +26,7 @@ export function WagmiRequestPermissionsAsyncTest() { ) } + if (!isSupported) { return ( diff --git a/packages/appkit/exports/constants.ts b/packages/appkit/exports/constants.ts index 31db9c6ce0..93352c1f3e 100644 --- a/packages/appkit/exports/constants.ts +++ b/packages/appkit/exports/constants.ts @@ -1 +1 @@ -export const PACKAGE_VERSION = '1.1.2' +export const PACKAGE_VERSION = '1.1.3' diff --git a/packages/core/src/controllers/RouterController.ts b/packages/core/src/controllers/RouterController.ts index 1517006701..72af7ca2ae 100644 --- a/packages/core/src/controllers/RouterController.ts +++ b/packages/core/src/controllers/RouterController.ts @@ -80,6 +80,7 @@ export interface RouterControllerState { | 'SwapPreview' | 'ConnectingMultiChain' | 'SwitchActiveChain' + | 'SmartSessionCreated' history: RouterControllerState['view'][] data?: { connector?: Connector diff --git a/packages/experimental/exports/smart-session/index.ts b/packages/experimental/exports/smart-session/index.ts index 5b5b958a1b..80b830282b 100644 --- a/packages/experimental/exports/smart-session/index.ts +++ b/packages/experimental/exports/smart-session/index.ts @@ -4,3 +4,7 @@ export { } from '../../src/smart-session/grantPermissions.js' export * from '../../src/smart-session/utils/TypeUtils.js' + +// Views +export * from '../../src/smart-session/ui/views/w3m-smart-session-created-view/index.js' +export * from '../../src/smart-session/ui/permissions/wui-permission-contract-call/index.js' diff --git a/packages/experimental/package.json b/packages/experimental/package.json index 38c8244014..ae18c41ab0 100644 --- a/packages/experimental/package.json +++ b/packages/experimental/package.json @@ -39,8 +39,10 @@ "@reown/appkit": "workspace:*", "@reown/appkit-core": "workspace:*", "@reown/appkit-common": "workspace:*", + "@reown/appkit-ui": "workspace:*", "axios": "1.7.2", - "zod": "3.22.4" + "zod": "3.22.4", + "lit": "3.1.0" }, "devDependencies": { "@types/axios-mock-adapter": "1.10.0", diff --git a/packages/experimental/src/smart-session/grantPermissions.ts b/packages/experimental/src/smart-session/grantPermissions.ts index d455309259..18283c9ad8 100644 --- a/packages/experimental/src/smart-session/grantPermissions.ts +++ b/packages/experimental/src/smart-session/grantPermissions.ts @@ -1,4 +1,9 @@ -import { ChainController, ConnectionController, OptionsController } from '@reown/appkit-core' +import { + ChainController, + ConnectionController, + OptionsController, + RouterController +} from '@reown/appkit-core' import { ProviderUtil } from '@reown/appkit/store' import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common' import type { @@ -74,6 +79,11 @@ export async function grantPermissions( // Update request signer with the cosigner key updateRequestSigner(request, addPermissionResponse.key) + RouterController.pushTransactionStack({ + view: 'SmartSessionCreated', + goBack: false + }) + const rawResponse = await connectionControllerClient.grantPermissions([request]) // Validate and type guard the response @@ -126,7 +136,6 @@ export function validateRequestForSupportedPermissionsCapability( export function isSmartSessionSupported(): boolean { const provider = ProviderUtil.getProvider(CommonConstantsUtil.CHAIN.EVM) - if (!provider) { return false } diff --git a/packages/experimental/src/smart-session/ui/permissions/wui-permission-contract-call/index.ts b/packages/experimental/src/smart-session/ui/permissions/wui-permission-contract-call/index.ts new file mode 100644 index 0000000000..2dcd66b4e1 --- /dev/null +++ b/packages/experimental/src/smart-session/ui/permissions/wui-permission-contract-call/index.ts @@ -0,0 +1,69 @@ +import { customElement, UiHelperUtil } from '@reown/appkit-ui' +import { LitElement, html } from 'lit' +import styles from './styles.js' +import { property } from 'lit/decorators.js' + +@customElement('wui-permission-contract-call') +export class WuiPermissionContractCall extends LitElement { + // -- State & Properties --------------------------------- // + public static override styles = styles + + @property({ type: Array }) public functions?: { functionName: string }[] = [] + @property({ type: String }) public contractAddress?: `0x${string}` + @property({ type: Number }) public expiry?: number + + // -- Render -------------------------------------------- // + public override render() { + if (!this.contractAddress || !this.expiry) { + return null + } + + return html` + + + + Contract Call + + + + ${UiHelperUtil.getTruncateString({ + string: this.contractAddress, + truncate: 'middle', + charsStart: 4, + charsEnd: 4 + })} + + + + + ${this.functions?.map(f => f.functionName).join(', ')} + + + + Duration + + + ~ ${Math.round((1000 * this.expiry - Date.now()) / 1000 / 3600)} hours + + + Expiring ${new Date(1000 * this.expiry).toDateString()} + + + + + + ` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wui-permission-contract-call': WuiPermissionContractCall + } + + namespace JSX { + interface IntrinsicElements { + 'wui-permission-contract-call': Partial + } + } +} diff --git a/packages/experimental/src/smart-session/ui/permissions/wui-permission-contract-call/styles.ts b/packages/experimental/src/smart-session/ui/permissions/wui-permission-contract-call/styles.ts new file mode 100644 index 0000000000..33dbcb1896 --- /dev/null +++ b/packages/experimental/src/smart-session/ui/permissions/wui-permission-contract-call/styles.ts @@ -0,0 +1,12 @@ +import { css } from 'lit' + +// First wui-flex should be width: 100% +export default css` + :host { + width: 100%; + } + + wui-flex { + width: 100%; + } +` diff --git a/packages/experimental/src/smart-session/ui/views/w3m-smart-session-created-view/index.ts b/packages/experimental/src/smart-session/ui/views/w3m-smart-session-created-view/index.ts new file mode 100644 index 0000000000..3f3af75ae5 --- /dev/null +++ b/packages/experimental/src/smart-session/ui/views/w3m-smart-session-created-view/index.ts @@ -0,0 +1,82 @@ +import { customElement } from '@reown/appkit-ui' +import { CoreHelperUtil, RouterController } from '@reown/appkit-core' +import { LitElement, html } from 'lit' +import styles from './styles.js' +import { NavigationUtil } from '@reown/appkit-common' + +@customElement('w3m-smart-session-created-view') +export class W3mSmartSessionCreatedView extends LitElement { + public static override styles = styles + + // -- Render -------------------------------------------- // + public override render() { + return html` + + ${this.onboardingTemplate()} + { + CoreHelperUtil.openHref(NavigationUtil.URLS.FAQ, '_blank') + }} + > + What's a Smart Session? + + ${this.buttonsTemplate()} + + ` + } + + // -- Private ------------------------------------------- // + private onboardingTemplate() { + return html` + + + + + + Smart Session created successfully + + + You can manage your session from your account settings. + + + ` + } + + private buttonsTemplate() { + return html` + + Got it! + + ` + } + + private redirectToAccount() { + RouterController.replace('Account') + } +} + +declare global { + interface HTMLElementTagNameMap { + 'w3m-smart-session-created-view': W3mSmartSessionCreatedView + } +} diff --git a/packages/experimental/src/smart-session/ui/views/w3m-smart-session-created-view/styles.ts b/packages/experimental/src/smart-session/ui/views/w3m-smart-session-created-view/styles.ts new file mode 100644 index 0000000000..f848485683 --- /dev/null +++ b/packages/experimental/src/smart-session/ui/views/w3m-smart-session-created-view/styles.ts @@ -0,0 +1,7 @@ +import { css } from 'lit' + +export default css` + .continue-button-container { + width: 100%; + } +` diff --git a/packages/scaffold-ui/src/modal/w3m-router/index.ts b/packages/scaffold-ui/src/modal/w3m-router/index.ts index 0aec18fefc..89293685f1 100644 --- a/packages/scaffold-ui/src/modal/w3m-router/index.ts +++ b/packages/scaffold-ui/src/modal/w3m-router/index.ts @@ -161,6 +161,8 @@ export class W3mRouter extends LitElement { return html`` case 'RegisterAccountNameSuccess': return html`` + case 'SmartSessionCreated': + return html`` default: return html`` } diff --git a/packages/scaffold-ui/src/partials/w3m-header/index.ts b/packages/scaffold-ui/src/partials/w3m-header/index.ts index 737a6bbb9f..9e635e6a94 100644 --- a/packages/scaffold-ui/src/partials/w3m-header/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-header/index.ts @@ -83,7 +83,8 @@ function headings() { : 'Connect Social', ConnectingMultiChain: 'Select chain', ConnectingFarcaster: 'Farcaster', - SwitchActiveChain: 'Switch chain' + SwitchActiveChain: 'Switch chain', + SmartSessionCreated: 'Session created' } } diff --git a/packages/scaffold-ui/src/views/w3m-approve-transaction-view/index.ts b/packages/scaffold-ui/src/views/w3m-approve-transaction-view/index.ts index 8359e46718..d2b5a89bbc 100644 --- a/packages/scaffold-ui/src/views/w3m-approve-transaction-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-approve-transaction-view/index.ts @@ -11,7 +11,7 @@ import { import { getW3mThemeVariables } from '@reown/appkit-common' // -- Variables ------------------------------------------- // -const PAGE_HEIGHT = 400 +const PAGE_HEIGHT = 600 const PAGE_WIDTH = 360 const HEADER_HEIGHT = 64 @@ -60,11 +60,15 @@ export class W3mApproveTransactionView extends LitElement { await this.syncTheme() this.iframe.style.display = 'block' + const container = this?.renderRoot?.querySelector('div') as HTMLDivElement this.bodyObserver = new ResizeObserver(entries => { const contentBoxSize = entries?.[0]?.contentBoxSize const width = contentBoxSize?.[0]?.inlineSize this.iframe.style.height = `${PAGE_HEIGHT}px` + + // Update container size to prevent the iframe from being cut off + container.style.height = `${PAGE_HEIGHT}px` if (width && width <= 430) { this.iframe.style.width = '100%' this.iframe.style.left = '0px' @@ -84,7 +88,7 @@ export class W3mApproveTransactionView extends LitElement { // -- Render -------------------------------------------- // public override render() { - return html`
` + return html`
` } // -- Private ------------------------------------------- // diff --git a/packages/scaffold-ui/src/views/w3m-approve-transaction-view/styles.ts b/packages/scaffold-ui/src/views/w3m-approve-transaction-view/styles.ts index 480773b46c..3af774ef83 100644 --- a/packages/scaffold-ui/src/views/w3m-approve-transaction-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-approve-transaction-view/styles.ts @@ -3,7 +3,6 @@ import { css } from 'lit' export default css` div { width: 100%; - height: 400px; } [data-ready='false'] { diff --git a/packages/ui/index.ts b/packages/ui/index.ts index f34b4e53e2..f532c1d542 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -80,6 +80,7 @@ export * from './src/composites/wui-select/index.js' export * from './src/layout/wui-flex/index.js' export * from './src/layout/wui-grid/index.js' export * from './src/layout/wui-separator/index.js' +export * from './src/utils/JSXTypeUtil.js' export { MathUtil } from './src/utils/MathUtil.js' export { initializeTheming, setColorTheme, setThemeVariables } from './src/utils/ThemeUtil.js' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 22272ef01f..c306481ec0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1313,9 +1313,15 @@ importers: '@reown/appkit-core': specifier: workspace:* version: link:../core + '@reown/appkit-ui': + specifier: workspace:* + version: link:../ui axios: specifier: 1.7.2 version: 1.7.2 + lit: + specifier: 3.1.0 + version: 3.1.0 zod: specifier: 3.22.4 version: 3.22.4