@portal-hq/webview 4.5.1 → 4.6.0

package/lib/commonjs/index.js

@@ -71,12 +71,14 @@ const WebviewComponent = (0, react_1.forwardRef)(({ onNavigationStateChange, onS
             uri: currentUrl,
         }), [currentUrl]);
         // Filter out "eip155:" from the gateway config.
-        const onlyEip155GatewayConfig = {};
-        Object.entries(portal.gatewayConfig).forEach(([key, value]) => {
-            if (key.startsWith(`${utils_1.CHAIN_NAMESPACES.EIP155}:`)) {
-                onlyEip155GatewayConfig[key.replace(`${utils_1.CHAIN_NAMESPACES.EIP155}:`, '')] = value;
-            }
-        });
+        const onlyEip155GatewayConfig = typeof portal.gatewayConfig === 'string'
+            ? portal.gatewayConfig
+            : Object.entries(portal.gatewayConfig).reduce((gatewayConfig, [key, value]) => {
+                if (key.startsWith(`${utils_1.CHAIN_NAMESPACES.EIP155}:`)) {
+                    gatewayConfig[key.replace(`${utils_1.CHAIN_NAMESPACES.EIP155}:`, '')] = value;
+                }
+                return gatewayConfig;
+            }, {});
         const scriptToInject = (0, injected_provider_1.injectionScript)({
             address: walletAddress,
             apiKey: portal.apiKey,
@@ -85,7 +87,7 @@ const WebviewComponent = (0, react_1.forwardRef)(({ onNavigationStateChange, onS
         });
         const handleBackPress = () => {
             var _a;
-            if (react_native_1.Platform.OS === 'android' && canGoBack) {
+            if (react_native_1.Platform.OS === 'android' && canGoBack.current) {
                 (_a = webView.current) === null || _a === void 0 ? void 0 : _a.goBack();
             }
             else if (react_native_1.Platform.OS === 'ios') {
@@ -115,44 +117,45 @@ const WebviewComponent = (0, react_1.forwardRef)(({ onNavigationStateChange, onS
         });
         // Initialize Portal Bindings and set the wallet address
         (0, react_1.useEffect)(() => {
-            if (portal && !initialized.current) {
-                // Prevent this from running again
-                initialized.current = true;
-                // Bind to signature messages after signing
-                portal.on('portal_signatureReceived', (data) => {
-                    var _a;
-                    (_a = webView.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
-                        type: 'portal_signatureReceived',
-                        data,
-                    }));
-                });
-                portal.on('chainChanged', ({ chainId }) => {
-                    var _a;
-                    setChainId(chainId);
-                    (_a = webView.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
-                        type: 'portal_chainChanged',
-                        data: { chainId },
-                    }));
-                });
-                // Bind to signing requests
-                if (onSigningRequested) {
-                    portal.on('portal_signingRequested', onSigningRequested);
-                }
-                // Store the wallet address in the state
-                const storeWalletAddress = () => __awaiter(void 0, void 0, void 0, function* () {
-                    const address = yield portal.address;
-                    setWalletAddress(address);
-                });
-                void storeWalletAddress();
+            if (!portal || initialized.current)
+                return;
+            // Prevent this from running again
+            initialized.current = true;
+            // Bind to signature messages after signing
+            const handleSignatureReceived = (data) => {
+                var _a;
+                (_a = webView.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
+                    type: 'portal_signatureReceived',
+                    data,
+                }));
+            };
+            const handleChainChanged = ({ chainId }) => {
+                var _a;
+                setChainId(chainId);
+                (_a = webView.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
+                    type: 'portal_chainChanged',
+                    data: { chainId },
+                }));
+            };
+            portal.on('portal_signatureReceived', handleSignatureReceived);
+            portal.on('chainChanged', handleChainChanged);
+            if (onSigningRequested) {
+                portal.on('portal_signingRequested', onSigningRequested);
             }
-        }, [portal]);
-        // Clean up Portal Provider bindings
-        (0, react_1.useEffect)(() => {
+            // Store the wallet address in the state
+            const storeWalletAddress = () => __awaiter(void 0, void 0, void 0, function* () {
+                const address = yield portal.address;
+                setWalletAddress(address);
+            });
+            void storeWalletAddress();
             return () => {
-                portal.provider.removeEventListener('portal_signatureReceived');
-                portal.provider.removeEventListener('portal_signingRequested', onSigningRequested);
+                portal.removeEventListener('portal_signatureReceived', handleSignatureReceived);
+                portal.removeEventListener('chainChanged', handleChainChanged);
+                if (onSigningRequested) {
+                    portal.removeEventListener('portal_signingRequested', onSigningRequested);
+                }
             };
-        }, []);
+        }, [portal, onSigningRequested]);
         // Handle Android stuff
         (0, react_1.useEffect)(() => {
             const subscription = react_native_1.BackHandler.addEventListener('hardwareBackPress', handleBackPress);
@@ -163,8 +166,8 @@ const WebviewComponent = (0, react_1.forwardRef)(({ onNavigationStateChange, onS
         // Ensure that the webView ref gets forwarded to the parent component
         (0, react_1.useImperativeHandle)(webViewRef, () => webView.current);
         return (<react_native_1.View style={styles.container}>
-            {walletAddress && source && (<react_native_webview_1.default allowsBackForwardNavigationGestures allowsFullscreenVideo={false} allowsInlineMediaPlayback={true} incognito={true} injectedJavaScriptBeforeContentLoaded={scriptToInject} injectedJavaScriptBeforeContentLoadedForMainFrameOnly={true} mediaPlaybackRequiresUserAction={true} onMessage={handlePostMessage} onNavigationStateChange={handleNavigationStateChange} ref={webView} renderLoading={() => <loading_1.default />} source={source} startInLoadingState={true} webviewDebuggingEnabled={true}/>)}
-          </react_native_1.View>);
+          {walletAddress && source && (<react_native_webview_1.default allowsBackForwardNavigationGestures allowsFullscreenVideo={false} allowsInlineMediaPlayback={true} incognito={true} injectedJavaScriptBeforeContentLoaded={scriptToInject} injectedJavaScriptBeforeContentLoadedForMainFrameOnly={true} mediaPlaybackRequiresUserAction={true} onMessage={handlePostMessage} onNavigationStateChange={handleNavigationStateChange} ref={webView} renderLoading={() => <loading_1.default />} source={source} startInLoadingState={true} webviewDebuggingEnabled={true}/>)}
+        </react_native_1.View>);
     };
     return <Webview />;
 });

package/lib/esm/index.js

@@ -33,12 +33,14 @@ const WebviewComponent = forwardRef(({ onNavigationStateChange, onSigningRequest
             uri: currentUrl,
         }), [currentUrl]);
         // Filter out "eip155:" from the gateway config.
-        const onlyEip155GatewayConfig = {};
-        Object.entries(portal.gatewayConfig).forEach(([key, value]) => {
-            if (key.startsWith(`${CHAIN_NAMESPACES.EIP155}:`)) {
-                onlyEip155GatewayConfig[key.replace(`${CHAIN_NAMESPACES.EIP155}:`, '')] = value;
-            }
-        });
+        const onlyEip155GatewayConfig = typeof portal.gatewayConfig === 'string'
+            ? portal.gatewayConfig
+            : Object.entries(portal.gatewayConfig).reduce((gatewayConfig, [key, value]) => {
+                if (key.startsWith(`${CHAIN_NAMESPACES.EIP155}:`)) {
+                    gatewayConfig[key.replace(`${CHAIN_NAMESPACES.EIP155}:`, '')] = value;
+                }
+                return gatewayConfig;
+            }, {});
         const scriptToInject = injectionScript({
             address: walletAddress,
             apiKey: portal.apiKey,
@@ -47,7 +49,7 @@ const WebviewComponent = forwardRef(({ onNavigationStateChange, onSigningRequest
         });
         const handleBackPress = () => {
             var _a;
-            if (Platform.OS === 'android' && canGoBack) {
+            if (Platform.OS === 'android' && canGoBack.current) {
                 (_a = webView.current) === null || _a === void 0 ? void 0 : _a.goBack();
             }
             else if (Platform.OS === 'ios') {
@@ -77,44 +79,45 @@ const WebviewComponent = forwardRef(({ onNavigationStateChange, onSigningRequest
         });
         // Initialize Portal Bindings and set the wallet address
         useEffect(() => {
-            if (portal && !initialized.current) {
-                // Prevent this from running again
-                initialized.current = true;
-                // Bind to signature messages after signing
-                portal.on('portal_signatureReceived', (data) => {
-                    var _a;
-                    (_a = webView.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
-                        type: 'portal_signatureReceived',
-                        data,
-                    }));
-                });
-                portal.on('chainChanged', ({ chainId }) => {
-                    var _a;
-                    setChainId(chainId);
-                    (_a = webView.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
-                        type: 'portal_chainChanged',
-                        data: { chainId },
-                    }));
-                });
-                // Bind to signing requests
-                if (onSigningRequested) {
-                    portal.on('portal_signingRequested', onSigningRequested);
-                }
-                // Store the wallet address in the state
-                const storeWalletAddress = () => __awaiter(void 0, void 0, void 0, function* () {
-                    const address = yield portal.address;
-                    setWalletAddress(address);
-                });
-                void storeWalletAddress();
+            if (!portal || initialized.current)
+                return;
+            // Prevent this from running again
+            initialized.current = true;
+            // Bind to signature messages after signing
+            const handleSignatureReceived = (data) => {
+                var _a;
+                (_a = webView.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
+                    type: 'portal_signatureReceived',
+                    data,
+                }));
+            };
+            const handleChainChanged = ({ chainId }) => {
+                var _a;
+                setChainId(chainId);
+                (_a = webView.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
+                    type: 'portal_chainChanged',
+                    data: { chainId },
+                }));
+            };
+            portal.on('portal_signatureReceived', handleSignatureReceived);
+            portal.on('chainChanged', handleChainChanged);
+            if (onSigningRequested) {
+                portal.on('portal_signingRequested', onSigningRequested);
             }
-        }, [portal]);
-        // Clean up Portal Provider bindings
-        useEffect(() => {
+            // Store the wallet address in the state
+            const storeWalletAddress = () => __awaiter(void 0, void 0, void 0, function* () {
+                const address = yield portal.address;
+                setWalletAddress(address);
+            });
+            void storeWalletAddress();
             return () => {
-                portal.provider.removeEventListener('portal_signatureReceived');
-                portal.provider.removeEventListener('portal_signingRequested', onSigningRequested);
+                portal.removeEventListener('portal_signatureReceived', handleSignatureReceived);
+                portal.removeEventListener('chainChanged', handleChainChanged);
+                if (onSigningRequested) {
+                    portal.removeEventListener('portal_signingRequested', onSigningRequested);
+                }
             };
-        }, []);
+        }, [portal, onSigningRequested]);
         // Handle Android stuff
         useEffect(() => {
             const subscription = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
@@ -125,8 +128,8 @@ const WebviewComponent = forwardRef(({ onNavigationStateChange, onSigningRequest
         // Ensure that the webView ref gets forwarded to the parent component
         useImperativeHandle(webViewRef, () => webView.current);
         return (<View style={styles.container}>
-            {walletAddress && source && (<WebView allowsBackForwardNavigationGestures allowsFullscreenVideo={false} allowsInlineMediaPlayback={true} incognito={true} injectedJavaScriptBeforeContentLoaded={scriptToInject} injectedJavaScriptBeforeContentLoadedForMainFrameOnly={true} mediaPlaybackRequiresUserAction={true} onMessage={handlePostMessage} onNavigationStateChange={handleNavigationStateChange} ref={webView} renderLoading={() => <Loading />} source={source} startInLoadingState={true} webviewDebuggingEnabled={true}/>)}
-          </View>);
+          {walletAddress && source && (<WebView allowsBackForwardNavigationGestures allowsFullscreenVideo={false} allowsInlineMediaPlayback={true} incognito={true} injectedJavaScriptBeforeContentLoaded={scriptToInject} injectedJavaScriptBeforeContentLoadedForMainFrameOnly={true} mediaPlaybackRequiresUserAction={true} onMessage={handlePostMessage} onNavigationStateChange={handleNavigationStateChange} ref={webView} renderLoading={() => <Loading />} source={source} startInLoadingState={true} webviewDebuggingEnabled={true}/>)}
+        </View>);
     };
     return <Webview />;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portal-hq/webview",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "license": "MIT",
   "main": "lib/commonjs/index",
   "module": "lib/esm/index",
@@ -18,9 +18,9 @@
     "test": "jest --passWithNoTests"
   },
   "dependencies": {
-    "@portal-hq/core": "^4.5.1",
-    "@portal-hq/injected-provider": "^4.5.1",
-    "@portal-hq/utils": "^4.5.1"
+    "@portal-hq/core": "^4.6.0",
+    "@portal-hq/injected-provider": "^4.6.0",
+    "@portal-hq/utils": "^4.6.0"
   },
   "devDependencies": {
     "@types/jest": "^29.2.0",
@@ -35,5 +35,5 @@
     "react-native": "*",
     "react-native-webview": "*"
   },
-  "gitHead": "7f010a0c86c95b2d28daa1b6640519bb9a22920a"
+  "gitHead": "81e3ade6164a87aa8fc8942af4c770d04f73bc55"
 }

package/src/index.tsx

@@ -31,189 +31,191 @@ interface WebviewProps {
   url: string
 }
 
-const WebviewComponent =
-  forwardRef<WebView, WebviewProps>(
-    ({ onNavigationStateChange, onSigningRequested, url }, webViewRef) => {
-      const Webview: FC = () => {
-        // Derive context.
-        const portal = usePortal()
-        // Derive refs.
-        const canGoBack = useRef<boolean>(false)
-        const initialized = useRef<boolean>(false)
-        const webView = useRef<WebView | null>(null)
-
-        // Derive state.
-        const [currentUrl, setCurrentUrl] = useState<string>(url)
-        const [walletAddress, setWalletAddress] = useState<string>()
-        const [chainId, setChainId] = useState<number>(
-          portal.chainId ?? DEFAULT_CHAIN_ID_NUMERIC,
-        )
+const WebviewComponent = forwardRef<WebView, WebviewProps>(
+  ({ onNavigationStateChange, onSigningRequested, url }, webViewRef) => {
+    const Webview: FC = () => {
+      // Derive context.
+      const portal = usePortal()
+      // Derive refs.
+      const canGoBack = useRef<boolean>(false)
+      const initialized = useRef<boolean>(false)
+      const webView = useRef<WebView | null>(null)
+
+      // Derive state.
+      const [currentUrl, setCurrentUrl] = useState<string>(url)
+      const [walletAddress, setWalletAddress] = useState<string>()
+      const [chainId, setChainId] = useState<number>(
+        portal.chainId ?? DEFAULT_CHAIN_ID_NUMERIC,
+      )
+
+      const source = useMemo(
+        (): WebViewSourceUri => ({
+          uri: currentUrl,
+        }),
+        [currentUrl],
+      )
+
+      // Filter out "eip155:" from the gateway config.
+      const onlyEip155GatewayConfig =
+        typeof portal.gatewayConfig === 'string'
+          ? portal.gatewayConfig
+          : Object.entries(portal.gatewayConfig).reduce(
+              (gatewayConfig, [key, value]) => {
+                if (key.startsWith(`${CHAIN_NAMESPACES.EIP155}:`)) {
+                  gatewayConfig[
+                    key.replace(`${CHAIN_NAMESPACES.EIP155}:`, '')
+                  ] = value
+                }
+
+                return gatewayConfig
+              },
+              {} as Record<string, string>,
+            )
 
-        const source = useMemo(
-          (): WebViewSourceUri => ({
-            uri: currentUrl,
-          }),
-          [currentUrl],
-        )
+      const scriptToInject = injectionScript({
+        address: walletAddress as string,
+        apiKey: portal.apiKey,
+        chainId: portal.chainId,
+        gatewayConfig: onlyEip155GatewayConfig,
+      })
+
+      const handleBackPress = (): boolean => {
+        if (Platform.OS === 'android' && canGoBack.current) {
+          webView.current?.goBack()
+        } else if (Platform.OS === 'ios') {
+          // Don't need to handle this on IOS I don't think
+        }
+        return true
+      }
 
-        // Filter out "eip155:" from the gateway config.
-        const onlyEip155GatewayConfig: typeof portal.gatewayConfig = {}
-        Object.entries(portal.gatewayConfig).forEach(([key, value]) => {
-          if (key.startsWith(`${CHAIN_NAMESPACES.EIP155}:`)) {
-            onlyEip155GatewayConfig[key.replace(`${CHAIN_NAMESPACES.EIP155}:`, '')] = value
-          }
-        })
-
-        const scriptToInject = injectionScript({
-          address: walletAddress as string,
-          apiKey: portal.apiKey,
-          chainId: portal.chainId,
-          gatewayConfig: onlyEip155GatewayConfig,
-        })
-
-        const handleBackPress = (): boolean => {
-          if (Platform.OS === 'android' && canGoBack) {
-            webView.current?.goBack()
-          } else if (Platform.OS === 'ios') {
-            // Don't need to handle this on IOS I don't think
+      const handleNavigationStateChange = (event: WebViewNavigation) => {
+        const { canGoBack: _canGoBack, loading, url } = event
+
+        if (loading) {
+          if (onNavigationStateChange) {
+            onNavigationStateChange(event)
           }
-          return true
+
+          // Set the source
+          setCurrentUrl(url)
+
+          canGoBack.current = _canGoBack
         }
+      }
 
-        const handleNavigationStateChange = (event: WebViewNavigation) => {
-          const { canGoBack: _canGoBack, loading, url } = event
+      const handlePostMessage = async (event: WebViewMessageEvent) => {
+        const { type, data } = JSON.parse(event.nativeEvent.data)
+        const { method, params, options } = data as RequestArguments
+
+        switch (type) {
+          case 'portal_sign':
+            await portal.request(
+              method,
+              params as unknown[],
+              `${CHAIN_NAMESPACES.EIP155}:${chainId}`,
+              options,
+            )
+            break
+        }
+      }
 
-          if (loading) {
-            if (onNavigationStateChange) {
-              onNavigationStateChange(event)
-            }
+      // Initialize Portal Bindings and set the wallet address
+      useEffect(() => {
+        if (!portal || initialized.current) return
 
-            // Set the source
-            setCurrentUrl(url)
+        // Prevent this from running again
+        initialized.current = true
 
-            canGoBack.current = _canGoBack
-          }
+        // Bind to signature messages after signing
+        const handleSignatureReceived = (data: any) => {
+          webView.current?.postMessage(
+            JSON.stringify({
+              type: 'portal_signatureReceived',
+              data,
+            }),
+          )
         }
 
-        const handlePostMessage = async (event: WebViewMessageEvent) => {
-          const { type, data } = JSON.parse(event.nativeEvent.data)
-          const { method, params, options } = data as RequestArguments
-
-          switch (type) {
-            case 'portal_sign':
-              await portal.request(
-                method,
-                params as unknown[],
-                `${CHAIN_NAMESPACES.EIP155}:${chainId}`,
-                options,
-              )
-              break
-          }
+        const handleChainChanged = ({ chainId }: { chainId: number }) => {
+          setChainId(chainId)
+          webView.current?.postMessage(
+            JSON.stringify({
+              type: 'portal_chainChanged',
+              data: { chainId },
+            }),
+          )
         }
 
-        // Initialize Portal Bindings and set the wallet address
-        useEffect(() => {
-          if (portal && !initialized.current) {
-            // Prevent this from running again
-            initialized.current = true
-
-            // Bind to signature messages after signing
-            portal.on('portal_signatureReceived', (data: any) => {
-              webView.current?.postMessage(
-                JSON.stringify({
-                  type: 'portal_signatureReceived',
-                  data,
-                }),
-              )
-            })
-
-            portal.on('chainChanged', ({ chainId }: { chainId: number }) => {
-              setChainId(chainId)
-              webView.current?.postMessage(
-                JSON.stringify({
-                  type: 'portal_chainChanged',
-                  data: { chainId },
-                }),
-              )
-            })
-
-            // Bind to signing requests
-            if (onSigningRequested) {
-              portal.on('portal_signingRequested', onSigningRequested)
-            }
-
-            // Store the wallet address in the state
-            const storeWalletAddress = async () => {
-              const address = await portal.address
-              setWalletAddress(address)
-            }
-
-            void storeWalletAddress()
-          }
-        }, [portal])
-
-        // Clean up Portal Provider bindings
-        useEffect(() => {
-          return () => {
-            portal.provider.removeEventListener('portal_signatureReceived')
-            portal.provider.removeEventListener(
-              'portal_signingRequested',
-              onSigningRequested,
-            )
-          }
-        }, [])
+        portal.on('portal_signatureReceived', handleSignatureReceived)
+        portal.on('chainChanged', handleChainChanged)
 
-        // Handle Android stuff
-        useEffect(() => {
-          const subscription = BackHandler.addEventListener(
-            'hardwareBackPress',
-            handleBackPress,
-          )
+        if (onSigningRequested) {
+          portal.on('portal_signingRequested', onSigningRequested)
+        }
 
-          return () => {
-            subscription.remove()
-          }
-        }, [])
-
-        // Ensure that the webView ref gets forwarded to the parent component
-        useImperativeHandle(webViewRef, () => webView.current!)
-
-        return (
-          <View style={styles.container}>
-            {walletAddress && source && (
-              <WebView
-                allowsBackForwardNavigationGestures
-                allowsFullscreenVideo={false}
-                allowsInlineMediaPlayback={true}
-                incognito={true}
-                injectedJavaScriptBeforeContentLoaded={scriptToInject}
-                injectedJavaScriptBeforeContentLoadedForMainFrameOnly={true}
-                mediaPlaybackRequiresUserAction={true}
-                onMessage={handlePostMessage}
-                onNavigationStateChange={handleNavigationStateChange}
-                ref={webView}
-                renderLoading={() => <Loading />}
-                source={source}
-                startInLoadingState={true}
-                webviewDebuggingEnabled={true}
-              />
-            )}
-          </View>
-        )
-      }
+        // Store the wallet address in the state
+        const storeWalletAddress = async () => {
+          const address = await portal.address
+          setWalletAddress(address)
+        }
 
-      return <Webview />
-    },
-  )
+        void storeWalletAddress()
 
+        return () => {
+          portal.removeEventListener('portal_signatureReceived', handleSignatureReceived)
+          portal.removeEventListener('chainChanged', handleChainChanged)
+          if (onSigningRequested) {
+            portal.removeEventListener('portal_signingRequested', onSigningRequested)
+          }
+        }
+      }, [portal, onSigningRequested])
+
+      // Handle Android stuff
+      useEffect(() => {
+        const subscription = BackHandler.addEventListener(
+          'hardwareBackPress',
+          handleBackPress,
+        )
 
-const Webview =
-  memo(WebviewComponent,
-    (prevProps, nextProps) => {
-      return prevProps.url === nextProps.url
+        return () => {
+          subscription.remove()
+        }
+      }, [])
+
+      // Ensure that the webView ref gets forwarded to the parent component
+      useImperativeHandle(webViewRef, () => webView.current!)
+
+      return (
+        <View style={styles.container}>
+          {walletAddress && source && (
+            <WebView
+              allowsBackForwardNavigationGestures
+              allowsFullscreenVideo={false}
+              allowsInlineMediaPlayback={true}
+              incognito={true}
+              injectedJavaScriptBeforeContentLoaded={scriptToInject}
+              injectedJavaScriptBeforeContentLoadedForMainFrameOnly={true}
+              mediaPlaybackRequiresUserAction={true}
+              onMessage={handlePostMessage}
+              onNavigationStateChange={handleNavigationStateChange}
+              ref={webView}
+              renderLoading={() => <Loading />}
+              source={source}
+              startInLoadingState={true}
+              webviewDebuggingEnabled={true}
+            />
+          )}
+        </View>
+      )
     }
-  )
 
+    return <Webview />
+  },
+)
+
+const Webview = memo(WebviewComponent, (prevProps, nextProps) => {
+  return prevProps.url === nextProps.url
+})
 
 const styles = StyleSheet.create({
   container: {