Fix ipfs:// prefix issue

low-code-nft-marketplace/common-ui/src/models/PinataClient.ts

@@ -1,7 +1,7 @@
 import { default as axios } from 'axios';
 
 export class PinataClient {
-    constructor(private pinataJwt: string) {}
+    constructor(private pinataJwt: string) { }
 
     async isJwtValid(): Promise<boolean> {
         const response = await axios({
@@ -33,7 +33,10 @@ export class PinataClient {
         }
 
         const responseData = response.data as PinFileToIPFSResponse;
-        return `ipfs://${responseData.IpfsHash}`;
+        // usually platforms should handle the gateway OR prefix usage but wallet doesnt at the moment.
+        // since this is an example, we can use it like below.
+        return `https://ipfs.io/ipfs/${responseData.IpfsHash}`
+        // return `ipfs://${responseData.IpfsHash}`;
     }
 
     async uploadJson(json: object, fileName: string): Promise<string> {
@@ -60,7 +63,10 @@ export class PinataClient {
         }
 
         const responseData = response.data as PinFileToIPFSResponse;
-        return `ipfs://${responseData.IpfsHash}`;
+        // usually platforms should handle the gateway OR prefix usage but wallet doesnt at the moment.
+        // since this is an example, we can use it like below.
+        return `https://ipfs.io/ipfs/${responseData.IpfsHash}`
+        // return `ipfs://${responseData.IpfsHash}`;
     }
 }
 

low-code-nft-marketplace/market-ui/src/Constants.ts

@@ -7,7 +7,7 @@ import { ModuleReference } from '@concordium/web-sdk';
  * Contract Address for Marketplace. You should specify your contract's index when you initialized it.
  */
 export const MARKET_CONTRACT_ADDRESS = {
-    index: BigInt(5987),
+    index: BigInt(10491),
     subindex: BigInt(0),
 };
 
@@ -36,7 +36,7 @@ export const CIS2_MULTI_CONTRACT_INFO: Cis2ContractInfo = {
     moduleRef: new ModuleReference(MULTI_CONTRACT_MODULE_REF),
     tokenIdByteSize: 1,
 };
-export const IPFS_GATEWAY_URL = 'https://gateway.pinata.cloud/ipfs/';
+export const IPFS_GATEWAY_URL = 'https://ipfs.io/ipfs/';
 
 // Default value of the new marketplace contract init flag is false.
 // It needs to be set as true in order to allow to create a new marketplace contract instance

low-code-nft-marketplace/market-ui/src/components/cis2/LazyCis2Metadata.tsx

@@ -32,7 +32,7 @@ function LazyCis2Metadata(props: {
                 });
             });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.metadataUrl.url]);
+    }, [toIpfsGatewayUrl(props.metadataUrl.url)]);
 
     if (state.error) {
         return props.errorLoadingTemplate(state.error.toString());

low-code-nft-marketplace/tsconfig.json

@@ -3,9 +3,14 @@
         "jsx": "react-jsx",
         "esModuleInterop": true,
         "target": "ES2021",
-        "lib": ["dom", "dom.iterable", "esnext"],
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+        ],
         "moduleResolution": "Node",
-        "outDir": "dist"
+        "outDir": "dist",
+        "strict": true
     },
     "references": [
         {
@@ -18,6 +23,12 @@
             "path": "./mint-ui/tsconfig.json"
         }
     ],
-    "include": ["./common-ui/src/**/*", "./market-ui/src/**/*", "./mint-ui/src/**/*"],
-    "exclude": ["./node_modules"]
-}
+    "include": [
+        "./common-ui/src/**/*",
+        "./market-ui/src/**/*",
+        "./mint-ui/src/**/*"
+    ],
+    "exclude": [
+        "./node_modules"
+    ]
+}

sponsoredTransactions/README.md

@@ -15,6 +15,7 @@ git clone --recurse-submodules [email protected]:Concordium/concordium-dapp-example
 ```
 
 or
+
 ```shell
 git clone --recurse-submodules https://github.com/Concordium/concordium-dapp-examples.git
 ```
@@ -26,12 +27,13 @@ Alternatively, follow the steps to deploy the docker container below. This docke
 ## Run as docker
 
 Add your `ACCOUNT_KEY_FILE` to the repository's root folder and run the dockerfile from the repository's root folder with the command:
+
 ```shell
 docker build -t sponsored_transactions -f sponsoredTransactions/Dockerfile .
 ```
 
-
 The image can then be run with:
+
 ```shell
 docker run -p 8080:8080 --mount type=bind,source="$(pwd)"/<ACCOUNT_KEY_FILE>,target=/KEY_FILE,readonly sponsored_transactions
 ```
@@ -43,7 +45,7 @@ docker run -p 8080:8080 --mount type=bind,source="$(pwd)"/3PXwJYYPf6fyVb4GJquxSZ
 ```
 
 Note: To get your `ACCOUNT_KEY_FILE` (the `3PXwJYYPf6fyVb4GJquxSZU8puxrHfzc4XogdMVot8MUQK53tW.export` file), export it from the Concordium Browser Wallet for Web.
