Skip to content

Commit

Permalink
gql: collectibles migration to data-components (#4225)
Browse files Browse the repository at this point in the history 
* boilerplate for collectibles page migration to gql

* add basic grid and card components

* fix images not loading

* fix display with multi-image preview box

* dynamic columns and gaps from tamagui media query

* fix column and list alignments

* fix lucide icon imports for data components

* adjust collectible image box and subtitle positioning

* revert extension router for merge
  • Loading branch information
@callensm
callensm authored Jun 29, 2023
1 parent 09a6800 commit b6713df
Show file tree
Hide file tree
Showing 29 changed files with 684 additions and 74 deletions.
1 change: 1 addition & 0 deletions backend/workers/feature-gates/src/FEATURES.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const FEATURE_GATES = ({
BARTER_ENABLED: false,
DROPZONE_ENABLED: Boolean(userId && dropzoneUsers.includes(userId)),
GQL_BALANCES: false,
GQL_COLLECTIBLES: false,
GQL_NOTIFICATIONS: true,
GQL_TRANSACTION_HISTORY: false,
MESSAGING_ENABLED: true,
Expand Down
2 changes: 1 addition & 1 deletion packages/app-extension/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"lint:fix": "yarn run lint --fix"
},
"dependencies": {
"@apollo/client": "3.8.0-beta.2",
"@apollo/client": "3.8.0-beta.5",
"@bonfida/spl-name-service": "^0.1.51",
"@cardinal/token-manager": "^1.7.9",
"@coral-xyz/background": "*",
Expand Down
6 changes: 3 additions & 3 deletions packages/app-extension/src/components/common/Layout/Router.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Suspense, useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import {
Navigate,
Route,
Expand All @@ -10,17 +10,17 @@ import { useUsersMetadata } from "@coral-xyz/chat-xplat";
import type { SearchParamsFor, SubscriptionType } from "@coral-xyz/common";
import {
BACKPACK_TEAM,
Blockchain,
NAV_COMPONENT_MESSAGE_PROFILE,
} from "@coral-xyz/common";
// import { Collectibles } from "@coral-xyz/data-components";
import {
ChatScreen,
Inbox,
ParentCommunicationManager,
ProfileScreen,
RequestsScreen,
} from "@coral-xyz/message-sdk";
import { Loading, useBreakpoints } from "@coral-xyz/react-common";
import { useBreakpoints } from "@coral-xyz/react-common";
import {
SwapProvider,
useActiveWallet,
Expand Down
2 changes: 1 addition & 1 deletion packages/common/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"test": "jest"
},
"dependencies": {
"@apollo/client": "3.8.0-beta.2",
"@apollo/client": "3.8.0-beta.5",
"@cardinal/creator-standard": "^2.1.10",
"@cardinal/token-manager": "^1.7.9",
"@ethersproject/abstract-provider": "^5.7.0",
Expand Down
1 change: 1 addition & 0 deletions packages/common/src/feature-gates.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export const DEFAULT_FEATURE_GATES = {
BARTER_ENABLED: false,
DROPZONE_ENABLED: false,
GQL_BALANCES: false,
GQL_COLLECTIBLES: false,
GQL_NOTIFICATIONS: true,
GQL_TRANSACTION_HISTORY: false,
MESSAGING_ENABLED: true,
Expand Down
4 changes: 1 addition & 3 deletions packages/data-components/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,17 @@
"gql:generate": "graphql-codegen --config codegen.yml"
},
"dependencies": {
"@apollo/client": "3.8.0-beta.2",
"@apollo/client": "3.8.0-beta.5",
"@coral-xyz/chat-xplat": "*",
"@coral-xyz/common": "*",
"@coral-xyz/recoil": "*",
"@coral-xyz/tamagui": "*",
"@coral-xyz/themes": "*",
"@tamagui/lucide-icons": "^1.28.1",
"expo-linking": "^4.0.1",
"expo-modules-core": "^1.2.7",
"helius-sdk": "^1.0.6",
"react": "^18.2.0",
"react-error-boundary": "^4.0.4",
"react-native-svg": "^13.9.0",
"recoil": "^0.7.5",
"use-async-effect": "^2.2.7"
},
Expand Down
8 changes: 8 additions & 0 deletions packages/data-components/src/apollo/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ const documents = {
types.GetBalanceSummaryDocument,
"\n query GetTokenBalances($address: String!, $providerId: ProviderID!) {\n user {\n id\n wallet(address: $address, providerId: $providerId) {\n id\n balances {\n id\n tokens {\n edges {\n node {\n id\n address\n displayAmount\n marketData {\n id\n percentChange\n value \n }\n token\n tokenListEntry {\n id\n logo\n name\n symbol\n } \n }\n }\n }\n }\n }\n }\n }\n":
types.GetTokenBalancesDocument,
"\n query GetCollectibles($address: String!, $providerId: ProviderID!) {\n user {\n id\n wallet(address: $address, providerId: $providerId) {\n id\n nfts {\n edges {\n node {\n id\n address\n attributes {\n trait\n value\n }\n collection {\n id\n address\n name\n }\n compressed\n image\n name\n }\n }\n }\n }\n }\n }\n":
types.GetCollectiblesDocument,
"\n mutation SendFriendRequest($otherUserId: String!, $accept: Boolean!) {\n sendFriendRequest(otherUserId: $otherUserId, accept: $accept)\n }\n":
types.SendFriendRequestDocument,
"\n query GetNotifications($filters: NotificationFiltersInput) {\n user {\n id\n notifications(filters: $filters) {\n edges {\n node {\n id\n app {\n id\n address\n image\n name\n }\n body\n dbId\n source\n timestamp\n title\n viewed\n }\n }\n }\n }\n }\n":
Expand Down Expand Up @@ -55,6 +57,12 @@ export function gql(
export function gql(
source: "\n query GetTokenBalances($address: String!, $providerId: ProviderID!) {\n user {\n id\n wallet(address: $address, providerId: $providerId) {\n id\n balances {\n id\n tokens {\n edges {\n node {\n id\n address\n displayAmount\n marketData {\n id\n percentChange\n value \n }\n token\n tokenListEntry {\n id\n logo\n name\n symbol\n } \n }\n }\n }\n }\n }\n }\n }\n"
): (typeof documents)["\n query GetTokenBalances($address: String!, $providerId: ProviderID!) {\n user {\n id\n wallet(address: $address, providerId: $providerId) {\n id\n balances {\n id\n tokens {\n edges {\n node {\n id\n address\n displayAmount\n marketData {\n id\n percentChange\n value \n }\n token\n tokenListEntry {\n id\n logo\n name\n symbol\n } \n }\n }\n }\n }\n }\n }\n }\n"];
/**
* The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function gql(
source: "\n query GetCollectibles($address: String!, $providerId: ProviderID!) {\n user {\n id\n wallet(address: $address, providerId: $providerId) {\n id\n nfts {\n edges {\n node {\n id\n address\n attributes {\n trait\n value\n }\n collection {\n id\n address\n name\n }\n compressed\n image\n name\n }\n }\n }\n }\n }\n }\n"
): (typeof documents)["\n query GetCollectibles($address: String!, $providerId: ProviderID!) {\n user {\n id\n wallet(address: $address, providerId: $providerId) {\n id\n nfts {\n edges {\n node {\n id\n address\n attributes {\n trait\n value\n }\n collection {\n id\n address\n name\n }\n compressed\n image\n name\n }\n }\n }\n }\n }\n }\n"];
/**
* The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
Expand Down
243 changes: 243 additions & 0 deletions packages/data-components/src/apollo/graphql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -699,6 +699,48 @@ export type GetTokenBalancesQuery = {
} | null;
};

export type GetCollectiblesQueryVariables = Exact<{
address: Scalars["String"];
providerId: ProviderId;
}>;

export type GetCollectiblesQuery = {
__typename?: "Query";
user?: {
__typename?: "User";
id: string;
wallet?: {
__typename?: "Wallet";
id: string;
nfts?: {
__typename?: "NftConnection";
edges: Array<{
__typename?: "NftEdge";
node: {
__typename?: "Nft";
id: string;
address: string;
compressed: boolean;
image?: string | null;
name?: string | null;
attributes?: Array<{
__typename?: "NftAttribute";
trait: string;
value: string;
}> | null;
collection?: {
__typename?: "Collection";
id: string;
address: string;
name?: string | null;
} | null;
};
}>;
} | null;
} | null;
} | null;
};

export type SendFriendRequestMutationVariables = Exact<{
otherUserId: Scalars["String"];
accept: Scalars["Boolean"];
Expand Down Expand Up @@ -1162,6 +1204,207 @@ export const GetTokenBalancesDocument = {
GetTokenBalancesQuery,
GetTokenBalancesQueryVariables
>;
export const GetCollectiblesDocument = {
kind: "Document",
definitions: [
{
kind: "OperationDefinition",
operation: "query",
name: { kind: "Name", value: "GetCollectibles" },
variableDefinitions: [
{
kind: "VariableDefinition",
variable: {
kind: "Variable",
name: { kind: "Name", value: "address" },
},
type: {
kind: "NonNullType",
type: {
kind: "NamedType",
name: { kind: "Name", value: "String" },
},
},
},
{
kind: "VariableDefinition",
variable: {
kind: "Variable",
name: { kind: "Name", value: "providerId" },
},
type: {
kind: "NonNullType",
type: {
kind: "NamedType",
name: { kind: "Name", value: "ProviderID" },
},
},
},
],
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: { kind: "Name", value: "user" },
selectionSet: {
kind: "SelectionSet",
selections: [
{ kind: "Field", name: { kind: "Name", value: "id" } },
{
kind: "Field",
name: { kind: "Name", value: "wallet" },
arguments: [
{
kind: "Argument",
name: { kind: "Name", value: "address" },
value: {
kind: "Variable",
name: { kind: "Name", value: "address" },
},
},
{
kind: "Argument",
name: { kind: "Name", value: "providerId" },
value: {
kind: "Variable",
name: { kind: "Name", value: "providerId" },
},
},
],
selectionSet: {
kind: "SelectionSet",
selections: [
{ kind: "Field", name: { kind: "Name", value: "id" } },
{
kind: "Field",
name: { kind: "Name", value: "nfts" },
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: { kind: "Name", value: "edges" },
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: { kind: "Name", value: "node" },
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: { kind: "Name", value: "id" },
},
{
kind: "Field",
name: {
kind: "Name",
value: "address",
},
},
{
kind: "Field",
name: {
kind: "Name",
value: "attributes",
},
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: {
kind: "Name",
value: "trait",
},
},
{
kind: "Field",
name: {
kind: "Name",
value: "value",
},
},
],
},
},
{
kind: "Field",
name: {
kind: "Name",
value: "collection",
},
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: {
kind: "Name",
value: "id",
},
},
{
kind: "Field",
name: {
kind: "Name",
value: "address",
},
},
{
kind: "Field",
name: {
kind: "Name",
value: "name",
},
},
],
},
},
{
kind: "Field",
name: {
kind: "Name",
value: "compressed",
},
},
{
kind: "Field",
name: {
kind: "Name",
value: "image",
},
},
{
kind: "Field",
name: { kind: "Name", value: "name" },
},
],
},
},
],
},
},
],
},
},
],
},
},
],
},
},
],
},
},
],
} as unknown as DocumentNode<
GetCollectiblesQuery,
GetCollectiblesQueryVariables
>;
export const SendFriendRequestDocument = {
kind: "Document",
definitions: [
Expand Down
Loading

1 comment on commit b6713df

@vercel
Copy link

@vercel vercel bot commented on b6713df Jun 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

backpack – ./

backpack-200ms.vercel.app
backpack-git-master-200ms.vercel.app
backpack.app
www.backpack.app
devnet.backpack.app

Please sign in to comment.