Fix sign icon on Mobile

apps/mobile/src/components/icon/index.ts

@@ -43,3 +43,4 @@ export * from './msg-redelegate';
 export * from './msg-cancel-undelegate';
 export * from './msg-swap';
 export * from './msg-vote';
+export * from './msg-execute-contract';

apps/mobile/src/components/icon/msg-adr36.tsx

@@ -0,0 +1,19 @@
+import React, {FunctionComponent} from 'react';
+import {IconProps} from './types';
+import {Path, Svg} from 'react-native-svg';
+
+export const MessageAdr36Icon: FunctionComponent<IconProps> = ({
+  size,
+  color,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <Path
+        d="M10.741 21.259L14.7985 17.2015M16.573 12.3835L19.6165 15.427L18.094 19.4845L10.975 22L10 21.0258L12.5163 13.9052L16.5738 12.3835H16.573ZM20.0425 15.8523L16.1477 11.9575L18.1053 10L22 13.8955L20.0425 15.8523Z"
+        stroke={color || 'currentColor'}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};

apps/mobile/src/components/icon/msg-custom.tsx

@@ -0,0 +1,25 @@
+import React, {FunctionComponent} from 'react';
+import {IconProps} from './types';
+import {Circle, Path, Svg} from 'react-native-svg';
+
+export const MessageCustomIcon: FunctionComponent<IconProps> = ({
+  size,
+  color,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <Circle
+        cx="16"
+        cy="15.3927"
+        r="5.1686"
+        stroke={color || 'currentColor'}
+        strokeWidth="1.2"
+      />
+      <Path
+        d="M11.1063 16.1655C9.43945 17.6381 8.55682 18.9655 8.95573 19.6247C9.58914 20.6713 13.2137 19.637 17.0513 17.3145C20.889 14.992 23.4865 12.2608 22.8531 11.2142C22.4732 10.5865 21.0175 10.7073 19.0851 11.4055"
+        stroke={color || 'currentColor'}
+        strokeWidth="1.2"
+      />
+    </Svg>
+  );
+};

apps/mobile/src/components/icon/msg-execute-contract.tsx

@@ -0,0 +1,31 @@
+import React, {FunctionComponent} from 'react';
+import {IconProps} from './types';
+import {Path, Rect, Svg} from 'react-native-svg';
+
+export const MessageExecuteContractIcon: FunctionComponent<IconProps> = ({
+  size,
+  color,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <Rect
+        x="10.6666"
+        y="9.86664"
+        width="10.2222"
+        height="12.2667"
+        rx="1.36296"
+        stroke={color || 'currentColor'}
+      />
+      <Path
+        d="M13.12 13.5467L18.0266 13.5467"
+        stroke={color || 'currentColor'}
+        strokeLinecap="round"
+      />
+      <Path
+        d="M13.12 16L16.8 16"
+        stroke={color || 'currentColor'}
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+};

apps/mobile/src/screen/sign/claim-rewards.tsx

@@ -1,14 +1,15 @@
 import {IMessageRenderer} from './types';
 import {MsgWithdrawDelegatorReward} from '@keplr-wallet/proto-types/cosmos/distribution/v1beta1/tx';
 import React, {FunctionComponent} from 'react';
-import * as ExpoImage from 'expo-image';
 import {FormattedMessage} from 'react-intl';
 import {observer} from 'mobx-react-lite';
 import {useStore} from '../../stores';
 import {Staking} from '@keplr-wallet/stores';
 import {Bech32Address} from '@keplr-wallet/cosmos';
 import {Text} from 'react-native';
 import {useStyle} from '../../styles';
+import {MessageClaimRewardIcon} from '../../components/icon';
+import {ItemLogo} from '../activities/msg-items/logo.tsx';
 
 export const ClaimRewardsMessage: IMessageRenderer = {
   process(chainId: string, msg) {
@@ -37,9 +38,8 @@ export const ClaimRewardsMessage: IMessageRenderer = {
     if (d) {
       return {
         icon: (
-          <ExpoImage.Image
-            style={{width: 48, height: 48}}
-            source={require('../../public/assets/img/sign/sign-claim.png')}
+          <ItemLogo
+            center={<MessageClaimRewardIcon size={40} color="#DCDCE3" />}
           />
         ),
         title: (

apps/mobile/src/screen/sign/custom-message.tsx

@@ -1,13 +1,20 @@
 import React, {FunctionComponent, PropsWithChildren} from 'react';
-import * as ExpoImage from 'expo-image';
 import {Text} from 'react-native';
 import {useStyle} from '../../styles';
+import {ItemLogo} from '../activities/msg-items/logo.tsx';
+import {MessageCustomIcon} from '../../components/icon/msg-custom.tsx';
 
 export const CustomIcon: FunctionComponent = () => {
+  const style = useStyle();
+
   return (
-    <ExpoImage.Image
-      style={{width: 48, height: 48}}
-      source={require('../../public/assets/img/sign/sign-custom.png')}
+    <ItemLogo
+      center={
+        <MessageCustomIcon
+          size={40}
+          color={style.get('color-gray-100').color}
+        />
+      }
     />
   );
 };

apps/mobile/src/screen/sign/delegate.tsx

@@ -6,10 +6,11 @@ import {Bech32Address} from '@keplr-wallet/cosmos';
 import {CoinPretty} from '@keplr-wallet/unit';
 import {FormattedMessage} from 'react-intl';
 import {IMessageRenderer} from './types';
-import * as ExpoImage from 'expo-image';
 import {useStore} from '../../stores';
 import {Text} from 'react-native';
 import {useStyle} from '../../styles';
+import {MessageDelegateIcon} from '../../components/icon';
+import {ItemLogo} from '../activities/msg-items/logo.tsx';
 
 export const DelegateMessage: IMessageRenderer = {
   process(chainId: string, msg) {
@@ -37,9 +38,8 @@ export const DelegateMessage: IMessageRenderer = {
     if (d) {
       return {
         icon: (
-          <ExpoImage.Image
-            style={{width: 48, height: 48}}
-            source={require('../../public/assets/img/sign/sign-delegate.png')}
+          <ItemLogo
+            center={<MessageDelegateIcon size={40} color="#DCDCE3" />}
           />
         ),
         title: (

apps/mobile/src/screen/sign/redelegate.tsx

@@ -8,9 +8,10 @@ import {CoinPretty} from '@keplr-wallet/unit';
 import {FormattedMessage} from 'react-intl';
 import {IMessageRenderer} from './types';
 import {useStore} from '../../stores';
-import * as ExpoImage from 'expo-image';
 import {Text} from 'react-native';
 import {useStyle} from '../../styles';
+import {MessageRedelegateIcon} from '../../components/icon';
+import {ItemLogo} from '../activities/msg-items/logo.tsx';
 
 export const RedelegateMessage: IMessageRenderer = {
   process(chainId: string, msg) {
@@ -40,9 +41,8 @@ export const RedelegateMessage: IMessageRenderer = {
     if (d) {
       return {
         icon: (
-          <ExpoImage.Image
-            style={{width: 48, height: 48}}
-            source={require('../../public/assets/img/sign/sign-delegate.png')}
+          <ItemLogo
+            center={<MessageRedelegateIcon size={40} color="#DCDCE3" />}
           />
         ),
         title: (

apps/mobile/src/screen/sign/renders/execute-contract.tsx

@@ -9,11 +9,12 @@ import {MsgExecuteContract as MsgExecuteSecretContract} from '@keplr-wallet/prot
 import {Buffer} from 'buffer/';
 import {WasmMessageView} from './wasm-message-view';
 import {FormattedMessage} from 'react-intl';
-import * as ExpoImage from 'expo-image';
 import {useStore} from '../../../stores';
 import {Gutter} from '../../../components/gutter';
 import {Text} from 'react-native';
 import {useStyle} from '../../../styles';
+import {MessageExecuteContractIcon} from '../../../components/icon';
+import {ItemLogo} from '../../activities/msg-items/logo.tsx';
 
 export const ExecuteContractMessage: IMessageRenderer = {
   process(chainId: string, msg) {
@@ -49,9 +50,8 @@ export const ExecuteContractMessage: IMessageRenderer = {
     if (d) {
       return {
         icon: (
-          <ExpoImage.Image
-            style={{width: 48, height: 48}}
-            source={require('../../../public/assets/img/sign/sign-execute-contract.png')}
+          <ItemLogo
+            center={<MessageExecuteContractIcon size={40} color="#DCDCE3" />}
           />
         ),
         title: (

apps/mobile/src/screen/sign/renders/vote.tsx

@@ -3,9 +3,10 @@ import React, {FunctionComponent} from 'react';
 import {MsgVote} from '@keplr-wallet/proto-types/cosmos/gov/v1beta1/tx';
 import {VoteOption} from '@keplr-wallet/proto-types/cosmos/gov/v1beta1/gov';
 import {FormattedMessage, useIntl} from 'react-intl';
-import * as ExpoImage from 'expo-image';
 import {Text} from 'react-native';
 import {useStyle} from '../../../styles';
+import {MessageVoteIcon} from '../../../components/icon';
+import {ItemLogo} from '../../activities/msg-items/logo.tsx';
 
 export const VoteMessage: IMessageRenderer = {
   process(chainId: string, msg) {
@@ -30,10 +31,7 @@ export const VoteMessage: IMessageRenderer = {
     if (d) {
       return {
         icon: (
-          <ExpoImage.Image
-            style={{width: 48, height: 48}}
-            source={require('../../../public/assets/img/sign/sign-vote.png')}
-          />
+          <ItemLogo center={<MessageVoteIcon size={40} color="#DCDCE3" />} />
         ),
         title: (
           <FormattedMessage id="page.sign.components.messages.vote.title" />

apps/mobile/src/screen/sign/send.tsx

@@ -5,11 +5,12 @@ import {observer} from 'mobx-react-lite';
 import {CoinPretty} from '@keplr-wallet/unit';
 import {Bech32Address} from '@keplr-wallet/cosmos';
 import {IMessageRenderer} from './types';
-import * as ExpoImage from 'expo-image';
 import {FormattedMessage} from 'react-intl';
 import {useStore} from '../../stores';
 import {Text} from 'react-native';
 import {useStyle} from '../../styles';
+import {MessageSendIcon} from '../../components/icon';
+import {ItemLogo} from '../activities/msg-items/logo.tsx';
 
 export const SendMessage: IMessageRenderer = {
   process(chainId: string, msg) {
@@ -34,10 +35,7 @@ export const SendMessage: IMessageRenderer = {
     if (d) {
       return {
         icon: (
-          <ExpoImage.Image
-            style={{width: 48, height: 48}}
-            source={require('../../public/assets/img/sign/sign-send.png')}
-          />
+          <ItemLogo center={<MessageSendIcon size={40} color="#DCDCE3" />} />
         ),
         title: (
           <FormattedMessage id="page.sign.components.messages.send.title" />

apps/mobile/src/screen/sign/sign-adr36-modal.tsx

@@ -10,11 +10,12 @@ import {Text} from 'react-native';
 import {useStyle} from '../../styles';
 import {BaseModalHeader} from '../../components/modal';
 import {FormattedMessage, useIntl} from 'react-intl';
-import * as ExpoImage from 'expo-image';
 import {Column, Columns} from '../../components/column';
 import {ViewDataButton} from './sign-modal';
 import {checkAndValidateADR36AminoSignDoc} from '@keplr-wallet/cosmos';
 import {ScrollView} from '../../components/scroll-view/common-scroll-view';
+import {ItemLogo} from '../activities/msg-items/logo.tsx';
+import {MessageAdr36Icon} from '../../components/icon/msg-adr36.tsx';
 
 export const ADR36SignModal = registerCardModal(
   observer<{
@@ -117,9 +118,13 @@ export const ADR36SignModal = registerCardModal(
           backgroundColor={style.get('color-gray-500').color}
           borderRadius={6}>
           <XAxis alignY="center">
-            <ExpoImage.Image
-              style={{width: 48, height: 48}}
-              source={require('../../public/assets/img/sign/sign-adr36.png')}
+            <ItemLogo
+              center={
+                <MessageAdr36Icon
+                  size={40}
+                  color={style.get('color-gray-100').color}
+                />
+              }
             />
 
             <Gutter size={12} />

apps/mobile/src/screen/sign/transfer.tsx

@@ -1,6 +1,5 @@
 import {IMessageRenderer} from './types.ts';
 import {MsgTransfer} from '@keplr-wallet/proto-types/ibc/applications/transfer/v1/tx';
-import * as ExpoImage from 'expo-image';
 import {FormattedMessage, useIntl} from 'react-intl';
 import React, {FunctionComponent, useState} from 'react';
 import {observer} from 'mobx-react-lite';
@@ -13,6 +12,8 @@ import {XAxis} from '../../components/axis';
 import {Button} from '../../components/button';
 import {Box} from '../../components/box';
 import {Gutter} from '../../components/gutter';
+import {MessageSendIcon} from '../../components/icon';
+import {ItemLogo} from '../activities/msg-items/logo.tsx';
 
 export const TransferMessage: IMessageRenderer = {
   process(chainId: string, msg) {
@@ -42,10 +43,7 @@ export const TransferMessage: IMessageRenderer = {
     if (d) {
       return {
         icon: (
-          <ExpoImage.Image
-            style={{width: 48, height: 48}}
-            source={require('../../public/assets/img/sign/sign-ibc-transfer.png')}
-          />
+          <ItemLogo center={<MessageSendIcon size={40} color="#DCDCE3" />} />
         ),
         title: (
           <FormattedMessage id="page.sign.components.messages.transfer.title" />

apps/mobile/src/screen/sign/undelegate.tsx

@@ -7,10 +7,11 @@ import {Coin} from '@keplr-wallet/types';
 import {CoinPretty} from '@keplr-wallet/unit';
 import {FormattedMessage} from 'react-intl';
 import {IMessageRenderer} from './types';
-import * as ExpoImage from 'expo-image';
 import {useStore} from '../../stores';
 import {Text} from 'react-native';
 import {useStyle} from '../../styles';
+import {MessageUndelegateIcon} from '../../components/icon';
+import {ItemLogo} from '../activities/msg-items/logo.tsx';
 
 export const UndelegateMessage: IMessageRenderer = {
   process(chainId: string, msg) {
@@ -36,9 +37,8 @@ export const UndelegateMessage: IMessageRenderer = {
     if (d) {
       return {
         icon: (
-          <ExpoImage.Image
-            style={{width: 48, height: 48}}
-            source={require('../../public/assets/img/sign/sign-delegate.png')}
+          <ItemLogo
+            center={<MessageUndelegateIcon size={40} color="#DCDCE3" />}
           />
         ),
         title: (