> For the complete documentation index, see [llms.txt](https://coinop.gitbook.io/coinopreact-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://coinop.gitbook.io/coinopreact-documentation/getting-started.md).

# Getting Started

`coinopreact` is a React library that provides a set of hooks and components to interact with the CoinOp API.

### Installation:

NPM:

```bash
npm install coinopreact
```

PNMP:

<pre class="language-bash"><code class="lang-bash"><strong>pnpm install coinopreact
</strong></code></pre>

YARN:

```bash
yarn add coinopreact
```

### Solana Dependencies

NPM:

```sh
npm install @project-serum/anchor
@solana/wallet-adapter-react 
@solana/wallet-adapter-react-ui
@solana/wallet-adapter-wallets
@solana/web3.js
@solana/wallet-adapter-react-ui
@solana/wallet-adapter-wallets
```

PNMP:

```bash
pnpm install @project-serum/anchor
@solana/wallet-adapter-react 
@solana/wallet-adapter-react-ui
@solana/wallet-adapter-wallets
@solana/web3.js
@solana/wallet-adapter-react-ui
@solana/wallet-adapter-wallets
```

YARN:

```bash
yarn add @project-serum/anchor
@solana/wallet-adapter-react 
@solana/wallet-adapter-react-ui
@solana/wallet-adapter-wallets
@solana/web3.js
@solana/wallet-adapter-react-ui
@solana/wallet-adapter-wallets
```

More information about Solana Wallet Adapter can be found at <https://github.com/solana-labs/wallet-adapter>

### Project Setup:

<pre class="language-tsx"><code class="lang-tsx"><strong>import {
</strong>	ConnectionProvider,
	WalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import {
	UnsafeBurnerWalletAdapter,
} from "@solana/wallet-adapter-wallets";
// ^ Include your desired wallet providers...
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import { clusterApiUrl } from "@solana/web3.js";
import {AuthorizationProvider, CoinOpProvider} from 'coinopreact'; 

const Main = () => {
	const network = WalletAdapterNetwork.Devnet;

	// You can also provide a custom RPC endpoint
	const endpoint = useMemo(() => clusterApiUrl(network), [network]);

	const wallets = useMemo(() => [new UnsafeBurnerWalletAdapter()],
		[network]
	);

	return (
		&#x3C;>
			&#x3C;ConnectionProvider endpoint={endpoint}>
				&#x3C;WalletProvider wallets={wallets} autoConnect>
					&#x3C;WalletModalProvider>
						&#x3C;AuthorizationProvider>
							&#x3C;CoinOpProvider API_URL={"https://yourURL.com"} GAME_SLUG={""}>
								{/*
									YOUR APP CODE HERE
									&#x3C;App />
								*/}
							&#x3C;/CoinOpProvider>	
						&#x3C;/AuthorizationProvider>
					&#x3C;/WalletModalProvider>
				&#x3C;/WalletProvider>
			&#x3C;/ConnectionProvider>
		&#x3C;/>
	);
};
</code></pre>

If you do not provide an `API_URL` or `GAME_SLUG` they will default to the devnet URL & `"DCF"` respectively.