Skip to content

Commit

Permalink
feat: approver ux ui
Browse files Browse the repository at this point in the history
  • Loading branch information
edgarkhanzadian committed Nov 15, 2024
1 parent f7ec61c commit 987caea
Show file tree
Hide file tree
Showing 70 changed files with 1,694 additions and 187 deletions.
100 changes: 50 additions & 50 deletions apps/mobile/ios/Podfile.lock

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions apps/mobile/ios/leatherwalletmobile.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,17 @@
13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
1B12FD95F6504898B7BE8160 /* FiraCode-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = B66C2888E3BB47F7A5A88DEB /* FiraCode-Medium.otf */; };
297A611EBADB4ED0B158576E /* ABCDiatype-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = F520EA8A657049D4A3392B8B /* ABCDiatype-Regular.otf */; };
322D7CDF54DE4002AED225F1 /* ABCDiatype-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = 6B54D2785B5E48D281A8E3C8 /* ABCDiatype-Medium.otf */; };
3319885B547C452A9C635C5C /* ABCDiatype-Light.otf in Resources */ = {isa = PBXBuildFile; fileRef = A6CFA460F0F340ED95800EF2 /* ABCDiatype-Light.otf */; };
3735F5722A7145C19BC65634 /* noop-file.swift in Sources */ = {isa = PBXBuildFile; fileRef = 17F703D94F4B4BAE9007DC30 /* noop-file.swift */; };
3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */; };
639E76F5C6DD4F95BB83688D /* FiraCode-Retina.otf in Resources */ = {isa = PBXBuildFile; fileRef = 76B2513BA2D94EB6BA0D6194 /* FiraCode-Retina.otf */; };
96905EF65AED1B983A6B3ABC /* libPods-leatherwalletmobile.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58EEBF8E8E6FB1BC6CAF49B5 /* libPods-leatherwalletmobile.a */; };
B18059E884C0ABDD17F3DC3D /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */; };
BB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; };
EC07C78F575D4480A1321AFF /* SpaceMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3F6687E7CB2942B0929D7833 /* SpaceMono-Regular.ttf */; };
639E76F5C6DD4F95BB83688D /* FiraCode-Retina.otf in Resources */ = {isa = PBXBuildFile; fileRef = 76B2513BA2D94EB6BA0D6194 /* FiraCode-Retina.otf */; };
1B12FD95F6504898B7BE8160 /* FiraCode-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = B66C2888E3BB47F7A5A88DEB /* FiraCode-Medium.otf */; };
/* End PBXBuildFile section */

