fix(wallet)Fix NFT Iframes in storybook (#16887)

* Fix storybook

* Fix import error

components/brave_wallet_ui/common/constants/mocks.ts

@@ -6,6 +6,7 @@
 import {
   AppsListType,
   BraveWallet,
+  SerializableTransactionInfo,
   WalletAccountType
 } from '../../constants/types'
 import { mockBasicAttentionToken } from '../../stories/mock-data/mock-asset-options'
@@ -308,7 +309,7 @@ export const mockSolDappSignTransactionRequest: BraveWallet.SignTransactionReque
 }
 
 // BraveWallet.TransactionInfo (selectedPendingTransaction)
-export const mockSolDappSignAndSendTransactionRequest = {
+export const mockSolDappSignAndSendTransactionRequest: SerializableTransactionInfo = {
   'id': 'e1eae32d-5bc2-40ac-85e5-2a4a5fbe8a5f',
   'fromAddress': mockSolanaAccount.address,
   'txHash': '',
@@ -318,12 +319,12 @@ export const mockSolDappSignAndSendTransactionRequest = {
     'filTxData': undefined,
     'solanaTxData': {
       'recentBlockhash': 'C115cyMDVoGGYNd4r8vFy5qPJEUdoJQQCXMYYKQTQimn',
-      'lastValidBlockHeight': 0 as unknown as bigint,
+      'lastValidBlockHeight': '0',
       'feePayer': mockSolanaAccount.address,
       'toWalletAddress': '',
       'splTokenMintAddress': '',
-      'lamports': 0 as unknown as bigint,
-      'amount': 0 as unknown as bigint,
+      'lamports': '0',
+      'amount': '0',
       'txType': 11,
       'instructions': [
         {
@@ -352,9 +353,9 @@ export const mockSolDappSignAndSendTransactionRequest = {
   'txType': 11,
   'txParams': [],
   'txArgs': [],
-  'createdTime': { 'microseconds': 1654540245386000 as unknown as bigint },
-  'submittedTime': { 'microseconds': 0 as unknown as bigint },
-  'confirmedTime': { 'microseconds': 0 as unknown as bigint },
+  'createdTime': { 'microseconds': 1654540245386000 },
+  'submittedTime': { 'microseconds': 0 },
+  'confirmedTime': { 'microseconds': 0 },
   'originInfo': {
     'origin': {
       'scheme': 'https',
@@ -366,7 +367,7 @@ export const mockSolDappSignAndSendTransactionRequest = {
     'eTldPlusOne': 'csb.app'
   },
   'groupId': undefined
-} as BraveWallet.TransactionInfo
+}
 
 export const mockSolDappSignAllTransactionsRequest: BraveWallet.SignAllTransactionsRequest = {
   'originInfo': {

components/brave_wallet_ui/components/desktop/popup-modals/confirm-password-modal/confirm-password-modal.stories.tsx

@@ -10,11 +10,7 @@ import { ConfirmPasswordModal } from './confirm-password-modal'
 
 export const _ConfirmPasswordModal = () => {
   return <WalletPageStory>
-    <ConfirmPasswordModal
-      title='Are you sure that you want to remove "MY ACCOUNT NAME HERE"?'
-      onClose={() => alert('close')}
-      onSuccess={() => alert('success')}
-    />
+    <ConfirmPasswordModal />
   </WalletPageStory>
 }
 

components/brave_wallet_ui/market/market-ui-messages.ts

@@ -12,6 +12,7 @@ import {
   BraveWallet,
   DefaultCurrencies
 } from '../constants/types'
+import { isComponentInStorybook } from '../utils/string-utils'
 
 const marketUiOrigin = loadTimeData.getString('braveWalletMarketUiBridgeUrl')
 
@@ -65,7 +66,7 @@ export type UpdateDepositableAssetsMessage = MarketCommandMessage & {
 }
 
 export const sendMessageToMarketUiFrame = (targetWindow: Window | null, message: MarketCommandMessage) => {
-  if (targetWindow) {
+  if (targetWindow && isComponentInStorybook()) {
     targetWindow.postMessage(message, braveMarketUiOrigin)
   }
 }

components/brave_wallet_ui/nft/nft-ui-messages.ts

@@ -5,8 +5,9 @@
 
 import { loadTimeData } from '../../common/loadTimeData'
 import { BraveWallet, NFTMetadataReturnType } from '../constants/types'
+import { isComponentInStorybook } from '../utils/string-utils'
 
-const nftDisplayOrigin = loadTimeData.getString('braveWalletNftBridgeUrl')
+const nftDisplayOrigin = loadTimeData.getString('braveWalletNftBridgeUrl') || ''
 // remove trailing /
 export const braveNftDisplayOrigin = nftDisplayOrigin.endsWith('/') ? nftDisplayOrigin.slice(0, -1) : nftDisplayOrigin
 
@@ -63,7 +64,7 @@ export type ToggleNftModal = CommandMessage & {
 }
 
 export const sendMessageToNftUiFrame = (targetWindow: Window | null, message: CommandMessage) => {
-  if (targetWindow) {
+  if (targetWindow && !isComponentInStorybook()) {
     targetWindow.postMessage(message, braveNftDisplayOrigin)
   }
 }

components/brave_wallet_ui/page/async/wallet_page_async_handler.ts

@@ -296,9 +296,9 @@ handler.on(WalletPageActions.getNFTMetadata.type, async (store, payload: BraveWa
         name: response.name,
         description: response.description,
         website: '',
-        twitter: '',
         facebook: '',
-        logo: ''
+        logo: '',
+        twitter: ''
       }
     }
     store.dispatch(WalletPageActions.updateNFTMetadata(nftMetadata))

components/brave_wallet_ui/utils/string-utils.ts

@@ -115,3 +115,13 @@ export const getNFTTokenStandard = (token: BraveWallet.BlockchainToken) => {
   }
   return ''
 }
+
+/**
+ * Checks if the component is displayed in a local storybook env
+ * Uses hostname for the check
+ * There maybe a better way to do this
+ * @returns true if the hostname is local
+ */
+export const isComponentInStorybook = (hostname: string = window.location.hostname) => {
+  return ['localhost', '127.0.0.1'].includes(window.location.hostname)
+}

components/web-components/button/button.stories.tsx

@@ -4,7 +4,7 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { PlusIcon } from 'brave-ui/components/icons'
+import * as Icons from 'brave-ui/components/icons'
 import Button, { ButtonIconContainer } from './index'
 
 export default {
@@ -35,13 +35,13 @@ const Template: ComponentStory<typeof Button> = function (args) {
     <Button {...args}>I am a button</Button>
     <Button {...args}>
       <ButtonIconContainer>
-        <PlusIcon />
+        <Icons.PlusIcon />
       </ButtonIconContainer>
       I am a button with icon
     </Button>
     <Button {...args}>
       <ButtonIconContainer>
-        <PlusIcon />
+        <Icons.PlusIcon />
       </ButtonIconContainer>
     </Button>
   </div>

components/web-components/input/input.stories.tsx

@@ -2,8 +2,8 @@
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // you can obtain one at https://mozilla.org/MPL/2.0/.
-import React from 'react'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
+import * as React from 'react'
+import * as Storybook from '@storybook/react'
 import Component from './index'
 
 export default {
@@ -30,9 +30,9 @@ export default {
       //   control: { type: 'select' }
       // }
     }
-} as ComponentMeta<typeof Component>
+} as Storybook.ComponentMeta<typeof Component>
 
-const Template: ComponentStory<typeof Component> = function (args, o) {
+const Template: Storybook.ComponentStory<typeof Component> = function (args, o) {
   const [value, setValue] = React.useState('I am an input')
   const handleChange: React.FormEventHandler<HTMLInputElement> = (e) => {
     setValue(e.currentTarget.value)