Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(wallet-mobile): uat updates #3603

Merged
merged 4 commits into from
Sep 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions apps/wallet-mobile/src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export type ButtonProps = TouchableOpacityProps & {
withoutBackground?: boolean
shelleyTheme?: boolean
mainTheme?: boolean
warningTheme?: boolean
outlineShelley?: boolean
textStyles?: TextStyle
isCopying?: boolean
Expand Down Expand Up @@ -45,10 +46,12 @@ export const Button = (props: ButtonProps) => {
testId,
startContent,
endContent,
warningTheme,
...rest
} = props

const {styles} = useStyles()
const {isDark} = useTheme()

return (
<TouchableOpacity
Expand All @@ -74,6 +77,7 @@ export const Button = (props: ButtonProps) => {
outlineShelley && styles.buttonOutlineShelley,
shelleyTheme && styles.shelleyTheme,
mainTheme && styles.mainTheme,
warningTheme && styles.warningTheme,
outlineOnLight && shelleyTheme && styles.shelleyOutlineOnLight,
style,
]}
Expand All @@ -89,6 +93,7 @@ export const Button = (props: ButtonProps) => {
outlineOnLight && shelleyTheme && styles.textShelleyOutlineOnLight,
outlineShelley && styles.textOutlineShelley,
props.disabled && !outlineOnLight && styles.buttonDisabledText,
warningTheme && isDark && styles.warningThemeText,
textStyles,
]}
>
Expand Down Expand Up @@ -186,6 +191,12 @@ const useStyles = () => {
...atoms.p_sm,
...atoms.body_2_md_medium,
},
warningTheme: {
backgroundColor: color.sys_magenta_500,
},
warningThemeText: {
color: color.gray_min,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be text_...?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

},
})

return {styles} as const
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {TouchableOpacity} from 'react-native-gesture-handler'
import SkeletonPlaceholder from 'react-native-skeleton-placeholder'

import {Icon} from '../Icon'
import {Space} from '../Space/Space'
import {Spacer} from '../Spacer'

