usePublicParty and usePublicToken with DamlLedger

Hi everyone,
I am trying to create a PublicLedger component for one project of mine.

I am using the following code:

export const PublicLedger = ({ children }: { children: React.ReactNode }) => {
    //FETCH public party and token
    const publicParty = usePublicParty()
    let pubParty: string
    let pubToken: string
    console.log('publicParty', publicParty)
    const publicToken = usePublicToken()?.token
    console.log('publicToken', publicToken)

    if (publicParty !== undefined) {
        pubParty = publicParty
    }

    if (publicToken !== undefined) {
        pubToken = publicToken
    }

    const [party] = useState(() =>
        isLocalDev ? computeLocalCreds('Public').party : pubParty
    )
    const [token] = useState(() =>
        isLocalDev ? computeLocalCreds('Public').token : pubToken
    )

    return (
        <DamlLedger party={party} token={token}>
            {children}
        </DamlLedger>
    )
}

It works fine locally, but when I try to use it on a ledger deployed on DAMLHub the useLedger hook returns me a ledger with the token undefined and I can´t query using the public party.

     <PublicLedger>
                <SomeComponent>
      </PublicLedger>

function SomeComponent() {
    const ledger = useLedger()
    console.log('ledger', ledger) //here we get the token property as undefined

    const { contracts, loading } = useQuery(SomeTemplate)
    console.log('Contracts', contracts) //Retrieves empty array []

    return <div>...</div>
}

Is there any workaround or alternative that i may use?

Thanks in advance

Hi there Joao,

After talking with @cocreature, my initial suggestion would be to ensure that each of your Daml Ledger contexts have different identifiers. For reference please see the examples of two such contexts in create-daml-app:

github.com

digital-asset/daml/blob/a230de2f82186ea549d15ae961862320f3cd6a43/templates/create-daml-app/ui/src/components/App.tsx#L41

      
        

            
const App: React.FC = () => {
            
  const [credentials, setCredentials] = React.useState<
            
    Credentials | undefined
            
  >();
            
  if (credentials) {
            
    const PublicPartyLedger: React.FC = ({ children }) => {
            
      const publicToken = usePublicToken();
            
      const publicParty = usePublicParty();
            
      if (publicToken && publicParty) {
            
        return (
            
          <publicContext.DamlLedger
            
            token={publicToken.token}
            
            party={publicParty}>
            
            {children}
            
          </publicContext.DamlLedger>
            
        );
            
      } else {
            
        return <h1>Loading ...</h1>;
            
      }
            
    };
            
    const Wrap: React.FC = ({ children }) =>
        
      
    

and

github.com

digital-asset/daml/blob/a230de2f82186ea549d15ae961862320f3cd6a43/templates/create-daml-app/ui/src/components/App.tsx#L61

      
        

            
const Wrap: React.FC = ({ children }) =>
            
  isRunningOnHub() ? (
            
    <DamlHub token={credentials.token}>
            
      <PublicPartyLedger>{children}</PublicPartyLedger>
            
    </DamlHub>
            
  ) : (
            
    <div>{children}</div>
            
  );
            
return (
            
  <Wrap>
            
    <userContext.DamlLedger
            
      token={credentials.token}
            
      party={credentials.party}
            
      user={credentials.user}>
            
      <MainScreen
            
        getPublicParty={credentials.getPublicParty}
            
        onLogout={() => {
            
          if (authConfig.provider === "daml-hub") {
            
            damlHubLogout();
            
          }
            
          setCredentials(undefined);
        
      
    

Let me know if that helps!

Best,

Sarah

licPartyLedger: React.FC = ({ children }) => {
                  const publicToken = usePublicToken();
                  const publicParty = usePublicParty();
                  if (publicToken && publicParty) {
                    return (
                      <publicContext.DamlLedger
                        token={publicToken.token}

Thanks, Sarah. It seemed that helped with the problem I am facing.