add approval ui dimensions

packages/embed/src/popup/popup.test.ts

@@ -1,7 +1,7 @@
 import { createSubjectManager } from '../subjects'
 import { mutableRef } from '../utils'
 import { createPopupController } from './popup'
-import { openPopup, redirectPopup } from './redirect-popup'
+import { openPopup, redirectPopup, popupFeatures } from './redirect-popup'
 
 jest.mock('./redirect-popup')
 
@@ -15,12 +15,16 @@ describe('registerSubscriptions', () => {
   beforeEach(() => {
     // reset mocks
     ;(openPopup as jest.Mock).mockReset()
+    ;(popupFeatures as jest.Mock).mockReset()
 
     subject = createSubjectManager()
 
     // setup
     popup.current = null
     createPopupController(popup, subject)
+    ;(popupFeatures as jest.Mock).mockImplementation(
+      (width, height) => `width=${width},height=${height}`
+    )
   })
 
   test('opens a popup when a transaction requires approval', () => {
@@ -41,6 +45,48 @@ describe('registerSubscriptions', () => {
     expect(popup.current).toEqual(mockPopup)
   })
 
+  test('opens a popup with custom dimensions', () => {
+    const mockPopup = jest.fn()
+
+    ;(openPopup as jest.Mock).mockReturnValue(mockPopup)
+    subject.mode$.next({
+      popup: {
+        title: 'Test',
+        message: 'Test Message',
+        height: 34,
+        width: 52,
+      },
+    })
+    subject.approvalStarted$.next()
+
+    jest.runAllTimers()
+
+    expect((openPopup as jest.Mock).mock.calls[0][0]).toEqual(
+      'width=52,height=34'
+    )
+    expect(popup.current).toEqual(mockPopup)
+  })
+
+  test('opens a popup with default dimensions', () => {
+    const mockPopup = jest.fn()
+
+    ;(openPopup as jest.Mock).mockReturnValue(mockPopup)
+    subject.mode$.next({
+      popup: {
+        title: 'Test',
+        message: 'Test Message',
+      },
+    })
+    subject.approvalStarted$.next()
+
+    jest.runAllTimers()
+
+    expect((openPopup as jest.Mock).mock.calls[0][0]).toEqual(
+      'width=500,height=589'
+    )
+    expect(popup.current).toEqual(mockPopup)
+  })
+
   test('redirects popup when an approval url is available', () => {
     const mockPopup = {
       popup: jest.fn(),

packages/embed/src/popup/popup.ts

@@ -3,14 +3,21 @@ import { mutableRef } from '../utils'
 import { redirectDocument } from './redirect-document'
 import { openPopup, popupFeatures, redirectPopup } from './redirect-popup'
 
+const DEFAULT_POPUP_WIDTH = 500
+const DEFAULT_POPUP_HEIGHT = 589
+
 export const createPopupController = (
   popup = mutableRef<{ popup: Window; stopCallback: () => void }>(),
   subject: SubjectManager
 ) => {
   subject.approvalStarted$.subscribe(() => {
-    if (subject.mode$.value()?.popup) {
+    const mode = subject.mode$.value()
+    if (mode?.popup) {
       popup.current = openPopup(
-        popupFeatures(500, 589),
+        popupFeatures(
+          mode.popup?.width || DEFAULT_POPUP_WIDTH,
+          mode.popup?.height || DEFAULT_POPUP_HEIGHT
+        ),
         redirectDocument(subject.mode$.value().popup),
         () => subject.approvalCancelled$.next()
       )

packages/embed/src/subjects.ts

@@ -6,6 +6,8 @@ export const createSubjectManager = () => {
       popup?: {
         message: string
         title: string
+        width?: number
+        height?: number
       }
       overlay?: {
         message

packages/embed/webpack.dev.js

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const Dotenv = require('dotenv-webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { DefinePlugin } = require('webpack')
 
 module.exports = {
   mode: 'development',
@@ -49,5 +50,8 @@ module.exports = {
     new HtmlWebpackPlugin({
       title: 'Gr4vy - Embed',
     }),
+    new DefinePlugin({
+      PACKAGE_VERSION: JSON.stringify(process.env.npm_package_version),
+    }),
   ],
 }