Upgrade to heroicons@2.x (#2425)

package.json

@@ -74,7 +74,7 @@
     "@devexperts/rx-utils": "^1.0.0-alpha.14",
     "@devexperts/utils": "^1.0.0-alpha.14",
     "@headlessui/react": "^1.6.6",
-    "@heroicons/react": "^1.0.6",
+    "@heroicons/react": "^2.0.12",
     "@ledgerhq/hw-app-btc": "6.7.0",
     "@ledgerhq/hw-app-cosmos": "^6.27.1",
     "@ledgerhq/hw-app-eth": "^6.28.2",

src/renderer/components/header/lock/HeaderLock.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react'
 
 import * as RD from '@devexperts/remote-data-ts'
 import { Listbox } from '@headlessui/react'
-import { PlusCircleIcon } from '@heroicons/react/outline'
+import { PlusCircleIcon } from '@heroicons/react/24/outline'
 import * as A from 'fp-ts/lib/Array'
 import * as FP from 'fp-ts/lib/function'
 import * as O from 'fp-ts/lib/Option'

src/renderer/components/header/settings/HeaderSettings.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { CogIcon } from '@heroicons/react/solid'
+import { Cog8ToothIcon } from '@heroicons/react/20/solid'
 import { useIntl } from 'react-intl'
 
 import { Tooltip } from '../../uielements/common/Common.styles'
@@ -20,7 +20,7 @@ export const HeaderSettings: React.FC<Props> = (props): JSX.Element => {
     <HeaderIconWrapper onClick={onPress}>
       {!isDesktopView && <Styled.Label>{intl.formatMessage({ id: 'common.settings' })} </Styled.Label>}
       <Tooltip title={intl.formatMessage({ id: 'common.settings' })}>
-        <CogIcon className="h-[28px] w-[28px] text-text2 dark:text-text2d" />
+        <Cog8ToothIcon className="h-[24px] w-[24px] text-text2 dark:text-text2d" />
       </Tooltip>
     </HeaderIconWrapper>
   )

src/renderer/components/settings/EditableUrl.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import * as RD from '@devexperts/remote-data-ts'
-import { CheckCircleIcon, PencilAltIcon, XCircleIcon } from '@heroicons/react/outline'
+import { CheckCircleIcon, PencilSquareIcon, XCircleIcon } from '@heroicons/react/24/outline'
 import * as FP from 'fp-ts/lib/function'
 import * as O from 'fp-ts/lib/Option'
 import { useForm } from 'react-hook-form'
@@ -109,7 +109,7 @@ const EditableUrl: React.FC<Props> = (props): JSX.Element => {
           loading={loading}
           onClick={edit}>
           {url}
-          <PencilAltIcon className="dark:text0d ml-[5px] h-[20px] w-[20px] text-turquoise" />
+          <PencilSquareIcon className="dark:text0d ml-[5px] h-[20px] w-[20px] text-turquoise" />
         </TextButton>
         <BorderButton
           className="ml-10px"

src/renderer/components/swap/EditableAddress.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useCallback } from 'react'
 
-import { CheckCircleIcon, ExternalLinkIcon, PencilAltIcon, XCircleIcon } from '@heroicons/react/outline'
+import { CheckCircleIcon, ArrowTopRightOnSquareIcon, PencilSquareIcon, XCircleIcon } from '@heroicons/react/24/outline'
 import { Address, Asset } from '@xchainjs/xchain-util'
 import { Form, Tooltip } from 'antd'
 import * as FP from 'fp-ts/lib/function'
@@ -96,15 +96,15 @@ export const EditableAddress = ({
           {truncatedAddress}
         </Tooltip>
         <div className="flex flex-row items-center">
-          <PencilAltIcon
+          <PencilSquareIcon
             className="ml-[5px] h-[20px] w-[20px] cursor-pointer text-turquoise"
             onClick={() => {
               setEditableAddress(O.fromNullable(address))
               onChangeEditableMode(true)
             }}
           />
           <CopyLabel className="text-turquoise" textToCopy={address} />
-          <ExternalLinkIcon
+          <ArrowTopRightOnSquareIcon
             className="ml-[5px] h-[20px] w-[20px] cursor-pointer text-turquoise"
             onClick={() => onClickOpenAddress(address)}
           />

src/renderer/components/uielements/label/CopyLabel.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { DocumentDuplicateIcon, CheckIcon } from '@heroicons/react/outline'
+import { DocumentDuplicateIcon, CheckIcon } from '@heroicons/react/24/outline'
 import * as A from 'antd'
 import { TextProps } from 'antd/lib/typography/Text'
 

src/renderer/components/uielements/wallet/EditableWalletName.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react'
 
-import { CheckCircleIcon, PencilAltIcon, XCircleIcon } from '@heroicons/react/outline'
+import { CheckCircleIcon, PencilSquareIcon, XCircleIcon } from '@heroicons/react/24/outline'
 import * as FP from 'fp-ts/lib/function'
 import * as O from 'fp-ts/lib/Option'
 import { useForm } from 'react-hook-form'
@@ -52,7 +52,7 @@ export const EditableWalletName: React.FC<Props> = (props): JSX.Element => {
         className={`flex ${loading ? 'cursor-not-allowed' : 'cursor-pointer'} items-center text-[18px]`}
         onClick={edit}>
         {name}
-        <PencilAltIcon className="dark:text0d ml-[5px] h-[20px] w-[20px] text-turquoise" />
+        <PencilSquareIcon className="dark:text0d ml-[5px] h-[20px] w-[20px] text-turquoise" />
       </TextButton>
     )
   }, [loading, name])

yarn.lock

@@ -2857,12 +2857,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@heroicons/react@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "@heroicons/react@npm:1.0.6"
+"@heroicons/react@npm:^2.0.12":
+  version: 2.0.12
+  resolution: "@heroicons/react@npm:2.0.12"
   peerDependencies:
     react: ">= 16"
-  checksum: 372b1eda3ce735ef069777bc96304f70de585ebb71a6d1cedc121bb695f9bca235619112e3ee14e8779e95a03096813cbbe3b755927a54b7580d1ce084fa4096
+  checksum: d8e52410890db3337c3c82dcc223eeb3d88badcf96438e38fd9f4cc7aaafa41eb3653dcea6d9f1a8cac55e1076ac3b7a53fb87bfae71b5b202abf0e85066d004
   languageName: node
   linkType: hard
 
@@ -7614,7 +7614,7 @@ __metadata:
     "@devexperts/rx-utils": ^1.0.0-alpha.14
     "@devexperts/utils": ^1.0.0-alpha.14
     "@headlessui/react": ^1.6.6
-    "@heroicons/react": ^1.0.6
+    "@heroicons/react": ^2.0.12
     "@ledgerhq/hw-app-btc": 6.7.0
     "@ledgerhq/hw-app-cosmos": ^6.27.1
     "@ledgerhq/hw-app-eth": ^6.28.2