The User Interface

Follow these steps to develop Prompt Wars on your machine

First, clone the repo:

git clone [email protected]:aufacicenta/pulsemarkets.git prompt-wars

Then enter the app directory and run:

cd app && yarn

You'll need some values on your .env file, update the values accordingly:

export NODE_ENV=test
export NEXT_PUBLIC_ORIGIN="http://localhost:3000"

export NEXT_PUBLIC_DEFAULT_NETWORK_ENV="testnet"

# # pw-server.pulsemarkets.testnet
export NEAR_SIGNER_PRIVATE_KEY="..." # get this key string after creating a sub-account via NEAR CLI
# # pulsemarkets.testnet
export NEAR_OWNER_PRIVATE_KEY="..." # get this key string after creating an account via NEAR CLI

export REPLICATE_API_TOKEN="..." # https://replicate.ai/

export NEXT_PUBLIC_WEBSOCKETS_PORT=8000

By now, you should be able to run:

yarn dev:debug

and you'll see the app running in http:localhost:3003

The app/src directory

.
├── app
│   ├── home
│   ├── market
│   └── prompt-wars <== focus on this directory
├── context
│   ├── near
│   ├── tab
│   ├── toast
│   ├── wallet
│   └── wallet-selector
├── hooks
│   ├── useDebounce
│   ├── useFocusableList
│   ├── useLocalStorage
│   ├── useOnClickOutside
│   ├── useRoutes
│   ├── useTabContext
│   ├── useToastContext
│   └── useUniqueId
├── layouts
│   └── dashboard-layout
├── pages
│   ├── api
│   └── market
├── providers
│   ├── currency
│   ├── date
│   ├── ipfs
│   ├── logger
│   ├── near
│   ├── pulse
│   ├── switchboard
│   └── websockets
├── theme
│   ├── button
│   ├── editor
│   ├── forms
│   ├── mixins
│   └── utilities
├── types
└── ui
    ├── animations
    ├── button
    ├── card
    ├── category-pills
    ├── circular-progress
    ├── dropdown
    ├── fixed-top-alert
    ├── footer
    ├── form
    ├── generic-loader
    ├── grid
    ├── horizontal-line
    ├── icon
    ├── iconButton
    ├── icons
    ├── locale-selector
    ├── mainpanel
    ├── menuList
    ├── modal
    ├── notifications
    ├── pulse
    ├── tab
    ├── table
    ├── theme-selector
    ├── toast
    ├── tooltip
    ├── typography
    ├── wallet-selector
    └── wallet-selector-navbar

A good place to start is at the app/src/pages/index.tsx file. This file renders the homepage at http://localhost:3003

Contract Controllers

All the Rust contracts that you see under ./contracts/ have their corresponding Typescript files. For example, for ./contracts/prompt-wars/contract.rs there are:

• NearPromptWarsMarketContractContextController.tsx

  • To be used with useNearPromptWarsMarketContractContext.ts

• class PromptWarsMarketContract

  • Handles VIEW and CHANGE methods directly

Note that contract.ts classes can be used directly on the server side:

const marketContract = await PromptWarsMarketContract.loadFromGuestConnection(marketId);
const marketData = await marketContract.get_market_data();
const resolution = await marketContract.get_resolution_data();