-This account should be only used for this service. No transactions should be sent from the account by any other means to ensure the account nonce is tracked 
+This account should be only used for this service. No transactions should be sent from the account by any other means to ensure the account nonce is tracked
 correctly in the service (e.g. don't use the `3PXwJYYPf6fyVb4GJquxSZU8puxrHfzc4XogdMVot8MUQK53tW` account in the browser wallet to send transactions via the front end).
 
 <img src="./backend/pic/pic1.png"  width="200" />
@@ -54,10 +56,6 @@ See the [docker file](./Dockerfile) to explore the environment variables that ca
 
 Note: Use the same smart contract index for the frontend and backend. In other words, use the smart contract index from the `./frontend/package.json` file in the dockerfile.
 
-
-
 ## Explore the tutorial
 
 You can find an associated tutorial on the [developer documentation](./https://developer.concordium.software/en/mainnet/smart-contracts/tutorials/index.html).
-
-

sponsoredTransactions/backend/README.md

@@ -5,6 +5,7 @@ This page describes the sponsored transactions backend for this dapp example.
 # Supported configuration options
 
 The following parameters are supported
+
 - `node` the URL of the node's GRPC V2 interface, e.g., `http://node.testnet.concordium.com:20000`
 - `port` the port on which the server will listen for incoming requests
 - `log-level` maximum log level (defaults to `debug` if not given)
@@ -15,6 +16,7 @@ The following parameters are supported
 All of the above is available by using `--help` to get usage information.
 
 An example to run the backend with basic settings and testnet node would be:
+
 ```shell
 cargo run -- --node http://node.testnet.concordium.com:20000 --account <YourAccountPathToYourKeys> --smart-contract-index 9586
 ```
@@ -38,14 +40,15 @@ Note: Use the same smart contract index for the frontend and backend. In other w
 # Using the tool
 
 The backend is a simple server that exposes two endpoints
- - `POST /submitUpdateOperator`
- - `POST /submitTransfer`
+
+- `POST /submitUpdateOperator`
+- `POST /submitTransfer`
 
 The overall flow is that the user signs a sponsored updateOperator/transfer message in the browser wallet (or mobile wallet via walletConnect) and sends the signature together with some input parameters to this backend server via one of the above endpoints. The backend creates a sponsored transaction and submits it to the `permit` function in the smart contract {index: SMART_CONTRACT_INDEX, subindex: 0}. You can look up the SMART_CONTRACT_INDEX in the `../frontend/package.json` file. The backend returns the transaction hash to the frontend. This backend server has to have access to a blockchain node and an account (with its associated private key) that is funded with some CCD to submit the sponsored transaction to the chain. The backend wallet will pay for the transaction fees.
 
 The `/submitUpdateOperator` endpoint expects a JSON body with the fields shown in the example below:
 
-``` json
+```json
 {
    "signer":"2xoKcfFdJA1jCa7DEJborFdhxN78x3SuPhwu4haxdzUXRk5riH",
    "nonce":8,
@@ -58,16 +61,15 @@ The `/submitUpdateOperator` endpoint expects a JSON body with the fields shown i
 
 The `/submitTransfer` endpoint expects a JSON body with the fields shown in the example below:
 
-
-``` json
+```json
 {
-   "signer":"2xoKcfFdJA1jCa7DEJborFdhxN78x3SuPhwu4haxdzUXRk5riH",
-   "nonce":8,
-   "signature":"b7cc2c4619c19876254f0f2f616b72396ffddcd70f9ed390c30c0ba76767cde31200152c1215c0c377de03e78efe467e017f59b542fec131a8cc53f94e28c70d",
-   "token_id":"0af4",
-   "from": "3PXwJYYPf6fyVb4GJquxSZU8puxrHfzc4XogdMVot8MUQK53tW",
-   "to": "2xoKcfFdJA1jCa7DEJborFdhxN78x3SuPhwu4haxdzUXRk5riH",
-   "timestamp":"2024-03-08T08:23:21.449Z"
+    "signer": "2xoKcfFdJA1jCa7DEJborFdhxN78x3SuPhwu4haxdzUXRk5riH",
+    "nonce": 8,
+    "signature": "b7cc2c4619c19876254f0f2f616b72396ffddcd70f9ed390c30c0ba76767cde31200152c1215c0c377de03e78efe467e017f59b542fec131a8cc53f94e28c70d",
+    "token_id": "0af4",
+    "from": "3PXwJYYPf6fyVb4GJquxSZU8puxrHfzc4XogdMVot8MUQK53tW",
+    "to": "2xoKcfFdJA1jCa7DEJborFdhxN78x3SuPhwu4haxdzUXRk5riH",
+    "timestamp": "2024-03-08T08:23:21.449Z"
 }
 ```
 
@@ -80,6 +82,7 @@ The smart contract code {index: SMART_CONTRACT_INDEX, subindex: 0} can be found
 
 This repository's CI automatically checks formatting and common problems in rust.
 Changes to any of the packages must be such that
+
 - `cargo clippy --all` produces no warnings
 - `rust fmt` makes no changes.
 
@@ -88,12 +91,14 @@ Everything in this repository should build with stable rust at the moment (at le
 ```shell
  cargo +nightly-2022-06-09 fmt
 ```
+
 (the exact version used by the CI can be found in [.github/workflows/ci.yaml](https://github.com/Concordium/concordium-misc-tools/blob/main/.github/workflows/ci.yaml) file).
 You will need to have a recent enough nightly version installed, which can be done via
 
 ```shell
 rustup toolchain install nightly-2022-06-09
 ```
+
 or similar, using the [rustup](https://rustup.rs/) tool. See the documentation of the tool for more details.
 
 In order to contribute you should make a pull request and ask a person familiar with the codebase for a review.
@@ -107,4 +112,3 @@ cargo build --release
 ```
 
 This produces a single binary `target/release/sponsored-transaction-backend`.
-

sponsoredTransactions/frontend/CHANGELOG.md

@@ -2,24 +2,24 @@
 
 ## 2.0.3
 
--   Change the dApp to use new `signCIS3Message` function from the BrowserWallet.
+- Change the dApp to use new `signCIS3Message` function from the BrowserWallet.
 
 ## 2.0.2
 
--   Change the dApp to use the testnet smart contract index.
+- Change the dApp to use the testnet smart contract index.
 
 ## 2.0.1
 
--   Migrate dApp from using deprecated JSON-RPC client to new gRPC client.
+- Migrate dApp from using deprecated JSON-RPC client to new gRPC client.
 
 ## 2.0.0
 
--   Remove tab to register public key
+- Remove tab to register public key
 
 ## 1.1.0
 
--   Update link to sponsored transaction tutorial
+- Update link to sponsored transaction tutorial
 
 ## 1.0.0
 
--   Initial sponsored transaction front end
+- Initial sponsored transaction front end

sponsoredTransactions/frontend/README.md

@@ -2,8 +2,8 @@
 
 The example project included in this repository serves as a working example of how to integrate sponsored transactions with smart contracts on the Concordium blockchain. This web app supports the following flows with the browser wallet:
 
--   Compute the message of a sponsored updateOperator transaction => Sign it with the wallet => Submit the signature and some input parameters to the `/submitUpdateOperator` backend endpoint.
--   Mint an NFT to your wallet => Compute the message of a sponsored transfer transaction => Sign it with the wallet => Submit the signature and some input parameters to the `/submitTransfer` backend endpoint.
+- Compute the message of a sponsored updateOperator transaction => Sign it with the wallet => Submit the signature and some input parameters to the `/submitUpdateOperator` backend endpoint.
+- Mint an NFT to your wallet => Compute the message of a sponsored transfer transaction => Sign it with the wallet => Submit the signature and some input parameters to the `/submitTransfer` backend endpoint.
 
 The backend creates a sponsored transaction and submits it to the `permit` function in the smart contract {index: SMART_CONTRACT_INDEX, subindex: 0}. You can look up the SMART_CONTRACT_INDEX in the `package.json` file. The backend returns the transaction hash to the frontend.
 
@@ -14,25 +14,25 @@ The smart contract code at {index: SMART_CONTRACT_INDEX, subindex: 0} can be fou
 
 ## Prerequisites
 
--   Browser wallet extension version 1.5.2 or above must be installed in Google Chrome and the Concordium testnet needs to be selected or a mobile wallet needs to be set up that supports wallet connect in order to view smart contract details or submit transactions.
+- Browser wallet extension version 1.5.2 or above must be installed in Google Chrome and the Concordium testnet needs to be selected or a mobile wallet needs to be set up that supports wallet connect in order to view smart contract details or submit transactions.
 
 ## Running the sponsored txs example (without backend -> submitting the sponsored transaction to chain will fail)
 
--   Run `yarn install` in this folder.
--   Run `yarn build` in a terminal in this folder.
--   Run `yarn start`.
--   Open URL logged in console (typically http://127.0.0.1:8080).
+- Run `yarn install` in this folder.
+- Run `yarn build` in a terminal in this folder.
+- Run `yarn start`.
+- Open URL logged in console (typically http://127.0.0.1:8080).
 
 To have hot-reload (useful for development), do the following instead:
 
--   Run `yarn watch` in a terminal.
--   Run `yarn start` in another terminal.
--   Open URL logged in console (typically http://127.0.0.1:8080).
+- Run `yarn watch` in a terminal.
+- Run `yarn start` in another terminal.
+- Open URL logged in console (typically http://127.0.0.1:8080).
 
 ## Running the sponsored txs example (with backend -> submitting the sponsored transaction to chain will work)
 
--   Run `yarn install` in this folder.
--   Run `yarn build` in a terminal in this folder.
+- Run `yarn install` in this folder.
+- Run `yarn build` in a terminal in this folder.
 
 This creates a `dist` folder which can be served via the backend. Start the backend server by following the [README.md](../backend/README.md)