# Updating Startup File, Wallet Connect & Main Menu

## Prettier config <a href="#prettier-config" id="prettier-config"></a>

## Preparing the startup file <a href="#preparing-the-startup-file" id="preparing-the-startup-file"></a>

The first thing you have to do after creating the React App is to take a look inside the `src` directory. There you will find a file named `App.js` . This is the file that gives you control over the application’s startup. Initially, it returns the app’s main `HTML` content, having included the `<ConnectWallet/>` and `<ContractCallVote/>` tags. These refer to the components having the same names which can be found inside the `components` directory. For our app we will only use `<ConnectWallet/>`, which is responsible for the wallet connection, so you have to remove unnecessary code lines. After removal, the `App.js` `return` should look like this:

```tsx
return (
  <div className="App">
    <ConnectWallet />
  </div>
)
```

## Initializing ConnectWallet & MainMenu <a href="#initializing-connectwallet-and-mainmenu" id="initializing-connectwallet-and-mainmenu"></a>

### Update the Connect Wallet  <a href="#update-the-connect-wallet" id="update-the-connect-wallet"></a>

Having `App.js` modified, we have to move on what happens inside the `ConnectWallet` component. Once you are here, you can see the `authenticate()` function, containing `showConnect()` . Here we will need to modify the app’s name from `Stacks React Starter` to `NFT Web App Integration`. Now you are all set and ready for the fun!

As you certainly have seen before, applications have a main page, and we will build one to manage our app’s functionality. To make this possible, you will need some prerequisites. The first one is a constant to check the `ConnectWallet` component loaded successfully. You should do this using the `react State hook`, which will be imported inside `ConnectWallet`.

```jsx
const [mounted, setMounted] = useState(false);
```

We will place the constant inside the `ConnectWallet` component and it will look like this:

```jsx
import React, { useState, useEffect} from 'react';
```

​As you see, the `mounted` constant is a boolean. You will need to attach a `setMounted` function which allows you to update your `mounted` constant’s initial value using the `State hook` imported before. As you have seen before, we are initializing the `mounted` constant with the `false` value, because we assume that when `ConnectWallet` component is returned from `App.js`, its thread is not completed and we can not move forward. To check the thread completion, we will definitely need to use the `react Effect hook` . Summarily, by using the `Effect hook` inside `ConnectWallet` we can tell React to execute certain lines after successfully rendering the component we refer to. The result inside `ConnectWallet` component will look like this:

```tsx
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
```

Now we make sure the component’s content was successfully loaded just when the `mounted`’s value is set `true`. As we decided before, we will need a `MainMenu` component. Having implemented the mounted constant, we can jump to creating conditionals for returning the `MainMenu` component right after `ConnectWallet` accomplishes its mission. Although, you may be asking what our app will do unless the `ConnectWallet` component is mounted. The main returned content of the component we refer to should look like this:

```tsx
return (
  <header className="App-header">
    <h1>Integrate NFTs Into GameFi</h1>
      <button className="Connect" onClick={authenticate}>
        Connect Wallet
      </button>
      <a className="App-link" href="<https://stacksdegens.com/>" target="_blank">
        Build by Stacks Degens
      </a>
    </header>
);
```

In brief, as the `ConnectWallet` is still working on its execution thread, React will return the specific `HTML` content from above. By doing this, we made sure the user will receive content while the app is loading. The `<button className="Connect" onClick={authenticate}>` makes possible the user’s authentication by the `Hiro Wallet`. As it is clear to see, the button’s event handler is the `authenticate()` function we have seen before. When do we want to let the user pass through the authentication process? Certainly, when he is `signed out`. We can get the opposite state if the user is `signed in` and the component is `mounted`.

### Introduce the Main Menu

Based on the above assumption, we will start building the conditional for returning the `MainMenu` component. Please make sure you create a `MainMenu.js` file in the `src/components` directory that looks like this:

```jsx
export const MainMenu = () => {}
```

