Merge pull request #54 from leapwallet/release-20240130-143717

Release release-20240130-143717

apps/extension/public/base_manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__NAME__",
   "description": "__DESCRIPTION__",
-  "version": "0.9.5",
+  "version": "0.9.9",
   "options_page": "index.html",
   "web_accessible_resources": [
     {

apps/extension/public/compass/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Compass Wallet for Sei",
   "description": "A crypto wallet for Sei Blockchain, brought to you by the Leap Wallet team.",
-  "version": "0.9.5",
+  "version": "0.9.9",
   "options_page": "index.html",
   "web_accessible_resources": [
     {

apps/extension/public/leap-cosmos/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Leap Cosmos Wallet",
   "description": "A crypto wallet for Cosmos blockchains.",
-  "version": "0.9.5",
+  "version": "0.9.9",
   "options_page": "index.html",
   "web_accessible_resources": [
     {

apps/extension/src/Routes.tsx

@@ -9,9 +9,7 @@ import {
   useInitGovProposals,
 } from '@leapwallet/cosmos-wallet-hooks'
 import * as Sentry from '@sentry/react'
-import PopupLayout from 'components/layout/popup-layout'
 import { AppInitLoader } from 'components/loader/AppInitLoader'
-import Loader from 'components/loader/Loader'
 import { useInitAnalytics } from 'hooks/analytics/useInitAnalytics'
 import { useFillBetaCW20Tokens } from 'hooks/settings'
 import { lazy, Suspense } from 'react'

apps/extension/src/components/clickable-icons/index.tsx

@@ -4,7 +4,7 @@ import { ComponentPropsWithoutRef, forwardRef } from 'react'
 
 /** The `'type'` prop will be `'button'` if `undefined`. */
 export type ClickableIconProps = ComponentPropsWithoutRef<'button'> & {
-  readonly image: Pick<HTMLImageElement, 'src' | 'alt'>
+  readonly image: { src: string; alt: string; type?: string }
   readonly darker?: boolean
   readonly disabled?: boolean
 }
@@ -26,10 +26,10 @@ const ClickableIcon = forwardRef<HTMLButtonElement, ClickableIconProps>(
         {...rest}
       >
         <div className={'flex flex-col justify-center items-center'}>
-          {image.alt === 'IBC' ? (
+          {image.type === 'url' ? (
             <img
               src={image.src}
-              alt=''
+              alt={image.alt}
               className={classNames('invert dark:invert-0', {
                 'opacity-30': disabled,
               })}

apps/extension/src/components/coming-soon/ComingSoon.tsx

@@ -7,7 +7,6 @@ import SelectChain from 'pages/home/SelectChain'
 import SideNav from 'pages/home/side-nav'
 import React, { useState } from 'react'
 import { Colors } from 'theme/colors'
-import { isCompassWallet } from 'utils/isCompassWallet'
 
 type ComingSoonProps = {
   title: string
@@ -42,13 +41,7 @@ export function ComingSoon({ title, bottomNavLabel }: ComingSoonProps) {
                 'w-[48px] h-[40px] px-3 bg-[#FFFFFF] dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full',
             }}
             imgSrc={activeChainInfo.chainSymbolImageUrl ?? defaultTokenLogo}
-            onImgClick={
-              isCompassWallet()
-                ? undefined
-                : function noRefCheck() {
-                    setShowChainSelector(true)
-                  }
-            }
+            onImgClick={() => setShowChainSelector(true)}
             title={title}
             topColor={themeColor}
           />

apps/extension/src/components/custom-checkbox/CustomCheckbox.tsx

@@ -0,0 +1,22 @@
+import { Images } from 'images'
+import React from 'react'
+
+type CustomCheckboxProps = {
+  checked: boolean
+  color: string
+  onClick: () => void
+}
+
+export function CustomCheckbox({ checked, color, onClick }: CustomCheckboxProps) {
+  return (
+    <div
+      className={`w-[20px] h-[20px] rounded border-[2px] border-${color}-400 cursor-pointer relative`}
+      onClick={onClick}
+    >
+      <span className='w-[20px] block h-[20px]' />
+      {checked && (
+        <img src={Images.Misc.FilledRoundedSquareCheckMark} className='absolute inset-0' />
+      )}
+    </div>
+  )
+}

apps/extension/src/components/custom-checkbox/index.ts

@@ -0,0 +1 @@
+export * from './CustomCheckbox'

apps/extension/src/components/error-boundary-fallback/index.tsx

@@ -1,5 +1,6 @@
 import { Header } from '@leapwallet/leap-ui'
 import PopupLayout from 'components/layout/popup-layout'
+import { ACTIVE_CHAIN, SELECTED_NETWORK } from 'config/storage-keys'
 import { Images } from 'images'
 import React, { useCallback } from 'react'
 import { Colors } from 'theme/colors'
@@ -8,6 +9,12 @@ import browser from 'webextension-polyfill'
 
 const ErrorBoundaryFallback = () => {
   const reload = useCallback(() => {
+    //reset the active chain to cosmos or sei
+    if (isCompassWallet()) {
+      browser.storage.local.set({ [ACTIVE_CHAIN]: 'seiTestnet2', [SELECTED_NETWORK]: 'mainnet' })
+    } else {
+      browser.storage.local.set({ [ACTIVE_CHAIN]: 'cosmos', [SELECTED_NETWORK]: 'mainnet' })
+    }
     window.location.href = browser.runtime.getURL('/index.html#/home')
     window.location.reload()
   }, [])

apps/extension/src/components/eth-copy-wallet-address/EthCopyWalletAddress.tsx

@@ -0,0 +1,94 @@
+import { ThemeName, useTheme } from '@leapwallet/leap-ui'
+import classNames from 'classnames'
+import { Images } from 'images'
+import React, { MouseEventHandler, useState } from 'react'
+
+type EthCopyWalletAddressProps = {
+  readonly type?: 'button' | 'submit' | 'reset'
+  readonly walletAddresses?: string[]
+  readonly onCopy?: () => void
+  readonly color: string
+  readonly textOnCopied?: string
+  readonly className?: string
+  readonly copyIcon?: string
+  readonly onTextClick?: () => void
+}
+
+export function EthCopyWalletAddress({
+  type,
+  walletAddresses,
+  color,
+  onCopy,
+  textOnCopied = 'Copied',
+  copyIcon,
+  className,
+  onTextClick,
+  ...rest
+}: EthCopyWalletAddressProps) {
+  const [copied, setCopied] = useState(false)
+
+  const text = copied ? textOnCopied : walletAddresses?.[0] ?? ''
+  const copyIconSrc: string =
+    useTheme().theme === ThemeName.DARK ? Images.Misc.CopyGray200 : Images.Misc.CopyGray600
+
+  const handleClick: MouseEventHandler<HTMLDivElement | HTMLButtonElement> = async (event) => {
+    onTextClick && event.stopPropagation()
+
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+
+    onCopy && (await onCopy())
+  }
+
+  const handleTextClick: MouseEventHandler<HTMLDivElement> = (event) => {
+    if (onTextClick) {
+      event.stopPropagation()
+      onTextClick()
+    }
+  }
+
+  return (
+    <button
+      style={copied ? { backgroundColor: color } : {}}
+      className={classNames(
+        'relative font-Satoshi14px text-[14px] leading-[20px] py-[8px] cursor-pointer',
+        {
+          'text-white-100 font-bold rounded-[56px] pl-[21px] pr-[25px]': copied,
+          'text-gray-600 dark:text-gray-200 bg-white-100 dark:bg-gray-900 rounded-[30px] pl-4 pr-3':
+            !copied,
+        },
+        className,
+      )}
+      onClick={onTextClick ? undefined : handleClick}
+      type={type ?? 'button'}
+      {...rest}
+    >
+      <div className='flex justify-center items-center'>
+        {copied && (
+          <div className='block'>
+            <Images.Misc.CopiedSvg fill='white' height='18' width='18' />
+          </div>
+        )}
+
+        <div
+          className={classNames('block', { 'mr-[10.33px]': !copied, 'ml-[5.67px]': copied })}
+          onClick={handleTextClick}
+        >
+          {text}
+
+          {(walletAddresses?.length ?? 1) > 1 && !copied ? (
+            <span className='ml-[5px] -mr-[5px] bg-gray-100 dark:bg-gray-800 text-[12px] py-[3px] px-[5px] rounded-full'>
+              +{(walletAddresses?.length ?? 1) - 1}
+            </span>
+          ) : null}
+        </div>
+
+        {!copied && (
+          <div className='block' onClick={onTextClick ? handleClick : undefined}>
+            <img alt='Copy' src={copyIcon ?? copyIconSrc} />
+          </div>
+        )}
+      </div>
+    </button>
+  )
+}

apps/extension/src/components/eth-copy-wallet-address/index.ts

@@ -0,0 +1 @@
+export * from './EthCopyWalletAddress'