fix: replace chrome.runtime with runtime from webextension-polyfill

Author: pczeglik-iohk

packages/nami/src/api/extension/index.ts

@@ -8,6 +8,7 @@ import {
 } from '@cardano-sdk/core';
 import { createAvatar } from '@dicebear/avatars';
 import * as style from '@dicebear/avatars-bottts-sprites';
+import { runtime } from 'webextension-polyfill';
 
 import { APIError, TxSendError } from '../../config/config';
 
@@ -17,14 +18,14 @@ import type { Wallet } from '@lace/cardano';
 // This is used when dapp favicon is missing. Currently not working on chrome either
 // TODO: fix this if issues regarding dapp icon in whitelist is missing.
 export const getFavoriteIcon = (domain: string) => {
-  return `chrome-extension://${chrome.runtime.id}/_favicon/?pageUrl=${domain}&size=32`;
+  return `chrome-extension://${runtime.id}/_favicon/?pageUrl=${domain}&size=32`;
 };
 
 export const createTab = async (tab: string, query = '') =>
   new Promise((res, rej) => {
     chrome.tabs.create(
       {
-        url: chrome.runtime.getURL(`${tab}.html${query}`),
+        url: runtime.getURL(`${tab}.html${query}`),
         active: true,
       },
       tab => {

packages/nami/src/ui/app/components/TrezorWidget.tsx

@@ -8,6 +8,7 @@ import {
   ModalOverlay,
   useDisclosure,
 } from '@chakra-ui/react';
+import { runtime } from 'webextension-polyfill';
 
 const TrezorWidget = React.forwardRef((props, ref) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -55,7 +56,7 @@ const TrezorWidget = React.forwardRef((props, ref) => {
           />
           <Box rounded="3xl" overflow="hidden" background="white">
             <iframe
-              src={chrome.runtime.getURL('Trezor/popup.html')}
+              src={runtime.getURL('Trezor/popup.html')}
               id="trezorPopupNami"
               width="360px"
               height="560px"

packages/nami/src/ui/app/components/switchToLaceBanner.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Box, Image, Text, useColorModeValue } from '@chakra-ui/react';
 import { Button as LaceButton } from '@lace/common';
 import { motion } from 'framer-motion';
+import { runtime } from 'webextension-polyfill';
 
 import LaceLogo from '../../../assets/img/lace.svg';
 import laceGradientBackground from '../../../assets/img/laceGradientBackground.png';
@@ -15,9 +16,7 @@ import LaceSecondaryButton from './laceSecondaryButton';
 
 export const getLaceVideoBackgroundSrc = () => {
   return (
-    (typeof chrome !== 'undefined' &&
-      chrome.runtime?.getURL('laceVideoBackground.mp4')) ||
-    laceVideoBackground
+    runtime.getURL('assets/laceVideoBackground.mp4') || laceVideoBackground
   );
 };