Looking for Ionic kit for you platform?
Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.
The Crypto Wallet Screen is a core feature in cryptocurrency and blockchain-based apps, allowing users to send, receive, and track digital assets in real time. A well-designed wallet interface includes wallet balance overviews, transaction history, QR code support, currency conversion rates, and secure transfer forms. Clear navigation and robust security features are crucial to building user confidence in managing their crypto holdings.
This guide will walk you through the steps to design and implement a Crypto Wallet Screen using the Ionic Design Kit. By leveraging its customizable UI components and the Ionic Framework, you can create a secure, responsive, and visually appealing crypto management interface that delivers both functionality and trust.
1. Install Ionic CLI with the command
Creating a project with the Ionic CLI
npm i -g @ionic/cli
2. Create a new project
To create a new project, run the following command.
ionic start crypto-wallet blank --type=react
3. Get inside the project directory
cd crypto-wallet
4. Create a Crypto wallet page
Create page CryptoWallet.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const CryptoWallet: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default CryptoWallet;
Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.
5. Select the layout structure
For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.
<IonPage>
<IonHeader>
<IonToolbar>
...
</IonToolbar>
</IonHeader>
<IonContent>
...
</IonContent>
</IonPage>
6. Create the header section
Use IonPage as the main container for the page layout. Add IonHeader to define the header area. Inside it, place IonToolbar for consistent toolbar styling, and use IonTitle with the class ion-text-center to center the page title text 'Wallet'.
<IonHeader>
<IonToolbar>
<IonTitle className='ion-text-center'>
Wallet
</IonTitle>
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
7. Add tabs with chips
Within IonContent with the class ion-padding for consistent spacing, add multiple IonChip components representing filter or navigation tabs. The first IonChip has the class active to visually highlight the selected 'Overview' tab, while the others are simple tabs labeled 'Spot', 'Funding', and 'Earn'.
...
<IonContent className='ion-padding'>
<IonChip className='active'>
Overview
</IonChip>
<IonChip>
Spot
</IonChip>
<IonChip>
Funding
</IonChip>
<IonChip>
Earn
</IonChip>
</IonContent>
8. Show the balance
Use a <div> with inline styles for left-aligned text and vertical margins to create a balance summary block. Inside, include IonLabel with the color 'medium' to style the 'Total Balance' label and a standard <h2> element to display the numeric balance amount.
...
<IonContent className='ion-padding'>
<div style={{ textAlign: "left", marginBottom: "20px", marginTop: "24px"}}>
<IonLabel color="medium">
Total Balance
</IonLabel>
<h2>
$0.264932971
</h2>
</div>
</IonContent>
9. Add action buttons
Create a <div> with the class btn-box to contain action buttons. Add two IonButton components: one with fill='outline' for the outlined 'Buy' button, and a solid 'Deposit' button without any fill attribute for contrast.
<IonContent className='ion-padding'>
...
<div className='btn-box'>
<IonButton fill='outline'>
Buy
</IonButton>
<IonButton>
Deposit
</IonButton>
</div>
</IonContent>
10. Switch between account and crypto tabs
Add two more IonChip components below, with the first one given the active class to highlight the 'Account' tab, while the second is a plain 'Crypto' tab, allowing users to switch between wallet account views.
<IonContent className='ion-padding'>
...
<IonChip className='active'>
Account
</IonChip>
<IonChip>
Crypto
</IonChip>
</IonContent>
11. Build the wallet details list
Use IonList with lines='none' to remove dividing lines between list items. Add multiple IonItem components to represent settings and wallet sections. Inside each item, use IonLabel for the section title or description and IonNote for supplementary details like balances. Include an IonButton with fill="clear", size="small", and color="dark" for an edit icon using IonIcon with the pencilOutline icon.
<IonContent className='ion-padding'>
...
<IonList lines='none'>
<IonItem>
<IonLabel>
Hide 0 balance wallet
</IonLabel>
<IonButton fill="clear" size="small" color="dark">
<IonIcon icon={pencilOutline} />
</IonButton>
</IonItem>
<IonItem>
<IonLabel>
Spot
</IonLabel>
<IonNote>
$0.264932971
</IonNote>
</IonItem>
<IonItem>
<IonLabel>
Funding
</IonLabel>
<IonNote>
$0
</IonNote>
</IonItem>
<IonItem>
<IonLabel>
Earn
</IonLabel>
<IonNote>
$0
</IonNote>
</IonItem>
<IonItem>
<IonLabel>
Isolated Margin
</IonLabel>
<IonNote>
$0
</IonNote>
</IonItem>
<IonItem>
<IonLabel>
1.12215
</IonLabel>
<IonNote>
$0
</IonNote>
</IonItem>
<IonItem>
<IonLabel>
USD-M Futures
</IonLabel>
<IonNote color="warning">
Activate
</IonNote>
</IonItem>
</IonList>
</IonContent>
12. Implement the bottom navigation
Add IonFooter to create a fixed bottom navigation bar. Use IonTabBar with slot="bottom" to position it at the screen’s bottom. Inside, define multiple IonTabButton elements, each with tab and href attributes for navigation. Include IonIcon for icons and IonLabel for text, highlighting the active tab 'Wallets' by applying color="primary" to both the icon and label.
<IonFooter>
<IonTabBar slot="bottom">
<IonTabButton tab="home" href="#">
<IonIcon icon={homeOutline} />
<IonLabel>
Home
</IonLabel>
</IonTabButton>
<IonTabButton tab="markets" href="#">
<IonIcon icon={statsChartOutline} />
<IonLabel>
Markets
</IonLabel>
</IonTabButton>
<IonTabButton tab="trade" href="#">
<IonIcon icon={trendingUpOutline} />
<IonLabel>
Trade
</IonLabel>
</IonTabButton>
<IonTabButton tab="futures" href="#">
<IonIcon icon={documentTextOutline} />
<IonLabel>
Futures
</IonLabel>
</IonTabButton>
<IonTabButton tab="wallets" href="#">
<IonIcon icon={walletOutline} color="primary" />
<IonLabel color="primary">
Wallets
</IonLabel>
</IonTabButton>
</IonTabBar>
</IonFooter>
Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.
Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!