First, install the packages and run the development server:
yarn && yarn dev
There's a stack of pieces that all work together, they rely on react and react chakra ui:
@cosmwasm/ts-codegen for generated CosmWasm contract Typescript classes
@cosmology/telescope a "babel for the Cosmos", Telescope is a TypeScript Transpiler for Cosmos Protobufs.
chain-registry an npm module for the official Cosmos chain-registry.
cosmos-kit A wallet connector for the Cosmos ⚛️
create-cosmos-app set up a modern Cosmos app by running one command.
starship a k8s-based unified development environment for Cosmos Ecosystem
This gives us access to the actual user wallet, address and facts in a reactive way:
https://docs.cosmoskit.com/get-started
See also:
https://github.com/cosmology-tech/cosmos-kit/blob/main/packages/example/pages/tx.tsx
import * as React from 'react';
import { useChain } from "@cosmos-kit/react";
function Component ({ chainName }: { chainName: string }) => {
const chainContext = useChain(chainName);
const {
status,
username,
address,
message,
connect,
disconnect,
openView,
} = chainContext;
}
Their intro says "The quickest and easiest way to interact with CosmWasm Contracts. @cosmwasm/ts-codegen converts your CosmWasm smart contracts into dev-friendly TypeScript classes so you can focus on shipping code.". See:
https://github.com/CosmWasm/ts-codegen
More specifically codegen performs two distinct things:
1) it exposes rust/wasm contracts to typescript (as advertised)
2) it exposes rust/wasm contract integration to react itself with a specific recommended usage/setup pattern
In their example they introduce a concept of a ContractsProvider. Apparently it wants an address - which may be the ledger address of the contract?:
import { useChain } from '@cosmos-kit/react';
import { ContractsProvider } from '../path/to/codegen/contracts-context';
export default function YourComponent() {
const {
address,
getCosmWasmClient,
getSigningCosmWasmClient
} = useChain(chainName);
return (
<ContractsProvider
contractsConfig={{
address,
getCosmWasmClient,
getSigningCosmWasmClient,
}}
>
<SomeCoolComponent />
</ContractsProvider>
)
};
From there, there's some kind of concept or assumption that a developer wants or needs to then useContracts(). Perhaps this is some kind of late binding effect? It doesn't seem like a sender is specified here? Is the sender the address of the human with the kepler wallet? It's unclear if this brings up kepler or not?
const { marketplace } = useContracts();
const marketplaceClient = marketplace.signingClient(marketplaceContract);
await marketplaceClient.updateAskPrice({
collection: token.collectionAddr,
price: {
amount,
denom,
},
tokenId,
});
https://github.com/cosmology-tech/create-cosmos-app
The meat here is to be able to have a wallet come up, and actually call the contract with signing permissions.
Here's an example of doing this at a low level - but maybe the and the codegen stuff magically hides some of this work? It isn't totally clear to me if a developer should do this explicitly or if it is magiked away:
const { isWalletConnected } = useChain(chainName);
const { contracts, isReady } = useContracts();
const handleClick = async () => {
if (!address || !isReady) return;
const client = contracts.sg721Updatable.getSigningClient(token.collectionAddr);
const marketplaceMsgComposer =
contracts.marketplace.getMessageComposer(marketplaceContract);
const sg721UpdatableMsgComposer =
contracts.sg721Updatable.getMessageComposer(token.collectionAddr);
const msgs = [
sg721UpdatableMsgComposer.approve({
spender: marketplaceContract,
tokenId: token.tokenId,
expires: { at_time: getExpirationTime('14') },
}),
marketplaceMsgComposer.acceptCollectionBid({
collection: token.collectionAddr,
tokenId: parseInt(token.tokenId),
bidder: token.highestCollectionBidEvent!.bidder!.addr,
}),
];
await tx(msgs, { gas: '666666' }, () => {
// done
});
};
getSigningCosmWasmClientOptions
https://github.com/cosmology-tech/chain-registry/issues/13
https://docs.cosmoskit.com/provider/chain-provider#adding-localnet-and-testnets
https://docs.walletconnect.com/advanced/providers/universal
? chakra ui overrides colorMode and doesn't seem to listen to theme.js settings
- improve progress bar
- nav bar should be stickier to the top; not show below
- the wallet menu is a bit bulky visually
- tug of war art
- stats on each item
- show juno balance
- show where you actually staked stuff
- reflect the contract state (play, or outcome)
- show the actual live number of soldiers per battle
- withdraw button for outcome page
main page prior to game
[blotto!] [about]
BLOTTO IS STARTING IN X DAYS : MIN : SEC
main page during game
[blotto!] [about]
BLOTTO IS LIVE!
[battlefield x]
[xxxxxxxxx ]
[RED] [BLUE]
[battlefield x]
[xxxxxxxxx ]
[battlefield x]
[xxxxxxxxx ]
[battlefield x]
[xxxxxxxxx ]
[battlefield x]
[xxxxxxxxx ]
main page during reconciliation
[blotto!] [about]
BLUE VICTORY!
[withdraw]