Merge pull request #5 from chainapsis/feature/sign-transaction

feature : disable input of sign transaction , improve ui, add color options
chainapsis · Apr 26, 2021 · e36919e · e36919e
2 parents 1658ec4 + 56b71dc
commit e36919e
Show file tree

Hide file tree

Showing 16 changed files with 416 additions and 43 deletions.
diff --git a/packages/mobile/src/components/buttons/default-button.tsx b/packages/mobile/src/components/buttons/default-button.tsx
@@ -6,12 +6,24 @@ import {
   GestureResponderEvent,
 } from "react-native";
 import { Button } from "react-native-elements";
-import { bw1, flex1, br1, px4, sf, buttonFont1, py3 } from "../../styles";
+import {
+  bw1,
+  flex1,
+  br1,
+  px4,
+  sf,
+  buttonFont1,
+  py3,
+  fcWhite,
+  bgcPrimary200,
+} from "../../styles";
 
 type DefalutButtonProps = {
   containerStyle?: StyleProp<ViewStyle>[];
   buttonStyle?: StyleProp<ViewStyle>[];
   titleStyle?: StyleProp<TextStyle>[];
+  disabledStyle?: StyleProp<ViewStyle>[];
+  disabledTitleStyle?: StyleProp<TextStyle>[];
   disabled?: boolean;
   loading?: boolean;
   title: string;
@@ -20,8 +32,10 @@ type DefalutButtonProps = {
 
 export const DefaultButton: FunctionComponent<DefalutButtonProps> = ({
   containerStyle = [],
-  buttonStyle = [],
   titleStyle = [],
+  buttonStyle = [],
+  disabledStyle = [],
+  disabledTitleStyle = [],
   title,
   disabled,
   loading,
@@ -33,9 +47,11 @@ export const DefaultButton: FunctionComponent<DefalutButtonProps> = ({
       buttonStyle={sf([bw1, br1, px4, py3, ...buttonStyle])}
       titleStyle={sf([buttonFont1, ...titleStyle])}
       title={title}
+      disabled={disabled}
+      disabledStyle={sf([bgcPrimary200, ...disabledStyle])}
+      disabledTitleStyle={sf([fcWhite, ...disabledTitleStyle])}
       onPress={onPress}
       loading={loading}
-      disabled={disabled}
     />
   );
 };
diff --git a/packages/mobile/src/components/buttons/white-button.tsx b/packages/mobile/src/components/buttons/white-button.tsx
@@ -23,12 +23,18 @@ import {
   bgcWhite,
   buttonFont1,
   py3,
+  bcPrimary200,
+  fcPrimary200,
+  bcSecondary200,
+  fcSecondary200,
 } from "../../styles";
 
 type WhiteButtonProps = {
   containerStyle?: StyleProp<ViewStyle>[];
   buttonStyle?: StyleProp<ViewStyle>[];
   titleStyle?: StyleProp<TextStyle>[];
+  disabledStyle?: StyleProp<ViewStyle>[];
+  disabledTitleStyle?: StyleProp<TextStyle>[];
   disabled?: boolean;
   loading?: boolean;
   color?: "primary" | "secondary" | "error" | "warning";
@@ -40,6 +46,8 @@ export const WhiteButton: FunctionComponent<WhiteButtonProps> = ({
   containerStyle = [],
   buttonStyle = [],
   titleStyle = [],
+  disabledStyle = [],
+  disabledTitleStyle = [],
   title,
   color,
   disabled,
@@ -61,6 +69,21 @@ export const WhiteButton: FunctionComponent<WhiteButtonProps> = ({
     }
   })();
 
+  const [disabledBorderColor, disabledFontColor] = (() => {
+    switch (color) {
+      case "primary":
+        return [bcPrimary200, fcPrimary200];
+      case "secondary":
+        return [bcSecondary200, fcSecondary200];
+      case "warning":
+        return [bcWarining, fcWarining];
+      case "error":
+        return [bcError, fcError];
+      default:
+        return [bcPrimary, fcPrimary];
+    }
+  })();
+
   return (
     <Button
       containerStyle={sf([flex1, ...containerStyle])}
@@ -75,9 +98,11 @@ export const WhiteButton: FunctionComponent<WhiteButtonProps> = ({
       ])}
       titleStyle={sf([fontColor, buttonFont1, ...titleStyle])}
       title={title}
+      disabled={disabled}
+      disabledStyle={sf([disabledBorderColor, bgcWhite, ...disabledStyle])}
+      disabledTitleStyle={sf([disabledFontColor, ...disabledTitleStyle])}
       onPress={onPress}
       loading={loading}
-      disabled={disabled}
     />
   );
 };
diff --git a/packages/mobile/src/components/form/fee-buttons.tsx b/packages/mobile/src/components/form/fee-buttons.tsx
@@ -6,7 +6,7 @@ import {
   NotLoadedFeeError,
 } from "@keplr-wallet/hooks";
 import { CoinGeckoPriceStore } from "@keplr-wallet/stores";
-import { ButtonGroup, Text, useTheme } from "react-native-elements";
+import { ButtonGroup, Text } from "react-native-elements";
 import { View } from "react-native";
 import {
   alignItemsCenter,
@@ -16,7 +16,7 @@ import {
   fcWhite,
   fcGrey2,
   flex1,
-  fs16,
+  subtitle2,
   justifyContentCenter,
   sf,
   mx0,
@@ -112,6 +112,7 @@ export const FeeButtons: FunctionComponent<FeeButtonsProps> = observer(
 
     return (
       <React.Fragment>
+        <Text style={subtitle2}>Fee</Text>
         <ButtonGroup
           containerStyle={sf([{ height: 90 }, mx0, mb0, shadow])}
           selectedIndex={selectedIndex}

diff --git a/packages/mobile/src/components/form/index.tsx b/packages/mobile/src/components/form/index.tsx
@@ -1,2 +1,4 @@
 export * from "./address-input";
 export * from "./coin-input";
+export * from "./fee-buttons";
+export * from "./memo-input";
diff --git a/packages/mobile/src/hooks/index.tsx b/packages/mobile/src/hooks/index.tsx
@@ -0,0 +1 @@
+export * from "./use-intersection-info";
diff --git a/packages/mobile/src/hooks/use-intersection-info.tsx b/packages/mobile/src/hooks/use-intersection-info.tsx
@@ -0,0 +1,21 @@
+import { useEffect, useRef } from "react";
+
+export const useInteractionInfo = (cleanUp?: () => void) => {
+  const cleanUpRef = useRef<(() => void) | undefined>(cleanUp);
+  cleanUpRef.current = cleanUp;
+
+  const result = {
+    interaction: "true",
+    interactionInternal: "true",
+  };
+
+  useEffect(() => {
+    return () => {
+      if (cleanUpRef.current) {
+        cleanUpRef.current();
+      }
+    };
+  }, []);
+
+  return result;
+};
diff --git a/packages/mobile/src/modals/index.tsx b/packages/mobile/src/modals/index.tsx
@@ -10,7 +10,7 @@ import {
   useSignDocAmountConfig,
   useSignDocHelper,
 } from "@keplr-wallet/hooks";
-import { Button, Input, Text } from "react-native-elements";
+import { Input, Text } from "react-native-elements";
 import {
   flexDirectionRow,
   justifyContentEnd,
@@ -23,6 +23,7 @@ import {
 import { DefaultButton, WhiteButton } from "../components/buttons";
 import { TransactionDetails } from "./transaction-details";
 import { Page } from "../components/page";
+import { useInteractionInfo } from "../hooks";
 
 export const ModalsRenderer: FunctionComponent = observer(() => {
   const {
@@ -33,6 +34,9 @@ export const ModalsRenderer: FunctionComponent = observer(() => {
     keyRingStore,
     signInteractionStore,
   } = useStore();
+  const interactionInfo = useInteractionInfo(() => {
+    signInteractionStore.rejectAll();
+  });
 
   const [password, setPassword] = useState("");
 
@@ -56,9 +60,24 @@ export const ModalsRenderer: FunctionComponent = observer(() => {
   );
   const memoConfig = useMemoConfig(chainStore, current.chainId);
 
+  const signDocWapper = signInteractionStore.waitingData?.data.signDocWrapper;
   const signDocHelper = useSignDocHelper(feeConfig, memoConfig);
   amountConfig.setSignDocHelper(signDocHelper);
 
+  const isSignDocInternalSend = (() => {
+    if (signDocWapper && signDocWapper.mode === "amino") {
+      const signDoc = signDocWapper.aminoSignDoc;
+      return (
+        interactionInfo.interaction &&
+        interactionInfo.interactionInternal &&
+        signDoc.msgs.length === 1 &&
+        (signDoc.msgs[0].type === "cosmos-sdk/MsgSend" ||
+          signDoc.msgs[0].type === "cosmos-sdk/MsgTransfer")
+      );
+    }
+    return false;
+  })();
+
   useEffect(() => {
     if (signInteractionStore.waitingData) {
       const data = signInteractionStore.waitingData;
@@ -69,8 +88,12 @@ export const ModalsRenderer: FunctionComponent = observer(() => {
     }
   }, [gasConfig, memoConfig, signDocHelper, signInteractionStore.waitingData]);
 
-  feeConfig.setFeeType("average");
+  const [
+    isLoadingSignDocInternalSend,
+    setIsLoadingSignDocInternalSend,
+  ] = useState(false);
 
+  const disableInputs = isSignDocInternalSend || isLoadingSignDocInternalSend;
   return (
     <React.Fragment>
       <Modal
@@ -89,7 +112,7 @@ export const ModalsRenderer: FunctionComponent = observer(() => {
                   value={password}
                   onChangeText={setPassword}
                 />
-                <Button
+                <DefaultButton
                   title="Unlock"
                   onPress={async () => {
                     await keyRingStore.unlock(password);
@@ -113,6 +136,7 @@ export const ModalsRenderer: FunctionComponent = observer(() => {
                   memoConfig={memoConfig}
                   feeConfig={feeConfig}
                   gasConfig={gasConfig}
+                  disableInputs={disableInputs}
                 />
                 <View style={flexDirectionRow}>
                   <WhiteButton

diff --git a/packages/mobile/src/modals/transaction-details.tsx b/packages/mobile/src/modals/transaction-details.tsx
@@ -32,6 +32,7 @@ import {
   px2,
 } from "../styles";
 import Icon from "react-native-vector-icons/Feather";
+import { MemoInput, FeeButtons } from "../components/form";
 
 export const TransactionDetails: FunctionComponent<{
   signDocHelper: SignDocHelper;
@@ -97,18 +98,26 @@ export const TransactionDetails: FunctionComponent<{
         <ScrollView style={sf([cardStyle, px2, mb2])}>
           {renderedMsgs}
         </ScrollView>
-        <View style={mb3}>
-          <Text style={sf([subtitle2, mb2])}>Memo</Text>
-          <Text style={subtitle1}>
-            {memoConfig.memo ? memoConfig.memo : "(No memo)"}
-          </Text>
-        </View>
-        <View style={mb3}>
-          <Text style={sf([subtitle2, mb2])}>Fee</Text>
-          <Text style={subtitle1}>
-            {feeConfig.fee.maxDecimals(6).trim(true).toString()}
-          </Text>
-        </View>
+        {!disableInputs ? (
+          <MemoInput memoConfig={memoConfig} />
+        ) : (
+          <View style={mb3}>
+            <Text style={sf([subtitle2, mb2])}>Memo</Text>
+            <Text style={subtitle1}>
+              {memoConfig.memo ? memoConfig.memo : "(No memo)"}
+            </Text>
+          </View>
+        )}
+        {!disableInputs ? (
+          <FeeButtons feeConfig={feeConfig} priceStore={priceStore} />
+        ) : (
+          <View style={mb3}>
+            <Text style={sf([subtitle2, mb2])}>Fee</Text>
+            <Text style={subtitle1}>
+              {feeConfig.fee.maxDecimals(6).trim(true).toString()}
+            </Text>
+          </View>
+        )}
       </React.Fragment>
     );
   }

diff --git a/packages/mobile/src/screens/governance/voting-button.tsx b/packages/mobile/src/screens/governance/voting-button.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useEffect, useState } from "react";
-import { Button, Text } from "react-native-elements";
+import { Text } from "react-native-elements";
 
 import { observer } from "mobx-react-lite";
 import { StyleProp, View, ViewProps } from "react-native";
@@ -92,7 +92,7 @@ export const VotingButton: FunctionComponent<{
       }}
     >
       {isOpenVoteModal === false ? (
-        <Button
+        <DefaultButton
           title={statusText}
           onPress={() => {
             setOpenVoteModal(true);
@@ -117,7 +117,7 @@ export const VotingButton: FunctionComponent<{
             />
             <DefaultButton
               title="Confirm"
-              onPress={async (e) => {
+              onPress={async () => {
                 await sendGovVoteMsg();
               }}
               loading={accountInfo.isSendingMsg === "govVote"}

diff --git a/packages/mobile/src/screens/register/index.tsx b/packages/mobile/src/screens/register/index.tsx
@@ -1,11 +1,12 @@
 import React, { FunctionComponent, useState } from "react";
-import { Button, Input } from "react-native-elements";
+import { Input } from "react-native-elements";
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../stores";
 import { useRegisterConfig } from "@keplr-wallet/hooks";
 import { getRandomBytesAsync } from "../../common";
 import { useNavigation, StackActions } from "@react-navigation/native";
 import { Page } from "../../components/page";
+import { DefaultButton } from "../../components/buttons";
 
 export const RegisterScreen: FunctionComponent = observer(() => {
   const navigation = useNavigation();
@@ -41,7 +42,7 @@ export const RegisterScreen: FunctionComponent = observer(() => {
         multiline={true}
         numberOfLines={5}
       />
-      <Button
+      <DefaultButton
         title="Create"
         onPress={async () => {
           await registerConfig.createMnemonic(name, mnemonic, password, {
@@ -50,9 +51,6 @@ export const RegisterScreen: FunctionComponent = observer(() => {
             addressIndex: 0,
           });
 
-          // TODO: Remove this!!
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
           accountStore.getAccount(chainId).init();
 
           navigation.dispatch(StackActions.replace("Home"));

diff --git a/packages/mobile/src/screens/send/index.tsx b/packages/mobile/src/screens/send/index.tsx
@@ -1,17 +1,18 @@
 /* eslint-disable react/display-name */
 import React, { FunctionComponent } from "react";
 import { observer } from "mobx-react-lite";
-import { Text } from "react-native-elements";
 import { useStore } from "../../stores";
 import { useSendTxConfig } from "@keplr-wallet/hooks";
 import { DefaultButton } from "../../components/buttons";
 import { Page } from "../../components/page";
 import { createStackNavigator } from "@react-navigation/stack";
-import { AddressInput, CoinInput } from "../../components/form";
-import { FeeButtons } from "../../components/form/fee-buttons";
+import {
+  AddressInput,
+  CoinInput,
+  MemoInput,
+  FeeButtons,
+} from "../../components/form";
 import { GradientBackground } from "../../components/svg";
-import { MemoInput } from "../../components/form/memo-input";
-import { subtitle2 } from "../../styles";
 
 const SendStack = createStackNavigator();
 
@@ -59,7 +60,6 @@ const SendScreen: FunctionComponent = observer(() => {
         feeConfig={sendConfigs.feeConfig}
       />
       <MemoInput memoConfig={sendConfigs.memoConfig} />
-      <Text style={subtitle2}>Fee</Text>
       <FeeButtons feeConfig={sendConfigs.feeConfig} priceStore={priceStore} />
       <DefaultButton
         title="Submit"