Query issue: Amount does not show on pending page about solana-pay HOT 2 CLOSED

This is a little bit fiddly with the architecture of the app, but you can do it with relatively little change by updating PaymentProvider

Taking a step back, the reason this doesn't work currently is because recipient, label and message all come from ConfigProvider, which gets its initial values by parsing the URL. This is because in this simple example app we don't have UI for setting those values. Whereas amount is set in the UI, and it comes from PaymentProvider, a different context provider. Currently this does not read the URL for values, it's just client side state that's passed between pages by sharing the context provider.

So if we want to make this work we need to read the amount from the URL in PaymentProvider. Here's one way to do it:

In PaymentProvider.tsx Replace the line const [amount, setAmount] = useState<BigNumber>();

With this:

    const router = useRouter(); // import { useRouter } from 'next/router';
    const { amount: queryAmount } = router.query;

    const initialAmount = useMemo(() => {
        if (!queryAmount) return undefined;
        if (Array.isArray(queryAmount)) return new BigNumber(queryAmount[0]);
        return new BigNumber(queryAmount)
    }, [queryAmount])

    const [amount, setAmount] = useState<BigNumber | undefined>(initialAmount);

Now the amount set on page load is read from the query param if there's one present, otherwise it defaults to undefined as it currently does. Your example URL should then work :)

Example commit making this change: master...mcintyre94:solana-pay:cm-url-amount

from solana-pay.

Thank you very much. Did you commited this line to the main brunch? Cool. I am looking forward to use this tool. Perfect for so many use cases.

from solana-pay.