Above we have exported the `MainMenu` component, to make possible to return it inside the `ConnectWallet` component, but for this we will need to import it where we need it, too. In the `ConnectWallet` component:

```jsx
import { MainMenu } from './MainMenu';
```

This is how we will build the conditional, returning the corresponding `<MainMenu/>` component inside `ConnectWallet`:

```jsx
if (mounted && userSession.isUserSignedIn()) {
  return (
    <div>
      <MainMenu />
    </div>
  );
}
```

Let’s analyze the above code snippet. The first part of the condition is clear, referring to our `mounted` const. This will be true when the constant’s value is set on `true`. But what happens to the other side of our condition? You probably have already found out these statements inside `ConnectWallet`:

```jsx
import { AppConfig, showConnect, UserSession } from '@stacks/connect';

const appConfig = new AppConfig(['store_write', 'publish_data']);
export const userSession = new UserSession({ appConfig });
```

We can see above that `userSession` is nothing more than a session we create for each user, when getting on the `wallet authentication` stage. This gives us permission to check whether the user has completed the authentication step, using `userSession.isUserSignedIn()`. Exporting it will allow us to access its value, modify it and permanently taking it into account inside `ConnectWallet conditional`. These having been said, the condition will be `true` only if the `ConnectWallet` has been `mounted` `AND` the user is `signed in`. This is the appropriate environment to returning our `MainMenu` component. If at least one of these two conditions is `false`, `ConnectWallet` will continue to return its default `return content` we have discussed above.

## Developing the Main Menu

We are ready to get straight to our `MainMenu`. We made sure the user can reach this stage only after connecting his wallet. What if he wants to disconnect his wallet? Making this possible implies moving the `disconnect()` function from `ConnectWallet` to `MainMenu`. This function should be an `event handler` for a `<button>` if we want to give it functionality. For this, we have to return the following `<button>` tag:

```jsx
<button className="Connect" onClick={disconnect}>
  Disconnect Wallet
</button>
```

The `MainMenu` should look like this:

```jsx
import { userSession } from './ConnectWallet';

export const MainMenu = () => {
  const disconnect = ()  =>{
    userSession.signUserOut('/');
  }
  
  const userAddress = userSession.loadUserData().profile.stxAddress['testnet'];

  return (
    <div>
      <header className="App-header">
        <h1>Integrate NFTs Into GameFi</h1>
        <h6>{`Current user address: ${userAddress}`}</h6>
	<button className="Connect" onClick={disconnect}>Disconnect Wallet</button>
        <br></br>
        <a className="App-link" href="<https://stacksdegens.com/>" target="_blank">
          Build by Stacks Degens
        </a>
      </header>
    </div>
  );
};
```

As you surely have guessed, we import the `userSession` to the `MainMenu`. We will need it in case the user wants to `sign out` . Also, we want the user to be able to see his `userAddress`. For this, we will use the same imported `userSession` constant.&#x20;

By the `userSession.loadUserData().profile.stxAddress['testnet']}` tag we are returning the user’s `Stacks address` for the `testnet network`. We are doing this becausewe use the `testnet` network in our example.&#x20;

If you want to go the extra mile, you can create another `.js` file inside `constants` directory called `network.js`. There you should create a constant called `network`, export it, and use it wherever you need inside the project, surely after importing it.

## This is the branch with the changes done:

{% embed url="<https://github.com/BowTiedDeployer/workshop-nft-integration/tree/dapp/1-startup>" %}
branch dapp/1-startup
{% endembed %}

You can check the exact changes in this commit referring to them

{% embed url="<https://github.com/BowTiedDeployer/workshop-nft-integration/commit/60a8df2b5e8efbc6ab7cf37344df54001bd7d146>" %}
commit 60a8df2b5e8efbc6ab7cf37344df54001bd7d146
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.degenlab.io/gamefistacks/workshop/nft-web-app-integration/updating-startup-file-wallet-connect-and-main-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.