export type ExpandableInfoCardProps = {
Expand All @@ -29,37 +30,35 @@ export const ExpandableInfoCard = ({

return (
<View>
<Spacer height={8} />

<View style={[styles.container, withBoxShadow && styles.shadowProp]}>
{header}

{children !== undefined && (
<>
<Spacer height={8} />
<Space height="sm" />

{children}
</>
)}

{expanded && (
<>
<Spacer height={8} />
<Space height="sm" />

{info}
</>
)}

{footer !== undefined && (
<>
<Spacer height={8} />
<Space height="sm" />

{footer}
</>
)}
</View>

<Spacer height={8} />
<Space height="lg" />
</View>
)
}
Expand Down Expand Up @@ -258,5 +257,5 @@ const useStyles = () => {
gray: color.gray_max,
}

return {styles, colors}
return {styles, colors} as const
}
5 changes: 3 additions & 2 deletions apps/wallet-mobile/src/components/Icon/ArrowDown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import Svg, {Path} from 'react-native-svg'

type Props = {
size?: number
color?: string
}

export const ArrowDown = ({size}: Props) => {
export const ArrowDown = ({size, color = '#000'}: Props) => {
return (
<Svg width={size} height={size} viewBox="0 0 15 17" fill="none">
<Path
fill="#000"
fill={color}
d="M6.793 16.707a1 1 0 001.414 0l6.364-6.364a1 1 0 00-1.414-1.414L8.514 13.615 6.493 13.616 1.843 8.929A1 1 0 00.43 10.343l6.364 6.364zM6.5 0v13.615h2.011V0h-2z"
/>
</Svg>
Expand Down
20 changes: 20 additions & 0 deletions apps/wallet-mobile/src/components/Icon/Coins2.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import * as React from 'react'
import Svg, {Path} from 'react-native-svg'

type Props = {
size?: number
color?: string
}

export const Coins2 = ({size = 24, color = '#7C85A3'}: Props) => {
return (
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M9 3a7 7 0 00-2.25 13.63c.8.907 1.83 1.604 3 2a7 7 0 107.5-11.261 7.009 7.009 0 00-3-2A6.983 6.983 0 009 3zm4.371 4.19a5 5 0 00-5.283 7.924 7.003 7.003 0 015.283-7.924zM5 12c0 .38.03.752.088 1.114a5 5 0 015.283-7.924A7.003 7.003 0 005 12zm15 2a5 5 0 11-10 0 5 5 0 0110 0z"
fill={color}
/>
</Svg>
)
}
4 changes: 2 additions & 2 deletions apps/wallet-mobile/src/components/Icon/Direction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ export const styleMap: (
icon: color.gray_900,
},
SENT: {
text: color.primary_600,
text: color.el_primary_medium,
background: color.primary_100,
icon: color.primary_500,
icon: color.el_primary_medium,
},
RECEIVED: {
text: color.secondary_600,
Expand Down
2 changes: 2 additions & 0 deletions apps/wallet-mobile/src/components/Icon/Icon.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,8 @@ storiesOf('Icon', module).add('Gallery', () => {

<Item icon={<Icon.Coins size={40} />} title="Coins" />

<Item icon={<Icon.Coins2 size={40} />} title="Coins2" />

<Item icon={<Icon.CopySuccess size={40} />} title="Copy Success" />

<Item icon={<Icon.Copy size={40} />} title="Copy" />
Expand Down
2 changes: 2 additions & 0 deletions apps/wallet-mobile/src/components/Icon/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {Chevron} from './Chevron'
import {Clock} from './Clock'
import {Close} from './Close'
import {Coins} from './Coins'
import {Coins2} from './Coins2'
import {Collateral} from './Collateral'
import {Connection} from './Connection'
import {Copy} from './Copy'
Expand Down Expand Up @@ -160,6 +161,7 @@ export const Icon = {
Chevron,
Clock,
Coins,
Coins2,
Copy,
CopySuccess,
Cross,
Expand Down
13 changes: 9 additions & 4 deletions apps/wallet-mobile/src/components/StepperProgress/Number1.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import * as React from 'react'
import Svg, {ClipPath, Defs, G, Path, Rect} from 'react-native-svg'

export const Number1 = () => {
type Props = {
color?: string
size?: number
}

export const Number1 = ({color = '#3154CB', size = 24}: Props) => {
return (
<Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
<G clipPath="url(#clip0_21640_15126)">
<Rect width={24} height={24} rx={12} fill="#3154CB" />
<Rect width={size} height={size} rx={12} fill={color} />

<Path
d="M12.638 17a.341.341 0 01-.252-.098.353.353 0 01-.084-.238V9.412l-2.128 1.638a.373.373 0 01-.252.07.393.393 0 01-.224-.154l-.588-.756a.397.397 0 01-.07-.266.342.342 0 01.154-.224l3.136-2.422a.357.357 0 01.168-.084c.056-.01.116-.014.182-.014h1.232c.093 0 .172.033.238.098a.324.324 0 01.098.238v9.128a.324.324 0 01-.098.238.324.324 0 01-.238.098h-1.274z"
Expand All @@ -15,7 +20,7 @@ export const Number1 = () => {

<Defs>
<ClipPath id="clip0_21640_15126">
<Rect width={24} height={24} rx={12} fill="#fff" />
<Rect width={size} height={size} rx={12} fill="#fff" />
</ClipPath>
</Defs>
</Svg>
Expand Down
11 changes: 8 additions & 3 deletions apps/wallet-mobile/src/components/StepperProgress/Number2.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import * as React from 'react'
import Svg, {ClipPath, Defs, G, Path, Rect} from 'react-native-svg'

export const Number2 = () => {
type Props = {
color?: string
size?: number
}

export const Number2 = ({color = '#3154CB', size = 24}: Props) => {
return (
<Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
<G clipPath="url(#clip0_13282_79551)">
<Rect width={24} height={24} rx={12} fill="#3154CB" />
<Rect width={24} height={24} rx={12} fill={color} />

<Path
d="M8.632 17a.324.324 0 01-.238-.098.324.324 0 01-.098-.238v-.714c0-.084.019-.182.056-.294a.92.92 0 01.294-.364l2.212-2.198c.616-.485 1.11-.896 1.484-1.232.383-.345.658-.658.826-.938.177-.29.266-.574.266-.854 0-.42-.117-.76-.35-1.022-.224-.261-.583-.392-1.078-.392-.327 0-.602.07-.826.21-.224.13-.401.308-.532.532a2.405 2.405 0 00-.252.742c-.019.121-.07.205-.154.252a.515.515 0 01-.252.07H8.744a.285.285 0 01-.21-.084.269.269 0 01-.084-.196c.01-.401.093-.789.252-1.162.159-.383.387-.719.686-1.008a3.438 3.438 0 011.12-.714 3.93 3.93 0 011.484-.266c.775 0 1.414.13 1.918.392.513.261.896.616 1.148 1.064.261.448.392.952.392 1.512 0 .439-.084.845-.252 1.218a4.16 4.16 0 01-.728 1.064c-.317.336-.7.681-1.148 1.036l-1.988 2.016h3.99c.103 0 .182.033.238.098a.296.296 0 01.098.238v.994a.324.324 0 01-.098.238.296.296 0 01-.238.098H8.632z"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import * as React from 'react'
import Svg, {Path, Rect} from 'react-native-svg'

export const Number2Empty = () => {
type Props = {
color?: string
size?: number
}

export const Number2Empty = ({color = '#A7AFC0', size = 24}: Props) => {
return (
<Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
<Rect x={1} y={1} width={22} height={22} rx={11} stroke="#A7AFC0" strokeWidth={2} />
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
<Rect x={1} y={1} width={22} height={22} rx={11} stroke={color} strokeWidth={2} />

<Path
d="M8.632 17a.324.324 0 01-.238-.098.324.324 0 01-.098-.238v-.714c0-.084.019-.182.056-.294a.92.92 0 01.294-.364l2.212-2.198c.616-.485 1.11-.896 1.484-1.232.383-.345.658-.658.826-.938.177-.29.266-.574.266-.854 0-.42-.117-.76-.35-1.022-.224-.261-.583-.392-1.078-.392-.327 0-.602.07-.826.21-.224.13-.401.308-.532.532a2.405 2.405 0 00-.252.742c-.019.121-.07.205-.154.252a.515.515 0 01-.252.07H8.744a.285.285 0 01-.21-.084.269.269 0 01-.084-.196c.01-.401.093-.789.252-1.162.159-.383.387-.719.686-1.008a3.438 3.438 0 011.12-.714 3.93 3.93 0 011.484-.266c.775 0 1.414.13 1.918.392.513.261.896.616 1.148 1.064.261.448.392.952.392 1.512 0 .439-.084.845-.252 1.218a4.16 4.16 0 01-.728 1.064c-.317.336-.7.681-1.148 1.036l-1.988 2.016h3.99c.103 0 .182.033.238.098a.296.296 0 01.098.238v.994a.324.324 0 01-.098.238.296.296 0 01-.238.098H8.632z"
fill="#A7AFC0"
fill={color}
/>
</Svg>
)
Expand Down
13 changes: 9 additions & 4 deletions apps/wallet-mobile/src/components/StepperProgress/Number3.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import * as React from 'react'
import Svg, {ClipPath, Defs, G, Path, Rect, SvgProps} from 'react-native-svg'
import Svg, {ClipPath, Defs, G, Path, Rect} from 'react-native-svg'

export const Number3 = (props: SvgProps) => {
type Props = {
color?: string
size?: number
}

export const Number3 = ({color = '#3154CB', size = 24}: Props) => {
return (
<Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
<G clipPath="url(#clip0_22029_17582)">
<Rect width={24} height={24} rx={12} fill="#4B6DDE" />
<Rect width={24} height={24} rx={12} fill={color} />

<Path
d="M11.945 17.14c-.654 0-1.218-.08-1.694-.238-.476-.159-.873-.364-1.19-.616a2.894 2.894 0 01-.7-.84 2.125 2.125 0 01-.252-.91c0-.084.028-.15.084-.196a.334.334 0 01.224-.084h1.26c.093 0 .172.019.238.056.065.037.121.112.168.224.084.252.22.453.406.602.196.15.42.257.672.322.252.056.518.084.798.084.56 0 1.003-.13 1.33-.392.336-.27.504-.653.504-1.148 0-.495-.154-.85-.462-1.064-.308-.224-.737-.336-1.288-.336H10.6a.374.374 0 01-.252-.084.341.341 0 01-.098-.252v-.588c0-.093.019-.173.056-.238.046-.075.093-.135.14-.182l2.506-2.45H8.949a.341.341 0 01-.252-.098.353.353 0 01-.084-.238V7.55c0-.103.028-.187.084-.252a.341.341 0 01.252-.098h6.006c.102 0 .187.033.252.098a.34.34 0 01.098.252v.84a.443.443 0 01-.056.224.788.788 0 01-.126.168L12.7 11.274l.168.014a4.19 4.19 0 011.512.392c.448.205.793.509 1.036.91.252.401.378.905.378 1.512 0 .635-.168 1.18-.504 1.638-.327.448-.78.793-1.358 1.036-.579.243-1.242.364-1.988.364z"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import * as React from 'react'
import Svg, {Path, Rect} from 'react-native-svg'

export const Number3Empty = () => {
type Props = {
color?: string
size?: number
}

export const Number3Empty = ({color = '#3154CB', size = 24}: Props) => {
return (
<Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
<Rect x={1} y={1} width={22} height={22} rx={11} stroke="#A7AFC0" strokeWidth={2} />
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
<Rect x={1} y={1} width={22} height={22} rx={11} stroke={color} strokeWidth={2} />

<Path
d="M11.945 17.14c-.654 0-1.218-.08-1.694-.238-.476-.159-.873-.364-1.19-.616a2.894 2.894 0 01-.7-.84 2.125 2.125 0 01-.252-.91c0-.084.028-.15.084-.196a.334.334 0 01.224-.084h1.26c.093 0 .172.019.238.056.065.037.121.112.168.224.084.252.22.453.406.602.196.15.42.257.672.322.252.056.518.084.798.084.56 0 1.003-.13 1.33-.392.336-.27.504-.653.504-1.148 0-.495-.154-.85-.462-1.064-.308-.224-.737-.336-1.288-.336H10.6a.374.374 0 01-.252-.084.341.341 0 01-.098-.252v-.588c0-.093.019-.173.056-.238.046-.075.093-.135.14-.182l2.506-2.45H8.949a.341.341 0 01-.252-.098.353.353 0 01-.084-.238V7.55c0-.103.028-.187.084-.252a.341.341 0 01.252-.098h6.006c.102 0 .187.033.252.098a.34.34 0 01.098.252v.84a.443.443 0 01-.056.224.788.788 0 01-.126.168L12.7 11.274l.168.014a4.19 4.19 0 011.512.392c.448.205.793.509 1.036.91.252.401.378.905.378 1.512 0 .635-.168 1.18-.504 1.638-.327.448-.78.793-1.358 1.036-.579.243-1.242.364-1.988.364z"
fill="#A7AFC0"
fill={color}
/>
</Svg>
)
Expand Down
13 changes: 9 additions & 4 deletions apps/wallet-mobile/src/components/StepperProgress/Number4.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import * as React from 'react'
import Svg, {ClipPath, Defs, G, Path, Rect, SvgProps} from 'react-native-svg'
import Svg, {ClipPath, Defs, G, Path, Rect} from 'react-native-svg'

export const Number4 = (props: SvgProps) => {
type Props = {
color?: string
size?: number
}

export const Number4 = ({color = '#3154CB', size = 24}: Props) => {
return (
<Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
<G clipPath="url(#clip0_8313_223336)">
<Rect width={24} height={24} rx={12} fill="#3154CB" />
<Rect width={24} height={24} rx={12} fill={color} />

<Path
d="M12.964 17a.324.324 0 01-.238-.098.324.324 0 01-.098-.238v-1.792H8.19a.341.341 0 01-.252-.098.353.353 0 01-.084-.238v-.952c0-.056.009-.121.028-.196a.662.662 0 01.126-.224l4.13-5.726c.12-.159.294-.238.518-.238h1.526c.093 0 .172.033.238.098a.324.324 0 01.098.238v5.684h1.246c.112 0 .196.033.252.098a.296.296 0 01.098.238v.98a.324.324 0 01-.098.238.324.324 0 01-.238.098h-1.26v1.792a.324.324 0 01-.098.238.324.324 0 01-.238.098h-1.218zM9.8 13.276h2.87V9.23L9.8 13.276z"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import * as React from 'react'
import Svg, {Path, Rect} from 'react-native-svg'

export const Number4Empty = () => {
type Props = {
color?: string
size?: number
}

export const Number4Empty = ({color = '#A7AFC0', size = 24}: Props) => {
return (
<Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
<Rect x={1} y={1} width={22} height={22} rx={11} stroke="#A7AFC0" strokeWidth={2} />
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
<Rect x={1} y={1} width={22} height={22} rx={11} stroke={color} strokeWidth={2} />

<Path
d="M12.964 17a.324.324 0 01-.238-.098.324.324 0 01-.098-.238v-1.792H8.19a.341.341 0 01-.252-.098.353.353 0 01-.084-.238v-.952c0-.056.009-.121.028-.196a.662.662 0 01.126-.224l4.13-5.726c.12-.159.294-.238.518-.238h1.526c.093 0 .172.033.238.098a.324.324 0 01.098.238v5.684h1.246c.112 0 .196.033.252.098a.296.296 0 01.098.238v.98a.324.324 0 01-.098.238.324.324 0 01-.238.098h-1.26v1.792a.324.324 0 01-.098.238.324.324 0 01-.238.098h-1.218zM9.8 13.276h2.87V9.23L9.8 13.276z"
fill="#A7AFC0"
fill={color}
/>
</Svg>
)
Expand Down
Loading
Loading