Skip to content

Commit

Permalink
[wallet]: update wallet welcome page (#10927)
Browse files Browse the repository at this point in the history 
## Description 

- Update value prop texts
- https://mysten.atlassian.net/browse/APPS-746


![image](https://user-images.githubusercontent.com/127577476/232667278-e146e865-5cc1-4bd7-b572-af972e709c93.png)


## Test Plan 

How did you test the new or updated feature?

---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [ ] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes

---------

Co-authored-by: Phong Lam <[email protected]>
  • Loading branch information
@plam-ml
plam-ml and Phong Lam authored Apr 18, 2023
1 parent 5ee7c29 commit 17372ee
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 167 deletions.
109 changes: 0 additions & 109 deletions apps/wallet/src/ui/app/pages/welcome/Welcome.module.scss
View file

This file was deleted.

112 changes: 55 additions & 57 deletions apps/wallet/src/ui/app/pages/welcome/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,89 @@
// Copyright (c) Mysten Labs, Inc.
// SPDX-License-Identifier: Apache-2.0

import cl from 'classnames';
import { Link } from 'react-router-dom';
import { ArrowRight16, CheckFill16 } from '@mysten/icons';

import { Button } from '_app/shared/ButtonUI';
import BottomMenuLayout, { Content } from '_app/shared/bottom-menu-layout';
import { Heading } from '_app/shared/heading';
import { Text } from '_app/shared/text';
import Icon, { SuiIcons } from '_components/icon';
import Loading from '_components/loading';
import Logo from '_components/logo';
import { useInitializedGuard } from '_hooks';
import PageLayout from '_pages/layout';

import st from './Welcome.module.scss';
const VALUE_PROP = [
'Send, receive tokens and NFTs',
'Stake SUI to earn rewards. Help the Sui network remain decentralized.',
'Explore apps on Sui blockchain',
'Quickly revoke access connection given to apps',
'Track your Sui network activity',
];

const WelcomePage = () => {
const checkingInitialized = useInitializedGuard(false);
return (
<PageLayout forceFullscreen={true}>
<Loading loading={checkingInitialized}>
<div className="flex flex-col flex-nowrap items-center justify-center">
<div className="pt-6 rounded-20 bg-sui-lightest shadow-wallet-content flex flex-col flex-nowrap items-center justify-center w-popup-width h-popup-height">
<div className="rounded-20 bg-sui-lightest shadow-wallet-content flex flex-col flex-nowrap items-center justify-center w-popup-width h-popup-height">
<BottomMenuLayout>
<Content className="flex flex-col flex-nowrap items-center p-7.5 pb-0">
<div className="mt-7.5 text-hero">
<Logo />
</div>
<div className="mx-auto text-center mt-12">
<Heading
variant="heading2"
color="gray-90"
as="h1"
weight="bold"
>
Welcome to Sui Wallet
</Heading>
<div className="mt-5">
<Text
variant="pBody"
color="steel-dark"
weight="medium"
>
Connecting you to the decentralized
web and Sui network.
</Text>
</div>
<div className="flex gap-2 mt-10 items-center">
<Icon
icon={SuiIcons.Checkmark}
className="text-success text-[8px]"
/>

<Text
variant="body"
color="steel-dark"
weight="medium"
<div className="mx-auto mt-7">
<div className="text-center">
<Heading
variant="heading2"
color="gray-90"
as="h1"
weight="bold"
>
Buy, store, send and swap tokens
</Text>
Welcome to Sui Wallet
</Heading>
<div className="mt-3">
<Text
variant="pBody"
color="steel-dark"
weight="medium"
>
Connecting you to the
decentralized web and Sui
network.
</Text>
</div>
</div>
<div className="flex gap-2 mt-3 items-center">
<Icon
icon={SuiIcons.Checkmark}
className="text-success text-[8px]"
/>
<Text
variant="body"
color="steel-dark"
weight="medium"
>
Explore blockchain apps
</Text>

<div className="mt-6 flex gap-2 flex-col">
{VALUE_PROP.map((value) => (
<div
key={value}
className="flex gap-2 items-center border bg-sui-light/40 border-sui/30 border-solid rounded-xl px-3 py-2"
>
<CheckFill16 className="text-steel flex-none w-4 h-4" />

<Text
variant="pBody"
color="steel-darker"
weight="medium"
>
{value}
</Text>
</div>
))}
</div>
</div>
</Content>
<div className={st.getStarted}>
<Link

<div className="flex sticky pb-10 m-auto w-[300px] -bottom-px bg-sui-lightest">
<Button
to="/initialize/select"
className={cl(st.cta, 'btn', 'primary')}
>
Get Started
<Icon
icon={SuiIcons.ArrowLeft}
className={cl(st.arrowLeft)}
/>
</Link>
size="tall"
text="Get Started"
after={<ArrowRight16 />}
/>
</div>
</BottomMenuLayout>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/wallet/src/ui/styles/values/colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ $sui-dark-blue: #1f6493;
$sui-steel-blue: #a0b6c3;
$sui-steel-darker: #566873;
$sui-blue-steel-dark: #758f9e;
$cta-blue: #0284ad;
$cta-blue: #007195;
$cta-blue-hover: #007195;
$hero: #0284ad;
$hero-dark: #007195;
Expand Down

0 comments on commit 17372ee

Please sign in to comment.