-
Notifications
You must be signed in to change notification settings - Fork 891
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2017 from brainsk/main
task 6 7
- Loading branch information
Showing
42 changed files
with
6,593 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
[readme.md](../readme.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
# Sui dApp Starter Template | ||
|
||
This dApp was created using `@mysten/create-dapp` that sets up a basic React | ||
Client dApp using the following tools: | ||
|
||
- [React](https://react.dev/) as the UI framework | ||
- [TypeScript](https://www.typescriptlang.org/) for type checking | ||
- [Vite](https://vitejs.dev/) for build tooling | ||
- [Radix UI](https://www.radix-ui.com/) for pre-built UI components | ||
- [ESLint](https://eslint.org/) | ||
- [`@mysten/dapp-kit`](https://sdk.mystenlabs.com/dapp-kit) for connecting to | ||
wallets and loading data | ||
- [pnpm](https://pnpm.io/) for package management | ||
|
||
## Starting your dApp | ||
|
||
To install dependencies you can run | ||
|
||
```bash | ||
pnpm install | ||
``` | ||
|
||
To start your dApp in development mode run | ||
|
||
```bash | ||
pnpm dev | ||
``` | ||
|
||
## Building | ||
|
||
To build your app for deployment you can run | ||
|
||
```bash | ||
pnpm build | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
<!doctype html> | ||
<html lang="en" class="dark-theme" style="color-scheme: dark"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Sui dApp Starter</title> | ||
|
||
<style> | ||
/* | ||
Josh's Custom CSS Reset | ||
https://www.joshwcomeau.com/css/custom-css-reset/ | ||
*/ | ||
*, | ||
*::before, | ||
*::after { | ||
box-sizing: border-box; | ||
} | ||
* { | ||
margin: 0; | ||
} | ||
body { | ||
line-height: 1.5; | ||
-webkit-font-smoothing: antialiased; | ||
} | ||
img, | ||
picture, | ||
video, | ||
canvas, | ||
svg { | ||
display: block; | ||
max-width: 100%; | ||
} | ||
input, | ||
button, | ||
textarea, | ||
select { | ||
font: inherit; | ||
} | ||
p, | ||
h1, | ||
h2, | ||
h3, | ||
h4, | ||
h5, | ||
h6 { | ||
overflow-wrap: break-word; | ||
} | ||
#root, | ||
#__next { | ||
isolation: isolate; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="/src/main.tsx"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
{ | ||
"name": "my-first-sui-dapp", | ||
"private": true, | ||
"version": "0.0.0", | ||
"type": "module", | ||
"scripts": { | ||
"dev": "vite", | ||
"build": "tsc && vite build", | ||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", | ||
"preview": "vite preview" | ||
}, | ||
"dependencies": { | ||
"@mysten/dapp-kit": "0.14.38", | ||
"@mysten/sui": "1.15.0", | ||
"@radix-ui/colors": "^3.0.0", | ||
"@radix-ui/react-icons": "^1.3.0", | ||
"@radix-ui/themes": "^3.1.1", | ||
"@tanstack/react-query": "^5.50.1", | ||
"navi-sdk": "^1.4.4", | ||
"react": "^18.3.1", | ||
"react-dom": "^18.3.1" | ||
}, | ||
"devDependencies": { | ||
"@types/react": "^18.3.3", | ||
"@types/react-dom": "^18.3.0", | ||
"@typescript-eslint/eslint-plugin": "^7.16.0", | ||
"@typescript-eslint/parser": "^7.16.0", | ||
"@vitejs/plugin-react-swc": "^3.7.0", | ||
"eslint": "^9.6.0", | ||
"eslint-plugin-react-hooks": "^4.6.2", | ||
"eslint-plugin-react-refresh": "^0.4.7", | ||
"prettier": "^3.3.2", | ||
"typescript": "^5.5.3", | ||
"vite": "^5.3.3" | ||
} | ||
} |
4 changes: 4 additions & 0 deletions
4
mover/brainsk/code/task6/my-first-sui-dapp/prettier.config.cjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
// eslint-disable-next-line no-undef | ||
module.exports = { | ||
proseWrap: "always", | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import { ConnectButton } from "@mysten/dapp-kit"; | ||
import { Box, Container, Flex, Heading } from "@radix-ui/themes"; | ||
import { WalletStatus } from "./WalletStatus"; | ||
import {PtbBlock} from "./ptbnav.tsx"; | ||
|
||
function App() { | ||
return ( | ||
<> | ||
<Flex | ||
position="sticky" | ||
px="4" | ||
py="2" | ||
justify="between" | ||
style={{ | ||
borderBottom: "1px solid var(--gray-a2)", | ||
}} | ||
> | ||
<Box> | ||
<Heading>dApp Starter Template</Heading> | ||
</Box> | ||
|
||
<Box> | ||
<ConnectButton /> | ||
</Box> | ||
</Flex> | ||
<Container> | ||
<Container | ||
mt="5" | ||
pt="2" | ||
px="4" | ||
style={{ background: "var(--gray-a2)", minHeight: 500 }} | ||
> | ||
<WalletStatus /> | ||
<PtbBlock /> | ||
</Container> | ||
</Container> | ||
</> | ||
); | ||
} | ||
|
||
export default App; |
42 changes: 42 additions & 0 deletions
42
mover/brainsk/code/task6/my-first-sui-dapp/src/OwnedObjects.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { useCurrentAccount, useSuiClientQuery } from "@mysten/dapp-kit"; | ||
import { Flex, Heading, Text } from "@radix-ui/themes"; | ||
|
||
export function OwnedObjects() { | ||
const account = useCurrentAccount(); | ||
const { data, isPending, error } = useSuiClientQuery( | ||
"getOwnedObjects", | ||
{ | ||
owner: account?.address as string, | ||
}, | ||
{ | ||
enabled: !!account, | ||
}, | ||
); | ||
|
||
if (!account) { | ||
return; | ||
} | ||
|
||
if (error) { | ||
return <Flex>Error: {error.message}</Flex>; | ||
} | ||
|
||
if (isPending || !data) { | ||
return <Flex>Loading...</Flex>; | ||
} | ||
|
||
return ( | ||
<Flex direction="column" my="2"> | ||
{data.data.length === 0 ? ( | ||
<Text>No objects owned by the connected wallet</Text> | ||
) : ( | ||
<Heading size="4">Objects owned by the connected wallet</Heading> | ||
)} | ||
{data.data.map((object) => ( | ||
<Flex key={object.data?.objectId}> | ||
<Text>Object ID: {object.data?.objectId}</Text> | ||
</Flex> | ||
))} | ||
</Flex> | ||
); | ||
} |
23 changes: 23 additions & 0 deletions
23
mover/brainsk/code/task6/my-first-sui-dapp/src/WalletStatus.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { useCurrentAccount } from "@mysten/dapp-kit"; | ||
import { Container, Flex, Heading, Text } from "@radix-ui/themes"; | ||
import { OwnedObjects } from "./OwnedObjects"; | ||
|
||
export function WalletStatus() { | ||
const account = useCurrentAccount(); | ||
|
||
return ( | ||
<Container my="2"> | ||
<Heading mb="2">Wallet Status</Heading> | ||
|
||
{account ? ( | ||
<Flex direction="column"> | ||
<Text>Wallet connected</Text> | ||
<Text>Address: {account.address}</Text> | ||
</Flex> | ||
) : ( | ||
<Text>Wallet not connected</Text> | ||
)} | ||
<OwnedObjects /> | ||
</Container> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import React from "react"; | ||
import ReactDOM from "react-dom/client"; | ||
import "@mysten/dapp-kit/dist/index.css"; | ||
import "@radix-ui/themes/styles.css"; | ||
|
||
import { SuiClientProvider, WalletProvider } from "@mysten/dapp-kit"; | ||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; | ||
import { Theme } from "@radix-ui/themes"; | ||
import App from "./App.tsx"; | ||
import { networkConfig } from "./networkConfig.ts"; | ||
|
||
const queryClient = new QueryClient(); | ||
|
||
ReactDOM.createRoot(document.getElementById("root")!).render( | ||
<React.StrictMode> | ||
<Theme appearance="dark"> | ||
<QueryClientProvider client={queryClient}> | ||
<SuiClientProvider networks={networkConfig} defaultNetwork="mainnet"> | ||
<WalletProvider autoConnect> | ||
<App /> | ||
</WalletProvider> | ||
</SuiClientProvider> | ||
</QueryClientProvider> | ||
</Theme> | ||
</React.StrictMode>, | ||
); |
17 changes: 17 additions & 0 deletions
17
mover/brainsk/code/task6/my-first-sui-dapp/src/networkConfig.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { getFullnodeUrl } from "@mysten/sui/client"; | ||
import { createNetworkConfig } from "@mysten/dapp-kit"; | ||
|
||
const { networkConfig, useNetworkVariable, useNetworkVariables } = | ||
createNetworkConfig({ | ||
devnet: { | ||
url: getFullnodeUrl("devnet"), | ||
}, | ||
testnet: { | ||
url: getFullnodeUrl("testnet"), | ||
}, | ||
mainnet: { | ||
url: getFullnodeUrl("mainnet"), | ||
}, | ||
}); | ||
|
||
export { useNetworkVariable, useNetworkVariables, networkConfig }; |
Oops, something went wrong.