⚛️ 📨 Outpost is a utility to help serve decentralized media using Arweave to audiences who are in possession of a particular cryptocurrency. This React SDK helps you to easily integrate and distribute content via Outpost to social token holders in your own applications.
Find out more about the motivation behind Outpost here.
Supports Android, iOS, Web and Expo. ✨
If you'd like more information about Outpost, or to host your own community, please drop into the Outpost Discord!
Using Yarn:
yarn add react-outpostUsing npm:
npm i -s react-outpostTo interface with Outpost, you must declare an <OutpostProvider/> at the root of your application, which expects a single function prop, onRequestSignMessage, which is used to safely validate the user's social token ownership. In this callback, you can use a variety of ways to sign a message, for example Ethers or WalletConnect.
importReact,{useCallback,useState}from'react';importOutpostfrom'react-outpost';importsignPersonalMessagefrom"...";exportdefaultfunctionApp(): JSX.Element{constonRequestSignMessage=useCallback(async(address: string,signInToken: string)=>{returnsignPersonalMessage([signInToken,address,]);},[]);return(<OutpostonRequestSignMessage={onRequestSignMessage}>{/* TODO: awesome decentralized app */}</Outpost>);}Once you're done, it's simple to interact with Outpost using the exposed hooks. For example, you can list all Outpost communities:
import{useAllCommunities}from'react-outpost';const{ loading, error, communities }=useAllCommunities();Or authenticate with Outpost to access secure content:
import{useOutpost}from'react-outpost';const{ requestAuthToken }=useOutpost();constauthToken=awaitrequestAuthToken(`0xdeadbeef`);And you can even upload an image using the useOutpost hook, which internally wraps the Outpost SDK:
import{useOutpost}from'react-outpost';const{ uploadImage }=useOutpost();awaituploadImage({
authToken,base64: `data:image/png;base64,aGVsbG8sd29ybGQ...`,});You can check out the complete example application using WalletConnect as a message signer in React Native here.
A React Context Provider used to define the signing mechanism for Outpost Auth Challenges.
| Name | Type | Default | Description |
|---|---|---|---|
baseUrl | string | https://outpost-api-v2.herokuapp.com | URL of the Outpost Server. |
requestAuthToken | (string address) => Promise<string> | Promise.reject() | Provides the ability to sign a message for a given Ethereum address |
A utility hook used to return the complete Outpost Client API to a React Component nested within the OutpostProvider.
typecreateClientResult={readonlygetAllCommunities: ()=>Promise<readonlyCommunity[]>;readonlygetPosts: (params: getPostsParams)=>Promise<getPostsResult>;readonlygetChallenge: (params: getChallengeParams)=>Promise<getChallengeResult>;readonlygetAuthToken: (params: getAuthTokenParams)=>Promise<getAuthTokenResult>;readonlygetPostPreview: (params: getPostPreviewParams)=>Promise<getPostPreviewResult>;readonlyuploadImage: (params: uploadImageParams)=>Promise<uploadImageResult>;readonlyuploadPost: (params: uploadPostParams)=>Promise<uploadPostResult>;readonlyuploadComment: (params: uploadCommentParams)=>Promise<uploadCommentResult>;readonlygetPost: (params: getPostParams)=>Promise<getPostResult>;};typeOutpostContextValue=createClientResult&{readonlybaseURL: string;readonlyrequestAuthToken: (address: string)=>Promise<string>;};readonlyuseOutpost(): OutpostContextValue;Returns a list of all currently registered Communitys on Outpost.
readonly useAllCommunities: ()=>useAllCommunitiesResult;exporttypeuseAllCommunitiesResult={readonlyloading: boolean;readonlycommunities: readonlyCommunity[];readonlyerror: null|Error;};Returns a list of all Posts for a Community.
readonly getPosts: (params: usePostsParams)=>usePostsResult;exporttypeusePostsParams={readonlyslug: string;};exporttypeusePostsResult={readonlyposts: readonlyPost[];readonlyloading: boolean;readonlyerror: null|Error;};A helper utility that converts an Arweave Transaction Id (txId) to a navigable URL, based upon the provided gateway.
readonly useTxIdToUri: ()=>useTxIdToUriResult;exporttypeuseTxIdToUriResult={readonlytxIdToUri: (gateway: string,txId: string)=>string;};