Merge pull request #4 from chainapsis/feature/ui-improve

feat : refactor styles and uncompleted notification and sign transaction

.eslintignore

@@ -0,0 +1,16 @@
+**/*.scss
+**/*.html
+**/*.json
+**/*.png
+**/*.svg
+**/*.ttf
+**/*.secret
+**/*.md
+.DS_Store
+
+node_modules
+
+dist/*
+prod/*
+
+yarn.lock

.prettierignore

@@ -0,0 +1,14 @@
+@@ -1,11 +0,0 @@
+**/*.png
+**/*.svg
+**/*.ttf
+**/*.secret
+**/*.md
+.DS_Store
+
+node_modules
+
+dist/*
+prod/*
+
+yarn.lock

package.json

@@ -30,11 +30,18 @@
     "lint-fix": "lerna run lint-fix",
     "ci": "yarn install --frozen-lockfile && yarn build && yarn test",
     "ci-lint": "yarn install --frozen-lockfile && yarn lint-test",
-    "ci-publish": "yarn clean && yarn install --frozen-lockfile && lerna run build --ignore @keplr/extension && lerna publish from-git --yes"
+    "ci-publish": "yarn clean && yarn install --frozen-lockfile && lerna run build --ignore @keplr/extension && lerna publish from-git --yes",
+    "pre-commit": "lint-staged"
   },
   "pre-commit": [
-    "lint-test"
+    "pre-commit"
   ],
+  "lint-staged": {
+    "*": [
+      "eslint",
+      "prettier --check"
+    ]
+  },
   "keywords": [],
   "author": "chainapsis",
   "license": "Apache-2.0",
@@ -51,6 +58,7 @@
     "eslint-plugin-react-hooks": "^2.0.1",
     "eslint-plugin-unicorn": "^24.0.0",
     "lerna": "^3.22.1",
+    "lint-staged": "^10.5.4",
     "pre-commit": "^1.2.2",
     "prettier": "^2.2.1",
     "ts-loader": "^8.0.14",

packages/mobile/package.json

@@ -24,6 +24,7 @@
     "@keplr-wallet/router": "0.8.0",
     "@keplr-wallet/stores": "0.8.2-rc.0",
     "@keplr-wallet/types": "0.8.2-rc.0",
+    "@keplr-wallet/unit": "0.8.2-rc.0",
     "@react-native-async-storage/async-storage": "^1.14.1",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-native-picker/picker": "^1.12.0",

packages/mobile/src/app.tsx

@@ -2,12 +2,20 @@ import React, { FunctionComponent } from "react";
 import { StoreProvider } from "./stores";
 import { AppNavigation } from "./navigation";
 import { GlobalThemeProvider } from "./global-theme";
+import {
+  NotificationProvider,
+  NotificationStoreProvider,
+} from "./components/notification";
 
 export const App: FunctionComponent = () => {
   return (
     <GlobalThemeProvider>
       <StoreProvider>
-        <AppNavigation />
+        <NotificationStoreProvider>
+          <NotificationProvider>
+            <AppNavigation />
+          </NotificationProvider>
+        </NotificationStoreProvider>
       </StoreProvider>
     </GlobalThemeProvider>
   );

packages/mobile/src/components/address/index.tsx

@@ -3,6 +3,7 @@ import React, { FunctionComponent } from "react";
 import { Text } from "react-native-elements";
 import { View } from "react-native";
 import { Bech32Address } from "@keplr-wallet/cosmos";
+import { bcGray, br3, bw1, caption1, px4, sf } from "../../styles";
 
 export interface AddressProps {
   maxCharacters: number;
@@ -14,16 +15,10 @@ export const Address: FunctionComponent<AddressProps> = ({
   address,
 }) => {
   return (
-    <View
-      accessible
-      style={{
-        borderRadius: 100,
-        borderWidth: 1,
-        borderColor: "#e6e6e6",
-        paddingHorizontal: 16,
-      }}
-    >
-      <Text>{Bech32Address.shortenAddress(address, maxCharacters)}</Text>
+    <View accessible style={sf([bw1, bcGray, px4, br3])}>
+      <Text style={caption1}>
+        {Bech32Address.shortenAddress(address, maxCharacters)}
+      </Text>
     </View>
   );
 };

packages/mobile/src/components/buttons/default-button.tsx

@@ -6,43 +6,32 @@ import {
   GestureResponderEvent,
 } from "react-native";
 import { Button } from "react-native-elements";
+import { bw1, flex1, br1, px4, sf, buttonFont1, py3 } from "../../styles";
 
 type DefalutButtonProps = {
-  containerStyle?: StyleProp<ViewStyle>;
-  buttonStyle?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>[];
+  buttonStyle?: StyleProp<ViewStyle>[];
+  titleStyle?: StyleProp<TextStyle>[];
   disabled?: boolean;
   loading?: boolean;
   title: string;
   onPress?: (event: GestureResponderEvent) => void;
 };
 
 export const DefaultButton: FunctionComponent<DefalutButtonProps> = ({
-  containerStyle,
-  buttonStyle,
-  titleStyle,
+  containerStyle = [],
+  buttonStyle = [],
+  titleStyle = [],
   title,
   disabled,
   loading,
   onPress,
 }) => {
   return (
     <Button
-      containerStyle={{
-        flex: 1,
-        ...(containerStyle as Record<string, unknown>),
-      }}
-      buttonStyle={{
-        borderWidth: 1,
-        borderRadius: 8,
-        paddingVertical: 10,
-        paddingHorizontal: 20,
-        ...(buttonStyle as Record<string, unknown>),
-      }}
-      titleStyle={{
-        fontWeight: "500",
-        ...(titleStyle as Record<string, unknown>),
-      }}
+      containerStyle={sf([flex1, ...containerStyle])}
+      buttonStyle={sf([bw1, br1, px4, py3, ...buttonStyle])}
+      titleStyle={sf([buttonFont1, ...titleStyle])}
       title={title}
       onPress={onPress}
       loading={loading}

packages/mobile/src/components/buttons/white-button.tsx

@@ -5,12 +5,30 @@ import {
   ViewStyle,
   GestureResponderEvent,
 } from "react-native";
-import { Button, useTheme } from "react-native-elements";
+import { Button } from "react-native-elements";
+import {
+  bw1,
+  flex1,
+  br1,
+  px4,
+  sf,
+  bcPrimary,
+  fcPrimary,
+  bcSecondary,
+  fcSecondary,
+  bcWarining,
+  fcWarining,
+  bcError,
+  fcError,
+  bgcWhite,
+  buttonFont1,
+  py3,
+} from "../../styles";
 
 type WhiteButtonProps = {
-  containerStyle?: StyleProp<ViewStyle>;
-  buttonStyle?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>[];
+  buttonStyle?: StyleProp<ViewStyle>[];
+  titleStyle?: StyleProp<TextStyle>[];
   disabled?: boolean;
   loading?: boolean;
   color?: "primary" | "secondary" | "error" | "warning";
@@ -19,52 +37,43 @@ type WhiteButtonProps = {
 };
 
 export const WhiteButton: FunctionComponent<WhiteButtonProps> = ({
-  containerStyle,
-  buttonStyle,
-  titleStyle,
+  containerStyle = [],
+  buttonStyle = [],
+  titleStyle = [],
   title,
   color,
   disabled,
   loading,
   onPress,
 }) => {
-  const { theme } = useTheme();
-
-  const themeColor = (() => {
+  const [borderColor, fontColor] = (() => {
     switch (color) {
       case "primary":
-        return theme.colors?.primary;
+        return [bcPrimary, fcPrimary];
       case "secondary":
-        return theme.colors?.secondary;
+        return [bcSecondary, fcSecondary];
       case "warning":
-        return theme.colors?.warning;
+        return [bcWarining, fcWarining];
       case "error":
-        return theme.colors?.error;
+        return [bcError, fcError];
       default:
-        return theme.colors?.primary;
+        return [bcPrimary, fcPrimary];
     }
   })();
 
   return (
     <Button
-      containerStyle={{
-        flex: 1,
-        ...(containerStyle as Record<string, unknown>),
-      }}
-      buttonStyle={{
-        borderWidth: 1,
-        borderColor: themeColor,
-        borderRadius: 8,
-        backgroundColor: theme.colors?.white,
-        paddingVertical: 10,
-        paddingHorizontal: 20,
-        ...(buttonStyle as Record<string, unknown>),
-      }}
-      titleStyle={{
-        color: themeColor,
-        fontWeight: "500",
-        ...(titleStyle as Record<string, unknown>),
-      }}
+      containerStyle={sf([flex1, ...containerStyle])}
+      buttonStyle={sf([
+        borderColor,
+        bgcWhite,
+        bw1,
+        br1,
+        px4,
+        py3,
+        ...buttonStyle,
+      ])}
+      titleStyle={sf([fontColor, buttonFont1, ...titleStyle])}
       title={title}
       onPress={onPress}
       loading={loading}