Skip to content

Commit

Permalink
Update navigation (#65)
Browse files Browse the repository at this point in the history 
* update navigation

* update after review
  • Loading branch information
@KKA11010
KKA11010 authored Jun 17, 2023
1 parent ec1a1ea commit acbc259
Show file tree
Hide file tree
Showing 10 changed files with 173 additions and 356 deletions.
6 changes: 3 additions & 3 deletions src/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { addAllMintIds, getBalance, getContacts, getMintsBalances, getMintsUrls,
import { fsInfo } from '@db/fs'
import { l } from '@log'
import MyModal from '@modal'
import { IInitialProps, IPreferences, ITokenInfo } from '@model'
import { DrawerNav } from '@nav/Navigator'
import type { IInitialProps, IPreferences, ITokenInfo } from '@model'
import Navigator from '@nav/Navigator'
import { NavigationContainer } from '@react-navigation/native'
import { ContactsContext, type IContact } from '@src/context/Contacts'
import { FocusClaimCtx } from '@src/context/FocusClaim'
Expand Down Expand Up @@ -240,7 +240,7 @@ function _App(_initialProps: IInitialProps) {
<FocusClaimCtx.Provider value={claimData}>
<ContactsContext.Provider value={contactData}>
<KeyboardProvider>
<DrawerNav />
<Navigator />
<StatusBar style="auto" />
{/* claim token if app comes to foreground and clipboard has valid cashu token */}
<MyModal type='question' visible={claimOpen}>
Expand Down
37 changes: 20 additions & 17 deletions src/components/Icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function QRIcon({ width, height, color }: TIconProps) {
}
export function WalletIcon({ width, height, color }: TIconProps) {
return (
<Svg width={width || 30} height={height || 30} viewBox="0 0 30 30" fill="none">
<Svg width={width || 24} height={height || 24} viewBox="0 0 30 30" fill="none">
<Path d="M16.25 11.5625H2.5C1.9875 11.5625 1.5625 11.1375 1.5625 10.625C1.5625 10.1125 1.9875 9.6875 2.5 9.6875H16.25C16.7625 9.6875 17.1875 10.1125 17.1875 10.625C17.1875 11.1375 16.7625 11.5625 16.25 11.5625Z" fill={color} />
<Path d="M10 21.5625H7.5C6.9875 21.5625 6.5625 21.1375 6.5625 20.625C6.5625 20.1125 6.9875 19.6875 7.5 19.6875H10C10.5125 19.6875 10.9375 20.1125 10.9375 20.625C10.9375 21.1375 10.5125 21.5625 10 21.5625Z" fill={color} />
<Path d="M18.125 21.5625H13.125C12.6125 21.5625 12.1875 21.1375 12.1875 20.625C12.1875 20.1125 12.6125 19.6875 13.125 19.6875H18.125C18.6375 19.6875 19.0625 20.1125 19.0625 20.625C19.0625 21.1375 18.6375 21.5625 18.125 21.5625Z" fill={color} />
Expand Down Expand Up @@ -54,7 +54,7 @@ export function ZapIcon({ width, height, color }: TIconProps) {
}
export function MintBoardIcon({ width, height, color }: TIconProps) {
return (
<Svg width={width || 26} height={height || 26} viewBox="0 0 26 28" fill="none">
<Svg width={width || 28} height={height || 30} viewBox="0 0 26 28" fill="none">
<Path d="M6.33337 12.6666H3.66671V22H6.33337V12.6666ZM14.3334 12.6666H11.6667V22H14.3334V12.6666ZM25.6667 24.6666H0.333374V27.3333H25.6667V24.6666ZM22.3334 12.6666H19.6667V22H22.3334V12.6666ZM13 3.67996L19.9467 7.33329H6.05337L13 3.67996ZM13 0.666626L0.333374 7.33329V9.99996H25.6667V7.33329L13 0.666626Z" fill={color} />
</Svg>
)
Expand Down Expand Up @@ -176,14 +176,13 @@ export function CheckCircleIcon({ width, height, color }: TIconProps) {
}
export function SettingsIcon({ width, height, color }: TIconProps) {
return (
<Svg width={width || 24} height={height || 24} viewBox="0 0 24 24" fill="none">
<G clip-path="url(#clip0_2_7847)">
<Path d="M11.869 7C11.2296 7 10.5964 7.12594 10.0057 7.37063C9.41498 7.61532 8.87823 7.97397 8.4261 8.4261C7.97397 8.87823 7.61532 9.41498 7.37063 10.0057C7.12594 10.5964 7 11.2296 7 11.869C7 12.5084 7.12594 13.1416 7.37063 13.7323C7.61532 14.323 7.97397 14.8598 8.4261 15.3119C8.87823 15.764 9.41498 16.1227 10.0057 16.3674C10.5964 16.6121 11.2296 16.738 11.869 16.738C13.1603 16.738 14.3988 16.225 15.3119 15.3119C16.225 14.3988 16.738 13.1603 16.738 11.869C16.738 10.5777 16.225 9.33921 15.3119 8.4261C14.3988 7.51298 13.1603 7 11.869 7ZM8.5 11.869C8.5 10.9755 8.85495 10.1186 9.48676 9.48676C10.1186 8.85495 10.9755 8.5 11.869 8.5C12.7625 8.5 13.6194 8.85495 14.2512 9.48676C14.8831 10.1186 15.238 10.9755 15.238 11.869C15.238 12.7625 14.8831 13.6194 14.2512 14.2512C13.6194 14.8831 12.7625 15.238 11.869 15.238C10.9755 15.238 10.1186 14.8831 9.48676 14.2512C8.85495 13.6194 8.5 12.7625 8.5 11.869Z" fill={color} />
<Path d="M14.6937 2.01425C13.9032 -0.670746 10.0962 -0.670746 9.30574 2.01425L9.16474 2.49275C9.10953 2.68018 9.01308 2.85288 8.88246 2.99819C8.75184 3.1435 8.59036 3.25774 8.40985 3.33253C8.22934 3.40732 8.03439 3.44077 7.83927 3.43043C7.64415 3.42009 7.45383 3.36621 7.28224 3.27275L6.84424 3.03275C4.38424 1.69475 1.69474 4.38575 3.03424 6.84425L3.27274 7.28225C3.3662 7.45384 3.42007 7.64417 3.43041 7.83928C3.44076 8.0344 3.40731 8.22936 3.33252 8.40987C3.25772 8.59037 3.14349 8.75186 2.99818 8.88248C2.85287 9.0131 2.68017 9.10955 2.49274 9.16475L2.01424 9.30575C-0.670762 10.0963 -0.670762 13.9033 2.01424 14.6938L2.49274 14.8348C2.68017 14.89 2.85287 14.9864 2.99818 15.117C3.14349 15.2477 3.25772 15.4091 3.33252 15.5896C3.40731 15.7701 3.44076 15.9651 3.43041 16.1602C3.42007 16.3553 3.3662 16.5457 3.27274 16.7173L3.03274 17.1553C1.69474 19.6153 4.38424 22.3063 6.84424 20.9653L7.28224 20.7268C7.45383 20.6333 7.64415 20.5794 7.83927 20.5691C8.03439 20.5587 8.22934 20.5922 8.40985 20.667C8.59036 20.7418 8.75184 20.856 8.88246 21.0013C9.01308 21.1466 9.10953 21.3193 9.16474 21.5068L9.30574 21.9853C10.0962 24.6703 13.9032 24.6703 14.6937 21.9853L14.8347 21.5068C14.8899 21.3193 14.9864 21.1466 15.117 21.0013C15.2476 20.856 15.4091 20.7418 15.5896 20.667C15.7701 20.5922 15.9651 20.5587 16.1602 20.5691C16.3553 20.5794 16.5457 20.6333 16.7172 20.7268L17.1552 20.9668C19.6152 22.3063 22.3062 19.6138 20.9652 17.1553L20.7267 16.7173C20.6333 16.5457 20.5794 16.3553 20.5691 16.1602C20.5587 15.9651 20.5922 15.7701 20.667 15.5896C20.7418 15.4091 20.856 15.2477 21.0013 15.117C21.1466 14.9864 21.3193 14.89 21.5067 14.8348L21.9852 14.6938C24.6702 13.9033 24.6702 10.0963 21.9852 9.30575L21.5067 9.16475C21.3193 9.10955 21.1466 9.0131 21.0013 8.88248C20.856 8.75186 20.7418 8.59037 20.667 8.40987C20.5922 8.22936 20.5587 8.0344 20.5691 7.83928C20.5794 7.64417 20.6333 7.45384 20.7267 7.28225L20.9667 6.84425C22.3062 4.38425 19.6137 1.69475 17.1552 3.03425L16.7172 3.27275C16.5457 3.36621 16.3553 3.42009 16.1602 3.43043C15.9651 3.44077 15.7701 3.40732 15.5896 3.33253C15.4091 3.25774 15.2476 3.1435 15.117 2.99819C14.9864 2.85288 14.8899 2.68018 14.8347 2.49275L14.6937 2.01425ZM10.7442 2.43875C11.1132 1.18625 12.8862 1.18625 13.2552 2.43875L13.3962 2.91725C13.5148 3.31938 13.7218 3.68989 14.0021 4.0016C14.2825 4.31332 14.629 4.55835 15.0164 4.71872C15.4037 4.8791 15.822 4.95075 16.2407 4.92844C16.6593 4.90612 17.0676 4.7904 17.4357 4.58975L17.8722 4.34975C19.0182 3.72725 20.2722 4.97975 19.6482 6.12725L19.4097 6.56525C19.2094 6.93339 19.094 7.34169 19.0719 7.76024C19.0498 8.17878 19.1217 8.59696 19.2822 8.98413C19.4427 9.3713 19.6878 9.71766 19.9995 9.99782C20.3112 10.278 20.6817 10.4848 21.0837 10.6033L21.5607 10.7443C22.8132 11.1133 22.8132 12.8863 21.5607 13.2553L21.0822 13.3963C20.6801 13.5148 20.3096 13.7218 19.9979 14.0021C19.6862 14.2825 19.4411 14.629 19.2808 15.0164C19.1204 15.4037 19.0487 15.822 19.0711 16.2407C19.0934 16.6593 19.2091 17.0677 19.4097 17.4358L19.6497 17.8723C20.2722 19.0183 19.0197 20.2723 17.8722 19.6483L17.4357 19.4098C17.0675 19.2091 16.6591 19.0935 16.2404 19.0712C15.8217 19.049 15.4033 19.1208 15.0159 19.2813C14.6285 19.4419 14.282 19.6871 14.0018 19.9989C13.7215 20.3108 13.5146 20.6815 13.3962 21.0838L13.2552 21.5608C12.8862 22.8133 11.1132 22.8133 10.7442 21.5608L10.6032 21.0823C10.4847 20.6803 10.2777 20.31 9.99743 19.9985C9.7172 19.6869 9.37082 19.442 8.98367 19.2816C8.59652 19.1213 8.1784 19.0496 7.75994 19.0717C7.34148 19.0939 6.93328 19.2094 6.56524 19.4098L6.12724 19.6498C4.98124 20.2723 3.72724 19.0198 4.35124 17.8723L4.58974 17.4358C4.79067 17.0676 4.90661 16.6591 4.92908 16.2403C4.95154 15.8215 4.87995 15.403 4.71955 15.0154C4.55916 14.6279 4.31403 14.2812 4.00216 14.0007C3.69028 13.7203 3.31958 13.5132 2.91724 13.3948L2.43874 13.2538C1.18624 12.8848 1.18624 11.1118 2.43874 10.7428L2.91724 10.6018C3.31895 10.4831 3.68905 10.2762 4.00045 9.99604C4.31186 9.71591 4.55668 9.3697 4.71702 8.98274C4.87735 8.59578 4.94913 8.17786 4.92711 7.75958C4.90509 7.3413 4.78982 6.93324 4.58974 6.56525L4.34974 6.12725C3.72724 4.98125 4.97974 3.72725 6.12724 4.35125L6.56524 4.58975C6.93328 4.79012 7.34148 4.90561 7.75994 4.92778C8.1784 4.94995 8.59652 4.87823 8.98367 4.71788C9.37082 4.55752 9.7172 4.3126 9.99743 4.00103C10.2777 3.68947 10.4847 3.31917 10.6032 2.91725L10.7442 2.43875Z" fill={color} />
<Svg width={width || 25} height={height || 25} viewBox="0 0 24 24" fill="none" >
<G clip-path="url(#clip0_105_717)">
<Path d="M19.4298 12.98C19.4698 12.66 19.4998 12.34 19.4998 12C19.4998 11.66 19.4698 11.34 19.4298 11.02L21.5398 9.37C21.7298 9.22 21.7798 8.95 21.6598 8.73L19.6598 5.27C19.5698 5.11 19.3998 5.02 19.2198 5.02C19.1598 5.02 19.0998 5.03 19.0498 5.05L16.5598 6.05C16.0398 5.65 15.4798 5.32 14.8698 5.07L14.4898 2.42C14.4598 2.18 14.2498 2 13.9998 2H9.99984C9.74984 2 9.53984 2.18 9.50984 2.42L9.12984 5.07C8.51984 5.32 7.95984 5.66 7.43984 6.05L4.94984 5.05C4.88984 5.03 4.82984 5.02 4.76984 5.02C4.59984 5.02 4.42984 5.11 4.33984 5.27L2.33984 8.73C2.20984 8.95 2.26984 9.22 2.45984 9.37L4.56984 11.02C4.52984 11.34 4.49984 11.67 4.49984 12C4.49984 12.33 4.52984 12.66 4.56984 12.98L2.45984 14.63C2.26984 14.78 2.21984 15.05 2.33984 15.27L4.33984 18.73C4.42984 18.89 4.59984 18.98 4.77984 18.98C4.83984 18.98 4.89984 18.97 4.94984 18.95L7.43984 17.95C7.95984 18.35 8.51984 18.68 9.12984 18.93L9.50984 21.58C9.53984 21.82 9.74984 22 9.99984 22H13.9998C14.2498 22 14.4598 21.82 14.4898 21.58L14.8698 18.93C15.4798 18.68 16.0398 18.34 16.5598 17.95L19.0498 18.95C19.1098 18.97 19.1698 18.98 19.2298 18.98C19.3998 18.98 19.5698 18.89 19.6598 18.73L21.6598 15.27C21.7798 15.05 21.7298 14.78 21.5398 14.63L19.4298 12.98ZM17.4498 11.27C17.4898 11.58 17.4998 11.79 17.4998 12C17.4998 12.21 17.4798 12.43 17.4498 12.73L17.3098 13.86L18.1998 14.56L19.2798 15.4L18.5798 16.61L17.3098 16.1L16.2698 15.68L15.3698 16.36C14.9398 16.68 14.5298 16.92 14.1198 17.09L13.0598 17.52L12.8998 18.65L12.6998 20H11.2998L11.1098 18.65L10.9498 17.52L9.88984 17.09C9.45984 16.91 9.05984 16.68 8.65984 16.38L7.74984 15.68L6.68984 16.11L5.41984 16.62L4.71984 15.41L5.79984 14.57L6.68984 13.87L6.54984 12.74C6.51984 12.43 6.49984 12.2 6.49984 12C6.49984 11.8 6.51984 11.57 6.54984 11.27L6.68984 10.14L5.79984 9.44L4.71984 8.6L5.41984 7.39L6.68984 7.9L7.72984 8.32L8.62984 7.64C9.05984 7.32 9.46984 7.08 9.87984 6.91L10.9398 6.48L11.0998 5.35L11.2998 4H12.6898L12.8798 5.35L13.0398 6.48L14.0998 6.91C14.5298 7.09 14.9298 7.32 15.3298 7.62L16.2398 8.32L17.2998 7.89L18.5698 7.38L19.2698 8.59L18.1998 9.44L17.3098 10.14L17.4498 11.27ZM11.9998 8C9.78984 8 7.99984 9.79 7.99984 12C7.99984 14.21 9.78984 16 11.9998 16C14.2098 16 15.9998 14.21 15.9998 12C15.9998 9.79 14.2098 8 11.9998 8ZM11.9998 14C10.8998 14 9.99984 13.1 9.99984 12C9.99984 10.9 10.8998 10 11.9998 10C13.0998 10 13.9998 10.9 13.9998 12C13.9998 13.1 13.0998 14 11.9998 14Z" fill={color} />
</G>
<Defs>
<ClipPath id="clip0_2_7847">
<Rect width={width || 24} height={height || 24} fill="white" />
<ClipPath id="clip0_105_717">
<Rect width="24" height="24" fill="white" />
</ClipPath>
</Defs>
</Svg>
Expand All @@ -192,15 +191,12 @@ export function SettingsIcon({ width, height, color }: TIconProps) {
}
export function ContactsIcon({ width, height, color }: TIconProps) {
return (
<Svg width={width || 24} height={height || 24} viewBox="0 0 24 24" fill="none">
<G clip-path="url(#clip0_105_3589)">
<Path d="M16.6699 13.13C18.0399 14.06 18.9999 15.32 18.9999 17V20H22.9999V17C22.9999 14.82 19.4299 13.53 16.6699 13.13Z" fill={color} />
<Path d="M14.9999 12C17.2099 12 18.9999 10.21 18.9999 8C18.9999 5.79 17.2099 4 14.9999 4C14.5299 4 14.0899 4.1 13.6699 4.24C14.4999 5.27 14.9999 6.58 14.9999 8C14.9999 9.42 14.4999 10.73 13.6699 11.76C14.0899 11.9 14.5299 12 14.9999 12Z" fill={color} />
<Path d="M9 12C11.21 12 13 10.21 13 8C13 5.79 11.21 4 9 4C6.79 4 5 5.79 5 8C5 10.21 6.79 12 9 12ZM9 6C10.1 6 11 6.9 11 8C11 9.1 10.1 10 9 10C7.9 10 7 9.1 7 8C7 6.9 7.9 6 9 6Z" fill={color} />
<Path d="M9 13C6.33 13 1 14.34 1 17V20H17V17C17 14.34 11.67 13 9 13ZM15 18H3V17.01C3.2 16.29 6.3 15 9 15C11.7 15 14.8 16.29 15 17V18Z" fill={color} />
<Svg width={width || 28} height={height || 30} style={{ marginTop: -2 }} viewBox="0 0 24 24" fill="none">
<G clipPath="url(#clip0_105_3376)">
<Path d="M12 5.9C13.16 5.9 14.1 6.84 14.1 8C14.1 9.16 13.16 10.1 12 10.1C10.84 10.1 9.9 9.16 9.9 8C9.9 6.84 10.84 5.9 12 5.9ZM12 14.9C14.97 14.9 18.1 16.36 18.1 17V18.1H5.9V17C5.9 16.36 9.03 14.9 12 14.9ZM12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4ZM12 13C9.33 13 4 14.34 4 17V20H20V17C20 14.34 14.67 13 12 13Z" fill={color} />
</G>
<Defs>
<ClipPath id="clip0_105_3589">
<ClipPath id="clip0_105_3376">
<Rect width="24" height="24" fill="white" />
</ClipPath>
</Defs>
Expand Down Expand Up @@ -321,8 +317,15 @@ export function CloseIcon({ width, height, color }: TIconProps) {
}
export function HistoryIcon({ width, height, color }: TIconProps) {
return (
<Svg style={{ marginTop: 5 }} width={width || 21} height={height || 15} viewBox="0 0 21 15" fill="none" >
<Path fill-rule="evenodd" clip-rule="evenodd" d="M6 13.5C6 13.3011 6.07902 13.1103 6.21967 12.9697C6.36032 12.829 6.55109 12.75 6.75 12.75H20.25C20.4489 12.75 20.6397 12.829 20.7803 12.9697C20.921 13.1103 21 13.3011 21 13.5C21 13.6989 20.921 13.8897 20.7803 14.0303C20.6397 14.171 20.4489 14.25 20.25 14.25H6.75C6.55109 14.25 6.36032 14.171 6.21967 14.0303C6.07902 13.8897 6 13.6989 6 13.5ZM6 7.5C6 7.30109 6.07902 7.11032 6.21967 6.96967C6.36032 6.82902 6.55109 6.75 6.75 6.75H20.25C20.4489 6.75 20.6397 6.82902 20.7803 6.96967C20.921 7.11032 21 7.30109 21 7.5C21 7.69891 20.921 7.88968 20.7803 8.03033C20.6397 8.17098 20.4489 8.25 20.25 8.25H6.75C6.55109 8.25 6.36032 8.17098 6.21967 8.03033C6.07902 7.88968 6 7.69891 6 7.5ZM6 1.5C6 1.30109 6.07902 1.11032 6.21967 0.96967C6.36032 0.829018 6.55109 0.75 6.75 0.75H20.25C20.4489 0.75 20.6397 0.829018 20.7803 0.96967C20.921 1.11032 21 1.30109 21 1.5C21 1.69891 20.921 1.88968 20.7803 2.03033C20.6397 2.17098 20.4489 2.25 20.25 2.25H6.75C6.55109 2.25 6.36032 2.17098 6.21967 2.03033C6.07902 1.88968 6 1.69891 6 1.5ZM1.5 3C1.89782 3 2.27936 2.84196 2.56066 2.56066C2.84196 2.27936 3 1.89782 3 1.5C3 1.10218 2.84196 0.720644 2.56066 0.43934C2.27936 0.158035 1.89782 0 1.5 0C1.10218 0 0.720644 0.158035 0.43934 0.43934C0.158035 0.720644 0 1.10218 0 1.5C0 1.89782 0.158035 2.27936 0.43934 2.56066C0.720644 2.84196 1.10218 3 1.5 3ZM1.5 9C1.89782 9 2.27936 8.84196 2.56066 8.56066C2.84196 8.27936 3 7.89782 3 7.5C3 7.10218 2.84196 6.72064 2.56066 6.43934C2.27936 6.15804 1.89782 6 1.5 6C1.10218 6 0.720644 6.15804 0.43934 6.43934C0.158035 6.72064 0 7.10218 0 7.5C0 7.89782 0.158035 8.27936 0.43934 8.56066C0.720644 8.84196 1.10218 9 1.5 9ZM1.5 15C1.89782 15 2.27936 14.842 2.56066 14.5607C2.84196 14.2794 3 13.8978 3 13.5C3 13.1022 2.84196 12.7206 2.56066 12.4393C2.27936 12.158 1.89782 12 1.5 12C1.10218 12 0.720644 12.158 0.43934 12.4393C0.158035 12.7206 0 13.1022 0 13.5C0 13.8978 0.158035 14.2794 0.43934 14.5607C0.720644 14.842 1.10218 15 1.5 15Z" fill={color} />
<Svg width={width || 28} height={height || 28} style={{ marginTop: -2 }} viewBox="0 0 24 24" fill="none" >
<G clipPath="url(#clip0_105_4245)">
<Path d="M4 10.5C3.17 10.5 2.5 11.17 2.5 12C2.5 12.83 3.17 13.5 4 13.5C4.83 13.5 5.5 12.83 5.5 12C5.5 11.17 4.83 10.5 4 10.5ZM4 4.5C3.17 4.5 2.5 5.17 2.5 6C2.5 6.83 3.17 7.5 4 7.5C4.83 7.5 5.5 6.83 5.5 6C5.5 5.17 4.83 4.5 4 4.5ZM4 16.5C3.17 16.5 2.5 17.18 2.5 18C2.5 18.82 3.18 19.5 4 19.5C4.82 19.5 5.5 18.82 5.5 18C5.5 17.18 4.83 16.5 4 16.5ZM7 19H21V17H7V19ZM7 13H21V11H7V13ZM7 5V7H21V5H7Z" fill={color} />
</G>
<Defs>
<ClipPath id="clip0_105_4245">
<Rect width="28" height="28" fill="white" />
</ClipPath>
</Defs>
</Svg>
)
}
Expand Down
79 changes: 60 additions & 19 deletions src/components/nav/BottomNav.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { HistoryIcon, MintBoardIcon, WalletIcon } from '@comps/Icons'
import { ContactsIcon, HistoryIcon, MintBoardIcon, SettingsIcon, WalletIcon } from '@comps/Icons'
import Txt from '@comps/Txt'
import type { TBottomNavProps, TRouteString } from '@model/nav'
import { ThemeContext } from '@src/context/Theme'
import { highlight as hi } from '@styles'
Expand All @@ -10,41 +11,80 @@ export default function BottomNav({ navigation, route }: TBottomNavProps) {

const handleNav = (routeStr: TRouteString) => navigation.navigate(routeStr)

const isMintRelatedPage =
const isMintRelatedScreen =
route.name === 'mints' ||
route.name === 'mintmanagement' ||
route.name === 'mint proofs' ||
(route.name === 'lightning' && !route.params?.receive && !route.params?.send)

const isWalletRelatedScreen = route.name === 'dashboard' ||
(route.name === 'lightning' && (route.params?.receive || route.params?.send))

const isSettingsRelatedScreen = route.name === 'Settings' ||
route.name === 'Display settings' ||
route.name === 'Security settings' ||
route.name === 'BackupPage'

const isHistoryRelatedScreen = route.name === 'history' || route.name === 'history entry details'

return (
<View style={styles.bottomNav}>
<TouchableOpacity
style={styles.navIcon}
onPress={() => handleNav('dashboard')}
>
<WalletIcon
color={route.name === 'dashboard' ||
(route.name === 'lightning' && (route.params?.receive || route.params?.send))
? hi[highlight] : color.TEXT
}
<WalletIcon color={isWalletRelatedScreen ? hi[highlight] : color.TEXT} />
<Txt
txt='Wallet'
styles={[{ fontSize: 12, marginTop: 2, color: isWalletRelatedScreen ? hi[highlight] : color.TEXT }]}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.navIcon}
onPress={() => handleNav('history')}
>
<HistoryIcon width={28} height={20} color={route.name === 'history' ? hi[highlight] : color.TEXT} />
<HistoryIcon color={isHistoryRelatedScreen ? hi[highlight] : color.TEXT} />
<Txt
txt='History'
styles={[{ fontSize: 12, color: isHistoryRelatedScreen ? hi[highlight] : color.TEXT }]}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.navIcon}
onPress={() => handleNav('mints')}
>
<MintBoardIcon
color={isMintRelatedPage ?
hi[highlight]
:
color.TEXT
}
width={20}
height={25}
color={isMintRelatedScreen ? hi[highlight] : color.TEXT}
/>
<Txt
txt='Mints'
styles={[{ fontSize: 12, marginTop: 1, color: isMintRelatedScreen ? hi[highlight] : color.TEXT }]}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.navIcon}
onPress={() => handleNav('Address book')}
>
<ContactsIcon color={route.name === 'Address book' ? hi[highlight] : color.TEXT} />
<Txt
txt='Contacts'
styles={[{
fontSize: 12,
marginTop: -2,
color: route.name === 'Address book' ? hi[highlight] : color.TEXT
}]}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.navIcon}
onPress={() => handleNav('Settings')}
>
<SettingsIcon color={isSettingsRelatedScreen ? hi[highlight] : color.TEXT} />
<Txt
txt='Settings'
styles={[{ fontSize: 12, color: isSettingsRelatedScreen ? hi[highlight] : color.TEXT }]}
/>
</TouchableOpacity>
</View>
Expand All @@ -55,15 +95,16 @@ const styles = StyleSheet.create({
bottomNav: {
position: 'absolute',
bottom: 0,
left: 60,
right: 60,
left: 0,
right: 0,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-start',
justifyContent: 'space-around',
},
navIcon: {
paddingRight: 20,
paddingBottom: 25,
paddingLeft: 20,
minWidth: 70,
minHeight: 50,
alignItems: 'center',
}
})
Loading

0 comments on commit acbc259

Please sign in to comment.