Skip to content

Commit b2aa05b

Browse files
committed
Adjusted README and package.json keywords
1 parent c3313aa commit b2aa05b

5 files changed

Lines changed: 29 additions & 97 deletions

File tree

README.md

Lines changed: 21 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,30 @@
11
# CSPR.design
22

3-
> **Build faster with CSPR.design**
3+
CSPR.design is a React-based UI component library powering the CSPR.suite application family, including [CSPR.live](https://cspr.live) and [Casper Wallet](https://casperwallet.io). It provides a consistent design language, reusable components, and shared styling utilities to ensure a cohesive user experience across products. CSPR.design enables faster development, easier maintenance, and a unified brand presence throughout the Casper Ecosystem.
44

5-
A production-ready React UI component library for Casper blockchain applications. Part of the **CSPR Products Suite**, used by [cspr.live](https://cspr.live/), CSPR.market, and other major ecosystem projects.
5+
**Battle-tested** components from production apps \
6+
**Blockchain-focused** with Casper-specific utilities \
7+
**Consistent design** across the Casper ecosystem
68

79
[![Install](https://img.shields.io/badge/npm-github%3Amake--software%2Fcspr--design-blue)](https://github.com/make-software/cspr-design)
810
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/)
911
[![Production](https://img.shields.io/badge/Production-Tested-green)](https://cspr.live)
1012

1113
---
1214

13-
## Get started in 5 minutes
15+
## Get started
1416

15-
Install from NPM to access ready-to-use components that bring the beloved Casper community UI to your dApp. Save time on design and implementation with clean, consistent look tailored for Web3.
16-
17-
**Battle-tested** components from production apps \
18-
**Blockchain-focused** with Casper-specific utilities \
19-
**Consistent design** across the Casper ecosystem
20-
21-
## Installation
17+
Install from [NPM](https://www.npmjs.com/package/@make-software/cspr-design) to access ready-to-use components that bring the beloved [Casper blockchain](https://casper.network) community UI to your dApp:
2218

2319
```bash
2420
npm install @make-software/cspr-design
2521
```
2622

27-
## Quick Start
23+
Save time on design and implementation with a consistent Casper Network look:
2824

2925
```jsx
3026
import {
31-
Cspr,
27+
CSPR,
3228
BodyText,
3329
FlexColumn,
3430
AccountInfo,
@@ -38,49 +34,28 @@ import {
3834
const MyApp = () => (
3935
<FlexColumn itemsSpacing={20}>
4036
<BodyText size={2}>Account Balance:</BodyText>
41-
<Cspr
37+
<CSPR
4238
motes="50000000000000"
4339
precisionCase={PrecisionCase.full}
4440
/>
4541
<AccountInfo
46-
accountHash="01a2b3c4d5e6f7..."
42+
accountHash="200826c53eb84181e749681bc276f1d3a3f7e6dd76c5f260b77bb54a2b4590a9"
4743
balance="1500000000"
4844
/>
4945
</FlexColumn>
5046
);
5147
```
5248

53-
## Perfect Match with CSPR Ecosystem
54-
55-
**🌐 [CSPR.cloud](https://docs.cspr.cloud/)** - Get blockchain data
56-
**🔐 [CSPR.click](https://docs.cspr.click/)** - Handle wallet connections
57-
**🎨 CSPR.design** - Build beautiful UIs
58-
59-
```jsx
60-
// Data from CSPR.cloud + UI from CSPR.design = 🚀
61-
const DeployInfo = ({ deploy }) => (
62-
<FlexColumn itemsSpacing={16}>
63-
<BodyText>Deploy Cost:</BodyText>
64-
<Cspr motes={deploy.payment_amount} />
65-
</FlexColumn>
66-
);
67-
```
68-
69-
## Check examples in the storybook
49+
## Storybook examples
7050

71-
Explore live previews of every component, complete with usage guidelines and props. See how each UI element behaves in real-world scenarios. No guesswork, just plug and play.
51+
Explore [CSPR.design Storybook](https://storybook.cspr.design) for live previews of every component, complete with usage guidelines and props. See how each UI element behaves in real-world scenarios. No guesswork, just plug and play.
7252

73-
```bash
74-
# View components in Storybook
75-
npm run build-storybook && npm run storybook
53+
![CSPR.design Storybook](docs/images/storybook.png)
7654

77-
# Build library
78-
npm run build:dist
79-
```
8055

81-
### Troubleshooting
56+
## Troubleshooting
8257

83-
**Vite + styled-components issue?** Add to your `vite.config.js`:
58+
Please add the following to your `vite.config.js` if you are experiencing issues with `vite` and `styled-components`:
8459

8560
```js
8661
resolve: {
@@ -96,17 +71,17 @@ resolve: {
9671

9772
## Resources
9873

99-
📖 **[Full Documentation](https://cspr.design/)** - Complete guide
100-
🎨 **[Storybook](https://storybook.cspr.design/)** - Interactive components
101-
🐛 **[Report Issues](https://github.com/make-software/cspr-design/issues)** - Bugs & features
102-
💬 **[Community](telegram-url)** - Get help & discuss
74+
75+
📕 **[Storybook](https://storybook.cspr.design)**: Interactive examples
76+
🐞 **[Report Issues](https://github.com/make-software/cspr-design/issues)**: Please report issues here
77+
💬 **[Casper Telegram Community](https://t.me/CSPRDevelopers)**: Ask developers and fellow builders for help
10378

10479
---
10580

10681
<div align="center">
10782

108-
**Built by [MAKE](https://make.services) for the Casper ecosystem**
83+
**Star this repo if CSPR.design helped you build something cool!**
10984

110-
**Star this repo if CSPR.design helped you build something cool!**
11185

86+
Built by [MAKE](https://makegroup.io) for the Casper ecosystem
11287
</div>

docs/images/storybook.png

224 KB
Loading

docs/overview.md

Lines changed: 0 additions & 50 deletions
This file was deleted.

package.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
{
22
"name": "@make-software/cspr-design",
33
"version": "2.0.0",
4+
"description": "React-based UI component library powering Casper Blockchain applications",
45
"main": "dist/cspr-design.umd.js",
56
"module": "dist/cspr-design.es.js",
67
"types": "dist/lib/index.d.ts",
78
"type": "module",
89
"repository": "git://github.com/make-software/cspr-design",
10+
"keywords": [
11+
"casper",
12+
"blockchain",
13+
"react",
14+
"web3"
15+
],
916
"exports": {
1017
".": {
1118
"import": "./dist/cspr-design.es.js",

src/01-Home.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ It provides a consistent design language, reusable components, and shared stylin
2222

2323
# Get started
2424

25-
Install from [NPM](https://www.npmjs.com/package/@make-software/cspr-design) to access ready-to-use components that bring the beloved [Casper blockchain](https://casper.networ) community UI to your dApp:
25+
Install from [NPM](https://www.npmjs.com/package/@make-software/cspr-design) to access ready-to-use components that bring the beloved [Casper blockchain](https://casper.network) community UI to your dApp:
2626

2727
```
2828
npm install @make-software/cspr-design --save

0 commit comments

Comments
 (0)