Merge pull request #1153 from chainapsis/Heesung/KEPLR-236

[KEPLR-236, `Mobile`] Add token detail screen
chainapsis · Jul 12, 2024 · 9e03eda · 9e03eda
2 parents 7e95ea1 + 3ee221f
commit 9e03eda
Show file tree

Hide file tree

Showing 40 changed files with 1,593 additions and 395 deletions.
diff --git a/apps/mobile/src/components/icon/index.ts b/apps/mobile/src/components/icon/index.ts
@@ -33,3 +33,13 @@ export * from './plus';
 export * from './home-filled';
 export * from './home-outlined';
 export * from './setting-outlined';
+
+export * from './msg-send';
+export * from './msg-receive';
+export * from './msg-claim-reward';
+export * from './msg-delegate';
+export * from './msg-undelegate';
+export * from './msg-redelegate';
+export * from './msg-cancel-undelegate';
+export * from './msg-swap';
+export * from './msg-vote';
diff --git a/apps/mobile/src/components/icon/msg-cancel-undelegate.tsx b/apps/mobile/src/components/icon/msg-cancel-undelegate.tsx
@@ -0,0 +1,30 @@
+import React, {FunctionComponent} from 'react';
+import {IconProps} from './types';
+import {ClipPath, Defs, G, Path, Rect, Svg} from 'react-native-svg';
+
+export const MessageCancelUndelegateIcon: FunctionComponent<IconProps> = ({
+  size,
+  color,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <G clipPath="url(#clip0_95_1759)">
+        <Path
+          d="M14.25 14.25L17.75 17.75M17.75 14.25L14.25 17.75M23 16C23 19.866 19.866 23 16 23C12.134 23 9 19.866 9 16C9 12.134 12.134 9 16 9C19.866 9 23 12.134 23 16Z"
+          stroke={color || 'currentColor'}
+        />
+      </G>
+
+      <Defs>
+        <ClipPath id="clip0_95_1759">
+          <Rect
+            width="16"
+            height="16"
+            fill="white"
+            transform="translate(8 8)"
+          />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+};
diff --git a/apps/mobile/src/components/icon/msg-claim-reward.tsx b/apps/mobile/src/components/icon/msg-claim-reward.tsx
@@ -0,0 +1,20 @@
+import React, {FunctionComponent} from 'react';
+import {IconProps} from './types';
+import {Path, Svg} from 'react-native-svg';
+
+export const MessageClaimRewardIcon: FunctionComponent<IconProps> = ({
+  size,
+  color,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <Path
+        d="M13.7246 13.4909L15.4566 10.0029C15.507 9.90195 15.5846 9.81705 15.6805 9.75771C15.7765 9.69836 15.8871 9.66693 16 9.66693C16.1128 9.66693 16.2234 9.69836 16.3194 9.75771C16.4153 9.81705 16.4929 9.90195 16.5433 10.0029L18.2753 13.4909L22.1473 14.0536C22.259 14.069 22.3641 14.1156 22.4505 14.188C22.537 14.2603 22.6014 14.3555 22.6364 14.4627C22.6713 14.5699 22.6755 14.6848 22.6483 14.7942C22.6211 14.9036 22.5637 15.0032 22.4826 15.0816L19.6813 17.7949L20.3426 21.6282C20.4273 22.1202 19.9073 22.4949 19.4626 22.2629L16 20.4522L12.5366 22.2629C12.0926 22.4956 11.5726 22.1202 11.6573 21.6276L12.3186 17.7942L9.51729 15.0809C9.43661 15.0025 9.37955 14.903 9.3526 14.7938C9.32564 14.6845 9.32987 14.5699 9.3648 14.463C9.39973 14.356 9.46397 14.261 9.5502 14.1888C9.63644 14.1165 9.74121 14.0699 9.85262 14.0542L13.7246 13.4909Z"
+        stroke={color || 'currentColor'}
+        stroke-width="0.933333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
diff --git a/apps/mobile/src/components/icon/msg-delegate.tsx b/apps/mobile/src/components/icon/msg-delegate.tsx
@@ -0,0 +1,47 @@
+import React, {FunctionComponent} from 'react';
+import {IconProps} from './types';
+import {ClipPath, Defs, G, Path, Rect, Svg} from 'react-native-svg';
+
+export const MessageDelegateIcon: FunctionComponent<IconProps> = ({
+  size,
+  color,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <G clipPath="url(#clip0_95_1631)">
+        <Path
+          d="M15.0453 10.7197C15.637 10.3819 16.363 10.3819 16.9547 10.7197L20.7831 12.9054C21.3209 13.2124 21.3209 13.9878 20.7831 14.2949L16.9547 16.4806C16.363 16.8183 15.637 16.8183 15.0453 16.4806L11.2169 14.2949C10.6791 13.9878 10.6791 13.2124 11.2169 12.9054L15.0453 10.7197Z"
+          stroke={color || 'currentColor'}
+        />
+
+        <Path
+          d="M10.9664 16.7003L15.0454 19.0291C15.637 19.3668 16.3631 19.3668 16.9547 19.0291L17.6667 18.6226L19.3334 17.6667"
+          stroke={color || 'currentColor'}
+          strokeLinecap="round"
+        />
+
+        <Path
+          d="M10.9663 19.2357L15.0453 21.5645C15.6369 21.9022 16.363 21.9022 16.9546 21.5645L17.6666 21.158"
+          stroke={color || 'currentColor'}
+          strokeLinecap="round"
+        />
+
+        <Path
+          d="M21.4667 17.8C21.4667 17.5422 21.2578 17.3333 21 17.3333C20.7423 17.3333 20.5334 17.5422 20.5334 17.8V19.2H19.1334C18.8756 19.2 18.6667 19.4089 18.6667 19.6666C18.6667 19.9244 18.8756 20.1333 19.1334 20.1333H20.5334V21.5333C20.5334 21.791 20.7423 22 21 22C21.2578 22 21.4667 21.791 21.4667 21.5333V20.1333H22.8667C23.1244 20.1333 23.3334 19.9244 23.3334 19.6666C23.3334 19.4089 23.1244 19.2 22.8667 19.2H21.4667V17.8Z"
+          fill={color || 'currentColor'}
+        />
+      </G>
+
+      <Defs>
+        <ClipPath id="clip0_95_1631">
+          <Rect
+            width="16"
+            height="16"
+            fill="white"
+            transform="translate(8 8)"
+          />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+};
diff --git a/apps/mobile/src/components/icon/msg-receive.tsx b/apps/mobile/src/components/icon/msg-receive.tsx
@@ -0,0 +1,19 @@
+import React, {FunctionComponent} from 'react';
+import {IconProps} from './types';
+import {Path, Svg} from 'react-native-svg';
+
+export const MessageReceiveIcon: FunctionComponent<IconProps> = ({
+  size,
+  color,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <Path
+        d="M20.5834 11.4167L11.4167 20.5834M11.4167 20.5834L18.2917 20.5834M11.4167 20.5834L11.4167 13.7084"
+        stroke={color || 'currentColor'}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
diff --git a/apps/mobile/src/components/icon/msg-redelegate.tsx b/apps/mobile/src/components/icon/msg-redelegate.tsx
@@ -0,0 +1,49 @@
+import React, {FunctionComponent} from 'react';
+import {IconProps} from './types';
+import {ClipPath, Defs, G, Path, Rect, Svg} from 'react-native-svg';
+
+export const MessageRedelegateIcon: FunctionComponent<IconProps> = ({
+  size,
+  color,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <G clipPath="url(#clip0_95_1634)">
+        <Path
+          d="M15.0453 10.7197C15.6369 10.3819 16.363 10.3819 16.9546 10.7197L20.783 12.9054C21.3209 13.2124 21.3209 13.9878 20.783 14.2949L16.9546 16.4806C16.363 16.8183 15.6369 16.8183 15.0453 16.4806L11.2169 14.2949C10.6791 13.9878 10.6791 13.2124 11.2169 12.9054L15.0453 10.7197Z"
+          stroke={color || 'currentColor'}
+        />
+
+        <Path
+          d="M10.9664 16.7003L15.0454 19.0291C15.637 19.3668 16.3631 19.3668 16.9547 19.0291L17.5895 18.6667L17.9135 18.4817"
+          stroke={color || 'currentColor'}
+          strokeLinecap="round"
+        />
+
+        <Path
+          d="M10.9663 19.2357L15.0453 21.5645C15.637 21.9022 16.363 21.9022 16.9546 21.5645L17.6667 21.158"
+          stroke={color || 'currentColor'}
+          strokeLinecap="round"
+        />
+
+        <Path
+          d="M21.6269 16.1269C21.7961 15.9577 22.0705 15.9577 22.2397 16.1269L23.4064 17.2936C23.4877 17.3749 23.5333 17.4851 23.5333 17.6C23.5333 17.7149 23.4877 17.8251 23.4064 17.9064L22.2397 19.0731C22.0705 19.2423 21.7961 19.2423 21.6269 19.0731C21.4577 18.9039 21.4577 18.6295 21.6269 18.4603L22.0538 18.0333H19.6C19.3607 18.0333 19.1667 17.8393 19.1667 17.6C19.1667 17.3607 19.3607 17.1667 19.6 17.1667L22.0538 17.1667L21.6269 16.7397C21.4577 16.5705 21.4577 16.2961 21.6269 16.1269ZM20.5731 18.4603C20.7423 18.6295 20.7423 18.9039 20.5731 19.0731L20.1461 19.5H22.6C22.8393 19.5 23.0333 19.694 23.0333 19.9333C23.0333 20.1727 22.8393 20.3667 22.6 20.3667H20.1461L20.5731 20.7936C20.7423 20.9628 20.7423 21.2372 20.5731 21.4064C20.4038 21.5756 20.1295 21.5756 19.9602 21.4064L18.7936 20.2397C18.6243 20.0705 18.6243 19.7961 18.7936 19.6269L19.9602 18.4603C20.1295 18.291 20.4038 18.291 20.5731 18.4603Z"
+          fill={color || 'currentColor'}
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      </G>
+
+      <Defs>
+        <ClipPath id="clip0_95_1634">
+          <Rect
+            width="16"
+            height="16"
+            fill="white"
+            transform="translate(8 8)"
+          />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+};
diff --git a/apps/mobile/src/components/icon/msg-send.tsx b/apps/mobile/src/components/icon/msg-send.tsx
@@ -0,0 +1,19 @@
+import React, {FunctionComponent} from 'react';
+import {IconProps} from './types';
+import {Path, Svg} from 'react-native-svg';
+
+export const MessageSendIcon: FunctionComponent<IconProps> = ({
+  size,
+  color,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <Path
+        d="M11.4167 20.5834L20.5834 11.4167M20.5834 11.4167L13.7084 11.4167M20.5834 11.4167V18.2917"
+        stroke={color || 'currentColor'}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
diff --git a/apps/mobile/src/components/icon/msg-swap.tsx b/apps/mobile/src/components/icon/msg-swap.tsx
@@ -0,0 +1,19 @@
+import React, {FunctionComponent} from 'react';
+import {IconProps} from './types';
+import {Path, Svg} from 'react-native-svg';
+
+export const MessageSwapIcon: FunctionComponent<IconProps> = ({
+  size,
+  color,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <Path
+        d="M13 22.0001L10 19.0001M10 19.0001L13 16.0001M10 19.0001H19M19 10.0001L22 13.0001M22 13.0001L19 16.0001M22 13.0001L13 13.0001"
+        stroke={color || 'currentColor'}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
diff --git a/apps/mobile/src/components/icon/msg-undelegate.tsx b/apps/mobile/src/components/icon/msg-undelegate.tsx
@@ -0,0 +1,49 @@
+import React, {FunctionComponent} from 'react';
+import {IconProps} from './types';
+import {ClipPath, Defs, G, Path, Rect, Svg} from 'react-native-svg';
+
+export const MessageUndelegateIcon: FunctionComponent<IconProps> = ({
+  size,
+  color,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <G clipPath="url(#clip0_95_1640)">
+        <Path
+          d="M15.0453 10.7197C15.6369 10.3819 16.363 10.3819 16.9546 10.7197L20.783 12.9054C21.3209 13.2124 21.3209 13.9878 20.783 14.2949L16.9546 16.4806C16.363 16.8183 15.6369 16.8183 15.0453 16.4806L11.2169 14.2949C10.6791 13.9878 10.6791 13.2124 11.2169 12.9054L15.0453 10.7197Z"
+          stroke={color || 'currentColor'}
+        />
+
+        <Path
+          d="M21.0337 16.7003L16.9547 19.0291C16.3631 19.3668 15.637 19.3668 15.0454 19.0291L10.9664 16.7003"
+          stroke={color || 'currentColor'}
+          strokeLinecap="round"
+        />
+
+        <Path
+          d="M10.9663 19.2357L15.0453 21.5644C15.6369 21.9022 16.363 21.9022 16.9546 21.5644L17.5321 21.2347"
+          stroke={color || 'currentColor'}
+          strokeLinecap="round"
+        />
+
+        <Path
+          d="M22.8666 19.902C22.8666 20.1782 22.6458 20.402 22.3733 20.402L19.3334 20.402C19.0609 20.402 18.84 20.1782 18.84 19.902C18.84 19.6259 19.0609 19.402 19.3334 19.402L22.3733 19.402C22.6458 19.402 22.8666 19.6259 22.8666 19.902Z"
+          fill={color || 'currentColor'}
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      </G>
+
+      <Defs>
+        <ClipPath id="clip0_95_1631">
+          <Rect
+            width="16"
+            height="16"
+            fill="white"
+            transform="translate(8 8)"
+          />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+};
diff --git a/apps/mobile/src/components/icon/msg-vote.tsx b/apps/mobile/src/components/icon/msg-vote.tsx
@@ -0,0 +1,43 @@
+import React, {FunctionComponent} from 'react';
+import {IconProps} from './types';
+import {ClipPath, Defs, G, Path, Rect, Svg} from 'react-native-svg';
+
+export const MessageVoteIcon: FunctionComponent<IconProps> = ({
+  size,
+  color,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <G clipPath="url(#clip0_95_1637)">
+        <Path
+          d="M12.9107 12.8651L11.1434 13.874C10.6539 14.1535 10.6539 14.8593 11.1434 15.1387L15.0811 17.3868C15.6196 17.6942 16.2804 17.6942 16.8189 17.3868L20.7566 15.1387C21.2461 14.8593 21.2461 14.1535 20.7566 13.874L18.7827 12.7471"
+          stroke={color || 'currentColor'}
+        />
+
+        <Path
+          d="M10.8537 14.835V20.0038C10.8537 20.322 11.0261 20.6151 11.3042 20.7697L15.0994 22.8792C15.6284 23.1732 16.2717 23.1735 16.8009 22.8799L20.0592 21.0723"
+          stroke={color || 'currentColor'}
+          strokeLinecap="round"
+        />
+
+        <Path
+          d="M19.4239 8.92963C19.6377 9.10449 19.6692 9.4195 19.4943 9.63323L16.274 13.8166C16.1803 13.9311 16.0407 13.9983 15.8927 14C15.7448 14.0017 15.6037 13.9377 15.5074 13.8254L13.0537 11C12.874 10.7903 12.8983 10.4747 13.1079 10.295C13.3176 10.1153 13.6332 10.1396 13.813 10.3492L15.8781 12.7213L18.7203 8.99999C18.8952 8.78626 19.2102 8.75476 19.4239 8.92963Z"
+          fill={color || 'currentColor'}
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      </G>
+
+      <Defs>
+        <ClipPath id="clip0_95_1637">
+          <Rect
+            width="16"
+            height="16"
+            fill="white"
+            transform="translate(8 8)"
+          />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+};
diff --git a/apps/mobile/src/components/pageHeader/header.tsx b/apps/mobile/src/components/pageHeader/header.tsx
@@ -114,7 +114,7 @@ const DefaultScreenHeaderTitle: FunctionComponent<PropsWithChildren> = ({
     </Text>
   );
 };
-const DefaultScreenHeaderLeft: FunctionComponent = () => {
+export const DefaultScreenHeaderLeft: FunctionComponent = () => {
   const style = useStyle();
   const nav = useNavigation();
   const isSettingIntro =