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.

Sign up for GitHub

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

Jump to bottom

feat: New design transfer pages #1451

Merged
merged 4 commits into from
Aug 6, 2024
Merged

feat: New design transfer pages #1451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e12d7d9
Merge branch '1388-test-wallet-new-design-transfer-pages' of https://…
Tymmmy Jul 18, 2024
9d469c2
added badge changes for transfer pages
Tymmmy Jul 18, 2024
acfc512
Quote fixes for payments
Tymmmy Jul 30, 2024
c81bea3
Merge branch '1388-test-wallet-new-design-transfer-pages' of https://…
Tymmmy Jul 30, 2024
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
16 changes: 14 additions & 2 deletions packages/wallet/frontend/src/components/dialogs/QuoteDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import { Button } from '@/ui/Button'
import { formatAmount, getFee } from '@/utils/helpers'
import { Dialog, Transition } from '@headlessui/react'
import { Fragment } from 'react'
import { PaperPlane } from '../icons/PaperPlane'
import { PaperPlaneDark, PaperPlaneLight } from '../icons/PaperPlane'
import { QuoteResponse } from '@wallet/shared'
import { useTheme } from 'next-themes'

type QuoteDialogProps = {
onClose: () => void
Expand All @@ -21,6 +22,7 @@ export const QuoteDialog = ({
type,
receiverName
}: QuoteDialogProps) => {
const theme = useTheme()
const { setRunOnboarding, stepIndex, setStepIndex, isUserFirstTime } =
useOnboardingContext()
const receiveAmount = formatAmount({
Expand Down Expand Up @@ -65,7 +67,17 @@ export const QuoteDialog = ({
>
<Dialog.Panel className="relative w-full max-w-sm space-y-4 overflow-hidden rounded-lg bg-white dark:bg-purple p-8 shadow-xl">
<div className="flex flex-col text-center">
<PaperPlane strokeWidth={2} className="h-16 w-16 mx-auto" />
{theme.theme === 'dark' ? (
<PaperPlaneDark
strokeWidth={2}
className="h-16 w-16 mx-auto"
/>
) : (
<PaperPlaneLight
strokeWidth={2}
className="h-16 w-16 mx-auto"
/>
)}
<p className="text-center font-semibold text-turqoise">
{type === 'quote' ? 'You send: ' : 'You exchange: '}
{debitAmount.amount}
Expand Down
58 changes: 24 additions & 34 deletions packages/wallet/frontend/src/components/icons/PaperPlane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,37 @@
import { SVGProps } from 'react'

export const PaperPlane = (props: SVGProps<SVGSVGElement>) => {
export const PaperPlaneDark = (props: SVGProps<SVGSVGElement>) => {
return (
<svg
width="50"
height="50"
viewBox="0 0 50 46"
width="127"
height="117"
viewBox="0 0 127 117"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M38.54 44.8002C39.06 45.4502 40.11 45.2002 40.28 44.3802L48.78 2.29024C48.84 1.99024 48.77 1.68024 48.57 1.45024C48.31 1.14024 47.96 1.12024 47.95 1.11024C47.8 1.09024 47.67 1.10024 47.51 1.15024L1.48 15.5702C0.589996 15.8502 0.549996 17.1102 1.43 17.4402L16.5 23.0902L14.64 36.1402C14.64 36.1402 14.64 36.1402 14.64 36.1502C14.54 36.9302 15.35 37.5102 16.06 37.1602L27.77 31.3102L38.57 44.8002H38.54ZM38.76 41.9102C38.13 41.1202 25.44 25.2702 24.85 24.5202L46.24 4.87024L38.76 41.9102ZM4.8 16.5902L41.63 5.05024L17.45 21.3302L4.81 16.5902H4.8ZM18.49 23.0102L37.49 10.2202L22.83 23.6902C22.83 23.6902 22.83 23.6902 22.82 23.7002C22.81 23.7102 22.8 23.7202 22.78 23.7402C22.77 23.7502 22.76 23.7602 22.75 23.7802C22.75 23.7902 22.73 23.8002 22.72 23.8102C22.71 23.8302 22.7 23.8402 22.68 23.8602C22.68 23.8602 22.68 23.8602 22.67 23.8702L17.18 32.1002L18.48 23.0102H18.49ZM18.49 33.7202L23.58 26.0802L26.49 29.7202L18.49 33.7202Z"
fill="url(#paint0_linear_967_439)"
stroke="url(#paint1_linear_967_439)"
strokeWidth="0.75"
strokeLinecap="round"
strokeLinejoin="round"
d="M61.7333 19.617C15.0667 34.417 0 39.617 0 41.217C0 42.6837 5.73333 45.3504 19.0667 50.417C29.6 54.2837 38.9333 57.8837 39.8667 58.417C40.9333 59.217 40.8 63.617 38.8 76.6837C37.4667 86.1504 36.5333 94.2837 36.9333 94.817C38.1333 96.9504 41.7333 95.7504 56 88.5504C64 84.5504 70.9333 81.217 71.2 81.217C71.4667 81.217 78.2667 89.3504 86.1333 99.217C94.6667 110.017 101.333 117.217 102.533 116.95C104 116.684 107.333 102.15 116 59.8837C122.4 28.6837 127.333 2.41702 126.933 1.48369C126.667 0.550352 125.733 -0.116315 124.933 0.0170186C124 0.150352 95.6 8.95035 61.7333 19.617ZM105.067 12.5504C104.667 12.9504 90.8 22.417 74.1333 33.7504L43.8667 54.1504L27.3333 48.017C18.2667 44.6837 11.0667 41.617 11.3333 41.3504C12 40.817 102.933 12.1504 104.533 12.017C105.2 11.8837 105.467 12.1504 105.067 12.5504ZM110.533 60.417C105.2 86.5504 100.533 107.884 100.133 107.884C98.9333 107.75 64.6667 64.1504 64.6667 62.817C64.6667 61.3504 118.8 11.4837 119.467 12.2837C119.867 12.5504 115.733 34.2837 110.533 60.417ZM94 27.617C74.4 44.817 55.3333 64.017 50.6667 71.217C47.6 76.017 44.6667 79.8837 44.4 79.8837C43.6 79.8837 45.0667 66.6837 46.2667 61.4837C46.8 59.4837 54.2667 53.4837 70.5333 42.5504C91.6 28.1504 97.7333 24.2837 94 27.617ZM64.5333 72.1504L67.8667 76.5504L58.2667 81.3504C52.9333 84.1504 48.5333 86.1504 48.2667 85.8837C47.6 85.217 59.2 67.8837 60.2667 67.8837C60.8 67.8837 62.6667 69.8837 64.5333 72.1504Z"
fill="#FFEA00"
/>
</svg>
)
}

export const PaperPlaneLight = (props: SVGProps<SVGSVGElement>) => {
return (
<svg
width="127"
height="117"
viewBox="0 0 127 117"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M61.7333 19.617C15.0667 34.417 0 39.617 0 41.217C0 42.6837 5.73333 45.3504 19.0667 50.417C29.6 54.2837 38.9333 57.8837 39.8667 58.417C40.9333 59.217 40.8 63.617 38.8 76.6837C37.4667 86.1504 36.5333 94.2837 36.9333 94.817C38.1333 96.9504 41.7333 95.7504 56 88.5504C64 84.5504 70.9333 81.217 71.2 81.217C71.4667 81.217 78.2667 89.3504 86.1333 99.217C94.6667 110.017 101.333 117.217 102.533 116.95C104 116.684 107.333 102.15 116 59.8837C122.4 28.6837 127.333 2.41702 126.933 1.48369C126.667 0.550352 125.733 -0.116315 124.933 0.0170186C124 0.150352 95.6 8.95035 61.7333 19.617ZM105.067 12.5504C104.667 12.9504 90.8 22.417 74.1333 33.7504L43.8667 54.1504L27.3333 48.017C18.2667 44.6837 11.0667 41.617 11.3333 41.3504C12 40.817 102.933 12.1504 104.533 12.017C105.2 11.8837 105.467 12.1504 105.067 12.5504ZM110.533 60.417C105.2 86.5504 100.533 107.884 100.133 107.884C98.9333 107.75 64.6667 64.1504 64.6667 62.817C64.6667 61.3504 118.8 11.4837 119.467 12.2837C119.867 12.5504 115.733 34.2837 110.533 60.417ZM94 27.617C74.4 44.817 55.3333 64.017 50.6667 71.217C47.6 76.017 44.6667 79.8837 44.4 79.8837C43.6 79.8837 45.0667 66.6837 46.2667 61.4837C46.8 59.4837 54.2667 53.4837 70.5333 42.5504C91.6 28.1504 97.7333 24.2837 94 27.617ZM64.5333 72.1504L67.8667 76.5504L58.2667 81.3504C52.9333 84.1504 48.5333 86.1504 48.2667 85.8837C47.6 85.217 59.2 67.8837 60.2667 67.8837C60.8 67.8837 62.6667 69.8837 64.5333 72.1504Z"
fill="#02BB3E"
/>
<defs>
<linearGradient
id="paint0_linear_967_439"
x1="0.769996"
y1="23.1302"
x2="48.8"
y2="23.1302"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8ED7C6" />
<stop offset="1" stopColor="#56ADAB" />
</linearGradient>
<linearGradient
id="paint1_linear_967_439"
x1="0.389996"
y1="-26.9998"
x2="49.17"
y2="-26.9998"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8ED7C6" />
<stop offset="1" stopColor="#56ADAB" />
</linearGradient>
</defs>
</svg>
)
}
Loading