Dev Diaries #3 - Top-Level App component w/ renderFunc

CLI-App.tsx

import DappbotAPI from '@eximchain/dappbot-api-client';

export function function App<Additional extends AdditionalArgs>(props: AppProps<Additional>): ReactElement {
  // We destructure App's two props; the args from
  // the command, and the renderFunc.
  const { args, renderFunc } = props;
  
  // We use the authFile argument to initialize the
  // authData, as it will safely default.
  const [authData, setAuthData] = useState(JSON.parse(args.authFile as string));

  // We configure the API with the authData that is
  // now stored in state, guaranteeing the object will
  // refresh if the state updates.
  const API = new DappbotAPI({
    authData,
    setAuthData,
    dappbotUrl: args.apiUrl
  })

  return (
    // react-request-hook depends on axios, they are loaded
    // together down in the render.  When our API client's
    // resource methods are called,
    //
    // e.g. API.public.viewDapp.resource('my-dapp')
    //
    // the underlying request provider is this axios here.
    <RequestProvider value={axios}>
      {
        // Finally, we call the provided renderFunc,
        // now with a prepared API object.
        renderFunc({
          API, authData, setAuthData, args
        })
      }
    </RequestProvider>
  )
}
export default App;