/* Begin PBXFileReference section */
Expand All @@ -37,16 +37,16 @@
6B54D2785B5E48D281A8E3C8 /* ABCDiatype-Medium.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ABCDiatype-Medium.otf"; path = "../node_modules/@leather.io/ui/src/assets-native/fonts/ABCDiatype-Medium.otf"; sourceTree = "<group>"; };
6C2E3173556A471DD304B334 /* Pods-leatherwalletmobile.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-leatherwalletmobile.debug.xcconfig"; path = "Target Support Files/Pods-leatherwalletmobile/Pods-leatherwalletmobile.debug.xcconfig"; sourceTree = "<group>"; };
70C1354B3AEE44B3B957C23B /* leatherwalletmobile-Bridging-Header.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = "leatherwalletmobile-Bridging-Header.h"; path = "leatherwalletmobile/leatherwalletmobile-Bridging-Header.h"; sourceTree = "<group>"; };
76B2513BA2D94EB6BA0D6194 /* FiraCode-Retina.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "FiraCode-Retina.otf"; path = "../node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/FiraCode-Retina.otf"; sourceTree = "<group>"; };
7A4D352CD337FB3A3BF06240 /* Pods-leatherwalletmobile.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-leatherwalletmobile.release.xcconfig"; path = "Target Support Files/Pods-leatherwalletmobile/Pods-leatherwalletmobile.release.xcconfig"; sourceTree = "<group>"; };
A6CFA460F0F340ED95800EF2 /* ABCDiatype-Light.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ABCDiatype-Light.otf"; path = "../node_modules/@leather.io/ui/src/assets-native/fonts/ABCDiatype-Light.otf"; sourceTree = "<group>"; };
AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = leatherwalletmobile/SplashScreen.storyboard; sourceTree = "<group>"; };
B66C2888E3BB47F7A5A88DEB /* FiraCode-Medium.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "FiraCode-Medium.otf"; path = "../node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/FiraCode-Medium.otf"; sourceTree = "<group>"; };
BB2F792C24A3F905000567C9 /* Expo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = "<group>"; };
CFE8092428C64AA0AFE1A346 /* MarchePro-Super.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "MarchePro-Super.otf"; path = "../node_modules/@leather.io/ui/src/assets-native/fonts/MarchePro-Super.otf"; sourceTree = "<group>"; };
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
F520EA8A657049D4A3392B8B /* ABCDiatype-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ABCDiatype-Regular.otf"; path = "../node_modules/@leather.io/ui/src/assets-native/fonts/ABCDiatype-Regular.otf"; sourceTree = "<group>"; };
FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-leatherwalletmobile/ExpoModulesProvider.swift"; sourceTree = "<group>"; };
76B2513BA2D94EB6BA0D6194 /* FiraCode-Retina.otf */ = {isa = PBXFileReference; name = "FiraCode-Retina.otf"; path = "../node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/FiraCode-Retina.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
B66C2888E3BB47F7A5A88DEB /* FiraCode-Medium.otf */ = {isa = PBXFileReference; name = "FiraCode-Medium.otf"; path = "../node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/FiraCode-Medium.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */

/* Begin PBXFrameworksBuildPhase section */
Expand Down
2 changes: 2 additions & 0 deletions apps/mobile/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"dependencies": {
"@crowdin/ota-client": "2.0.0",
"@expo/vector-icons": "14.0.0",
"@gorhom/bottom-sheet": "4.6.3",
"@hookform/resolvers": "3.9.1",
"@leather.io/analytics": "workspace:*",
"@leather.io/bitcoin": "workspace:*",
Expand Down Expand Up @@ -103,6 +104,7 @@
"metro-cache": "0.80.5",
"metro-config": "0.80.5",
"metro-resolver": "0.80.5",
"prism-react-renderer": "2.4.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "7.53.2",
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile/src/app/(home)/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ActionBarMethods } from '@/components/action-bar/action-bar';
import { HomeHeader } from '@/components/headers/home-header';
import { NakedHeader } from '@/components/headers/naked-header';
import { TitleHeader } from '@/components/headers/title-header';
import { NetworkBadge } from '@/components/network-badge';
import { NetworkBadge } from '@/features/settings/network-badge';
import { AppRoutes } from '@/routes';
import { t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile/src/app/(home)/settings/display/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useRef } from 'react';

import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
import { NetworkBadge } from '@/components/network-badge';
import { AccountIdentifierSheet } from '@/features/settings/account-identifier-sheet';
import { BitcoinUnitSheet } from '@/features/settings/bitcoin-unit-sheet';
import { ConversionUnitSheet } from '@/features/settings/conversion-unit-sheet';
import { NetworkBadge } from '@/features/settings/network-badge';
import { ThemeSheet } from '@/features/settings/theme-sheet';
import { useSettings } from '@/store/settings/settings';
import { t } from '@lingui/macro';
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile/src/app/(home)/settings/help/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
import { NetworkBadge } from '@/components/network-badge';
import { NetworkBadge } from '@/features/settings/network-badge';
import { t } from '@lingui/macro';

import { Cell, GraduateCapIcon, MagicBookIcon, SupportIcon } from '@leather.io/ui/native';
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile/src/app/(home)/settings/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { useRef } from 'react';

import { Divider } from '@/components/divider';
import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
import { NetworkBadge } from '@/components/network-badge';
import { NotifyUserSheetLayout } from '@/components/sheets/notify-user-sheet.layout';
import { useAuthContext } from '@/components/splash-screen-guard/use-auth-context';
import { NetworkBadge } from '@/features/settings/network-badge';
import { AppRoutes } from '@/routes';
import { TestId } from '@/shared/test-id';
import { t } from '@lingui/macro';
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile/src/app/(home)/settings/networks/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
import { NetworkBadge } from '@/components/network-badge';
import { useToastContext } from '@/components/toast/toast-context';
import { NetworkBadge } from '@/features/settings/network-badge';
import { useSettings } from '@/store/settings/settings';
import { defaultNetworkPreferences } from '@/store/settings/utils';
import { t } from '@lingui/macro';
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile/src/app/(home)/settings/security/index.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { useRef } from 'react';

import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
import { NetworkBadge } from '@/components/network-badge';
import { AnalyticsSheet } from '@/features/settings/analytics-sheet';
import { AppAuthenticationSheet } from '@/features/settings/app-authentication-sheet';
import { NetworkBadge } from '@/features/settings/network-badge';
import { useSettings } from '@/store/settings/settings';
import { SecurityLevelPreference } from '@/store/settings/utils';
import { t } from '@lingui/macro';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { useRef } from 'react';

import { AvatarIcon } from '@/components/avatar-icon';
import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
import { NetworkBadge } from '@/components/network-badge';
import { useToastContext } from '@/components/toast/toast-context';
import { NetworkBadge } from '@/features/settings/network-badge';
import { AccountCard } from '@/features/settings/wallet-and-accounts/account-card';
import { AccountNameSheet } from '@/features/settings/wallet-and-accounts/account-name-sheet';
import { AccountId } from '@/models/domain.model';
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile/src/app/(home)/settings/wallet/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useRef } from 'react';
import { AddWalletSheet } from '@/components/add-wallet/';
import { Divider } from '@/components/divider';
import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
import { NetworkBadge } from '@/components/network-badge';
import { NetworkBadge } from '@/features/settings/network-badge';
import { WalletsList } from '@/features/settings/wallet-and-accounts/wallets-list';
import { AppRoutes } from '@/routes';
import { useAccounts } from '@/store/accounts/accounts.read';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ export function FullHeightSheet({ children, sheetRef }: FullHeightSheetProps) {

return (
<Sheet
isFullHeight
ref={sheetRef}
isFullHeight
shouldHaveContainer={false}
themeVariant={themeDerivedFromThemePreference}
>
Expand Down
32 changes: 0 additions & 32 deletions apps/mobile/src/components/network-badge.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { AvatarIcon } from '@/components/avatar-icon';
import { AccountListItem } from '@/features/account-list/account-list-item';
import { AccountAddress } from '@/features/account-list/components/account-address';
import { AccountBalance } from '@/features/account-list/components/account-balance';
import { useAccountsByFingerprint } from '@/store/accounts/accounts.read';
import { useWallets } from '@/store/wallets/wallets.read';
import { t } from '@lingui/macro';
import { useTheme } from '@shopify/restyle';

import { Text, Theme } from '@leather.io/ui/native';

export function ApproverAccountCard() {
const theme = useTheme<Theme>();
const { list: walletsList } = useWallets();
const wallet = walletsList[0];

if (!wallet) throw new Error('no wallet present in approver');

const { list: accountList } = useAccountsByFingerprint(wallet.fingerprint);
const account = accountList[0];

if (!account) throw new Error('no account present in approver');

return (
<>
<Text variant="label01">
{t({
id: 'approver.account.title',
message: 'With account',
})}
</Text>
<AccountListItem
accountName={account.name}
address={
<AccountAddress accountIndex={account.accountIndex} fingerprint={account.fingerprint} />
}
balance={
<AccountBalance accountIndex={account.accountIndex} fingerprint={account.fingerprint} />
}
icon={<AvatarIcon color={theme.colors['ink.background-primary']} icon={account.icon} />}
walletName={wallet.name}
/>
</>
);
}
77 changes: 77 additions & 0 deletions apps/mobile/src/features/approver/components/code-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { ScrollView } from 'react-native-gesture-handler';

import { t } from '@lingui/macro';

import { Highlighter, Prism, Text } from '@leather.io/ui/native';

/* eslint-disable-next-line lingui/no-unlocalized-strings */
const sampleCode = `
;; hello-world contract
(define-constant sender 'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR)
(define-constant recipient 'SM2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQVX8X0G)
(define-fungible-token novel-token-19)
(ft-mint? novel-token-19 u12 sender)
(ft-transfer? novel-token-19 u2 sender recipient)
(define-non-fungible-token hello-nft uint)
(nft-mint? hello-nft u1 sender)
(nft-mint? hello-nft u2 sender)
(nft-transfer? hello-nft u1 sender recipient)
(define-public (test-emit-event)
(begin
(print "Event! Hello world")
(ok u1)
)
)
(begin (test-emit-event))
(define-public (test-event-types)
(begin
(unwrap-panic (ft-mint? novel-token-19 u3 recipient))
(unwrap-panic (nft-mint? hello-nft u2 recipient))
(unwrap-panic (stx-transfer? u60 tx-sender 'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR))
(unwrap-panic (stx-burn? u20 tx-sender))
(ok u1)
)
)
(define-map store { key: (buff 32) } { value: (buff 32) })
(define-public (get-value (key (buff 32)))
(begin
(match (map-get? store { key: key })
entry (ok (get value entry))
(err 0)
)
)
)
(define-public (set-value (key (buff 32)) (value (buff 32)))
(begin
(map-set store { key: key } { value: value })
(ok u1)
)
)
`;

export function CodeCard() {
return (
<>
<Text variant="label01">
{t({
id: 'approver.code.title',
message: 'Code',
})}
</Text>
<ScrollView horizontal>
<Highlighter code={sampleCode} prism={Prism} language="clarity" />
</ScrollView>
</>
);
}
67 changes: 67 additions & 0 deletions apps/mobile/src/features/approver/components/fee-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { ReactNode } from 'react';

import { FeeBadge } from '@/features/send/fee-badge';
import { t } from '@lingui/macro';

import { FeeTypes } from '@leather.io/models';
import {
AnimalChameleonIcon,
AnimalEagleIcon,
AnimalRabbitIcon,
AnimalSnailIcon,
Avatar,
Box,
ChevronRightIcon,
Flag,
ItemLayout,
Pressable,
Text,
} from '@leather.io/ui/native';
import { match } from '@leather.io/utils';

export function FeeCard({ feeType }: { feeType: FeeTypes }) {
const matchFeeType = match<FeeTypes>();
const feeIcon = matchFeeType<ReactNode>(feeType, {
[FeeTypes.Low]: <AnimalSnailIcon />,
[FeeTypes.Middle]: <AnimalRabbitIcon />,
[FeeTypes.High]: <AnimalEagleIcon />,
[FeeTypes.Custom]: <AnimalChameleonIcon />,
[FeeTypes.Unknown]: <AnimalChameleonIcon />,
});
return (
<>
<Box flexDirection="row">
<Text variant="label01">
{t({
id: 'approver.fee.title',
message: 'Fee',
})}
</Text>
<FeeBadge type="normal" />
</Box>
<Pressable flexDirection="row" onPress={() => {}} py="3">
<Flag
img={
<Avatar bg="ink.background-secondary" p="1">
{feeIcon}
</Avatar>
}
>
<ItemLayout
titleLeft={t({
id: 'approver.fee.type.normal',
message: 'Normal',
})}
captionLeft={t({
id: 'approver.fee.speed.normal',
message: '~20 mins',
})}
titleRight="0.000034 BTC"
captionRight="$ 1.65"
actionIcon={<ChevronRightIcon />}
/>
</Flag>
</Pressable>
</>
);
}
Loading

0 comments on commit 987caea

Please sign in to comment.